UI-2425: final commit to update number features in smart pbx

submodules/devices/devices.js

@@ -990,35 +990,27 @@ define(function(require){
 					}
 				},
 				success: function(data) {
-					monster.pub('common.numbers.getListFeatures', function(viewFeatures) {
-						var e911Numbers = {};
-						_.each(data.data.numbers, function(val, key) {
-							if(val.features.indexOf('e911') >= 0) {
-								e911Numbers[key] = self.devicesFormatNumber(val, viewFeatures);
-							}
-						});
+					var e911Numbers = {};
 
-						callback(e911Numbers);
+					_.each(data.data.numbers, function(val, key) {
+						if(val.features.indexOf('e911') >= 0) {
+							e911Numbers[key] = self.devicesFormatNumber(val);
+						}
 					});
+
+					callback(e911Numbers);
 				}
 			});
 		},
 
-		devicesFormatNumber: function(value, viewFeatures) {
+		devicesFormatNumber: function(value) {
 			var self = this;
 
-			value.viewFeatures = $.extend(true, {}, viewFeatures);
 			if('locality' in value) {
 				value.isoCountry = value.locality.country || '';
 				value.friendlyLocality = 'city' in value.locality ? value.locality.city + ('state' in value.locality ? ', ' + value.locality.state : '') : '';
 			}
 
-			_.each(value.features, function(feature) {
-				if(feature in value.viewFeatures) {
-					value.viewFeatures[feature].active = 'active';
-				}
-			});
-
 			return value;
 		},
 

submodules/groups/groups.css

@@ -370,14 +370,6 @@
 	white-space:pre-wrap;
 }
 
-#groups_container .list-wrapper .item-row .features > i {
-	display: none;
-}
-
-#groups_container .list-wrapper .item-row .features > i.active {
-	display: inline-block;
-}
-
 #groups_container .list-wrapper .item-row .locality {
 	display: none;
 	border-left: 1px solid #CCC;

submodules/groups/groups.js

