TT#13851 Csc implement pbx cancel button

Implement cancel button for seats/groups/devices submodules.

Cancel button that appears when editing inline in cards, and when
clicked hides fields and shows the labels again. When pressed after
adding a new empty card, it should delete the card.

Change-Id: I9225031bdeae0fd1a6b611ab76fb50d9d9fe196d

app/utils/icons.js

@@ -11,6 +11,7 @@ Ext.define('Ngcp.csc.icons', {
         angleright: "x-fa fa-angle-right",
         bell: "x-fa fa-bell",
         block: "x-fa fa-ban",
+        block2x: "x-fa fa-ban fa-2x",
         book: "x-fa fa-book",
         chevronleft: "x-fa fa-chevron-left",
         chevronight: "x-fa fa-chevron-right",

app/utils/locales.js

@@ -1745,6 +1745,13 @@ Ext.define('Ngcp.csc.locales', {
                 fr: 'Enter new status',
                 sp: 'Enter new status'
             },
+            cancel_operation: {
+                en: 'Cancel operation',
+                it: 'Cancel operation',
+                de: 'Cancel operation',
+                fr: 'Cancel operation',
+                sp: 'Cancel operation'
+            },
             autoattendant: {
                 title: {
                     en: 'Your auto attendants.',

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

@@ -3,10 +3,6 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
 
     alias: 'controller.pbxconfig',
 
-    // DONE: clicking on edit enables editing of all expanded cards, instead of only the card which contains the clicked button
-    // DONE: (related to 1) expanding a card while editing is in progress on another card causes textfields to become labels, while the edit button remains in "save mode". i think the user should be able to copy values from other cards while editing, therefore i would leave the edit in progress while others card are expanded/edited
-    // DONE: pls rename Add new Group to Add new Seat in Seat section
-    // DONE: Remove console.logs and comments
     listen: {
         controller: {
             '*': {
@@ -118,6 +114,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         elClassList.add(Ngcp.csc.icons.edit.split(' ')[1]);
         el.dataset.callback = 'editCard';
         this.showHideFocusFieldsById(recId, storeName, 'hide');
+        this.toggleCancelCard(el, 'off');
     },
 
     saveCard: function(el) {
@@ -187,7 +184,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         var currentRoute = window.location.hash;
         var storeName = me.getStoreFromRoute(currentRoute);
         var store = Ext.getStore(storeName);
-        var newId = store.getCount() + 1;
+        var newId = Ext.id().replace('ext-', '');
         var grid = this.lookupReference(storeName.toLowerCase() + 'Grid');
         var plugin = grid.getPlugin('rowwidget' + storeName);
         me.addNewEmptyRowToGrid(store, storeName, newId);
@@ -200,6 +197,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
             elClassList.remove(Ngcp.csc.icons.edit.split(' ')[1])
             elClassList.add(Ngcp.csc.icons.floppy.split(' ')[1]);
             el.dataset.callback = 'saveCard';
+            me.toggleCancelCard(el, 'on');
             grid.updateLayout();
         }, 50);
     },
@@ -296,6 +294,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         var storeName = this.getStoreFromRoute(currentRoute);
         var recId = el.id.split("-")[1];
         var elClassList = el.firstChild.classList;
+        this.toggleCancelCard(el, 'on');
         // Workaround with split(), since classList.add() does not allow strings
         // with spaces (https://developer.mozilla.org/en/docs/Web/API/Element/classList)
         elClassList.remove(Ngcp.csc.icons.edit.split(' ')[1]);
@@ -314,6 +313,44 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.PbxConfigController', {
         var selectedRow = store.findRecord('id', recId);
         store.remove(selectedRow);
         this.fireEvent('showmessage', true, Ngcp.csc.locales.common.remove_success[localStorage.getItem('languageSelected')]);
+    },
+
+    toggleCancelCard: function (el, state) {
+        var cancelCardId = el.id.replace(/edit|save/, 'cancel');
+        var cancelCard = document.getElementById(cancelCardId);
+        var elClassList = cancelCard.classList;
+        switch (state) {
+            case 'on':
+                elClassList.remove('hidden');
+                break;
+            case 'off':
+                elClassList.add('hidden');
+                break;
+        };
+    },
+
+    cancelCard: function (el, abortAdd) {
+        var me = this;
+        var currentRoute = window.location.hash;
+        var storeName = this.getStoreFromRoute(currentRoute);
+        var store = Ext.getStore(storeName);
+        var recId = el.id.split("-")[1];
+        var editCard = document.getElementById('edit' + storeName.slice(0, -1) + '-' + recId);
+        var currentRoute = window.location.hash;
+        var selectedRow = store.findRecord('id', recId);
+        var nameRecord = selectedRow.get('name');
+        switch (nameRecord === '') {
+            case true:
+                me.removeCard(el);
+                break;
+            case false:
+                me.showHideFocusFieldsById(recId, storeName, 'hide');
+                me.toggleCancelCard(el, 'off');
+                editCard.firstChild.classList.remove(Ngcp.csc.icons.floppy.split(' ')[1]);
+                editCard.firstChild.classList.add(Ngcp.csc.icons.edit.split(' ')[1]);
+                editCard.dataset.callback = 'editCard';
+                break;
+        }
     }
 
 });

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

@@ -192,6 +192,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.devices.DevicesGrid', {
                     html: '<div class="card-wrapper"><div class="card-icon-row">' +
                     '<div id="removeDevice-{record.id}" class="card-icon" data-callback="removeCard" data-qtip="' + Ngcp.csc.locales.filters.tooltips.remove_seat[localStorage.getItem('languageSelected')] + '"><i class="' + Ngcp.csc.icons.trash2x + ' green-icon pointer" aria-hidden="true"></i></div>' +
                     '<div id="editDevice-{record.id}" class="card-icon" data-callback="editCard" data-qtip="' + Ngcp.csc.locales.filters.tooltips.edit_seat[localStorage.getItem('languageSelected')] + '"><i class="' + Ngcp.csc.icons.edit2x + ' green-icon pointer" aria-hidden="true"></i></div>' +
+                    '<div id="cancelDevice-{record.id}" class="card-icon hidden" data-callback="cancelCard" data-qtip="' + Ngcp.csc.locales.pbxconfig.cancel_operation[localStorage.getItem('languageSelected')] + '"><i class="' + Ngcp.csc.icons.block2x + ' green-icon pointer" aria-hidden="true"></i></div>' +
                     '</div></div>'
                 }
             }]

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

