UI-1028: Added categories for the feature codes

i18n/en-US.json

@@ -767,6 +767,14 @@
 			"call_waiting[action=disable]": "Disable Call-Waiting",
 			"sound_test_service": "Sound Test Service",
 			"call_recording": "Call Recording"
+		},
+		"__comment": "UI-1028, v3.20_s0: Added categories for the feature codes.",
+		"categories": {
+			"call_forward": "Call-Forward",
+			"hotdesk": "Hot-Desking",
+			"parking": "Parking",
+			"do_not_disturb": "Do Not Disturb",
+			"misc": "Miscellaneous"
 		}
 	}
 }

i18n/fr-FR.json

@@ -743,6 +743,14 @@
 			"call_waiting[action=disable]": "Désactiver le double-appel",
 			"sound_test_service": "Test Son",
 			"call_recording": "Enregistrement d'appel"
+		},
+		"__comment": "UI-1028, v3.20_s0: Added categories for the feature codes.",
+		"categories": {
+			"call_forward": "Transfert d'appel",
+			"hotdesk": "\"Hot-Desking\"",
+			"parking": "Stationnement",
+			"do_not_disturb": "\"Ne pas déranger\"",
+			"misc": "Divers"
 		}
 	}
 }

submodules/featureCodes/featureCodes.css

@@ -17,6 +17,16 @@
 	color: #555;
 }
 
+#feature_codes_container .feature-codes-content .feature-codes-category:not(:first-child) {
+    margin-top: 20px;
+}
+
+#feature_codes_container .feature-codes-content .category-header {
+    font-size: 18px;
+    margin-bottom: 10px;
+    font-weight: 600;
+}
+
 #feature_codes_container .feature-codes-content .feature-code-line:not(:first-child) {
 	margin-top: 10px;
 }

submodules/featureCodes/featureCodes.js

@@ -12,12 +12,52 @@ define(function(require){
 			'voip.featureCodes.render': 'featureCodesRender'
 		},
 
+		categories: {
+			call_forward: [
+				"call_forward[action=activate]",
+				"call_forward[action=deactivate]",
+				"call_forward[action=toggle]",
+				"call_forward[action=update]",
+				"call_forward[action=on_busy_enable]",
+				"call_forward[action=on_busy_disable]",
+				"call_forward[action=no_answer_enable]",
+				"call_forward[action=no_answer_disable]"
+			],
+			hotdesk: [
+				"hotdesk[action=login]",
+				"hotdesk[action=logout]",
+				"hotdesk[action=toggle]"
+			],
+			parking: [
+				"park_and_retrieve",
+				"valet",
+				"retrieve"
+			],
+			do_not_disturb: [
+				"donotdisturb[action=\"enable\"]",
+				"donotdisturb[action=\"disable\"]",
+				"donotdisturb[action=\"toggle\"]"
+			],
+			misc: [
+				"voicemail[action=check]",
+				"voicemail[action=\"direct\"]",
+				"intercom",
+				"privacy[mode=full]",
+				"directory",
+				"time",
+				"call_waiting[action=enable]",
+				"call_waiting[action=disable]",
+				"sound_test_service",
+				"call_recording"
+			]
+		},
+
 		featureCodesRender: function(args) {
 			var self = this,
 				parent = args.parent || $('.right-content');
 
 			self.featureCodesLoadData(function(featureCodesData) {
-				var template = $(monster.template(self, 'featureCodes-layout', {featureCodes: featureCodesData}));
+				var template = $(monster.template(self, 'featureCodes-layout', { featureCodes: self.featureCodesFormatData(featureCodesData) }));
 
 				self.featureCodesBindEvents({
 					parent: parent,
@@ -43,18 +83,43 @@ define(function(require){
 					}
 				},
 				success: function(data, status) {
-					var featureCodes = $.map(data.data, function(callflow) {
-						if(!_.isEmpty(callflow.featurecode)) {
-							return {
-								key: callflow.featurecode.name,
-								name: self.i18n.active().featureCodes.labels[callflow.featurecode.name],
-								number: callflow.featurecode.number.replace(/\\/g,'')
-							};
-						}
-					});
-					callback && callback(featureCodes);
+					callback && callback(data.data);
+				}
+			});
+		},
+
+		featureCodesFormatData: function(featureCodeData) {
+			var self = this,
+				featureCodes = {};
+
+			_.each(featureCodeData, function(callflow) {
+				var category = 'misc';
+				_.find(self.categories, function(cat, key) {
+					if(cat.indexOf(callflow.featurecode.name) >= 0) {
+						category = key;
+						return true;
+					}
+					return false; 
+				});
+
+				if(!featureCodes.hasOwnProperty(category)) { 
+					featureCodes[category] = {
+						category: self.i18n.active().featureCodes.categories[category],
+						codes: []
+					};
 				}
+
+				featureCodes[category].codes.push({
+					key: callflow.featurecode.name,
+					name: self.i18n.active().featureCodes.labels[callflow.featurecode.name],
+					number: callflow.featurecode.number.replace(/\\/g,'')
+				});
 			});
+
+			return monster.util.sort($.map(featureCodes, function(category) {
+				monster.util.sort(category.codes, 'number');
+				return category;
+			}), 'category');
 		},
 
 		featureCodesBindEvents: function(args) {

views/featureCodes-layout.html

@@ -4,15 +4,22 @@
 	</div>
 	<div class="feature-codes-content">
 		{{#each featureCodes}}
-		<div class="feature-code-line">
-			<div class="feature-code-label">
-				{{this.name}}
+			<div class="feature-codes-category">
+				<div class="category-header">{{this.category}}</div>
+				<div class="category-content">
+					{{#each this.codes}}
+					<div class="feature-code-line">
+						<div class="feature-code-label">
+							{{this.name}}
+						</div>
+						<div class="feature-code">
+							<div class="code-prefix">*</div>
+							<div class="code-number">{{this.number}}</div>
+						</div>
+					</div>
+					{{/each}}
+				</div>
 			</div>
-			<div class="feature-code">
-				<div class="code-prefix">*</div>
-				<div class="code-number">{{this.number}}</div>
-			</div>
-		</div>
 		{{else}}
 		<div class="no-feature-codes">
 			<div class="message">{{i18n.featureCodes.noFeatureCodeMessage}}</div>