@@ -445,10 +445,22 @@ define(function(require){
 
 			self.groupsGetNumbersData(groupId, function(data) {
 				self.groupsFormatNumbersData(data, function(data) {
-					template = $(monster.template(self, 'groups-numbers', $.extend(true, {}, data, {
-						isCnamEnabled: monster.util.isNumberFeatureEnabled('cnam'),
-						isE911Enabled: monster.util.isNumberFeatureEnabled('e911')
-					})));
+					template = $(monster.template(self, 'groups-numbers', data));
+
+					_.each(data.assignedNumbers, function(numberData, numberId) {
+						numberData.phoneNumber = numberId;
+
+						var numberDiv = template.find('[data-id="' + numberId + '"]'),
+							argsFeatures = {
+								target: numberDiv.find('.edit-features'),
+								numberData: numberData,
+								afterUpdate: function(features) {
+									monster.ui.paintNumberFeaturesIcon(features, numberDiv.find('.features'));
+								}
+							};
+
+						monster.pub('common.numberFeaturesMenu.render', argsFeatures);
+					});
 
 					self.groupsBindNumbers(template, data);
 
@@ -1063,83 +1075,6 @@ define(function(require){
 				}
 			});
 
-			if (monster.util.isNumberFeatureEnabled('e911')) {
-				template.on('click', '.e911-number', function() {
-					var e911Cell = $(this).parents('.item-row').first(),
-						phoneNumber = e911Cell.data('id');
-
-					if(phoneNumber) {
-						var args = {
-							phoneNumber: phoneNumber,
-							callbacks: {
-								success: function(data) {
-									if(!($.isEmptyObject(data.data.e911))) {
-										e911Cell.find('.features i.feature-e911').addClass('active');
-									}
-									else {
-										e911Cell.find('.features i.feature-e911').removeClass('active');
-									}
-								}
-							}
-						};
-
-						monster.pub('common.e911.renderPopup', args);
-					}
-				});
-			}
-
-			if (monster.util.isNumberFeatureEnabled('cnam')) {
-				template.on('click', '.callerId-number', function() {
-					var cnamCell = $(this).parents('.item-row').first(),
-						phoneNumber = cnamCell.data('id');
-
-					if(phoneNumber) {
-						var args = {
-							phoneNumber: phoneNumber,
-							callbacks: {
-								success: function(data) {
-									if('cnam' in data.data && data.data.cnam.display_name) {
-										cnamCell.find('.features i.feature-outbound_cnam').addClass('active');
-									} else {
-										cnamCell.find('.features i.feature-outbound_cnam').removeClass('active');
-									}
-
-									if('cnam' in data.data && data.data.cnam.inbound_lookup) {
-										cnamCell.find('.features i.feature-inbound_cnam').addClass('active');
-									} else {
-										cnamCell.find('.features i.feature-inbound_cnam').removeClass('active');
-									}
-								}
-							}
-						};
-
-						monster.pub('common.callerId.renderPopup', args);
-					}
-				});
-			}
-
-			template.on('click', '.prepend-number', function() {
-				var prependCell = $(this).parents('.item-row').first(),
-					phoneNumber = prependCell.data('id');
-
-				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);
-				}
-			});
-
 			template.on('click', '.actions .spare-link:not(.disabled)', function(e) {
 				e.preventDefault();
 
@@ -1155,16 +1090,23 @@ define(function(require){
 						template.find('.empty-row').hide();
 
 						_.each(numberList, function(val, idx) {
-							val.isLocal = val.features.indexOf('local') > -1;
-
 							template
 								.find('.list-assigned-items')
 								.append($(monster.template(self, 'groups-numbersItemRow', {
-									isCnamEnabled: monster.util.isNumberFeatureEnabled('cnam'),
-									isE911Enabled: monster.util.isNumberFeatureEnabled('e911'),
 									number: val
 								})));
 
+							var numberDiv = template.find('[data-id="'+val.phoneNumber+'"]'),
+								args = {
+									target: numberDiv.find('.edit-features'),
+									numberData: val,
+									afterUpdate: function(features) {
+										monster.ui.paintNumberFeaturesIcon(features, numberDiv.find('.features'));
+									}
+								};
+
+								monster.pub('common.numberFeaturesMenu.render', args);
+
 							extraSpareNumbers = _.without(extraSpareNumbers, val.phoneNumber);
 						});
 
@@ -1186,23 +1128,26 @@ define(function(require){
 					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);
-									number.phoneNumber = number.id;
-
-									monster.util.populateBooleansNumberFeatures(number);
-									number.extra.hasFeatures = number.extra.hasE911 || number.extra.hasPrepend || number.extra.hasCnam;
+							_.each(numbers, function(number, k) {
+								number.phoneNumber = number.id;
 
-									var rowTemplate = $(monster.template(self, 'groups-numbersItemRow', {
+								var rowTemplate = $(monster.template(self, 'groups-numbersItemRow', {
 										number: number
-									}));
+									})),
+									argsFeatures = {
+										target: rowTemplate.find('.edit-features'),
+										numberData: number,
+										afterUpdate: function(features) {
+											monster.ui.paintNumberFeaturesIcon(features, rowTemplate.find('.features'));
+										}
+									};
 
-									monster.ui.tooltips(rowTemplate);
+								monster.pub('common.numberFeaturesMenu.render', argsFeatures);
 
-									template.find('.list-unassigned-items .empty-row').hide();
-									template.find('.list-unassigned-items').append(rowTemplate);
-								});
+								monster.ui.tooltips(rowTemplate);
+
+								template.find('.list-unassigned-items .empty-row').hide();
+								template.find('.list-unassigned-items').append(rowTemplate);
 							});
 						}
 					}
@@ -1481,45 +1426,32 @@ define(function(require){
 					unassignedNumbers: {}
 				};
 
-			monster.pub('common.numbers.getListFeatures', function(features) {
-				_.each(data.numbers.numbers, function(number, id) {
-					/* Formating number */
-					number.viewFeatures = $.extend(true, {}, features);
-					/* TODO: Once locality is enabled, we need to remove it */
-					number.localityEnabled = 'locality' in number ? true : false;
-
-					_.each(number.features, function(feature) {
-						if(feature in number.viewFeatures) {
-							number.viewFeatures[feature].active = 'active';
-						}
-					});
+			_.each(data.numbers.numbers, function(number, id) {
+				/* TODO: Once locality is enabled, we need to remove it */
+				number.localityEnabled = 'locality' in number ? true : false;
 
-					monster.util.populateBooleansNumberFeatures(number);
-					number.extra.hasFeatures = number.extra.hasE911 || number.extra.hasPrepend || number.extra.hasCnam;
+				if(!number.hasOwnProperty('used_by') || number.used_by === '') {
+					response.unassignedNumbers[id] = number;
+					response.countSpare++;
+				}
+			});
 
-					if(!number.hasOwnProperty('used_by') || number.used_by === '') {
-						response.unassignedNumbers[id] = number;
-						response.countSpare++;
+			if('groupCallflow' in data.callflow && 'numbers' in data.callflow.groupCallflow) {
+				_.each(data.callflow.groupCallflow.numbers, function(number) {
+					if(!(number in data.numbers.numbers)) {
+						response.extensions.push(number);
+					}
+					else {
+						data.numbers.numbers[number].isLocal = data.numbers.numbers[number].features.indexOf('local') > -1;
+						response.assignedNumbers[number] = data.numbers.numbers[number];
 					}
 				});
+			}
+			response.emptyExtensions = _.isEmpty(response.extensions);
+			response.emptyAssigned = _.isEmpty(response.assignedNumbers);
+			response.emptySpare = _.isEmpty(response.unassignedNumbers);
 
-				if('groupCallflow' in data.callflow && 'numbers' in data.callflow.groupCallflow) {
-					_.each(data.callflow.groupCallflow.numbers, function(number) {
-						if(!(number in data.numbers.numbers)) {
-							response.extensions.push(number);
-						}
-						else {
-							data.numbers.numbers[number].isLocal = data.numbers.numbers[number].features.indexOf('local') > -1;
-							response.assignedNumbers[number] = data.numbers.numbers[number];
-						}
-					});
-				}
-				response.emptyExtensions = _.isEmpty(response.extensions);
-				response.emptyAssigned = _.isEmpty(response.assignedNumbers);
-				response.emptySpare = _.isEmpty(response.unassignedNumbers);
-
-				callback && callback(response);
-			});
+			callback && callback(response);
 		},
 
 		groupsGetNumbersData: function(groupId, callback) {

submodules/myOffice/myOffice.css

@@ -246,31 +246,13 @@
 	color: #22a5ff;
 }
 #myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-content .number-list .features > i {
-	display: none;
 	cursor: inherit;
 }
-#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-content .number-list .features > i.active {
-	display: inline-block;
-}
 #myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row .row-content .number-list .number-div {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-/*#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row.e911-row > div {
-	line-height: 20px;
-}
-#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row.e911-row .row-title .line1 {
-	font-size: 24px;
-	line-height: 24px;
-}
-#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row.e911-row .row-title .line2 {
-	line-height: 16px;
-}
-#myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row.e911-row .row-content {
-	text-transform: uppercase;
-	font-size: 12px;
-}*/
 #myoffice_container .dashboard-right-content .dashboard-box .dashboard-box-row.account-info-box > div {
 	height: 20px;
 	line-height: 20px;

submodules/myOffice/myOffice.js

@@ -283,11 +283,6 @@ define(function(require){
 							}
 						});
 					},
