UI-1206: Added the CID prepend feature to SmartPBX's User Groups

i18n/en-US.json

@@ -116,6 +116,15 @@
 				"3": "Purchase, Port and Assign numbers. Once complete, it will automatically be assigned to the specific User Group.",
 				"4": "Turn on/off and seamlessly manage any of the User Features specific to the User Group."
 			}
+		},
+
+		"__comment": "UI-1206: Adding a feature to add a Caller ID prepend on groups",
+		"__version": "3.22",
+		"prepend": {
+			"title": "Caller ID Prepend",
+			"headline": "Caller ID Prepend",
+			"cidNameLabel": "Caller ID Name prefix",
+			"cidNumberLabel": "Caller ID Number prefix"
 		}
 	},
 

submodules/groups/groups.css

@@ -424,9 +424,8 @@
 	display: inline-block;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
-
 	box-sizing: border-box;
-	width: 25%;
+	width: 33.33%;
 	height: 150px;
 	border: 1px solid #FFF;
 	text-align: center;
@@ -547,7 +546,26 @@
 }
 
 
-/* Next Action Feature */
+/* Allow Call Forward Feature */
 .feature-popup-container[data-feature="forward"] .help-box {
 	margin: 5px 20px 20px
+}
+
+/* CID Prepend Feature */
+.feature-popup-container[data-feature="prepend"] form {
+	margin-bottom: 0;
+}
+.feature-popup-container[data-feature="prepend"] form > div {
+	position: relative;
+	margin-bottom: 10px;
+}
+.feature-popup-container[data-feature="prepend"] form span {
+	display: inline-block;
+	width: 160px;
+	vertical-align: middle;
+	text-align: right;
+}
+.feature-popup-container[data-feature="prepend"] form input {
+	margin-bottom: 0;
+	width: 100px;
 }

submodules/groups/groups.js

@@ -146,6 +146,11 @@ define(function(require){
 							icon: 'fa fa-mail-forward',
 							iconColor: 'monster-orange',
 							title: self.i18n.active().groups.forward.title
+						},
+						prepend: {
+							icon: 'fa fa-file-text-o',
+							iconColor: 'monster-pink',
+							title: self.i18n.active().groups.prepend.title
 						}
 					},
 					hasFeatures: false
