TT#14851 Csc pbx consolidation, fixed, validation

What's done:
 1. Reorder menu to groups, seats, devices order
 2. Map out the data flow, see workfront docs
 3. Plan data store merge implementation
 4. Plan out what needs validation, and is required
 5. Implement validation in view and controller
 7. Fix bug in Groups module, where hunt 'for' label does not get
    extra margin-top when saved with enter, only with button
 8. Implement store merge as per Cvenusinos suggestion
    a. introduce in Groups data/model a unique id field (was already
       there)
    b. change seat data to have the groups field as array of group ids
    c. where you assign the value of groups label in seat card, you
       have to iterate&find the records in Groups store which have the
       ids of groups field in seat record, and extract the names
    d. as for the tagfield, you have to use Groups store
    e. define valueField and displayField using fields which exists in
       group model (id & name for example)
    f. if the store has autoLoad: true (=dropdown populated),
       binding the groups field in seat model to the array of ids
       should automatically display the selected group names
    g. Filter out field arrays where fieldLabel is "User" or "Type"
 9. Fix bugs with "delayed" save, or "first save not working when
    adding new seat or group"
 10. Change blur listener controller to only save, and not hide
 11. Issue with saving of name field in Groups and Devices (not
     Seats). Only happens when clicking button/save-icon, and for
     dirty record. It gets saved, but fields not hidden. A second
     click hides
 12. Issue with cut off of cards in relation to issue 11, same
     steps to reproduce

Change-Id: I2af41a6e9799b7cbd268b1217ed49b9381272d6a

app/model/Device.js

