From 2d73b30e612c143798e74b07b318f5b829082bde Mon Sep 17 00:00:00 2001 From: Maxime Roux Date: Mon, 23 Feb 2015 14:24:01 -0800 Subject: [PATCH] UI-1219: Added the prepend feature for numbers as a common control Conflicts: apps/common/app.js apps/common/i18n/en-US.json --- apps/common/app.js | 2 +- apps/common/i18n/en-US.json | 16 ++- apps/common/style/app.css | 1 + .../numberPrepend/numberPrepend.css | 26 +++++ .../submodules/numberPrepend/numberPrepend.js | 103 ++++++++++++++++++ apps/common/submodules/numbers/numbers.js | 57 +++++++--- apps/common/views/numberPrepend-layout.html | 22 ++++ apps/common/views/numbers-used.html | 5 +- 8 files changed, 211 insertions(+), 21 deletions(-) create mode 100644 apps/common/submodules/numberPrepend/numberPrepend.css create mode 100644 apps/common/submodules/numberPrepend/numberPrepend.js create mode 100644 apps/common/views/numberPrepend-layout.html diff --git a/apps/common/app.js b/apps/common/app.js index 45b6a7b15..df2794ca8 100644 --- a/apps/common/app.js +++ b/apps/common/app.js @@ -6,7 +6,7 @@ define(function(require){ var app = { name: 'common', - subModules: ['accountBrowser', 'buyNumbers', 'callerId', 'e911', 'failover', 'numbers', 'port', 'chooseModel', 'servicePlanDetails', 'ringingDurationControl'], + subModules: ['accountBrowser', 'buyNumbers', 'callerId', 'e911', 'failover', 'numbers', 'port', 'chooseModel', 'servicePlanDetails', 'ringingDurationControl', 'numberPrepend'], css: [ 'app' ], diff --git a/apps/common/i18n/en-US.json b/apps/common/i18n/en-US.json index ab76964da..3effefe02 100644 --- a/apps/common/i18n/en-US.json +++ b/apps/common/i18n/en-US.json @@ -75,7 +75,11 @@ "questionPartThree": "?", "button": "move number(s)" } - } + }, + + "__comment": "UI-1219: Adding the prepend feature to numbers", + "__version": "v3.20_s1", + "prependIconHelp": "This icon means that this number will show up with a custom prepended text on your phone" }, "callerId": { @@ -362,5 +366,15 @@ "distribute": "Distribute", "maxDurationTooltip": "Click this box to change the maximum duration for your ring group. You must enter a number between 30 and 999.", "doNotRing": "Do not ring" + }, + + "__comment": "UI-1219: Adding the prepend feature to numbers", + "__version": "v3.20_s1", + "numberPrepend": { + "dialogTitle": "Number Prepend Setup", + "title": "Text to prepend", + "label": "Prepend", + "help": "This text will appear before your number when receiving a call. This can be used to better identify which number was called when you use more than one.", + "successUpdate": "You successfully updated the prepended text for {{phoneNumber}}" } } diff --git a/apps/common/style/app.css b/apps/common/style/app.css index 4a2f3e594..523bef5a5 100644 --- a/apps/common/style/app.css +++ b/apps/common/style/app.css @@ -8,6 +8,7 @@ @import url('../submodules/chooseModel/chooseModel.css'); @import url('../submodules/servicePlanDetails/servicePlanDetails.css'); @import url('../submodules/ringingDurationControl/ringingDurationControl.css'); +@import url('../submodules/numberPrepend/numberPrepend.css'); /* Hack because of otpimization: can't have relative paths since the folder hierarchy changes after optimization */ .trunkstore_popup.cnam .left_image { diff --git a/apps/common/submodules/numberPrepend/numberPrepend.css b/apps/common/submodules/numberPrepend/numberPrepend.css new file mode 100644 index 000000000..a456ce32a --- /dev/null +++ b/apps/common/submodules/numberPrepend/numberPrepend.css @@ -0,0 +1,26 @@ +/* NUMBER-PREPEND POPUP */ +.trunkstore_popup.number-prepend { + width: 510px; +} + +.trunkstore_popup.number-prepend form, +.trunkstore_popup.number-prepend input { + margin: 0; +} + +.trunkstore_popup.number-prepend .popup-content { + padding: 15px 25px; +} + +.trunkstore_popup.number-prepend .popup-content:not(:first-child) { + border-top: 1px solid #ccc; +} + +.trunkstore_popup.number-prepend .popup-content .popup-label { + margin: 0 10px 0 0; + display: inline-block; +} + +.trunkstore_popup.number-prepend .help-box { + margin-top: 20px; +} \ No newline at end of file diff --git a/apps/common/submodules/numberPrepend/numberPrepend.js b/apps/common/submodules/numberPrepend/numberPrepend.js new file mode 100644 index 000000000..6825ce7bc --- /dev/null +++ b/apps/common/submodules/numberPrepend/numberPrepend.js @@ -0,0 +1,103 @@ +define(function(require){ + var $ = require('jquery'), + _ = require('underscore'), + monster = require('monster'), + toastr = require('toastr'); + + var numberPrepend = { + + requests: { + }, + + subscribe: { + 'common.numberPrepend.renderPopup': 'numberPrependEdit' + }, + + numberPrependEdit: function(args) { + var self = this; + + self.numberPrependGetNumber(args.phoneNumber, function(dataNumber) { + self.numberPrependRender(dataNumber.data, args.callbacks); + }); + }, + + numberPrependRender: function(dataNumber, callbacks) { + var self = this, + popup_html = $(monster.template(self, 'numberPrepend-layout', dataNumber.prepend || {})), + popup; + + popup_html.find('.save').on('click', function(ev) { + ev.preventDefault(); + var prependFormData = monster.ui.getFormData('number_prepend'); + prependFormData.enabled = (prependFormData.name && prependFormData.name.length > 0) ? true : false; + + _.extend(true, dataNumber, { prepend: prependFormData }); + + self.numberPrependUpdateNumber(dataNumber.id, dataNumber, + function(data) { + var phoneNumber = monster.util.formatPhoneNumber(data.data.id), + template = monster.template(self, '!' + self.i18n.active().numberPrepend.successUpdate, { phoneNumber: phoneNumber }); + + toastr.success(template); + + popup.dialog('destroy').remove(); + + callbacks.success && callbacks.success(data); + }, + function(data) { + callbacks.error && callbacks.error(data); + } + ); + + }); + + popup_html.find('.cancel-link').on('click', function(e) { + e.preventDefault(); + popup.dialog('destroy').remove(); + }); + + popup = monster.ui.dialog(popup_html, { + title: self.i18n.active().numberPrepend.dialogTitle + }); + }, + + numberPrependGetNumber: function(phoneNumber, success, error) { + var self = this; + + self.callApi({ + resource: 'numbers.get', + data: { + accountId: self.accountId, + phoneNumber: encodeURIComponent(phoneNumber) + }, + success: function(_data, status) { + success && success(_data); + }, + error: function(_data, status) { + error && error(_data); + } + }); + }, + + numberPrependUpdateNumber: function(phoneNumber, data, success, error) { + var self = this; + + self.callApi({ + resource: 'numbers.update', + data: { + accountId: self.accountId, + phoneNumber: encodeURIComponent(phoneNumber), + data: data + }, + success: function(_data, status) { + success && success(_data); + }, + error: function(_data, status) { + error && error(_data); + } + }); + } + }; + + return numberPrepend; +}); diff --git a/apps/common/submodules/numbers/numbers.js b/apps/common/submodules/numbers/numbers.js index a4773f7a5..2ad1aeeec 100644 --- a/apps/common/submodules/numbers/numbers.js +++ b/apps/common/submodules/numbers/numbers.js @@ -110,7 +110,8 @@ define(function(require){ inbound_cnam: { icon: 'icon-green icon-user feature-inbound_cnam', help: self.i18n.active().numbers.cnamInboundIconHelp }, dash_e911: { icon: 'icon-red icon-ambulance feature-dash_e911', help: self.i18n.active().numbers.e911IconHelp }, local: { icon: 'icon-purple icon-rocket feature-local', help: self.i18n.active().numbers.localIconHelp }, - port: { icon: 'icon-phone icon-yellow feature-port' } + port: { icon: 'icon-phone icon-yellow feature-port' }, + prepend: { icon: 'icon-orange icon-file-text-alt feature-prepend', help: self.i18n.active().numbers.prependIconHelp } }; if(callback) { @@ -173,7 +174,7 @@ define(function(require){ var sortByDate = function(a,b) { return a.updated > b.updated ? -1 : 1; }, - sortByName = function(a,b) { + sortByName = function(a,b) { return a.phoneNumber > b.phoneNumber; }; @@ -218,7 +219,7 @@ define(function(require){ self.numbersList(accountId, function(numbers) { var spareNumbers = [], usedNumbers = [], - sortByName = function(a,b) { + sortByName = function(a,b) { return a.phoneNumber > b.phoneNumber; }; @@ -786,6 +787,28 @@ define(function(require){ } }); + parent.on('click', '.prepend-number', function() { + var prependCell = $(this).parents('.number-box').first(), + phoneNumber = prependCell.data('phonenumber'); + + if(phoneNumber) { + var args = { + phoneNumber: phoneNumber, + callbacks: { + success: function(data) { + if('prepend' in data.data && data.data.prepend.enabled) { + prependCell.find('.features i.feature-prepend').addClass('active'); + } else { + prependCell.find('.features i.feature-prepend').removeClass('active'); + } + } + } + }; + + monster.pub('common.numberPrepend.renderPopup', args); + } + }); + var searchListNumbers = function(searchString, parent) { var viewList = parent; @@ -976,26 +999,26 @@ define(function(require){ data.accountName = accountName; var formattedData = self.numbersFormatDialogSpare(data), - spareTemplate = $(monster.template(self, 'numbers-dialogSpare', formattedData)); + spareTemplate = $(monster.template(self, 'numbers-dialogSpare', formattedData)); - spareTemplate.find('.empty-search-row').hide(); + spareTemplate.find('.empty-search-row').hide(); spareTemplate.on('keyup', '.search-query', function() { - var rows = spareTemplate.find('.number-box'), - emptySearch = spareTemplate.find('.empty-search-row'), - currentRow; + var rows = spareTemplate.find('.number-box'), + emptySearch = spareTemplate.find('.empty-search-row'), + currentRow; - currentNumberSearch = $(this).val().toLowerCase(); + currentNumberSearch = $(this).val().toLowerCase(); - _.each(rows, function(row) { - currentRow = $(row); - currentRow.data('search').toLowerCase().indexOf(currentNumberSearch) < 0 ? currentRow.hide() : currentRow.show(); - }); + _.each(rows, function(row) { + currentRow = $(row); + currentRow.data('search').toLowerCase().indexOf(currentNumberSearch) < 0 ? currentRow.hide() : currentRow.show(); + }); - if(rows.size() > 0) { - rows.is(':visible') ? emptySearch.hide() : emptySearch.show(); - } - }); + if(rows.size() > 0) { + rows.is(':visible') ? emptySearch.hide() : emptySearch.show(); + } + }); spareTemplate.find('#proceed').on('click', function() { var selectedNumbersRow = spareTemplate.find('.number-box.selected'), diff --git a/apps/common/views/numberPrepend-layout.html b/apps/common/views/numberPrepend-layout.html new file mode 100644 index 000000000..2dcbf21fe --- /dev/null +++ b/apps/common/views/numberPrepend-layout.html @@ -0,0 +1,22 @@ +
+
+
+ + +
+
+    +
+
+

{{ i18n.numberPrepend.help }}

+
+
+
+
+
+ {{ i18n.cancel }} + +
+
+
+
diff --git a/apps/common/views/numbers-used.html b/apps/common/views/numbers-used.html index 445ce98a8..ee0c3c0d5 100644 --- a/apps/common/views/numbers-used.html +++ b/apps/common/views/numbers-used.html @@ -23,24 +23,25 @@
{{#each usedNumbers}}
- {{#unless isLocal}}
- {{/unless}}
{{formatPhoneNumber this.phoneNumber}}
{{#if this.isoCountry }}