@@ -226,9 +231,9 @@ define(function(require){
 					emptySearch = template.find('.groups-rows .empty-search-row');
 
 				_.each(rows, function(row) {
-					var row = $(row);
+					var $row = $(row);
 
-					row.data('search').toLowerCase().indexOf(searchString) < 0 ? row.hide() : row.show();
+					$row.data('search').toLowerCase().indexOf(searchString) < 0 ? $row.hide() : $row.show();
 				});
 
 				if(rows.size() > 0) {
@@ -471,17 +476,22 @@ define(function(require){
 			template.find('.feature[data-feature="forward"]').on('click', function() {
 				self.groupsRenderForward(data);
 			});
+
+			template.find('.feature[data-feature="prepend"]').on('click', function() {
+				self.groupsRenderPrepend(data);
+			});
 		},
 
 		groupsRenderCallRecording: function(data) {
 			var self = this,
+				recordCallNode = monster.util.findCallflowNode(data.callflow, 'record_call'),
 				templateData = $.extend(true, {
 												group: data.group
 											},
-											(data.group.extra.mapFeatures.call_recording.active ? {
-												url: data.callflow.flow.data.url,
-												format: data.callflow.flow.data.format,
-												timeLimit: data.callflow.flow.data.time_limit
+											(data.group.extra.mapFeatures.call_recording.active && recordCallNode ? {
+												url: recordCallNode.data.url,
+												format: recordCallNode.data.format,
+												timeLimit: recordCallNode.data.time_limit
 											} : {})
 										),
 				featureTemplate = $(monster.template(self, 'groups-feature-call_recording', templateData)),
@@ -519,21 +529,23 @@ define(function(require){
 
 					if(data.group.smartpbx.call_recording.enabled || enabled) {
 						data.group.smartpbx.call_recording.enabled = enabled;
-						var newCallflow = $.extend(true, {}, data.callflow);
+						var newCallflow = $.extend(true, {}, data.callflow),
+							currentNode = monster.util.findCallflowNode(newCallflow, 'record_call') || monster.util.findCallflowNode(newCallflow, 'callflow');
 						if(enabled) {
-							if(newCallflow.flow.module === 'record_call') {
-								newCallflow.flow.data = $.extend(true, { action: "start" }, formData);
+
+							if(currentNode.module === 'record_call') {
+								currentNode.data = $.extend(true, { action: "start" }, formData);
 							} else {
-								newCallflow.flow = {
-									children: {
-										"_": $.extend(true, {}, data.callflow.flow)
-									},
-									module: "record_call",
-									data: $.extend(true, { action: "start" }, formData)
-								}
+								currentNode.children = {
+									"_": $.extend(true, {}, currentNode)
+								};
+								currentNode.module = "record_call";
+								currentNode.data = $.extend(true, { action: "start" }, formData);
 							}
-						} else {
-							newCallflow.flow = $.extend(true, {}, data.callflow.flow.children["_"]);
+						} else if(currentNode.module === 'record_call') {
+							currentNode.module = currentNode.children["_"].module;
+							currentNode.data = currentNode.children["_"].data;
+							currentNode.children = currentNode.children["_"].children;
 						}
 						self.groupsUpdateCallflow(newCallflow, function(updatedCallflow) {
 							self.groupsUpdate(data.group, function(updatedGroup) {
@@ -755,14 +767,11 @@ define(function(require){
 				if(data.group.smartpbx.next_action.enabled || enabled) {
 					data.group.smartpbx.next_action.enabled = enabled;
 					var newCallflow = $.extend(true, {}, data.callflow),
-						newFlow = newCallflow.flow;
+						callflowNode = monster.util.findCallflowNode(newCallflow, 'callflow');
 
-					if(newFlow.module === 'record_call') {
-						newFlow = newFlow.children['_'];
-					}
-					newFlow.children = {};
+					callflowNode.children = {};
 					if(enabled) {
-						newFlow.children['_'] = {
+						callflowNode.children['_'] = {
 							children: {},
 							module: selectedOption.data('module'),
 							data: { id: selectedOption.val() }
@@ -831,6 +840,76 @@ define(function(require){
 			});
 		},
 
+		groupsRenderPrepend: function(data) {
+			var self = this,
+				prependNode = monster.util.findCallflowNode(data.callflow, 'prepend_cid'),
+				templateData = $.extend(true, {
+												group: data.group
+											},
+											(data.group.extra.mapFeatures.call_recording.active && prependNode ? {
+												caller_id_name_prefix: prependNode.data.caller_id_name_prefix,
+												caller_id_number_prefix: prependNode.data.caller_id_number_prefix
+											} : {})
+										),
+				featureTemplate = $(monster.template(self, 'groups-feature-prepend', templateData)),
+				switchFeature = featureTemplate.find('.switch-state'),
+				popup;
+
+			featureTemplate.find('.cancel-link').on('click', function() {
+				popup.dialog('close').remove();
+			});
+
+			switchFeature.on('change', function() {
+				$(this).prop('checked') ? featureTemplate.find('.content').slideDown() : featureTemplate.find('.content').slideUp();
+			});
+
+			featureTemplate.find('.save').on('click', function() {
+				var enabled = switchFeature.prop('checked'),
+					prependData = $.extend(true, { action: 'prepend' }, monster.ui.getFormData('prepend_form'));
+
+				if(!('smartpbx' in data.group)) { data.group.smartpbx = {}; }
+				if(!('prepend' in data.group.smartpbx)) {
+					data.group.smartpbx.prepend = {
+						enabled: false
+					};
+				}
+
+				if(data.group.smartpbx.prepend.enabled || enabled) {
+					data.group.smartpbx.prepend.enabled = enabled;
+					var newCallflow = $.extend(true, {}, data.callflow);
+					if(enabled) {
+						if(newCallflow.flow.module !== 'prepend_cid') {
+							newCallflow.flow = {
+								children: {
+									"_": $.extend(true, {}, data.callflow.flow)
+								},
+								module: 'prepend_cid',
+								data: prependData
+							}
+						}
+					} else {
+						if(prependNode) {
+							newCallflow.flow = $.extend(true, {}, prependNode.children["_"]);
+						}
+					}
+					self.groupsUpdateCallflow(newCallflow, function(updatedCallflow) {
+						self.groupsUpdate(data.group, function(updatedGroup) {
+							popup.dialog('close').remove();
+							self.groupsRender({ groupId: data.group.id });
+						});
+					});
+				} else {
+					popup.dialog('close').remove();
+					self.groupsRender({ groupId: data.group.id });
+				}
+			});
+
+			popup = monster.ui.dialog(featureTemplate, {
+				title: data.group.extra.mapFeatures.prepend.title,
+				position: ['center', 20]
+			});
+		},
+
 		groupsBindName: function(template, data) {
 			var self = this,
 				nameForm = template.find('#form-name');

views/groups-feature-prepend.html

@@ -0,0 +1,33 @@
+<div class="feature-popup-container" data-feature="prepend">
+	<div class="feature-popup-title">
+		<div class="feature-fa-wrapper">
+			<i class="{{group.extra.mapFeatures.prepend.icon}}"></i>
+		</div>
+		{{ i18n.groups.prepend.headline }}
+		<div class="switch">
+		{{#monsterSwitch}}
+			<input class="switch-state" type="checkbox" data-on="{{i18n.enabled}}" data-off="{{i18n.disabled}}"{{#if group.extra.mapFeatures.prepend.active}} checked="checked"{{/if}}></input>
+		{{/monsterSwitch}}
+		</div>
+	</div>
+
+	<div class="content{{#unless group.extra.mapFeatures.prepend.active}} disabled{{/unless}}">
+		<form id="prepend_form">
+			<div>
+				<span>{{ i18n.groups.prepend.cidNameLabel }}</span>
+				<input required name="caller_id_name_prefix" type="text" value="{{caller_id_name_prefix}}">
+			</div>
+			<div>
+				<span>{{ i18n.groups.prepend.cidNumberLabel }}</span>
+				<input required name="caller_id_number_prefix" type="text" value="{{caller_id_number_prefix}}">
+			</div>
+		</form>
+	</div>
+
+	<div class="actions clearfix">
+		<div class="pull-right">
+			<a class="cancel-link monster-link blue" href="javascript:void(0);">{{ i18n.cancel }}</a>
+			<button type="button" class="monster-button monster-button-success save">{{ i18n.saveChanges }}</button>
+		</div>
+	</div>
+</div>