From b667186a372cdd559d974ca40f5a187d7e61a145 Mon Sep 17 00:00:00 2001 From: Maxime Roux Date: Tue, 25 Aug 2015 11:39:19 -0700 Subject: [PATCH] UI-975: Added a media selection for voicemail greeting message --- i18n/en-US.json | 11 ++++ submodules/vmboxes/vmboxes.css | 40 ++++++++++++ submodules/vmboxes/vmboxes.js | 111 ++++++++++++++++++++++++++++++++- views/vmboxes-edit.html | 27 ++++++++ 4 files changed, 186 insertions(+), 3 deletions(-) diff --git a/i18n/en-US.json b/i18n/en-US.json index 627ba42..d62edcd 100644 --- a/i18n/en-US.json +++ b/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" } } }, diff --git a/submodules/vmboxes/vmboxes.css b/submodules/vmboxes/vmboxes.css index 2374781..582dc2f 100644 --- a/submodules/vmboxes/vmboxes.css +++ b/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; } \ No newline at end of file diff --git a/submodules/vmboxes/vmboxes.js b/submodules/vmboxes/vmboxes.js index a27bcc8..d7b49c1 100644 --- a/submodules/vmboxes/vmboxes.js +++ b/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(''); + 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) { diff --git a/views/vmboxes-edit.html b/views/vmboxes-edit.html index 72ad5fc..42bcc51 100644 --- a/views/vmboxes-edit.html +++ b/views/vmboxes-edit.html @@ -23,6 +23,7 @@ @@ -167,6 +168,32 @@ + +
+
+ {{ i18n.vmboxes.popupSettings.greeting.sectionTitle }} +
+ +
+
+ {{ i18n.vmboxes.popupSettings.greeting.dropdownLabel }} + + +
+
+ + + +
+
+