UI-1135: Updated the numbers section of SmartPBX's users and groups so that it requires a click on a button to save changes

submodules/groups/groups.js

@@ -801,7 +801,8 @@ define(function(require){
 		groupsBindNumbers: function(template, data) {
 			var self = this,
 				toastrMessages = self.i18n.active().groups.toastrMessages,
-				currentNumberSearch = '';
+				currentNumberSearch = '',
+				extraSpareNumbers = [];
 
 			// template.on('click', '.list-assigned-items .remove-number', function() {
 			// 	var row = $(this).parents('.item-row'),
@@ -839,11 +840,9 @@ define(function(require){
 
 			template.on('click', '.list-assigned-items .remove-number', function() {
 				var $this = $(this),
-					parentRow = $this.parents('.grid-row'),
-					callflowId = parentRow.data('callflow_id'),
-					groupName = parentRow.data('name'),
-					row = $this.parents('.item-row'),
-					dataNumbers = [];
+					row = $this.parents('.item-row');
+
+				extraSpareNumbers.push(row.data('id'));
 
 				row.slideUp(function() {
 					row.remove();
@@ -852,14 +851,7 @@ define(function(require){
 						template.find('.list-assigned-items .empty-row').slideDown();
 					}
 
-					template.find('.item-row').each(function(idx, elem) {
-						dataNumbers.push($(elem).data('id'));
-					});
-
-					self.groupsUpdateNumbers(callflowId, dataNumbers, function(callflowData) {
-						toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: groupName }));
-						self.groupsRender({ groupId: callflowData.group_id });
-					});
+					template.find('.spare-link').removeClass('disabled');
 				});
 			});
 
@@ -960,31 +952,26 @@ define(function(require){
 					args = {
 					accountName: monster.apps['auth'].currentAccount.name,
 					accountId: self.accountId,
+					ignoreNumbers: $.map(template.find('.item-row'), function(row) {
+						return $(row).data('id');
+					}),
+					extraNumbers: extraSpareNumbers,
 					callback: function(numberList) {
-						var parentRow = $this.parents('.grid-row'),
-							callflowId = parentRow.data('callflow_id'),
-							name = parentRow.data('name');
-							dataNumbers = [];
-
 						template.find('.empty-row').hide();
 
-						template.find('.item-row').each(function(idx, elem) {
-							dataNumbers.push($(elem).data('id'));
-						});
-
 						_.each(numberList, function(val, idx) {
-							dataNumbers.push(val.phoneNumber);
 							val.isLocal = val.features.indexOf('local') > -1;
 
 							template
 								.find('.list-assigned-items')
 								.append($(monster.template(self, 'groups-numbersItemRow', { number: val })));
-						});
 
-						self.groupsUpdateNumbers(callflowId, dataNumbers, function(callflowData) {
-							toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: name }));
-							self.groupsRender({ groupId: callflowData.group_id });
+							extraSpareNumbers = _.without(extraSpareNumbers, val.phoneNumber);
 						});
+
+						if(remainingQuantity == 0) {
+							template.find('.spare-link').addClass('disabled');
+						}
 					}
 				}
 
@@ -996,38 +983,40 @@ define(function(require){
 
 				monster.pub('common.buyNumbers', {
 					searchType: $(this).data('type'),
-						callbacks: {
+					callbacks: {
 						success: function(numbers) {
-							var countNew = 0;
 
 							monster.pub('common.numbers.getListFeatures', function(features) {
 								_.each(numbers, function(number, k) {
-									countNew++;
-
-									/* Formating number */
 									number.viewFeatures = $.extend(true, {}, features);
 
-									var rowTemplate = monster.template(self, 'users-rowSpareNumber', number);
+									var rowTemplate = monster.template(self, 'groups-numbersItemRow', { number: number });
 
 									template.find('.list-unassigned-items .empty-row').hide();
 									template.find('.list-unassigned-items').append(rowTemplate);
 								});
-
-								var previous = parseInt(template.find('.unassigned-list-header .count-spare').data('count')),
-									newTotal = previous + countNew;
-
-								template.find('.unassigned-list-header .count-spare')
-									.data('count', newTotal)
-									.html(newTotal);
-
-								template.find('.spare-link.disabled').removeClass('disabled');
 							});
-						},
-						error: function(error) {
 						}
 					}
 				});
 			});
+
+			template.on('click', '.save-numbers', function() {
+				var $this = $(this),
+					parentRow = $this.parents('.grid-row'),
+					callflowId = parentRow.data('callflow_id'),
+					name = parentRow.data('name');
+					dataNumbers = [];
+
+				template.find('.item-row').each(function(k, row) {
+					dataNumbers.push($(row).data('id'));
+				});
+
+				self.groupsUpdateNumbers(callflowId, dataNumbers, function(callflowData) {
+					toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: name }));
+					self.groupsRender({ groupId: callflowData.group_id });
+				});
+			});
 		},
 
 		groupsBindExtensions: function(template, data) {

submodules/users/users.js

@@ -344,6 +344,7 @@ define(function(require){
 				existingExtensions = data.existingExtensions,
 				extensionsToSave,
 				numbersToSave,
+				extraSpareNumbers,
 				toastrMessages = self.i18n.active().users.toastrMessages,
 				mainDirectoryId,
 				mainCallflowId,
@@ -426,6 +427,7 @@ define(function(require){
 						}
 						else if(type === 'numbers') {
 							extensionsToSave = [];
+							extraSpareNumbers = [];
 							currentCallflow = data.callflow;
 							currentUser = data.user;
 
@@ -965,11 +967,10 @@ define(function(require){
 			/* Events for Numbers in Users */
 			template.on('click', '.detail-numbers .list-assigned-items .remove-number', function() {
 				var $this = $(this),
-					userName = currentUser.first_name + ' ' + currentUser.last_name,
-					dataNumbers = $.extend(true, [], extensionsToSave),
-					userId = currentUser.id,
 					row = $this.parents('.item-row');
 
+				extraSpareNumbers.push(row.data('id'));
+
 				row.slideUp(function() {
 					row.remove();
 
@@ -977,41 +978,89 @@ define(function(require){
 						template.find('.list-assigned-items .empty-row').slideDown();
 					}
 
-					template.find('.item-row').each(function(idx, elem) {
-						dataNumbers.push($(elem).data('id'));
-					});
+					template.find('.spare-link').removeClass('disabled');
+				});
+			});
 
-					if(dataNumbers.length > 0) {
-						var updateCallflow = function() {
-								self.usersUpdateCallflowNumbers(userId, (currentCallflow || {}).id, dataNumbers, function(callflowData) {
-									toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: userName }));
-									self.usersRender({ userId: userId });
-								});
-							};
+			template.on('click', '.actions .spare-link:not(.disabled)', function(e) {
+				e.preventDefault();
 
-						// If we deleted a number that was used as the Caller-ID , disable the Caller-ID feature.
-						var needUpdateUser = false;
-						if(currentUser.caller_id.hasOwnProperty('external') && dataNumbers.indexOf(currentUser.caller_id.external.number) < 0) {
-							delete currentUser.caller_id.external.number;
-							needUpdateUser = true;
-						}
+				var $this = $(this),
+					args = {
+						accountName: monster.apps['auth'].currentAccount.name,
+						accountId: self.accountId,
+						ignoreNumbers: $.map(template.find('.item-row'), function(row) {
+							return $(row).data('id');
+						}),
+						extraNumbers: extraSpareNumbers,
+						callback: function(numberList, remainingQuantity) {
+							template.find('.empty-row').hide();
+
+							_.each(numberList, function(val, idx) {
+								val.isLocal = val.features.indexOf('local') > -1;
 
-						if(needUpdateUser) {
-							self.usersUpdateUser(currentUser, function() {
-								updateCallflow();
+								template
+									.find('.list-assigned-items')
+									.append($(monster.template(self, 'users-numbersItemRow', { number: val })));
+
+								extraSpareNumbers = _.without(extraSpareNumbers, val.phoneNumber);
 							});
+
+							if(remainingQuantity == 0) {
+								template.find('.spare-link').addClass('disabled');
+							}
 						}
-						else {
-							updateCallflow();
+					};
+
+				monster.pub('common.numbers.dialogSpare', args);
+			});
+
+			template.on('click', '.actions .buy-link', function(e) {
+				e.preventDefault();
+				monster.pub('common.buyNumbers', {
+					searchType: $(this).data('type'),
+					callbacks: {
+						success: function(numbers) {
+							monster.pub('common.numbers.getListFeatures', function(features) {
+								_.each(numbers, function(number, k) {
+									number.viewFeatures = $.extend(true, {}, features);
+
+									var rowTemplate = monster.template(self, 'users-numbersItemRow', { number: number });
+
+									template.find('.list-unassigned-items .empty-row').hide();
+									template.find('.list-unassigned-items').append(rowTemplate);
+								});
+							});
 						}
 					}
-					else {
-						monster.ui.alert('warning', self.i18n.active().users.noNumberCallflow);
-						self.usersRender({ userId: userId });
-					}
 				});
 			});
 
+			template.on('click', '.save-numbers', function() {
+				var $this = $(this),
+					dataNumbers = $.extend(true, [], extensionsToSave),
+					name = $this.parents('.grid-row').find('.grid-cell.name').text(),
+					userId = $this.parents('.grid-row').data('id');
+
+				template.find('.item-row').each(function(k, row) {
+					var row = $(row),
+						number = row.data('id');
+
+					dataNumbers.push(number);
+				});
+
+				if(dataNumbers.length > 0) {
+					self.usersUpdateCallflowNumbers(userId, (currentCallflow || {}).id, dataNumbers, function(callflowData) {
+						toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: name }));
+
+						self.usersRender({ userId: callflowData.owner_id });
+					});
+				}
+				else {
+					monster.ui.alert('warning', self.i18n.active().users.noNumberCallflow);
+				}
+			});
+
 			template.on('click', '.callerId-number', function() {
 				var cnamCell = $(this).parents('.item-row').first(),
 					phoneNumber = cnamCell.data('id');
@@ -1242,80 +1291,6 @@ define(function(require){
 				);
 			});
 
-			template.on('click', '.actions .spare-link:not(.disabled)', function(e) {
-				e.preventDefault();
-
-				var $this = $(this),
-					args = {
-					accountName: monster.apps['auth'].currentAccount.name,
-					accountId: self.accountId,
-					callback: function(numberList) {
-						var name = $this.parents('.grid-row').find('.grid-cell.name').text(),
-							dataNumbers = $.extend(true, [], extensionsToSave),
-							userId = $this.parents('.grid-row').data('id');
-
-						template.find('.empty-row').hide();
-
-						template.find('.item-row').each(function(idx, elem) {
-							dataNumbers.push($(elem).data('id'));
-						});
-
-						_.each(numberList, function(val, idx) {
-							dataNumbers.push(val.phoneNumber);
-							val.isLocal = val.features.indexOf('local') > -1;
-
-							template
-								.find('.list-assigned-items')
-								.append($(monster.template(self, 'users-numbersItemRow', { number: val })));
-						});
-
-						self.usersUpdateCallflowNumbers(userId, (currentCallflow || {}).id, dataNumbers, function(callflowData) {
-							toastr.success(monster.template(self, '!' + toastrMessages.numbersUpdated, { name: name }));
-							self.usersRender({ userId: callflowData.owner_id });
-						});
-					}
-				}
-
-				monster.pub('common.numbers.dialogSpare', args);
-			});
-
-			template.on('click', '.actions .buy-link', function(e) {
-				e.preventDefault();
-				monster.pub('common.buyNumbers', {
-					searchType: $(this).data('type'),
-					callbacks: {
-						success: function(numbers) {
-							var countNew = 0;
-
-							monster.pub('common.numbers.getListFeatures', function(features) {
-								_.each(numbers, function(number, k) {
-									countNew++;
-
-									/* Formating number */
-									number.viewFeatures = $.extend(true, {}, features);
-
-									var rowTemplate = monster.template(self, 'users-rowSpareNumber', number);
-
-									template.find('.list-unassigned-items .empty-row').hide();
-									template.find('.list-unassigned-items').append(rowTemplate);
-								});
-
-								var previous = parseInt(template.find('.unassigned-list-header .count-spare').data('count')),
-									newTotal = previous + countNew;
-
-								template.find('.unassigned-list-header .count-spare')
-									.data('count', newTotal)
-									.html(newTotal);
-
-								template.find('.spare-link.disabled').removeClass('disabled');
-							});
-						},
-						error: function(error) {
-						}
-					}
-				});
-			});
-
 			$('body').on('click', '#users_container_overlay', function() {
 				template.find('.edit-user').slideUp("400", function() {
 					$(this).empty();

views/groups-numbers.html

@@ -54,18 +54,19 @@
 			<i class="icon-plus icon-green icon-large"></i>Add from Spare Numbers
 		</a>
 		<ul class="nav pull-left">
-            <li class="dropdown">
-                <a href="#" class="dropdown-toggle buy-dropdown monster-link" data-toggle="dropdown" data-target="#"><i class="icon-shopping-cart icon-green icon-large"></i>{{ i18n.strategy.numberLinks.buy.link }}</a>
-                <ul class="dropdown-menu" role="menu">
-                    <li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
-                    <li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
-                    <li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
-                </ul>
-            </li>
-        </ul>
+			<li class="dropdown">
+				<a href="#" class="dropdown-toggle buy-dropdown monster-link" data-toggle="dropdown" data-target="#"><i class="icon-shopping-cart icon-green icon-large"></i>{{ i18n.strategy.numberLinks.buy.link }}</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
+					<li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
+					<li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
+				</ul>
+			</li>
+		</ul>
 
 		<div class="pull-right">
 			<a class="cancel-link monster-link blue" href="javascript:void(0);">{{ i18n.cancel }}</a>
+			<button type="button" class="btn btn-success save-numbers">{{ i18n.saveChanges }}</button>
 		</div>
 	</div>
 </div>

views/users-numbers.html

@@ -54,18 +54,19 @@
 			<i class="icon-plus icon-green icon-large"></i>Add from Spare Numbers
 		</a>
 		<ul class="nav pull-left">
-            <li class="dropdown">
-                <a href="#" class="dropdown-toggle buy-dropdown monster-link" data-toggle="dropdown" data-target="#"><i class="icon-shopping-cart icon-green icon-large"></i>{{ i18n.strategy.numberLinks.buy.link }}</a>
-                <ul class="dropdown-menu" role="menu">
-                    <li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
-                    <li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
-                    <li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
-                </ul>
-            </li>
-        </ul>
+			<li class="dropdown">
+				<a href="#" class="dropdown-toggle buy-dropdown monster-link" data-toggle="dropdown" data-target="#"><i class="icon-shopping-cart icon-green icon-large"></i>{{ i18n.strategy.numberLinks.buy.link }}</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a class="buy-link" data-type="regular" href="#">{{i18n.strategy.numberLinks.buy.regular}}</a></li>
+					<li><a class="buy-link" data-type="tollfree" href="#">{{i18n.strategy.numberLinks.buy.tollfree}}</a></li>
+					<li><a class="buy-link" data-type="vanity" href="#">{{i18n.strategy.numberLinks.buy.vanity}}</a></li>
+				</ul>
+			</li>
+		</ul>
 
 		<div class="pull-right">
 			<a class="cancel-link monster-link blue" href="javascript:void(0);">{{ i18n.cancel }}</a>
+			<button type="button" class="btn btn-success save-numbers">{{ i18n.saveChanges }}</button>
 		</div>
 	</div>
 </div>

views/users-rowSpareNumber.html

@@ -1,29 +0,0 @@
-<div class="item-row" data-id="{{this.id}}" data-search="{{formatPhoneNumber this.id}} {{this.id}}">
-	<div class="features-block pull-right">
-		<div class="pull-right">
-			<div class="navbar">
-				<ul class="nav pull-right">
-					<li class="dropdown">
-						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i></a>
-						<ul class="dropdown-menu">
-							<li><a class="callerId-number" href="#"><i class="icon-user"></i>{{ i18n.callerId }}</a></li>
-							<li><a class="e911-number" href="#"><i class="icon-ambulance"></i>{{ i18n.e911 }}</a></li>
-							{{#compare this.used_by "===" "trunkstore"}}
-								<li><a class="failover-number" href="#"><i class="icon-thumbs-down"></i>{{ ../i18n.failover }}</a></li>
-							{{/compare}}
-						</ul>
-					</li>
-				</ul>
-			</div>
-		</div>
-		<div class="features pull-right">
-			{{#each this.viewFeatures}}
-				<i class="{{icon}} {{active}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ help }}"></i>
-			{{/each}}
-		</div>
-	</div>
-	<div class="number">
-		<button type="button" class="btn btn-primary add-number">{{ i18n.add }}</button>
-		{{ formatPhoneNumber this.id }}
-	</div>
-</div>