-					numberFeatures: function(callback) {
-						monster.pub('common.numbers.getListFeatures', function(features) {
-							callback(null, features);
-						});
-					},
 					channels: function(parallelCallback) {
 						self.callApi({
 							resource: 'channel.list',
@@ -534,13 +529,10 @@ define(function(require){
 					_.each(val.numbers, function(num) {
 						if(num !== '0' && num !== 'undefined' && num !== 'undefinedconf' && num !== 'undefinedfaxing') {
 							var number = {
-								number: num,
-								features: $.extend(true, {}, data.numberFeatures)
+								number: num
 							};
 							if(num in data.numbers) {
-								_.each(data.numbers[num].features, function(feature) {
-									number.features[feature] = $.extend(true, number.features[feature], { active : 'active'});
-								});
+								number.features = data.numbers[num].features;
 							}
 							data[numberArrayName].push(number);
 						}

submodules/strategy/strategy.css

@@ -134,9 +134,6 @@
 #strategy_container .element-container .number-element .features-block .features {
 	margin-right: 45px;
 }
-#strategy_container .element-container .number-element .features-block .features > i {
-	display: none;
-}
 
 #strategy_container .element-container .number-element .features-block .features > i.active {
 	display: inline-block;

submodules/strategy/strategy.js

@@ -181,11 +181,6 @@ define(function(require){
 							callback(null, voicemailBoxes);
 						});
 					},
-					numberFeatures: function(callback) {
-						monster.pub('common.numbers.getListFeatures', function(features) {
-							callback(null, features);
-						});
-					},
 					directories: function (callback) {
 						self.strategyListDirectories(function (directories) {
 							callback(null, directories);
@@ -396,20 +391,13 @@ define(function(require){
 											var ret = {
 												number: {
 													id: val
-												},
-												features: $.extend(true, {}, strategyData.numberFeatures)
+												}
 											};
 
 											if(accountNumbers.hasOwnProperty(val)) {
-												_.each(accountNumbers[val].features, function(feature) {
-													ret.features[feature].active = 'active';
-												});
 												ret.number = $.extend(true, accountNumbers[val], ret.number);
 											}
 
-											monster.util.populateBooleansNumberFeatures(ret.number);
-											ret.number.extra.hasFeatures = ret.number.extra.hasE911 || ret.number.extra.hasPrepend || ret.number.extra.hasCnam;
-
 											return ret;
 										}
 									}),
@@ -417,6 +405,21 @@ define(function(require){
 								},
 								template = $(monster.template(self, 'strategy-'+templateName, templateData));
 
+							_.each(templateData.numbers, function(data) {
+								data.number.phoneNumber = data.number.id;
+
+								var numberDiv = template.find('[data-phonenumber="'+data.number.id+'"]'),
+									args = {
+										target: numberDiv.find('.edit-features'),
+										numberData: data.number,
+										afterUpdate: function(features) {
+											monster.ui.paintNumberFeaturesIcon(features, numberDiv.find('.features'));
+										}
+									};
+
+								monster.pub('common.numberFeaturesMenu.render', args);
+							});
+
 							monster.ui.tooltips(template);
 
 							container.find('.element-content').empty()
@@ -869,83 +872,6 @@ define(function(require){
 					});
 				}
 			});
-
-			if (monster.util.isNumberFeatureEnabled('cnam')) {
-				container.on('click', '.number-element .callerId-number', function() {
-					var cnamCell = $(this).parents('.number-element').first(),
-						phoneNumber = cnamCell.find('.remove-number').data('number');
-
-					if(phoneNumber) {
-						var args = {
-							phoneNumber: phoneNumber,
-							callbacks: {
-								success: function(data) {
-									if('cnam' in data.data && data.data.cnam.display_name) {
-										cnamCell.find('.features i.feature-outbound_cnam').addClass('active');
-									} else {
-										cnamCell.find('.features i.feature-outbound_cnam').removeClass('active');
-									}
-
-									if('cnam' in data.data && data.data.cnam.inbound_lookup) {
-										cnamCell.find('.features i.feature-inbound_cnam').addClass('active');
-									} else {
-										cnamCell.find('.features i.feature-inbound_cnam').removeClass('active');
-									}
-								}
-							}
-						};
-
-						monster.pub('common.callerId.renderPopup', args);
-					}
-				});
-			}
-
-			if (monster.util.isNumberFeatureEnabled('e911')) {
-				container.on('click', '.number-element .e911-number', function() {
-					var e911Cell = $(this).parents('.number-element').first(),
-						phoneNumber = e911Cell.find('.remove-number').data('number');
-
-					if(phoneNumber) {
-						var args = {
-							phoneNumber: phoneNumber,
-							callbacks: {
-								success: function(data) {
-									if(!($.isEmptyObject(data.data.e911))) {
-										e911Cell.find('.features i.feature-e911').addClass('active');
-									}
-									else {
-										e911Cell.find('.features i.feature-e911').removeClass('active');
-									}
-								}
-							}
-						};
-
-						monster.pub('common.e911.renderPopup', args);
-					}
-				});
-			}
-
-			container.on('click', '.number-element .prepend-number', function() {
-				var prependCell = $(this).parents('.number-element').first(),
-					phoneNumber = prependCell.find('.remove-number').data('number');
-
-				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);
-				}
-			});
 		},
 
 		strategyConfNumBindEvents: function(container, strategyData) {
@@ -2277,25 +2203,6 @@ define(function(require){
 				}
 			});
 
