UI-3040: Add Temporary Greeting dropdown

i18n/en-US.json

@@ -1294,7 +1294,11 @@
 				"noGreeting": "- None -",
 				"audioUploadButton": "Browse...",
 				"fileTooBigAlert": "You can not upload a file with a size exceeding 5MB",
-				"emptyUploadAlert": "Please select a file to upload"
+				"emptyUploadAlert": "Please select a file to upload",
+
+				"temporary": {
+					"label": "Temporary:"
+				}
 			}
 		}
 	},

submodules/vmboxes/vmboxes.css

@@ -240,8 +240,9 @@
 	padding: 0 20px;
 }
 
-.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container {
-	padding: 0 40px;
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container,
+.edit-vmbox .tabs-section[data-section="greeting"] .temporary-greeting-container {
+	padding: 0 90px 25px
 }
 .edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .media-dropdown {
 	margin-bottom: 0px;
@@ -278,4 +279,4 @@
 	margin: 0;
 	padding: 6px;
 	width: 140px;
-}
+}

submodules/vmboxes/vmboxes.js

@@ -115,6 +115,7 @@ define(function(require) {
 				mode = data.id ? 'edit' : 'add',
 				popupTitle = mode === 'edit' ? monster.template(self, '!' + self.i18n.active().vmboxes.editTitle, { name: data.name }) : self.i18n.active().vmboxes.addTitle,
 				templateVMBox = $(monster.template(self, 'vmboxes-edit', data)),
+				popup,
 				callbacks = {
 					afterSave: function(vmbox) {
 						popup.dialog('close').remove();
@@ -137,16 +138,34 @@ define(function(require) {
 						.append(monster.template(self, 'vmboxes-emailRow', { name: recipient }));
 			});
 
-			self.vmboxesEditBindEvents(templateVMBox, data, callbacks);
-
-			var popup = monster.ui.dialog(templateVMBox, {
-				position: ['center', 20],
-				title: popupTitle,
-				width: '700'
+			monster.pub('common.mediaSelect.render', {
+				container: templateVMBox.find('.greeting-container'),
+				name: 'media.unavailable',
+				options: data.extra.mediaList,
+				selectedOption: (data.media || {}).unavailable,
+				label: self.i18n.active().vmboxes.popupSettings.greeting.dropdownLabel,
+				callback: function(greeting) {
+					monster.pub('common.mediaSelect.render', {
+						container: templateVMBox.find('.temporary-greeting-container'),
+						name: 'media.temporary_unavailable',
+						options: data.extra.mediaList,
+						selectedOption: (data.media || {}).temporary_unavailable,
+						label: self.i18n.active().vmboxes.popupSettings.greeting.temporary.label,
+						callback: function(temporaryGreeting) {
+							self.vmboxesEditBindEvents(templateVMBox, data, greeting, temporaryGreeting, callbacks);
+
+							popup = monster.ui.dialog(templateVMBox, {
+								position: ['center', 20],
+								title: popupTitle,
+								width: '700'
+							});
+						}
+					});
+				}
 			});
 		},
 
-		vmboxesEditBindEvents: function(templateVMBox, data, callbacks) {
+		vmboxesEditBindEvents: function(templateVMBox, data, greetingControl, temporaryGreetingControl, callbacks) {
 			var self = this,
 				vmboxForm = templateVMBox.find('#form_vmbox');
 
@@ -170,7 +189,7 @@ define(function(require) {
 
 			templateVMBox.find('.actions .save').on('click', function() {
 				if (monster.ui.valid(vmboxForm)) {
-					var dataToSave = self.vmboxesMergeData(data, templateVMBox);
+					var dataToSave = self.vmboxesMergeData(data, templateVMBox, greetingControl, temporaryGreetingControl);
 
 					self.vmboxesSaveVmbox(dataToSave, function(data) {
 						callbacks.afterSave && callbacks.afterSave(data);
@@ -240,99 +259,9 @@ define(function(require) {
 			templateVMBox.find('.saved-entities').on('click', '.delete-entity', function() {
 				$(this).parents('.entity-wrapper').remove();
 			});
-
-			//Greeting Media stuff
-			var mediaToUpload,
-				greetingContainer = templateVMBox.find('.greeting-container'),
-				closeUploadDiv = function(newMedia) {
-					mediaToUpload = undefined;
-					greetingContainer.find('.upload-div input').val('');
-					greetingContainer.find('.upload-div').slideUp(function() {
-						greetingContainer.find('.upload-toggle').removeClass('active');
-					});
-					if (newMedia) {
-						var mediaSelect = greetingContainer.find('.media-dropdown');
-						mediaSelect.append('<option value="' + newMedia.id + '">' + newMedia.name + '</option>');
-						mediaSelect.val(newMedia.id);
-					}
-				};
-
-			greetingContainer.find('.upload-input').fileUpload({
-				inputOnly: true,
-				wrapperClass: 'file-upload input-append',
-				btnText: self.i18n.active().vmboxes.popupSettings.greeting.audioUploadButton,
-				btnClass: 'monster-button',
-				maxSize: 5,
-				success: function(results) {
-					mediaToUpload = results[0];
-				},
-				error: function(errors) {
-					if (errors.hasOwnProperty('size') && errors.size.length > 0) {
-						monster.ui.alert(self.i18n.active().vmboxes.popupSettings.greeting.fileTooBigAlert);
-					}
-					greetingContainer.find('.upload-div input').val('');
-					mediaToUpload = undefined;
-				}
-			});
-
-			greetingContainer.find('.upload-toggle').on('click', function() {
-				if ($(this).hasClass('active')) {
-					greetingContainer.find('.upload-div').stop(true, true).slideUp();
-				} else {
-					greetingContainer.find('.upload-div').stop(true, true).slideDown();
-				}
-			});
-
-			greetingContainer.find('.upload-cancel').on('click', function() {
-				closeUploadDiv();
-			});
-
-			greetingContainer.find('.upload-submit').on('click', function() {
-				if (mediaToUpload) {
-					self.callApi({
-						resource: 'media.create',
-						data: {
-							accountId: self.accountId,
-							data: {
-								streamable: true,
-								name: mediaToUpload.name,
-								media_source: 'upload',
-								description: mediaToUpload.name
-							}
-						},
-						success: function(data, status) {
-							var media = data.data;
-							self.callApi({
-								resource: 'media.upload',
-								data: {
-									accountId: self.accountId,
-									mediaId: media.id,
-									data: mediaToUpload.file
-								},
-								success: function(data, status) {
-									closeUploadDiv(media);
-								},
-								error: function(data, status) {
-									self.callApi({
-										resource: 'media.delete',
-										data: {
-											accountId: self.accountId,
-											mediaId: media.id,
-											data: {}
-										},
-										success: function(data, status) {}
-									});
-								}
-							});
-						}
-					});
-				} else {
-					monster.ui.alert(self.i18n.active().vmboxes.popupSettings.greeting.emptyUploadAlert);
-				}
-			});
 		},
 
-		vmboxesMergeData: function(originalData, template) {
+		vmboxesMergeData: function(originalData, template, greetingControl, temporaryGreetingControl) {
 			var self = this,
 				formData = monster.ui.getFormData('form_vmbox'),
 				mergedData = $.extend(true, {}, originalData, formData);
@@ -358,10 +287,16 @@ define(function(require) {
 				delete mergedData.timezone;
 			}
 
+			mergedData.media.unavailable = greetingControl.getValue();
 			if (mergedData.media && mergedData.media.unavailable === 'none') {
 				delete mergedData.media.unavailable;
 			}
 
+			mergedData.media.temporary_unavailable = temporaryGreetingControl.getValue();
+			if (mergedData.media && mergedData.media.temporary_unavailable === 'none') {
+				delete mergedData.media.temporary_unavailable;
+			}
+
 			if (mergedData.media_extension && mergedData.media_extension === 'default') {
 				delete mergedData.media_extension;
 			}

views/vmboxes-edit.html

@@ -38,7 +38,7 @@
 						<input type="text" id="name" name="name" value="{{ name }}">
 					</div>
 				</div>
-				
+
 				<div class="control-group">
 					<label class="control-label" for="name">{{ i18n.vmboxes.popupSettings.basic.number.label }}</label>
 					<div class="controls">
@@ -168,7 +168,7 @@
 								<i class="fa fa-plus-circle"></i>
 								{{ i18n.vmboxes.popupSettings.recipients.create }}
 							</div>
-							
+
 							<div class="create-inputs">
 								{{ i18n.vmboxes.popupSettings.recipients.email }}
 								<input type="text" id="entity_name" name="extra.entityName" class="input-medium">
@@ -188,25 +188,9 @@
 					{{ i18n.vmboxes.popupSettings.greeting.sectionTitle }}
 				</div>
 
-				<div class="greeting-container">
-					<div>
-						<span>{{ i18n.vmboxes.popupSettings.greeting.dropdownLabel }}</span>
-						<select name="media.unavailable" class="media-dropdown">
-							<option value="none">{{ i18n.vmboxes.popupSettings.greeting.noGreeting }}</option>
-							{{#each extra.mediaList}}
-								<option value="{{this.id}}" {{#compare ../media.unavailable '===' this.id}}selected{{/compare}}>{{this.name}}</option>
-							{{/each}}
-						</select>
-						<button type="button" class="monster-button-primary non-fixed upload-toggle" data-toggle="button">
-							{{ i18n.upload }}
-						</button>
-					</div>
-					<div class="upload-div">
-						<input type="file" class="upload-input" accept="audio/*">
-						<button type="button" class="monster-button-success non-fixed upload-action upload-submit"><i class="fa fa-upload"></i></button>
-						<button type="button" class="monster-button-danger non-fixed upload-action upload-cancel"><i class="fa fa-times"></i></button>
-					</div>
-				</div>
+				<div class="greeting-container"></div>
+
+				<div class="temporary-greeting-container"></div>
 			</div>
 		</form>
 	</div>