UI-975: Added a media selection for voicemail greeting message

i18n/en-US.json

@@ -1083,6 +1083,17 @@
 				"sectionTitle": "Recipients",
 				"header": "This panel lets you manage who will be notified when someones leave a message on this voicemail box. Click on  \"Add New Recipient\" to add an e-mail address to the list",
 				"create": "Add New Recipient"
+			},
+			"__comment": "UI-975: Adding the prepend feature to numbers",
+			"__version": "v3.22",
+			"greeting": {
+				"menuTitle": "Greeting Media",
+				"sectionTitle": "Greeting Media",
+				"dropdownLabel": "Media:",
+				"noGreeting": "- None -",
+				"audioUploadButton": "Browse...",
+				"fileTooBigAlert": "You can not upload a file with a size exceeding 5MB",
+				"emptyUploadAlert": "Please select a file to upload"
 			}
 		}
 	},

submodules/vmboxes/vmboxes.css

@@ -242,4 +242,44 @@
 
 .edit-vmbox .list-entities.emails-list {
 	padding: 0 20px;
+}
+
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container {
+	padding: 0 40px;
+}
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .media-dropdown {
+	margin-bottom: 0px;
+	margin-left: 10px
+}
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-toggle {
+	margin-left: 10px;
+	min-width: 117px;
+}
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div {
+	display: none;
+	margin-top: 20px;
+}
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div .upload-input {
+	margin: 0;
+	width: 330px;
+}
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div button.upload-action {
+	margin-left: 10px;
+	padding-left: 19px;
+	padding-right: 19px;
+}
+
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div button > i {
+	margin-right: 0;
+	padding-right: 0;
+}
+
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div .file-upload {
+	margin: 0;
+	display: inline-block;
+}
+.edit-vmbox .tabs-section[data-section="greeting"] .greeting-container .upload-div .file-upload > input {
+	margin: 0;
+	padding: 6px;
+	width: 140px;
 }

submodules/vmboxes/vmboxes.js

@@ -108,9 +108,9 @@ define(function(require){
 		},
 		
 		vmboxesRenderVmbox: function(data, callback) {
-			var self = this
+			var self = this,
 				mode = data.id ? 'edit' : 'add',
-				popupTitle = mode === 'edit' ? monster.template(self, '!' + self.i18n.active().vmboxes.editTitle, { name: data.name }) : self.i18n.active().vmboxes.addTitle;
+				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)),
 				callbacks = {
 					afterSave: function(vmbox) {
@@ -128,6 +128,8 @@ define(function(require){
 					}
 				};
 
+			console.log(data);
+
 			_.each(data.notify_email_addresses, function(recipient) {
 				templateVMBox.find('.saved-entities')
 							  .append(monster.template(self, 'vmboxes-emailRow', { name: recipient }));
@@ -231,6 +233,96 @@ 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) {
@@ -272,7 +364,9 @@ define(function(require){
 				},
 				formattedData = $.extend(true, {}, defaults, data.vmbox);
 
-			formattedData.extra = {};
+			formattedData.extra = {
+				mediaList: data.mediaList
+			};
 
 			return formattedData;
 		},
@@ -335,6 +429,17 @@ define(function(require){
 						else {
 							callback(null, {});
 						}
+					},
+					mediaList: function(callback) {
+						self.callApi({
+							resource: 'media.list',
+							data: {
+								accountId: self.accountId
+							},
+							success: function(data) {
+								callback(null, data.data);
+							}
+						});
 					}
 				},
 				function(error, results) {

views/vmboxes-edit.html

@@ -23,6 +23,7 @@
 				<ul class="dropdown-menu pull-right">
 					<li><a class="tabs-selector change-section" data-section="options" href="javascript:void(0)"><i class="fa fa-ambulance"></i>{{ i18n.vmboxes.popupSettings.options.menuTitle }}</a></li>
 					<li><a class="tabs-selector change-section" data-section="recipients" href="javascript:void(0)"><i class="fa fa-envelope"></i>{{ i18n.vmboxes.popupSettings.recipients.menuTitle }}</a></li>
+					<li><a class="tabs-selector change-section" data-section="greeting" href="javascript:void(0)"><i class="fa icon-telicon-voicemail"></i>{{ i18n.vmboxes.popupSettings.greeting.menuTitle }}</a></li>
 				</ul>
 			</li>
 		</ul>
@@ -167,6 +168,32 @@
 					</div>
 				</div>
 			</div>
+
+			<div class="tabs-section" data-section="greeting">
+				<div class="title">
+					{{ 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>
 		</form>
 	</div>