-			// container.on('click', '.number-text', function(e) {
-			// 	var $this = $(this);
-			// 	$this.parents('.menu-line').addClass('editing');
-			// 	$this.siblings('.number-input').focus();
-			// });
-
-			// container.on('blur', '.number-input', function(e) {
-			// 	var $this = $(this);
-			// 	$this.parents('.menu-line').removeClass('editing');
-			// 	$this.siblings('.number-text').text($this.val() || "?");
-			// });
-
-			// container.on('keyup', '.number-input', function(e) {
-			// 	var $this = $(this);
-			// 	if(!/^[0-9#*]*$/.test($this.val())) {
-			// 		$this.val($this.val().replace(/[^0-9#*]/g, ""));
-			// 	}
-			// });
-
 			container.on('change', '.target-select', function(e) {
 				var $this = $(this),
 					iconElem = $this.parents('.target-input').find('.target-icon'),

submodules/users/fixtures/resendInstructions.json

@@ -1,2 +0,0 @@
-{
-}

submodules/users/fixtures/resetPassword.json

@@ -1,2 +0,0 @@
-{
-}

submodules/users/users.css

@@ -443,14 +443,6 @@
 	white-space:pre-wrap;
 }
 
-#users_container .detail-numbers .list-wrapper .item-row .features > i {
-	display: none;
-}
-
-#users_container .detail-numbers .list-wrapper .item-row .features > i.active {
-	display: inline-block;
-}
-
 #users_container .detail-numbers .list-wrapper .item-row .locality {
 	display: none;
 	border-left: 1px solid #CCC;

submodules/users/users.js

@@ -1116,14 +1116,23 @@ define(function(require){
 							template.find('.empty-row').hide();
 
 							_.each(numberList, function(val, idx) {
-								val.isLocal = val.features.indexOf('local') > -1;
-
 								template
 									.find('.list-assigned-items')
 									.append($(monster.template(self, 'users-numbersItemRow', {
 										number: val
 									})));
 
+								var numberDiv = template.find('[data-id="'+val.phoneNumber+'"]'),
+									args = {
+										target: numberDiv.find('.edit-features'),
+										numberData: val,
+										afterUpdate: function(features) {
+											monster.ui.paintNumberFeaturesIcon(features, numberDiv.find('.features'));
+										}
+									};
+
+								monster.pub('common.numberFeaturesMenu.render', args);
+
 								extraSpareNumbers = _.without(extraSpareNumbers, val.phoneNumber);
 							});
 
@@ -1145,23 +1154,26 @@ define(function(require){
 					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);
-									number.phoneNumber = number.id;
-
-									monster.util.populateBooleansNumberFeatures(number);
-									number.extra.hasFeatures = number.extra.hasE911 || number.extra.hasPrepend || number.extra.hasCnam;
+							_.each(numbers, function(number, k) {
+								number.phoneNumber = number.id;
 
-									var rowTemplate = $(monster.template(self, 'users-numbersItemRow', {
+								var rowTemplate = $(monster.template(self, 'users-numbersItemRow', {
 										number: number
-									}));
+									})),
+									argsFeatures = {
+										target: rowTemplate.find('.edit-features'),
+										numberData: number,
+										afterUpdate: function(features) {
+											monster.ui.paintNumberFeaturesIcon(features, rowTemplate.find('.features'));
+										}
+									};
 
-									monster.ui.tooltips(rowTemplate);
+								monster.pub('common.numberFeaturesMenu.render', argsFeatures);
 
-									template.find('.list-assigned-items .empty-row').hide();
-									template.find('.list-assigned-items').append(rowTemplate);
-								});
+								monster.ui.tooltips(rowTemplate);
+
+								template.find('.list-assigned-items .empty-row').hide();
+								template.find('.list-assigned-items').append(rowTemplate);
 							});
 						}
 					}
@@ -1214,83 +1226,6 @@ define(function(require){
 				}
 			});
 