@@ -188,6 +188,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.GroupsGrid', {
                     html: '<div class="card-wrapper"><div class="card-icon-row">' +
                     '<div id="removeGroup-{record.id}" class="card-icon" data-callback="removeCard" data-qtip="' + Ngcp.csc.locales.filters.tooltips.remove_seat[localStorage.getItem('languageSelected')] + '"><i class="' + Ngcp.csc.icons.trash2x + ' green-icon pointer" aria-hidden="true"></i></div>' +
                     '<div id="editGroup-{record.id}" class="card-icon" data-callback="editCard" data-qtip="' + Ngcp.csc.locales.filters.tooltips.edit_seat[localStorage.getItem('languageSelected')] + '"><i class="' + Ngcp.csc.icons.edit2x + ' green-icon pointer" aria-hidden="true"></i></div>' +
+                    '<div id="cancelGroup-{record.id}" class="card-icon hidden" data-callback="cancelCard" data-qtip="' + Ngcp.csc.locales.pbxconfig.cancel_operation[localStorage.getItem('languageSelected')] + '"><i class="' + Ngcp.csc.icons.block2x + ' green-icon pointer" aria-hidden="true"></i></div>' +
                     '</div></div>'
                 }
             }]

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

@@ -221,6 +221,7 @@ Ext.define('NgcpCsc.view.pages.pbxconfig.seats.SeatsGrid', {
                     html: '<div class="card-wrapper"><div class="card-icon-row">' +
                     '<div id="removeSeat-{record.id}" class="card-icon" data-callback="removeCard" data-qtip="' + Ngcp.csc.locales.filters.tooltips.remove_seat[localStorage.getItem('languageSelected')] + '"><i class="' + Ngcp.csc.icons.trash2x + ' green-icon pointer" aria-hidden="true"></i></div>' +
                     '<div id="editSeat-{record.id}" class="card-icon" data-callback="editCard" data-qtip="' + Ngcp.csc.locales.filters.tooltips.edit_seat[localStorage.getItem('languageSelected')] + '"><i class="' + Ngcp.csc.icons.edit2x + ' green-icon pointer" aria-hidden="true"></i></div>' +
+                    '<div id="cancelSeat-{record.id}" class="card-icon hidden" data-callback="cancelCard" data-qtip="' + Ngcp.csc.locales.pbxconfig.cancel_operation[localStorage.getItem('languageSelected')] + '"><i class="' + Ngcp.csc.icons.block2x + ' green-icon pointer" aria-hidden="true"></i></div>' +
                     '</div></div>'
                 }
             }]