@@ -35,6 +35,8 @@ Ext.define('NgcpCsc.model.Device', {
                 var lineHorizontalCls = seat.name ? 'connection-left-right-assigned' : 'connection-left-right-unassigned';
                 var lineVerticalCls = seat.name ? 'connection-top-bottom-assigned' : 'connection-top-bottom-unassigned';
                 var btnPos = "top:" + seat.position.top + ";left:" + seat.position.left;
+                var store = Ext.getStore('Seats');
+                var seatNameToFullName = seat.name ? store.findRecord('id', seat.name).get('name') : '';
                 var rectPos,
                     top = seat.position.top,
                     left = seat.position.left,
@@ -69,7 +71,7 @@ Ext.define('NgcpCsc.model.Device', {
                 retVal += '<div><span data-qtip="' + Ngcp.csc.locales.pbxconfig.devices.tooltip.click[localStorage.getItem('languageSelected')] + '" data-onseathovered="seatHovered" data-onseatclick="editSeat" class="' + buttonInfoCls + ' pointer card-icon" style="top:' +
                     top + ';left:' + left + ';" id="seat-info' +
                     rec.get('id') + "-" + seat.order + '">' +
-                    '<span class="button-info-order-' + orderClsPrefix + 'assigned">' + seat.order + '</span>' + (seat.name || '') + '</span><span class="' +
+                    '<span class="button-info-order-' + orderClsPrefix + 'assigned">' + seat.order + '</span>' + (seatNameToFullName || '') + '</span><span class="' +
                     lineCls + '" style="height:' + lineHeight + ';width:' +
                     lineWidth + ';top:' + lineTop + ';left:' +
                     lineLeft + ';"></span><span id="seat-"' +

app/model/Group.js

@@ -2,6 +2,9 @@ Ext.define('NgcpCsc.model.Group', {
     extend: 'Ext.data.Model',
 
     fields: [{
+        name: 'id',
+        type: 'string'
+    }, {
         name: 'name',
         type: 'string'
     }, {

app/model/Seat.js

@@ -21,7 +21,7 @@ Ext.define('NgcpCsc.model.Seat', {
         type: 'string',
         depends: ['alias_numbers'],
         convert: function (v, record) {
-            var dataToSplit = record.data.alias_numbers.toString();
+            var dataToSplit = record.data.alias_numbers;
             return dataToSplit.replace(/,/g, ", ");
         }
     }, {
@@ -29,8 +29,17 @@ Ext.define('NgcpCsc.model.Seat', {
         type: 'string',
         depends: ['groups'],
         convert: function (v, record) {
-            var dataToSplit = record.data.groups.toString();
+            var dataToSplit = record.data.groups;
-            return dataToSplit.replace(/,/g, ", ");
+            var dataInArray = dataToSplit.split(',');
+            var resultArray = [];
+            var store = Ext.getStore('Groups');
+            for (var data in dataInArray) {
+                var rec = store.findRecord('id', dataInArray[data]);
+                var nameToPush = rec ? rec.get('name') : '';
+                resultArray.push(nameToPush);
+            }
+            var result = resultArray.join(', ');
+            return result;
         }
     }]
 

app/store/GroupNames.js

@@ -1,17 +0,0 @@
-Ext.define('NgcpCsc.store.GroupNames', {
-    extend: 'Ext.data.Store',
-
-    storeId: 'GroupNames',
-
-    autoLoad: true,
-
-    proxy: {
-        type: 'ajax',
-        url: '/resources/data/groupNames.json',
-        reader: {
-            type: 'json',
-            rootProperty: 'data'
-        }
-    }
-
-});

app/store/NavigationTree.js

@@ -98,19 +98,19 @@ Ext.define('NgcpCsc.store.NavigationTree', {
             routeId: 'pbxconfig',
             acl: ['administrator', 'restricted', 'host'],
             children: [{
-                text: 'Seats',
-                iconCls: Ngcp.csc.icons.home,
-                viewType: 'seats',
-                routeId: 'pbxconfig/seats',
-                acl: ['administrator'],
-                leaf: true
-            }, {
                 text: 'Groups',
                 iconCls: Ngcp.csc.icons.users,
                 viewType: 'groups',
                 routeId: 'pbxconfig/groups',
                 acl: ['administrator'],
                 leaf: true
+            }, {
+                text: 'Seats',
+                iconCls: Ngcp.csc.icons.home,
+                viewType: 'seats',
+                routeId: 'pbxconfig/seats',
+                acl: ['administrator'],
+                leaf: true
             }, {
                 text: 'Devices',
                 iconCls: Ngcp.csc.icons.fax,

app/utils/locales.js

@@ -1907,6 +1907,20 @@ Ext.define('Ngcp.csc.locales', {
                 fr: 'for',
                 sp: 'for'
             },
+            valid_mac_address: {
+                en: 'Must be a valid mac address',
+                it: 'Must be a valid mac address',
+                de: 'Must be a valid mac address',
+                fr: 'Must be a valid mac address',
+                sp: 'Must be a valid mac address'
+            },
+            digit_extension_number: {
+                en: 'Must be a 3 digit extension number',
+                it: 'Must be a 3 digit extension number',
+                de: 'Must be a 3 digit extension number',
+                fr: 'Must be a 3 digit extension number',
+                sp: 'Must be a 3 digit extension number'
+            },
             autoattendant: {
                 title: {
                     en: 'Your auto attendants.',
@@ -2041,6 +2055,13 @@ Ext.define('Ngcp.csc.locales', {
                 fr: 'All fields are required. Please fill and try again.',
                 sp: 'All fields are required. Please fill and try again.'
             },
+            field_invalid: {
+                en: 'Field invalid. See field alert for info.',
+                it: 'Field invalid. See field alert for info.',
+                de: 'Field invalid. See field alert for info.',
+                fr: 'Field invalid. See field alert for info.',
+                sp: 'Field invalid. See field alert for info.'
+            },
             field_required: {
                 en: '{0} cannot be empty.',
                 it: '{0} cannot be empty.',

classic/sass/src/view/pages/pbxconfig/PbxConfig.scss

@@ -23,19 +23,16 @@
         font-size: 15px;
         margin-left: -10px;
     }
-
     .x-box-item {
         .x-panel-body,
         label {
             background: white;
         }
     }
-
     .pbx-hunt-labels-and-fields {
         display: inline-block;
         float: left;
     }
-
     .pbx-margin-top {
         margin-top: 5px !important;
     }

classic/src/Application.js

@@ -31,7 +31,6 @@ Ext.define('NgcpCsc.Application', {
         'Destinations',
         'Sounds',
         'AliasNumbers',
-        'GroupNames',
         'PrimaryNumbers',
         'HuntPolicies',
         'CallForwardLocalStorage'

classic/src/view/common/gridfilters/GridFilters.js

@@ -180,20 +180,23 @@ Ext.define('NgcpCsc.view.common.gridfilters.GridFilters', {
                         delay: 100,
                         change: 'submitFilters'
                     }
-                }, {
+                }
-                    xtype: 'tagfield',
+                // TODO: Needs adjusting in gridfilters task
-                    labelAlign: 'top',
+                // {
-                    store: 'GroupNames',
+                //     xtype: 'tagfield',
-                    displayField: 'group',
+                //     labelAlign: 'top',
-                    valueField: 'group',
+                //     store: 'GroupNames',
-                    width: 250,
+                //     displayField: 'group',
-                    bind: '{filtergrid.groups}',
+                //     valueField: 'group',
-                    fieldLabel: Ngcp.csc.locales.filters.groups[localStorage.getItem('languageSelected')],
+                //     width: 250,
-                    listeners: {
+                //     bind: '{filtergrid.groups}',
-                        delay: 100,
+                //     fieldLabel: Ngcp.csc.locales.filters.groups[localStorage.getItem('languageSelected')],
-                        change: 'submitFilters'
+                //     listeners: {
-                    }
+                //         delay: 100,
-                }]
+                //         change: 'submitFilters'
+                //     }
+                // }
+                ]
             }]
         }, {
             xtype: 'form',

classic/src/view/pages/pbxconfig/PbxConfigController.js

@@ -12,8 +12,8 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         }
     },
 
-    afterPbxContRendered: function(cmp){
+    afterPbxContRendered: function(cmp) {
-        cmp.on('resize', function(){
+        cmp.on('resize', function() {
             cmp.fireEvent('cardContainerResized', cmp);
         });
     },
@@ -33,22 +33,37 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         };
     },
 
-    onEnterPressed: function(field, el) {
+    onEnterPressed: function(field, event) {
         var me = this;
-        if (el.getKey() == el.ENTER) {
+        if (event.getKey() == event.ENTER) {
             var currentRoute = window.location.hash;
             var storeName = this.getStoreFromRoute(currentRoute);
             var recId = field.id.split("-")[3];
             var iconDivId = 'edit' + storeName.slice(0, -1) + '-' + recId;
             var iconDiv = document.getElementById(iconDivId);
-            me.saveCard(iconDiv);
+            me.saveCard(iconDiv, true);
         };
     },
 
     onIconClicked: function(event, el) {
         if (el.dataset.callback) {
+            var fields = this.getView().query('textfield');
+            var fieldToKeepFocused;
+            for (i = 0; i < fields.length; i++) {
+                if (fields[i].hasFocus) {
+                    fieldToKeepFocused = fields[i];
+                }
+            }
             // eval is never the best option
-            Ext.Function.defer(eval('this.' + el.dataset.callback), 1, this, [el]);
+            Ext.Function.defer(eval('this.' + el.dataset.callback), 1, this, [el, true]);
+            if (fieldToKeepFocused) {
+                fieldToKeepFocused.suspendEvent('blur');
+                Ext.Function.defer(
+                    function() {
+                        fieldToKeepFocused.resumeEvent('blur');
+                    }, 50
+                );
+            }
         };
     },
 
@@ -107,6 +122,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         var store = Ext.getStore(storeName);
         plugin.toggleRow(store.indexOf(rec), rec);
         plugin.toggleRow(store.indexOf(rec), rec);
+        grid.updateLayout();
     },
 
     getFieldComponent: function(view, key, id) {
@@ -133,22 +149,53 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         };
     },
 
-    showMsgSwitchIconHideFields: function(storeName, el, saved) {
+    showMsgSwitchIconHideFields: function(storeName, el, toggleFields, saved) {
+        var me = this;
         var elClassList = el.firstChild.classList;
         var recId = el.id.split("-")[1];
         var store = Ext.getStore(storeName);
         saved === true ?
             this.fireEvent('showmessage', true, Ngcp.csc.locales.pbxconfig.changes_saved[localStorage.getItem('languageSelected')]) :
             this.fireEvent('showmessage', false, Ngcp.csc.locales.pbxconfig.no_changes_saved[localStorage.getItem('languageSelected')]);
-        elClassList.remove(Ngcp.csc.icons.floppy.split(' ')[1]);
+        Ext.Function.defer(function() {
-        elClassList.add(Ngcp.csc.icons.edit.split(' ')[1]);
+            if (toggleFields) {
-        el.dataset.callback = 'editCard';
+                elClassList.remove(Ngcp.csc.icons.floppy.split(' ')[1]);
-        el.dataset.qtip = Ngcp.csc.locales.filters.tooltips.edit_entry[localStorage.getItem('languageSelected')];
+                elClassList.add(Ngcp.csc.icons.edit.split(' ')[1]);
-        this.showHideFocusFieldsById(recId, storeName, 'hide');
+                el.dataset.callback = 'editCard';
-        this.toggleCancelCard(el, 'off');
+                el.dataset.qtip = Ngcp.csc.locales.filters.tooltips.edit_entry[localStorage.getItem('languageSelected')];
+                me.showHideFocusFieldsById(recId, storeName, 'hide');
+                me.toggleCancelCard(el, 'off');
+            };
+        }, 1);
     },
 
-    saveCard: function(el) {
+    filterInvalidFields: function(invalidFields) {
+        var newFieldsArray = invalidFields.filter(function(item) {
+            switch (item.fieldLabel) {
+                case 'User':
+                case 'Type':
+                    return false;
+                    break;
+                default:
+                    return true;
+            };
+        });
+        return newFieldsArray;
+    },
+
+    getToggleFieldsValue: function(toggleFields) {
+        switch (toggleFields) {
+            case true:
+            case undefined:
+                return true;
+                break;
+            case false:
+                return false;
+                break;
+        };
+    },
+
+    saveCard: function(el, toggleFields) {
         var me = this;
         var elClassList = el.firstChild.classList;
         var currentRoute = window.location.hash;
@@ -161,37 +208,40 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         var form = Ext.ComponentQuery.query('#' + storeName.toLowerCase() + '-' + recId)[0];
         var labels = form.query('label');
         var formFields = form.query('textfield, combo');
-        var invalidCheck = 0;
+        var invalidFields = form.query("field{isValid()==false}");
+        var invalidFieldsFiltered = me.filterInvalidFields(invalidFields);
+        var emptyCheck = 0;
+        var invalidCheck = invalidFieldsFiltered.length;
+        var toggleFieldsValue = me.getToggleFieldsValue(toggleFields);
         for (var field in formFields) {
             var fieldValue = formFields[field].value;
             if (!formFields[field]._skipSaveValidation && Ext.isEmpty(formFields[field].value)) {
-                invalidCheck++;
+                emptyCheck++;
             }
         };
-        switch (invalidCheck === 0) {
+        if (emptyCheck === 0 && invalidCheck === 0) {
-            case true:
+            for (var field in formFields) {
-                for (var field in formFields) {
+                var recKey = formFields[field].id.split('-')[2];
-                    var recKey = formFields[field].id.split('-')[2];
+                var fieldValue = formFields[field].value;
-                    var fieldValue = formFields[field].value;
+                if (rec.get(recKey) != fieldValue) {
-                    if (rec.get(recKey) != fieldValue) {
+                    rec.set(recKey, fieldValue);
-                        rec.set(recKey, fieldValue);
-                    };
-                };
-                switch (rec.dirty) {
-                    case true:
-                        store.commitChanges();
-                        this.keepRowExpanded(grid, rec);
-                        me.showMsgSwitchIconHideFields(storeName, el, true);
-                        break;
-                    case false:
-                        me.showMsgSwitchIconHideFields(storeName, el, false);
-                        break;
                 };
-                break;
+            };
-            case false:
+            switch (rec.dirty) {
-                me.fireEvent('showmessage', false, Ngcp.csc.locales.common.fields_required[localStorage.getItem('languageSelected')]);
+                case true:
-                break;
+                    store.commitChanges();
-        };
+                    this.keepRowExpanded(grid, rec);
+                    me.showMsgSwitchIconHideFields(storeName, el, toggleFieldsValue, true);
+                    break;
+                case false:
+                    me.showMsgSwitchIconHideFields(storeName, el, toggleFieldsValue, false);
+                    break;
+            };
+        } else if (emptyCheck > 0) {
+            me.fireEvent('showmessage', false, Ngcp.csc.locales.common.fields_required[localStorage.getItem('languageSelected')]);
+        } else if (invalidCheck > 0) {
+            me.fireEvent('showmessage', false, Ngcp.csc.locales.common.field_invalid[localStorage.getItem('languageSelected')]);
+        }
     },
 
     addNewEmptyRowToGrid: function(store, storeName, newId) {
@@ -199,40 +249,28 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         var view = this.getView();
         switch (storeName) {
             case 'Seats':
-                newRec = store.add({
+                var newSeat = Ext.create('NgcpCsc.model.Seat', {
-                    "id": newId,
+                    id: newId
-                    "name": "",
-                    "extension": "",
-                    "group": "",
-                    "numbers": "",
-                    "phone_devices": ""
                 });
+                newRec = store.add(newSeat);
                 break;
             case 'Groups':
-                newRec = store.add({
+                var newGroup = Ext.create('NgcpCsc.model.Group', {
-                    "id": newId,
+                    id: newId
-                    "name": "",
-                    "extension": "",
-                    "hunt_policy": "",
-                    "hunt_timeout": ""
                 });
+                newRec = store.add(newGroup);
                 break;
             case 'Devices':
-                newRec = store.add({
+                var newDevice = Ext.create('NgcpCsc.model.Device', {
-                    "id": newId,
+                    id: newId
-                    "name": "",
-                    "device": "",
-                    "mac": "",
-                    "status": "",
-                    "extension": "",
-                    "extension2": ""
                 });
+                newRec = store.add(newDevice);
                 break;
         }
         view.down('grid').getSelectionModel().select(newRec);
-        Ext.Function.defer(function(){
+        Ext.Function.defer(function() {
             view.fireEvent('cardContainerResized', view);
-        },1);
+        }, 1);
     },
 
     addPbx: function() {
@@ -323,9 +361,16 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
                 extensionLabel[0].setHidden(labelHide);
                 huntPolicyLabel[0].setHidden(labelHide);
                 huntTimeoutLabel[0].setHidden(labelHide);
-                // To adjust a little bit 'for' and 'seconds' labels downwards when fields are shown
+                switch (hideOrShow) {
-                huntTimeoutPreLabel[0].toggleCls('pbx-margin-top');
+                    case 'show':
-                huntTimeoutPostLabel[0].toggleCls('pbx-margin-top');
+                        huntTimeoutPreLabel[0].addCls('pbx-margin-top');
+                        huntTimeoutPostLabel[0].addCls('pbx-margin-top');
+                        break;
+                    case 'hide':
+                        huntTimeoutPreLabel[0].removeCls('pbx-margin-top');
+                        huntTimeoutPostLabel[0].removeCls('pbx-margin-top');
+                        break;
+                };
                 extensionField[0].setHidden(fieldHide);
                 huntPolicyField[0].setHidden(fieldHide);
                 huntTimeoutField[0].setHidden(fieldHide);
@@ -390,9 +435,9 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         var view = this.getView();
         var store = card.store;
         store.remove(card);
-        Ext.Function.defer(function(){
+        Ext.Function.defer(function() {
             view.fireEvent('cardContainerResized', view);
-        },1);
+        }, 1);
     },
 
     toggleCancelCard: function(el, state) {
@@ -449,7 +494,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
                 var recId = event.id.split("-")[3];
                 var iconDivId = 'edit' + storeName.slice(0, -1) + '-' + recId;
                 var iconDiv = document.getElementById(iconDivId);
-                me.saveCard(iconDiv);
+                me.saveCard(iconDiv, false);
             }
         }, 1);
     }

classic/src/view/pages/pbxconfig/devices/DevicesController.js

@@ -15,7 +15,22 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.DevicseController', {
             return;
         };
         if (el.dataset.callback) {
+            var fields = this.getView().query('textfield');
+            var fieldToKeepFocused;
+            for (i = 0; i < fields.length; i++) {
+                if (fields[i].hasFocus) {
+                    fieldToKeepFocused = fields[i];
+                }
+            }
             Ext.Function.defer(eval('this.' + el.dataset.callback), 1, this, [el]);
+            if (fieldToKeepFocused) {
+                fieldToKeepFocused.suspendEvent('blur');
+                Ext.Function.defer(
+                    function() {
+                        fieldToKeepFocused.resumeEvent('blur');
+                    }, 50
+                );
+            }
         };
     },
     onMouseEntered: function(event, el) {

classic/src/view/pages/pbxconfig/devices/DevicesGrid.js

@@ -16,7 +16,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
     },
 
     listeners: {
-        click: {
+        mousedown: {
             fn: 'onIconClicked',
             element: 'el',
             delegate: '.card-icon'
@@ -87,10 +87,12 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
                         xtype: 'textfield',
                         required: true,
                         hidden: true,
+                        width: 250,
                         emptyText: Ngcp.csc.locales.pbxconfig.enter_new_name[localStorage.getItem('languageSelected')],
                         bind: {
                             id: 'devices-textfield-name-{record.id}'
                         },
+                        msgTarget: 'side',
                         listeners: {
                             // Workaround. Issue when binding is used, any change in any record field triggers a
                             // layout break in the row which looks like row collapse, but is not
@@ -129,6 +131,11 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
                         bind: {
                             id: 'devices-textfield-mac-{record.id}'
                         },
+                        msgTarget: 'side',
+                        maxLength: 17,
+                        enforceMaxLength: true,
+                        regex: /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
+                        regexText: Ngcp.csc.locales.pbxconfig.valid_mac_address[localStorage.getItem('languageSelected')],
                         listeners: {
                             focus: {
                                 fn: 'setFieldValue'
@@ -320,8 +327,10 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
                             xtype: 'combo',
                             editable: false,
                             _skipSaveValidation: true,
-                            store: ['User1', 'User2', 'User3', 'User4'],
+                            store: 'Seats',
                             name: 'seat',
+                            displayField: 'name',
+                            valueField: 'id',
                             fieldLabel: 'User',
                             allowBlank: false
                         }, {

classic/src/view/pages/pbxconfig/groups/GroupsGrid.js

@@ -11,7 +11,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.GroupsGrid', {
     },
 
     listeners: {
-        click: {
+        mousedown: {
             fn: 'onIconClicked',
             element: 'el',
             delegate: 'div.card-icon'
@@ -66,10 +66,12 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.GroupsGrid', {
                     xtype: 'textfield',
                     required: true,
                     hidden: true,
+                    width: 250,
                     emptyText: Ngcp.csc.locales.pbxconfig.choose_one_or_more_groups[localStorage.getItem('languageSelected')],
                     bind: {
                         id: 'groups-textfield-name-{record.id}'
                     },
+                    msgTarget: 'side',
                     listeners: {
                         focus: {
                             fn: 'setFieldValue'
@@ -106,6 +108,11 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.GroupsGrid', {
                     bind: {
                         id: 'groups-textfield-extension-{record.id}'
                     },
+                    msgTarget: 'side',
+                    maxLength: 3,
+                    enforceMaxLength: true,
+                    regex: /^[0-9]{3}$/,
+                    regexText: Ngcp.csc.locales.pbxconfig.digit_extension_number[localStorage.getItem('languageSelected')],
                     listeners: {
                         focus: {
                             fn: 'setFieldValue'
@@ -188,6 +195,11 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.GroupsGrid', {
                         required: true,
                         hidden: true,
                         emptyText: Ngcp.csc.locales.pbxconfig.enter_new_hunt_timeout[localStorage.getItem('languageSelected')],
+                        msgTarget: 'side',
+                        maxLength: 3,
+                        enforceMaxLength: true,
+                        regex: /^[0-9]{1,3}$/,
+                        regexText: 'Must be a 3 digit timeout number',
                         bind: {
                             id: 'groups-textfield-hunt_timeout-{record.id}'
                         },

classic/src/view/pages/pbxconfig/seats/SeatsGrid.js

@@ -12,7 +12,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.SeatsGrid', {
     },
 
     listeners: {
-        click: {
+        mousedown: {
             fn: 'onIconClicked',
             element: 'el',
             delegate: 'div.card-icon'
@@ -73,6 +73,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.SeatsGrid', {
                     bind: {
                         id: 'seats-textfield-name-{record.id}'
                     },
+                    msgTarget: 'side',
                     listeners: {
                         focus: {
                             fn: 'setFieldValue'
@@ -110,6 +111,11 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.SeatsGrid', {
                     bind: {
                         id: 'seats-textfield-extension-{record.id}'
                     },
+                    msgTarget: 'side',
+                    maxLength: 3,
+                    enforceMaxLength: true,
+                    regex: /^[0-9]{3}$/,
+                    regexText: Ngcp.csc.locales.pbxconfig.digit_extension_number[localStorage.getItem('languageSelected')],
                     listeners: {
                         focus: {
                             fn: 'setFieldValue'
@@ -218,10 +224,10 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.SeatsGrid', {
                     }
                 }, {
                     xtype: 'tagfield',
-                    valueField: 'group',
+                    valueField: 'id',
-                    store: 'GroupNames',
+                    store: 'Groups',
                     width: 250,
-                    displayField: 'group',
+                    displayField: 'name',
                     hidden: true,
                     emptyText: Ngcp.csc.locales.pbxconfig.choose_one_or_more_groups[localStorage.getItem('languageSelected')],
                     bind: {

resources/data/devices.json

@@ -8,7 +8,7 @@
         "extension2": "Ext1",
         "image": "/resources/images/cisco1.jpg",
         "seats": [{
-            "name": "User1 (130)",
+            "name": 1,
             "type": "Shared",
             "order": 1,
             "position": {
@@ -24,7 +24,7 @@
                 "anchor": "right"
             }
         }, {
-            "name": "User3",
+            "name": 3,
             "order": 3,
             "type": "Speed dial",
             "position": {
@@ -33,7 +33,7 @@
                 "anchor": "right"
             }
         }, {
-            "name": "User4",
+            "name": 4,
             "order": 4,
             "type": "Shared",
             "position": {
@@ -42,7 +42,7 @@
                 "anchor": "top"
             }
         }, {
-            "name": "User5",
+            "name": 5,
             "order": 5,
             "type": "Speed dial",
             "position": {
@@ -51,7 +51,7 @@
                 "anchor": "top"
             }
         }, {
-            "name": "User6",
+            "name": 6,
             "order": 6,
             "type": "Busy lamp",
             "position": {
@@ -69,7 +69,7 @@
         "extension2": "Ext1",
         "image": "/resources/images/cisco2.jpg",
         "seats": [{
-            "name": "User1",
+            "name": 1,
             "order": 1,
             "type": "Busy lamp",
             "position": {
@@ -78,7 +78,7 @@
                 "anchor": "left"
             }
         }, {
-            "name": "User2",
+            "name": 2,
             "order": 2,
             "type": "Speed dial",
             "position": {
@@ -87,7 +87,7 @@
                 "anchor": "left"
             }
         }, {
-            "name": "User3",
+            "name": 3,
             "order": 3,
             "type": "Shared",
             "position": {
@@ -105,7 +105,7 @@
         "extension2": "Ext1",
         "image": "/resources/images/cisco3.jpg",
         "seats": [{
-            "name": "User1",
+            "name": 1,
             "order": 1,
             "type": "Busy lamp",
             "position": {
@@ -114,7 +114,7 @@
                 "anchor": "top"
             }
         }, {
-            "name": "User2",
+            "name": 2,
             "order": 2,
             "type": "Shared",
             "position": {
@@ -132,7 +132,7 @@
         "extension2": "Ext1",
         "image": "/resources/images/cisco1.jpg",
         "seats": [{
-            "name": "User1",
+            "name": 1,
             "type": "Shared",
             "order": 1,
             "position": {
@@ -141,7 +141,7 @@
                 "anchor": "right"
             }
         }, {
-            "name": "User2",
+            "name": 2,
             "order": 2,
             "type": "Busy lamp",
             "position": {
@@ -150,7 +150,7 @@
                 "anchor": "right"
             }
         }, {
-            "name": "User3",
+            "name": 3,
             "order": 3,
             "type": "Speed dial",
             "position": {
@@ -159,7 +159,7 @@
                 "anchor": "right"
             }
         }, {
-            "name": "User4",
+            "name": 4,
             "order": 4,
             "type": "Shared",
             "position": {
@@ -168,7 +168,7 @@
                 "anchor": "top"
             }
         }, {
-            "name": "User5",
+            "name": 5,
             "order": 5,
             "type": "Speed dial",
             "position": {
@@ -177,7 +177,7 @@
                 "anchor": "top"
             }
         }, {
-            "name": "User6",
+            "name": 6,
             "order": 6,
             "type": "Busy lamp",
             "position": {

resources/data/deviceslist.json

@@ -4,7 +4,7 @@
         "name": "Cisco Pbx 1",
         "image": "/resources/images/cisco1.jpg",
         "seats": [{
-            "name": "User1",
+            "name": 1,
             "type": "Shared",
             "order": 1,
             "position": {
@@ -13,7 +13,7 @@
                 "anchor": "right"
             }
         }, {
-            "name": "User2",
+            "name": 2,
             "order": 2,
             "type": "Busy lamp",
             "position": {
@@ -22,7 +22,7 @@
                 "anchor": "right"
             }
         }, {
-            "name": "User3",
+            "name": 3,
             "order": 3,
             "type": "Speed dial",
             "position": {
@@ -31,7 +31,7 @@
                 "anchor": "right"
             }
         }, {
-            "name": "User4",
+            "name": 4,
             "order": 4,
             "type": "Shared",
             "position": {
@@ -40,7 +40,7 @@
                 "anchor": "top"
             }
         }, {
-            "name": "User5",
+            "name": 5,
             "order": 5,
             "type": "Speed dial",
             "position": {
@@ -49,7 +49,7 @@
                 "anchor": "top"
             }
         }, {
-            "name": "User6",
+            "name": 6,
             "order": 6,
             "type": "Busy lamp",
             "position": {
@@ -63,7 +63,7 @@
         "name": "Cisco Pbx 2",
         "image": "/resources/images/cisco2.jpg",
         "seats": [{
-            "name": "User1",
+            "name": 1,
             "order": 1,
             "type": "Busy lamp",
             "position": {
@@ -72,7 +72,7 @@
                 "anchor": "left"
             }
         }, {
-            "name": "User2",
+            "name": 2,
             "order": 2,
             "type": "Speed dial",
             "position": {
@@ -81,7 +81,7 @@
                 "anchor": "left"
             }
         }, {
-            "name": "User3",
+            "name": 3,
             "order": 3,
             "type": "Shared",
             "position": {
@@ -95,7 +95,7 @@
         "name": "Cisco Pbx 3",
         "image": "/resources/images/cisco3.jpg",
         "seats": [{
-            "name": "User1",
+            "name": 1,
             "order": 1,
             "type": "Busy lamp",
             "position": {
@@ -104,7 +104,7 @@
                 "anchor": "top"
             }
         }, {
-            "name": "User2",
+            "name": 2,
             "order": 2,
             "type": "Shared",
             "position": {

resources/data/groups.json

@@ -7,19 +7,19 @@
         "hunt_timeout": "60"
     },{
         "id" : 2,
-        "name":"Development",
+        "name": "Development",
         "extension": "301",
         "hunt_policy": "Parallel",
         "hunt_timeout": "320"
     }, {
         "id" : 3,
-        "name":"Sales",
+        "name": "Sales",
         "extension": "401",
         "hunt_policy": "Sequential",
         "hunt_timeout": "10"
     }, {
         "id" : 4,
-        "name":"Operations",
+        "name": "Operations",
         "extension": "601",
         "hunt_policy": "Serial",
         "hunt_timeout": "40"

resources/data/seats.json

@@ -5,83 +5,83 @@
         "extension": "202",
         "primary_number": "43991001",
         "alias_numbers": ["012341", "012342"],
-        "groups": ["Marketing", "Sales"]
+        "groups": [1, 3]
     }, {
         "id": 2,
         "name": "Seat2",
         "extension": "402",
         "primary_number": "43991019",
         "alias_numbers": ["012343", "012344", "012345"],
-        "groups": ["Marketing", "Operations", "Sales"]
+        "groups": [1, 4, 3]
     }, {
         "id": 3,
         "name": "Seat3",
         "extension": "302",
         "primary_number": "43991021",
         "alias_numbers": ["012346"],
-        "groups": ["Marketing"]
+        "groups": [1]
     }, {
         "id": 4,
         "name": "Seat4",
         "extension": "602",
         "primary_number": "43991008",
         "alias_numbers": ["012347", "012348"],
-        "groups": ["Marketing", "Sales"]
+        "groups": [1, 3]
     }, {
         "id": 5,
         "name": "Seat5",
         "extension": "303",
         "primary_number": "43991005",
         "alias_numbers": ["012349"],
-        "groups": ["Marketing", "Sales"]
+        "groups": [1, 3]
     }, {
         "id": 6,
         "name": "Seat6",
         "extension": "603",
         "primary_number": "43991020",
         "alias_numbers": ["012350", "012351", "012352", "012353"],
-        "groups": ["Development", "Operations"]
+        "groups": [2, 4]
     }, {
         "id": 7,
         "name": "Seat7",
         "extension": "403",
         "primary_number": "43991016",
         "alias_numbers": ["012354"],
-        "groups": ["Development", "Operations"]
+        "groups": [2, 4]
     }, {
         "id": 8,
         "name": "Seat8",
         "extension": "304",
         "primary_number": "43991013",
         "alias_numbers": ["012355"],
-        "groups": ["Development",  "Operations"]
+        "groups": [2,  4]
     }, {
         "id": 9,
         "name": "Seat9",
         "extension": "203",
         "primary_number": "43991023",
         "alias_numbers": ["012356"],
-        "groups": ["Sales"]
+        "groups": [3]
     }, {
         "id": 10,
         "name": "Seat10",
         "extension": "305",
         "primary_number": "43991004",
         "alias_numbers": ["012357", "012358"],
-        "groups": ["Sales"]
+        "groups": [3]
     }, {
         "id": 11,
         "name": "Seat11",
         "extension": "204",
         "primary_number": "43991011",
         "alias_numbers": ["012359", "012360", "012361"],
-        "groups": ["Sales"]
+        "groups": [3]
     }, {
         "id": 12,
         "name": "Seat12",
         "extension": "404",
         "primary_number": "43991018",
         "alias_numbers": ["012362"],
-        "groups": ["Marketing"]
+        "groups": [1]
     }]
 }