-			if (monster.util.isNumberFeatureEnabled('cnam')) {
-				template.on('click', '.callerId-number', function() {
-					var cnamCell = $(this).parents('.item-row').first(),
-						phoneNumber = cnamCell.data('id');
-
-					if(phoneNumber) {
-						var args = {
-							phoneNumber: phoneNumber,
-							callbacks: {
-								success: function(data) {
-									if('cnam' in data.data && data.data.cnam.display_name) {
-										cnamCell.find('.features i.feature-outbound_cnam').addClass('active');
-									} else {
-										cnamCell.find('.features i.feature-outbound_cnam').removeClass('active');
-									}
-
-									if('cnam' in data.data && data.data.cnam.inbound_lookup) {
-										cnamCell.find('.features i.feature-inbound_cnam').addClass('active');
-									} else {
-										cnamCell.find('.features i.feature-inbound_cnam').removeClass('active');
-									}
-								}
-							}
-						};
-
-						monster.pub('common.callerId.renderPopup', args);
-					}
-				});
-			}
-
-			if (monster.util.isNumberFeatureEnabled('e911')) {
-				template.on('click', '.e911-number', function() {
-					var e911Cell = $(this).parents('.item-row').first(),
-						phoneNumber = e911Cell.data('id');
-
-					if(phoneNumber) {
-						var args = {
-							phoneNumber: phoneNumber,
-							callbacks: {
-								success: function(data) {
-									if(!($.isEmptyObject(data.data.e911))) {
-										e911Cell.find('.features i.feature-e911').addClass('active');
-									}
-									else {
-										e911Cell.find('.features i.feature-e911').removeClass('active');
-									}
-								}
-							}
-						};
-
-						monster.pub('common.e911.renderPopup', args);
-					}
-				});
-			}
-
-			template.on('click', '.prepend-number', function() {
-				var prependCell = $(this).parents('.item-row').first(),
-					phoneNumber = prependCell.data('id');
-
-				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);
-				}
-			});
-
 			template.on('click', '.feature[data-feature="caller_id"]', function() {
 				self.usersRenderCallerId(currentUser);
 			});
@@ -2730,6 +2665,19 @@ define(function(require){
 				self.usersFormatNumbersData(userId, results, function(results) {
 					template = $(monster.template(self, 'users-numbers', results));
 
+					_.each(results.assignedNumbers, function(number) {
+						var numberDiv = template.find('[data-id="' + number.phoneNumber + '"]'),
+							argsFeatures = {
+								target: numberDiv.find('.edit-features'),
+								numberData: number,
+								afterUpdate: function(features) {
+									monster.ui.paintNumberFeaturesIcon(features, numberDiv.find('.features'));
+								}
+							};
+
+						monster.pub('common.numberFeaturesMenu.render', argsFeatures);
+					});
+
 					callback && callback(template, results);
 				});
 			}, true);
@@ -2808,83 +2756,70 @@ define(function(require){
 				});
 			}
 
