UI-3342: Edit and save combo key labels for device (#135)

i18n/de-DE.json

@@ -289,7 +289,9 @@
 			"__comment": "UI-1351: Möglichkeit zur Konfiguration von Funktionstasten für SIP-Geräte in SmartPBX hinzugefügt",
 			"__version": "v3.20_s4",
 			"keys": {
-				"alertMessage": "In der Standardeinstellung wird diese Taste als Leitungstaste verwendet. Wir empfehlen, dies nicht zu ändern.",
+				"alert": {
+					"message": "In der Standardeinstellung wird diese Taste als Leitungstaste verwendet. Wir empfehlen, dies nicht zu ändern."
+				},
 				"featureKeys": {
 					"title": "Funktionstasten",
 					"label": "Funktionstaste"
@@ -299,8 +301,8 @@
 					"label": "Kombitaste"
 				},
 				"labels": {
-					"user": "Benutzer",
 					"parkingSpot": "Halteposition",
+					"user": "Benutzer",
 					"value": "Wert"
 				},
 				"info": {
@@ -314,7 +316,8 @@
 						"parking": "Wird angezeigt, wenn ein Anruf eine Halteposition belegt, die für das gesamte Unternehmen zur Verfügung steht. Die Anzeige kann verwendet werden, um einen Anruf in die Halteposition zu verlegen oder um einen gehaltenen Anruf wieder abzurufen.",
 						"personal_parking": "Wird angezeigt, wenn ein Anruf eine Halteposition belegt, die für den ausgewählten Benutzer vorgesehen ist. Die Anzeige kann verwendet werden, um einen Anruf in die Halteposition zu verlegen oder um einen gehaltenen Anruf wieder abzurufen.",
 						"speed_dial": "Zeigt keine Anrufereignisse an, kann jedoch zum schnellen Anrufen der konfigurierten Nummer verwendet werden."
-					}
+					},
+					"typeTitle": "{{variable}}: "
 				},
 				"types": {
 					"line": "Zeile",

i18n/en-US.json

@@ -293,7 +293,10 @@
 			"__comment": "UI-1351: Add ability to configure feature keys for SIP devices in SmartPBX",
 			"__version": "v3.20_s4",
 			"keys": {
-				"alertMessage": "By default, this key will be used as a Line Key and we recommend you not to change it.",
+				"alert": {
+					"message": "By default, this key will be used as a Line Key. It is strongly recommended that you not change it.",
+					"title": "Key 1 Default"
+				},
 				"featureKeys": {
 					"title": "Feature Keys",
 					"label": "Feature key"
@@ -303,8 +306,10 @@
 					"label": "Combo key"
 				},
 				"labels": {
-					"user": "User",
+					"deviceLabel": "Label on Device",
+					"function": "Function",
 					"parkingSpot": "Parking Spot",
+					"user": "User",
 					"value": "Value"
 				},
 				"info": {
@@ -318,7 +323,8 @@
 						"parking": "Indicate when a call is placed on a parking slot available to the entire company. The indicator can be used to transfer a call to the parking slot or retrieve a parked call.",
 						"personal_parking": "Indicate when a call is placed on a parking slot dedicated to the selected user. The indicator can be used to transfer a call to the parking slot or retrieve a parked call.",
 						"speed_dial": "Does not indicate for any calls event but can be used to rapidly call the configured number."
-					}
+					},
+					"typeTitle": "{{variable}}: "
 				},
 				"types": {
 					"line": "Line",

i18n/es-ES.json

@@ -232,8 +232,8 @@
 				"menuTitle": "Teclas de funciones",
 				"description": "Tecla de funcion",
 				"labels": {
-					"user": "Usuario",
 					"parkingSpot": "El punto de estacionamiento ",
+					"user": "Usuario",
 					"value": "Valor"
 				},
 				"info": {
@@ -246,7 +246,8 @@
 						"parking": "Indicar cuando una llamada a sido puesta en ranura de estacionamiento disponible a la compañía entera. El indicador puede ser usada para transferir una llamada al la ranura de estacionamiento ò contestar una llamada estacionada.",
 						"personal_parking": "Indicar cuando una llamada este puesta en una ranura de estacionamiento dedicada al usuario seleccionado. El indicador puede ser usado para transferir una llamada a la ranura de estacionamiento or recivir una llamada ya estacionada.",
 						"speed_dial": "No es indicada para cualquier evento de llamada pero se puede usar para llamar el número configurado rapidamente."
-					}
+					},
+					"typeTitle": "{{variable}}: "
 				},
 				"types": {
 					"none": "Ningun",

i18n/fr-FR.json

@@ -208,8 +208,8 @@
 				"menuTitle": "Feature Keys",
 				"description": "Feature key",
 				"labels": {
-					"user": "Utilisateur",
 					"parkingSpot": "Place",
+					"user": "Utilisateur",
 					"value": "Valeur"
 				},
 				"info": {
@@ -222,7 +222,8 @@
 						"parking": "Indique lorsqu'un appel est placé sur une place de parking accessible par l'intégralité de l'entreprise. L'indicateur peut être utilisé pour transférer un appel vers la place de parking ou récupérer un appel en attente.",
 						"personal_parking": "Indique lorsqu'un appel est placé sur une place de parking dédié à l'utilisateur sélectionné. L'indicateur peut être utilisé pour transférer un appel vers la place de parking ou récupérer un appel en attente.",
 						"speed_dial": "N'indique pas l'état d'un appel mais peut être utilisé pour appeller rapidement le numéro configuré."
-					}
+					},
+					"typeTitle": "{{variable}}: "
 				},
 				"types": {
 					"none": "Aucun",

i18n/ru-RU.json

@@ -203,7 +203,9 @@
 				"unselectedCodecs": "Доступные кодеки"
 			},
 			"keys": {
-				"alertMessage": "По-умолчанию эта клавиша будет использована как клавиша линии и мы рекомендуем Вам не изменять этого.",
+				"alert": {
+					"message": "По-умолчанию эта клавиша будет использована как клавиша линии и мы рекомендуем Вам не изменять этого."
+				},
 				"featureKeys": {
 					"title": "Функциональные клавиши",
 					"label": "Функциональная клавиша"
@@ -213,8 +215,8 @@
 					"label": "Комбинированная клавиша"
 				},
 				"labels": {
-					"user": "Пользователь",
 					"parkingSpot": "Парковочная орбита",
+					"user": "Пользователь",
 					"value": "Значение"
 				},
 				"info": {
@@ -228,7 +230,8 @@
 						"parking": "Показывать, когда звонок поставлен на парковочную орбиту, доступную всем пользователям. Индикатор может быть использован для парковки звонка или подключения к запаркованному звонку.",
 						"personal_parking": "Показывать, когда звонок поставлен на персональную парковочную орбиту пользователя. Индикатор может быть использован для парковки звонка или подключения к запаркованному звонку.",
 						"speed_dial": "Не отображать события звонка, использовать только для быстрого набора."
-					}
+					},
+					"typeTitle": "{{variable}}: "
 				},
 				"types": {
 					"line": "Линия",

submodules/devices/devices.js

@@ -212,17 +212,13 @@ define(function(require) {
 									});
 
 									var actions = [ 'none', 'presence', 'parking', 'personal_parking', 'speed_dial' ],
-										parkingSpots = [],
+										parkingSpots = _.range(1, 11),	// Array with integer numbers >= 1 and < 11
 										extra;
 
 									users.sort(function(a, b) {
 										return a.last_name.toLowerCase() > b.last_name.toLowerCase() ? 1 : -1;
 									});
 
-									for (var i = 0; i < 10; i++) {
-										parkingSpots[i] = i + 1;
-									}
-
 									_.each(actions, function(action, idx, list) {
 										list[idx] = {
 											id: action,
@@ -244,18 +240,28 @@ define(function(require) {
 									};
 
 									_.each(keyTypes, function(key) {
-										var camelCaseKey = self.devicesSnakeToCamel(key);
+										var camelCaseKey = _.camelCase(key);
 
 										extra.provision.keys.push({
 											id: key,
 											type: camelCaseKey,
 											title: self.i18n.active().devices.popupSettings.keys[camelCaseKey].title,
 											label: self.i18n.active().devices.popupSettings.keys[camelCaseKey].label,
-											data: dataDevice.provision[key]
+											data: _.map(dataDevice.provision[key], function(dataItem) {
+												var value = _.get(dataItem, 'value', {});
+
+												if (_.isString(value)) {
+													dataItem.value = {
+														value: value
+													};
+												}
+
+												return dataItem;
+											})
 										});
 									});
 
-									dataDevice.extra = dataDevice.hasOwnProperty('extra') ? $.extend(true, {}, dataDevice.extra, extra) : extra;
+									dataDevice.extra = _.has(dataDevice, 'extra') ? _.merge({}, dataDevice.extra, extra) : extra;
 
 									self.devicesRenderDevice(dataDevice, callbackSave, callbackDelete);
 								}
@@ -351,25 +357,39 @@ define(function(require) {
 					_.each(value.data, function(val, key) {
 						if (val) {
 							var groupSelector = '.control-group[data-id="' + key + '"] ',
-								valueSelector = '.feature-key-value[data-type="' + val.type + '"]';
+								valueSelector = '.feature-key-value[data-type~="' + val.type + '"]';
 
 							templateDevice
 								.find(section.concat(groupSelector, valueSelector))
-									.addClass('active')
-								.find('[name="provision.keys.' + value.id + '[' + key + '].value"]')
-									.val(val.value);
+								.addClass('active');
+							templateDevice.find(valueSelector + ' [name="provision.keys.' + value.id + '[' + key + '].value.value"]')
+								.val(_.get(val, 'value.value'));
+							templateDevice.find(valueSelector + ' [name="provision.keys.' + value.id + '[' + key + '].value.label"]')
+								.val(_.get(val, 'value.label'));
 						}
 					});
 				});
 
 				templateDevice.find('.keys').sortable({
 					items: '.control-group',
+					placeholder: 'control-group placeholder',
 					update: function() {
-						templateDevice
-								.find('.feature-key-index')
-									.each(function(idx, el) {
-										$(el).text(idx + 1);
-									});
+						var $this = $(this);
+
+						$this
+							.find('.feature-key-index')
+								.each(function(idx, el) {
+									$(el).text(idx + 1);
+								});
+
+						if ($this.data('section') === 'comboKeys') {
+							$this
+								.find('.control-group')
+									.first()
+										.addClass('warning')
+									.siblings('.control-group.warning')
+										.removeClass('warning');
+						}
 					}
 				});
 
@@ -610,10 +630,12 @@ define(function(require) {
 			});
 
 			templateDevice.find('.feature-key-type').on('change', function() {
-				var type = $(this).val();
+				var $this = $(this),
+					type = $this.val(),
+					$featureKeyValue = $this.closest('.feature-key-value');
 
-				$(this).siblings('.feature-key-value.active').removeClass('active');
-				$(this).siblings('.feature-key-value[data-type="' + type + '"]').addClass('active');
+				$featureKeyValue.siblings('.feature-key-value.active[data-type]').removeClass('active');
+				$featureKeyValue.siblings('.feature-key-value[data-type~="' + type + '"]').addClass('active');
 			});
 
 			templateDevice.find('.tabs-section[data-section="featureKeys"] .type-info a').on('click', function() {
@@ -668,7 +690,15 @@ define(function(require) {
 				hasCodecs = $.inArray(originalData.device_type, ['sip_device', 'landline', 'fax', 'ata', 'softphone', 'smartphone', 'mobile', 'sip_uri']) > -1,
 				hasCallForward = $.inArray(originalData.device_type, ['landline', 'cellphone', 'smartphone']) > -1,
 				hasRTP = $.inArray(originalData.device_type, ['sip_device', 'mobile', 'softphone']) > -1,
-				formData = monster.ui.getFormData('form_device');
+				formData = monster.ui.getFormData('form_device'),
+				isValuePropertyEmpty = function(data, property) {
+					return _
+						.chain(data)
+						.get(['value', property])
+						.trim()
+						.isEmpty()
+						.value();
+				};
 
 			if ('mac_address' in formData) {
 				formData.mac_address = monster.util.formatMacAddress(formData.mac_address);
@@ -711,7 +741,7 @@ define(function(require) {
 				});
 			}
 
-			if (formData.hasOwnProperty('provision') && formData.provision.hasOwnProperty('keys')) {
+			if (_.has(formData, 'provision.keys')) {
 				/**
 				 * form2object sends keys back as arrays even if the first key is 1
 				 * they needs to be coerced into an object to match the datatype in originalData
@@ -719,8 +749,23 @@ define(function(require) {
 				_.each(formData.provision.keys, function(value, key, list) {
 					var keys = {};
 
-					list[key].forEach(function(val, idx) {
-						keys[idx] = val.type === 'none' ? null : val;
+					_.each(list[key], function(val, idx) {
+						if (val.type === 'none') {
+							keys[idx] = null;
+						} else {
+							if (val.type === 'parking') {
+								val.value.value = _.parseInt(val.value.value, 10);
+							}
+
+							if (key !== 'combo_keys' || isValuePropertyEmpty(val, 'label')) {
+								if (isValuePropertyEmpty(val, 'value')) {
+									delete val.value;
+								} else {
+									val.value = val.value.value;
+								}
+							}
+							keys[idx] = val;
+						}
 					});
 
 					if (_.isEmpty(keys)) {
@@ -1044,10 +1089,6 @@ define(function(require) {
 			return formattedData;
 		},
 
-		devicesSnakeToCamel: function(string) {
-			return string.replace(/(_\w)/g, function(match) { return match[1].toUpperCase(); });
-		},
-
 		/* Utils */
 		devicesDeleteDevice: function(deviceId, callback) {
 			var self = this;

submodules/devices/views/devices-sip_device.html

@@ -321,92 +321,105 @@
 
 		{{#each extra.provision.keys}}
 			<div class="tabs-section clearfix keys" data-section="{{type}}">
-				<div class="title">
-					{{{title}}}
-				</div>
-				<div class="type-info helper">
-					<a href="javascript:void(0);" data-toggle="collapse" data-target="#info_content_{{type}}">
-						<i class="fa fa-question-circle"></i>
-						<span class="text">
-							{{ @root.i18n.devices.popupSettings.keys.info.link.showInfo }}
-						</span>
-					</a>
-					<div id="info_content_{{type}}" class="collapse">
-					{{#each @root.extra.provision.keyActions}}
-						{{#if info}}
-						<p>
-							<strong>
-								{{text}}
-							</strong>
-							: {{info}}
-						</p>
-						{{/if}}
-					{{/each}}
-					{{#compare id '===' 'combo_keys'}}
-						<p>
-							<strong>
-								{{@root.i18n.devices.popupSettings.keys.types.line}}
-							</strong>
-							: {{@root.i18n.devices.popupSettings.keys.info.types.line}}
-						</p>
-					{{/compare}}
+				<div class="section-header">
+					<div class="title">
+						{{{title}}}
+					</div>
+					<div class="type-info helper">
+						<a href="javascript:void(0);" data-toggle="collapse" data-target="#info_content_{{type}}">
+							<span class="text">
+								{{ @root.i18n.devices.popupSettings.keys.info.link.showInfo }}
+							</span>
+							{{telicon 'question--circle'}}
+						</a>
+						<div id="info_content_{{type}}" class="collapse">
+						{{#each @root.extra.provision.keyActions}}
+							{{#if info}}
+							<p>
+								<strong>
+									{{replaceVar @root.i18n.devices.popupSettings.keys.info.typeTitle text}}
+								</strong>
+								{{info}}
+							</p>
+							{{/if}}
+						{{/each}}
+						{{#compare id '===' 'combo_keys'}}
+							<p>
+								<strong>
+									{{replaceVar @root.i18n.devices.popupSettings.keys.info.typeTitle @root.i18n.devices.popupSettings.keys.types.line}}
+								</strong>
+								{{@root.i18n.devices.popupSettings.keys.info.types.line}}
+							</p>
+						{{/compare}}
+						</div>
 					</div>
 				</div>
+				<div class="section-content">
 				{{#each data}}
-				<div class="control-group{{#compare ../id '===' 'combo_keys'}}{{#compare @key '===' '0'}} error{{/compare}}{{/compare}}" data-id="{{@key}}">
-					{{#compare ../id '===' 'combo_keys'}}
-						{{#compare @key '===' '0'}}
-							<div class="alert alert-error">
-								{{@root.i18n.devices.popupSettings.keys.alertMessage}}
-							</div>
+					<div class="control-group{{#compare ../id '===' 'combo_keys'}}{{#if @first}} warning{{/if}}{{/compare}}" data-id="{{@key}}">
+						<label for="provision.keys.{{../id}}[{{@key}}].type" class="control-label">
+							{{telicon 'drag-handle' class='drag-handle-icon'}}
+							<span>{{ ../label }}</span> <span class="feature-key-index">{{@key}}</span>
+						</label>
+						{{#compare ../id '===' 'combo_keys'}}
+							{{#monsterPanelText @root.i18n.devices.popupSettings.keys.alert.title 'warning' 'fill-width'}}
+								{{@root.i18n.devices.popupSettings.keys.alert.message}}
+							{{/monsterPanelText}}
 						{{/compare}}
-					{{/compare}}
-					<label for="provision.keys.{{../id}}[{{@key}}].type" class="control-label">
-						<i class="fa fa-reorder monster-gray"></i>
-						{{ ../label }} <span class="feature-key-index">{{@key}}</span>
-					</label>
-					<div class="controls">
-						<select name="provision.keys.{{../id}}[{{@key}}].type" class="feature-key-type span2">
-						{{#select type}}
-							{{#each @root.extra.provision.keyActions}}
-								<option value="{{id}}">{{text}}</option>
-							{{/each}}
+						<div class="controls">
+							<div class="feature-key-value active">
 							{{#compare ../id '===' 'combo_keys'}}
-								<option value="line">{{@root.i18n.devices.popupSettings.keys.types.line}}</option>
+								<label for="provision.keys.{{../id}}[{{@key}}].type">{{ @root.i18n.devices.popupSettings.keys.labels.function }}</label>
 							{{/compare}}
-						{{/select}}
-						</select>
-						<div class="feature-key-value" data-type="presence">
-							<label for="provision.keys.{{../id}}[{{@key}}].value">{{ @root.i18n.devices.popupSettings.keys.labels.user }}</label>
-							<select name="provision.keys.{{../id}}[{{@key}}].value" class="chosen-feature-key-user">
-							{{#each @root.extra.provision.users}}
-								<option value="{{id}}">{{first_name}} {{last_name}}</option>
-							{{/each}}
-							</select>
-						</div>
-						<div class="feature-key-value" data-type="parking">
-							<label for="provision.keys.{{../id}}[{{@key}}].value">{{ @root.i18n.devices.popupSettings.keys.labels.parkingSpot }}</label>
-							<select class="span1" name="provision.keys.{{../id}}[{{@key}}].value">
-							{{#each @root.extra.provision.parkingSpots}}
-								<option value="{{this}}">{{this}}</option>
-							{{/each}}
-							</select>
-						</div>
-						<div class="feature-key-value" data-type="personal_parking">
-							<label for="provision.keys.{{../id}}[{{@key}}].value">{{ @root.i18n.devices.popupSettings.keys.labels.user }}</label>
-							<select name="provision.keys.{{../id}}[{{@key}}].value" class="chosen-feature-key-user">
-							{{#each @root.extra.provision.users}}
-								<option value="{{id}}">{{first_name}} {{last_name}}</option>
-							{{/each}}
-							</select>
-						</div>
-						<div class="feature-key-value" data-type="speed_dial">
-							<label for="provision.keys.{{../id}}[{{@key}}].value">{{ @root.i18n.devices.popupSettings.keys.labels.value }}</label>
-							<input type="text" value="" name="provision.keys.{{../id}}[{{@key}}].value">
+								<select name="provision.keys.{{../id}}[{{@key}}].type" class="feature-key-type span2">
+								{{#select type}}
+									{{#each @root.extra.provision.keyActions}}
+										<option value="{{id}}">{{text}}</option>
+									{{/each}}
+									{{#compare ../id '===' 'combo_keys'}}
+										<option value="line">{{@root.i18n.devices.popupSettings.keys.types.line}}</option>
+									{{/compare}}
+								{{/select}}
+								</select>
+							</div>
+							<div class="feature-key-value" data-type="presence">
+								<label for="provision.keys.{{../id}}[{{@key}}].value.value">{{ @root.i18n.devices.popupSettings.keys.labels.user }}</label>
+								<select name="provision.keys.{{../id}}[{{@key}}].value.value" class="chosen-feature-key-user">
+								{{#each @root.extra.provision.users}}
+									<option value="{{id}}">{{first_name}} {{last_name}}</option>
+								{{/each}}
+								</select>
+							</div>
+							<div class="feature-key-value" data-type="parking">
+								<label for="provision.keys.{{../id}}[{{@key}}].value.value">{{ @root.i18n.devices.popupSettings.keys.labels.parkingSpot }}</label>
+								<select class="span1" name="provision.keys.{{../id}}[{{@key}}].value.value">
+								{{#each @root.extra.provision.parkingSpots}}
+									<option value="{{this}}">{{this}}</option>
+								{{/each}}
+								</select>
+							</div>
+							<div class="feature-key-value" data-type="personal_parking">
+								<label for="provision.keys.{{../id}}[{{@key}}].value.value">{{ @root.i18n.devices.popupSettings.keys.labels.user }}</label>
+								<select name="provision.keys.{{../id}}[{{@key}}].value.value" class="chosen-feature-key-user">
+								{{#each @root.extra.provision.users}}
+									<option value="{{id}}">{{first_name}} {{last_name}}</option>
+								{{/each}}
+								</select>
+							</div>
+							<div class="feature-key-value" data-type="speed_dial">
+								<label for="provision.keys.{{../id}}[{{@key}}].value.value">{{ @root.i18n.devices.popupSettings.keys.labels.value }}</label>
+								<input type="text" value="" name="provision.keys.{{../id}}[{{@key}}].value.value">
+							</div>
+						{{#compare ../id '===' 'combo_keys'}}
+							<div class="feature-key-value" data-type="presence personal_parking speed_dial parking">
+								<label for="provision.keys.{{../id}}[{{@key}}].value.label">{{ @root.i18n.devices.popupSettings.keys.labels.deviceLabel }}</label>
+								<input type="text" value="" name="provision.keys.{{../id}}[{{@key}}].value.label">
+							</div>
+						{{/compare}}
 						</div>
 					</div>
-				</div>
 				{{/each}}
+				</div>
 			</div>
 		{{/each}}
 		</form>