-			monster.pub('common.numbers.getListFeatures', function(features) {
-				if('numbers' in data.numbers) {
-					_.each(data.numbers.numbers, function(number, k) {
-						/* Formating number */
-						number.viewFeatures = $.extend(true, {}, features);
-						/* TODO: Once locality is enabled, we need to remove it */
-						number.localityEnabled = 'locality' in number ? true : false;
-
-						_.each(number.features, function(feature) {
-							if(feature in number.viewFeatures) {
-								number.viewFeatures[feature].active = 'active';
-							}
-						});
-
-						monster.util.populateBooleansNumberFeatures(number);
-						number.extra.hasFeatures = number.extra.hasE911 || number.extra.hasPrepend || number.extra.hasCnam;
+			if('numbers' in data.numbers) {
+				_.each(data.numbers.numbers, function(number, k) {
+					/* TODO: Once locality is enabled, we need to remove it */
+					number.localityEnabled = 'locality' in number ? true : false;
 
-						/* Adding to spare numbers */
-						if(!number.hasOwnProperty('used_by') || number.used_by === '') {
-							response.countSpare++;
-							response.unassignedNumbers[k] = number;
-						}
-						else if (number.used_by === 'mobile') {
-							response.assignedNumbers.push(number);
-						}
-					});
-				}
+					/* Adding to spare numbers */
+					if(!number.hasOwnProperty('used_by') || number.used_by === '') {
+						response.countSpare++;
+						response.unassignedNumbers[k] = number;
+					}
+					else if (number.used_by === 'mobile') {
+						response.assignedNumbers.push(number);
+					}
+				});
+			}
 
-				if(response.callflow) {
-					/* If a number is in a callflow and is returned by the phone_numbers, add it to the assigned numbers  */
-					_.each(response.callflow.numbers, function(number) {
-						if(number in data.numbers.numbers) {
-							var numberElement = data.numbers.numbers[number];
-							numberElement.phoneNumber = number;
-							numberElement.isLocal = numberElement.features.indexOf('local') > -1;
+			if(response.callflow) {
+				/* If a number is in a callflow and is returned by the phone_numbers, add it to the assigned numbers  */
+				_.each(response.callflow.numbers, function(number) {
+					if(number in data.numbers.numbers) {
+						var numberElement = data.numbers.numbers[number];
+						numberElement.phoneNumber = number;
+						numberElement.isLocal = numberElement.features.indexOf('local') > -1;
 
-							response.assignedNumbers.push(numberElement);
-						}
-						else {
-							response.extensions.push(number);
-						}
-					});
-				}
+						response.assignedNumbers.push(numberElement);
+					}
+					else {
+						response.extensions.push(number);
+					}
+				});
+			}
 
-				response.assignedNumbers = monster.util.sort(response.assignedNumbers, 'phoneNumber');
+			response.assignedNumbers = monster.util.sort(response.assignedNumbers, 'phoneNumber');
 
-				/* List of extensions */
-				response.allExtensions = [];
+			/* List of extensions */
+			response.allExtensions = [];
 
-				_.each(data.callflow.list, function(callflow) {
-					_.each(callflow.numbers, function(number) {
-						/* If it's a valid extension number (ie: a number that's not in the number database) */
-						if(!(number in data.numbers.numbers) && !(_.isNaN(parseInt(number)))) {
-							response.allExtensions.push(number);
-						}
-					});
+			_.each(data.callflow.list, function(callflow) {
+				_.each(callflow.numbers, function(number) {
+					/* If it's a valid extension number (ie: a number that's not in the number database) */
+					if(!(number in data.numbers.numbers) && !(_.isNaN(parseInt(number)))) {
+						response.allExtensions.push(number);
+					}
 				});
+			});
 
-				/* Sort extensions so that we can recommend an available extension to a user whom would add a new one */
-				response.allExtensions.sort(function(a, b) {
-					var parsedA = parseInt(a),
-						parsedB = parseInt(b),
-						result = -1;
+			/* Sort extensions so that we can recommend an available extension to a user whom would add a new one */
+			response.allExtensions.sort(function(a, b) {
+				var parsedA = parseInt(a),
+					parsedB = parseInt(b),
+					result = -1;
 
-					if(parsedA > 0 && parsedB > 0) {
-						result = parsedA > parsedB;
-					}
+				if(parsedA > 0 && parsedB > 0) {
+					result = parsedA > parsedB;
+				}
 
-					return result;
-				});
+				return result;
+			});
 
-				response.emptyAssigned = _.isEmpty(response.assignedNumbers);
-				response.emptySpare = _.isEmpty(response.unassignedNumbers);
-				response.emptyExtensions = _.isEmpty(response.extensions);
+			response.emptyAssigned = _.isEmpty(response.assignedNumbers);
+			response.emptySpare = _.isEmpty(response.unassignedNumbers);
+			response.emptyExtensions = _.isEmpty(response.extensions);
 
-				callback && callback(response);
-			});
+			callback && callback(response);
 		},
 
 		usersFormatCreationData: function(data, callback) {

views/groups-numbers.html

@@ -7,35 +7,12 @@
 			{{#each assignedNumbers}}
 				<div class="item-row" data-id="{{@key}}" data-search="{{formatPhoneNumber @key}} {{@key}} {{locality.city}} {{locality.country}}">
 					<div class="features-block pull-right">
-						<div class="edit-features">
-							{{#if this.extra.hasFeatures}}
-								<div class="navbar">
-									<ul class="nav pull-right">
-										<li class="dropdown">
-											<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
-											<ul class="dropdown-menu">
-												{{#if this.extra.hasCnam}}
-													<li><a class="callerId-number" href="#"><i class="fa fa-user"></i>{{ @root.i18n.callerId }}</a></li>
-												{{/if}}
-												{{#if this.extra.hasE911}}
-													<li><a class="e911-number" href="#"><i class="fa fa-ambulance"></i>{{ @root.i18n.e911 }}</a></li>
-												{{/if}}
-												{{#if this.extra.hasPrepend}}
-													<li><a class="prepend-number" href="#"><i class="fa fa-file-text-o"></i>{{ @root.i18n.numberPrepend }}</a></li>
-												{{/if}}
-											</ul>
-										</li>
-									</ul>
-								</div>
-							{{/if}}
-						</div>
+						<div class="edit-features"></div>
 						<div class="features">
-						{{#compare this.state '===' 'port_in'}}
-							<i class="fa fa-exclamation-triangle monster-red active help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{@root.i18n.portIconHelp}}"></i>
-						{{/compare}}
-							{{#each viewFeatures}}
-								<i class="{{icon}} {{active}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ help }}"></i>
-							{{/each}}
+							{{#numberFeatures this.features}}{{/numberFeatures}}
+							{{#compare state '===' 'port_in'}}
+								<i class="fa fa-exclamation-triangle monster-red active help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{@root.i18n.portIconHelp}}"></i>
+							{{/compare}}
 						</div>
 					</div>
 					<div class="number">

views/groups-numbersItemRow.html

@@ -1,34 +1,12 @@
 <div class="item-row" data-id="{{number.phoneNumber}}">
 	<div class="features-block pull-right">
-		<div class="edit-features">
-			{{#if number.extra.hasFeatures}}
-				<div class="navbar">
-					<ul class="nav pull-right">
-						<li class="dropdown">
-							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
-							<ul class="dropdown-menu">
-								{{#if number.extra.hasCnam}}
-									<li><a class="callerId-number" href="#"><i class="fa fa-user"></i>{{ @root.i18n.callerId }}</a></li>
-								{{/if}}
-								{{#if number.extra.hasE911}}
-									<li><a class="e911-number" href="#"><i class="fa fa-ambulance"></i>{{ @root.i18n.e911 }}</a></li>
-								{{/if}}
-								{{#if number.extra.hasPrepend}}
-									<li><a class="prepend-number" href="#"><i class="fa fa-file-text-o"></i>{{ @root.i18n.numberPrepend }}</a></li>
-								{{/if}}
-							</ul>
-						</li>
-					</ul>
-				</div>
-			{{/if}}
-		</div>
+		<div class="edit-features"></div>
+
 		<div class="features">
-		{{#compare number.state '===' 'port_in'}}
+			{{#numberFeatures number.features}}{{/numberFeatures}}
+			{{#compare number.state '===' 'port_in'}}
 				<i class="fa fa-exclamation-triangle monster-red active help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{@root.i18n.portIconHelp}}"></i>
-		{{/compare}}
-			{{#each number.viewFeatures}}
-				<i class="{{icon}} {{active}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ help }}"></i>
-			{{/each}}
+			{{/compare}}
 		</div>
 	</div>
 	<div class="number">

views/myOffice-layout.html

@@ -87,9 +87,7 @@
 							{{#each mainNumbers}}
 							<li{{#compare this.number '===' ../account.caller_id.external.number}} class="caller-id"{{/compare}}>
 								<div class="features pull-right">
-									{{#each this.features}}
-										<i class="icon-small {{icon}} {{active}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ help }}"></i>
-									{{/each}}
+									{{#numberFeatures this.features}}{{/numberFeatures}}
 								</div>
 								<div class="number-div">{{formatPhoneNumber this.number}}</div>
 							</li>
@@ -113,9 +111,7 @@
 							{{#each confNumbers}}
 							<li>
 								<div class="features pull-right">
-									{{#each this.features}}
-										<i class="{{icon}} {{active}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ help }}"></i>
-									{{/each}}
+									{{#numberFeatures this.features}}{{/numberFeatures}}
 								</div>
 								<div class="number-div">{{formatPhoneNumber number}}</div>
 							</li>
@@ -134,9 +130,7 @@
 							{{#each faxingNumbers}}
 							<li>
 								<div class="features pull-right">
-									{{#each this.features}}
-										<i class="{{icon}} {{active}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ help }}"></i>
-									{{/each}}
+									{{#numberFeatures this.features}}{{/numberFeatures}}
 								</div>
 								<div class="number-div">{{formatPhoneNumber number}}</div>
 							</li>

views/strategy-numbers.html

@@ -1,59 +1,39 @@
-{{#each numbers}}
-<div class="number-element">
-	<div class="number">
-		<button type="button" class="monster-button monster-button-danger remove-number" data-number="{{this.number.id}}" data-e911="{{this.features.e911.active}}">
-			{{ @root.i18n.unassign }}
-		</button>
-		<span>{{formatPhoneNumber this.number.id}}</span>
-	</div>
-	<div class="features-block pull-right">
-		<div class="edit-features">
-			{{#if this.number.extra.hasFeatures}}
-				<div class="navbar">
-					<ul class="nav pull-right">
-						<li class="dropdown">
-							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
-							<ul class="dropdown-menu">
-								{{#if this.number.extra.hasCnam}}
-									<li><a class="callerId-number" href="#"><i class="fa fa-user"></i>{{ @root.i18n.callerId }}</a></li>
-								{{/if}}
-								{{#if this.number.extra.hasE911}}
-									<li><a class="e911-number" href="#"><i class="fa fa-ambulance"></i>{{ @root.i18n.e911 }}</a></li>
-								{{/if}}
-								{{#if this.number.extra.hasPrepend}}
-									<li><a class="prepend-number" href="#"><i class="fa fa-file-text-o"></i>{{ @root.i18n.numberPrepend }}</a></li>
-								{{/if}}
-							</ul>
-						</li>
-					</ul>
+<div class="strategy-numbers-wrapper">
+	{{#each numbers}}
+		<div class="number-element" data-phoneNumber="{{number.id}}">
+			<div class="number">
+				<button type="button" class="monster-button monster-button-danger remove-number" data-number="{{number.id}}" data-e911="{{#ifInArray 'e911' number.features}}active{{/ifInArray}}">
+					{{ @root.i18n.unassign }}
+				</button>
+				<span>{{formatPhoneNumber number.id}}</span>
+			</div>
+			<div class="features-block pull-right">
+				<div class="edit-features"></div>
+				<div class="features">
+					{{#numberFeatures number.features}}{{/numberFeatures}}
 				</div>
-			{{/if}}
+			</div>
 		</div>
-		<div class="features">
-			{{#each this.features}}
-				<i class="{{icon}} {{active}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ help }}"></i>
-			{{/each}}
+	{{else}}
+		<div class="number-element">
+			<div class="no-number-error">{{ i18n.strategy.noNumberMessage }}</div>
+		</div>
+	{{/each}}
+
+	<div class="number-actions">
+		<a href="#" class="cancel-link pull-right monster-link blue">{{ i18n.close }}</a>
+		<div class="action-links nav-bar clearfix">
+			<a href="#" class="spare-link monster-link pull-left{{#unless spareLinkEnabled}} disabled{{/unless}}"><i class="fa fa-file-text-o monster-orange fa-lg"></i>{{ i18n.strategy.numberLinks.spare }}</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="fa fa-shopping-cart monster-green fa-lg"></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>
-	</div>
-</div>
-{{else}}
-<div class="number-element">
-	<div class="no-number-error">{{ i18n.strategy.noNumberMessage }}</div>
-</div>
-{{/each}}
-<div class="number-actions">
-	<a href="#" class="cancel-link pull-right monster-link blue">{{ i18n.close }}</a>
-	<div class="action-links nav-bar clearfix">
-		<a href="#" class="spare-link monster-link pull-left{{#unless spareLinkEnabled}} disabled{{/unless}}"><i class="fa fa-file-text-o monster-orange fa-lg"></i>{{ i18n.strategy.numberLinks.spare }}</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="fa fa-shopping-cart monster-green fa-lg"></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>
 </div>

views/users-numbers.html

@@ -7,39 +7,16 @@
 			{{#each assignedNumbers}}
 				<div class="item-row" data-id="{{this.phoneNumber}}" data-type="{{this.used_by}}" data-search="{{formatPhoneNumber this.phoneNumber}} {{this.phoneNumber}} {{this.locality.city}} {{this.locality.country}}">
 					<div class="features-block pull-right">
-					{{#compare this.used_by "!==" "mobile"}}
-						<div class="edit-features">
-							{{#if this.extra.hasFeatures}}
-								<div class="navbar">
-									<ul class="nav pull-right">
-										<li class="dropdown">
-											<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
-											<ul class="dropdown-menu">
-												{{#if this.extra.hasCnam}}
-													<li><a class="callerId-number" href="#"><i class="fa fa-user"></i>{{ @root.i18n.callerId }}</a></li>
-												{{/if}}
-												{{#if this.extra.hasE911}}
-													<li><a class="e911-number" href="#"><i class="fa fa-ambulance"></i>{{ @root.i18n.e911 }}</a></li>
-												{{/if}}
-												{{#if this.extra.hasPrepend}}
-													<li><a class="prepend-number" href="#"><i class="fa fa-file-text-o"></i>{{ @root.i18n.numberPrepend }}</a></li>
-												{{/if}}
-											</ul>
-										</li>
-									</ul>
-								</div>
-							{{/if}}
-						</div>
-					{{/compare}}
+						<div class="edit-features"></div>
+
 						<div class="features">
-						{{#compare this.state '===' 'port_in'}}
-							<i class="fa fa-exclamation-triangle monster-red active help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{@root.i18n.portIconHelp}}"></i>
-						{{/compare}}
-							{{#each this.viewFeatures}}
-								<i class="{{icon}} {{active}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ help }}"></i>
-							{{/each}}
+							{{#numberFeatures features}}{{/numberFeatures}}
+							{{#compare state '===' 'port_in'}}
+								<i class="fa fa-exclamation-triangle monster-red active help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{@root.i18n.portIconHelp}}"></i>
+							{{/compare}}
 						</div>
 					</div>
+
 					<div class="number-container">
 						<button type="button" class="monster-button monster-button-danger remove-number{{#compare this.used_by "===" "mobile"}} disabled" disabled{{else}}"{{/compare}}>{{ @root.i18n.unassign }}</button>
 						<span class="number">

views/users-numbersItemRow.html

@@ -1,34 +1,12 @@
 <div class="item-row" data-id="{{number.phoneNumber}}">
 	<div class="features-block pull-right">
-		<div class="edit-features">
-			{{#if number.extra.hasFeatures}}
-				<div class="navbar">
-					<ul class="nav pull-right">
-						<li class="dropdown">
-							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
-							<ul class="dropdown-menu">
-								{{#if number.extra.hasCnam}}
-									<li><a class="callerId-number" href="#"><i class="fa fa-user"></i>{{ @root.i18n.callerId }}</a></li>
-								{{/if}}
-								{{#if number.extra.hasE911}}
-									<li><a class="e911-number" href="#"><i class="fa fa-ambulance"></i>{{ @root.i18n.e911 }}</a></li>
-								{{/if}}
-								{{#if number.extra.hasPrepend}}
-									<li><a class="prepend-number" href="#"><i class="fa fa-file-text-o"></i>{{ @root.i18n.numberPrepend }}</a></li>
-								{{/if}}
-							</ul>
-						</li>
-					</ul>
-				</div>
-			{{/if}}
-		</div>
+		<div class="edit-features"></div>
+
 		<div class="features">
-		{{#compare number.state '===' 'port_in'}}
+			{{#numberFeatures number.features}}{{/numberFeatures}}
+			{{#compare number.state '===' 'port_in'}}
 				<i class="fa fa-exclamation-triangle monster-red active help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{@root.i18n.portIconHelp}}"></i>
-		{{/compare}}
-			{{#each number.viewFeatures}}
-				<i class="{{icon}} {{active}} help-popover" data-toggle="tooltip" data-placement="top" data-original-title="{{ help }}"></i>
-			{{/each}}
+			{{/compare}}
 		</div>
 	</div>
 	<div class="number">