TT#16851 Csc CF fixes and changes

What has been done:
 1. Investigate issue with "change title" field briefly visible before
    showing again. Create new task to handle this app wide.
 2. Change "ADD NEW DESTINATION" button text to "CANCEL" when active,
    and indent the button to be in line with grids
 3. Implement collapsable panel bar view for sourceset grids
 4. Remove loading icon
 5. When I am busy... field cut off at bottom for Numbers
 6. Create a new task to handle delayed hidden binds, see here:
    https://www.sencha.com/forum/showthread.php?294356-Fixing-the-lag-when-components-hidden-visible-property-is-a-bind
 X. Talked with Andreas about the highlighting of grids when moving/
    repositioning them, but decided to keep them for now

Change-Id: I77ee1580f7d8e920e9f18a3a744f26029bf0d8d3

app/utils/locales.js

@@ -769,6 +769,13 @@ Ext.define('Ngcp.csc.locales', {
                 fr: 'ADD NEW DESTINATION',
                 sp: 'ADD NEW DESTINATION'
             },
+            cancel_destination: {
+                en: 'CANCEL',
+                it: 'CANCEL',
+                de: 'CANCEL',
+                fr: 'CANCEL',
+                sp: 'CANCEL'
+            },
             when_phone_online: {
                 en: 'When I am online ...',
                 it: 'When I am online ...',

classic/sass/src/view/pages/callforward/CallForward.scss

@@ -70,7 +70,7 @@
     }
 }
 
-// cf-mainform timeset panel
+// cf-mainform timeset and sourceset panels
 .x-panel-cf-mainform {
     .cf-calls-during {
         margin: 7px 15px 0 0;
@@ -86,4 +86,9 @@
         color: $base-color;
         border: none;
     }
+    .cf-sourceset-textfield {
+        label {
+            padding-left: 10px;
+        }
+    }
 }

classic/src/view/pages/callforward/CallForwardController.js

@@ -151,10 +151,13 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         var currentTimeset = currentRoute.split('/')[1];
         var currentSourceset = cmp.id.split('-')[2];
         var storesArray = this.getStoresArrayFromRoute(currentRoute, currentSourceset);
-        var loadingBar = me.lookupReference('loadingBar');
+        if (currentSourceset === 'listA') {
-        loadingBar.showBusy();
-        vm.set('list_a', true);
             vm.set('list_b', true);
+            vm.set('list_a', false);
+        } else if (currentSourceset === 'listB') {
+            vm.set('list_a', true);
+            vm.set('list_b', false);
+        };
         Ext.Ajax.request({
             url: '/resources/data/callForwardCombinations.json',
             success: function(response, opts) {
@@ -172,9 +175,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                             store.add(records);
                         };
                     };
-                    Ext.defer(function() {
-                        loadingBar.clearStatus();
-                    }, 300);
                 });
             },
             failure: function(response, opts) {}
@@ -246,12 +246,18 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         switch (true) {
             case (me.checkIndexOf('online', targetId)):
                 vm.set('online_add_new_then_hidden', !vm.get('online_add_new_then_hidden'));
+                vm.set('online_cancel_button_hidden', !vm.get('online_cancel_button_hidden'));
+                vm.set('online_add_button_hidden', !vm.get('online_add_button_hidden'));
                 break;
             case (me.checkIndexOf('busy', targetId)):
                 vm.set('busy_add_new_then_hidden', !vm.get('busy_add_new_then_hidden'));
+                vm.set('busy_cancel_button_hidden', !vm.get('busy_cancel_button_hidden'));
+                vm.set('busy_add_button_hidden', !vm.get('busy_add_button_hidden'));
                 break;
             case (me.checkIndexOf('offline', targetId)):
                 vm.set('offline_add_new_then_hidden', !vm.get('offline_add_new_then_hidden'));
+                vm.set('offline_cancel_button_hidden', !vm.get('offline_cancel_button_hidden'));
+                vm.set('offline_add_button_hidden', !vm.get('offline_add_button_hidden'));
                 break;
         };
     },

classic/src/view/pages/callforward/CallForwardMainForm.js

@@ -18,9 +18,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
     initComponent: function() {
         var callForwardListAGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardSourcesetGrid', {
             id: this._firstprefix + this._secondprefix + 'cf-sourceset-list-a-grid',
-            bind: {
-                hidden: '{list_a}'
-            },
             store: Ext.create('NgcpCsc.store.CallForwardSourceset', {
                 proxy: {
                     type: 'ajax',
@@ -34,9 +31,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
         });
         var callForwardListBGrid = Ext.create('NgcpCsc.view.pages.callforward.CallForwardSourcesetGrid', {
             id: this._firstprefix + this._secondprefix + 'cf-sourceset-list-b-grid',
-            bind: {
-                hidden: '{list_b}'
-            },
             store: Ext.create('NgcpCsc.store.CallForwardSourceset', {
                 proxy: {
                     type: 'ajax',
@@ -90,13 +84,23 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
 
 
         this.items = [{
+            xtype: 'panel',
+            bind: {
+                title: '{source_lista_title}',
+                hidden: '{list_a}'
+            },
+            collapsible: true,
+            collapsed: true,
+            items: [{
                 xtype: 'form',
                 layout: 'hbox',
+                margin: '10 0 0 0',
                 bind: {
                     hidden: '{hide_lista_titleField}'
                 },
                 items: [{
                     xtype: 'textfield',
+                    userCls: 'cf-sourceset-textfield',
                     fieldLabel: Ngcp.csc.locales.callforward.sourceset_title[localStorage.getItem('languageSelected')],
                     flex: 1,
                     bind: '{source_lista_title}'
@@ -113,12 +117,9 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                     xtype: 'panel',
                     layout: 'hbox',
                     margin: '15 0 0 0',
-                bind: {
-                    hidden: '{list_a}'
-                },
                     items: [{
-                    text: Ngcp.csc.locales.callforward.add_new_source[localStorage.getItem('languageSelected')],
                         xtype: 'button',
+                        text: Ngcp.csc.locales.callforward.add_new_source[localStorage.getItem('languageSelected')],
                         id: this._firstprefix + this._secondprefix + 'addListAButton',
                         width: 135,
                         margin: '0 0 0 500',
@@ -132,14 +133,25 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                         margin: '0 0 0 10',
                         handler: 'toggleChangeTitle'
                     }]
+            }]
         }, {
+            xtype: 'panel',
+            bind: {
+                title: '{source_listb_title}',
+                hidden: '{list_b}'
+            },
+            collapsible: true,
+            collapsed: true,
+            items: [{
                 xtype: 'form',
                 layout: 'hbox',
+                margin: '10 0 0 0',
                 bind: {
                     hidden: '{hide_listb_titleField}'
                 },
                 items: [{
                     xtype: 'textfield',
+                    userCls: 'cf-sourceset-textfield',
                     fieldLabel: Ngcp.csc.locales.callforward.sourceset_title[localStorage.getItem('languageSelected')],
                     flex: 1,
                     bind: '{source_listb_title}'
@@ -160,8 +172,8 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                         hidden: '{list_b}'
                     },
                     items: [{
-                    text: Ngcp.csc.locales.callforward.add_new_source[localStorage.getItem('languageSelected')],
                         xtype: 'button',
+                        text: Ngcp.csc.locales.callforward.add_new_source[localStorage.getItem('languageSelected')],
                         id: this._firstprefix + this._secondprefix + 'addListBButton',
                         width: 135,
                         margin: '0 0 0 500',
@@ -175,6 +187,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                         margin: '0 0 0 10',
                         handler: 'toggleChangeTitle'
                     }]
+            }]
         }, {
                 xtype: 'container',
                 userCls: 'cf-text cf-subheader',
@@ -307,9 +320,24 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                 xtype: 'button',
                 id: this._firstprefix + this._secondprefix + 'onlineButton',
                 width: 165,
-                margin: '15 0 0 0',
+                margin: '15 0 0 155',
+                listeners: {
+                    click: 'toggleNewDestinationForm'
+                },
+                bind: {
+                    hidden: '{online_add_button_hidden}'
+                }
+            }, {
+                html: Ngcp.csc.locales.callforward.cancel_destination[localStorage.getItem('languageSelected')],
+                xtype: 'button',
+                id: this._firstprefix + this._secondprefix + 'onlineButtonCancel',
+                width: 165,
+                margin: '15 0 0 155',
                 listeners: {
                     click: 'toggleNewDestinationForm'
+                },
+                bind: {
+                    hidden: '{online_cancel_button_hidden}'
                 }
             }, {
                 xtype: 'container',
@@ -379,7 +407,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                 },
                 id: this._firstprefix + this._secondprefix + 'busyThenRingFields',
                 layout: 'hbox',
-                height: 31,
                 items: [{
                     xtype: 'combo',
                     displayField: 'name',
@@ -444,9 +471,24 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                 xtype: 'button',
                 id: this._firstprefix + this._secondprefix + 'busyButton',
                 width: 165,
-                margin: '15 0 0 0',
+                margin: '15 0 0 155',
                 listeners: {
                     click: 'toggleNewDestinationForm'
+                },
+                bind: {
+                    hidden: '{busy_add_button_hidden}'
+                }
+            }, {
+                html: Ngcp.csc.locales.callforward.cancel_destination[localStorage.getItem('languageSelected')],
+                xtype: 'button',
+                id: this._firstprefix + this._secondprefix + 'busyButtonCancel',
+                width: 165,
+                margin: '15 0 0 155',
+                listeners: {
+                    click: 'toggleNewDestinationForm'
+                },
+                bind: {
+                    hidden: '{busy_cancel_button_hidden}'
                 }
             }, {
                 xtype: 'container',
@@ -580,9 +622,24 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                 xtype: 'button',
                 id: this._firstprefix + this._secondprefix + 'offlineButton',
                 width: 165,
-                margin: '15 0 0 0',
+                margin: '15 0 0 155',
+                listeners: {
+                    click: 'toggleNewDestinationForm'
+                },
+                bind: {
+                    hidden: '{offline_add_button_hidden}'
+                }
+            }, {
+                html: Ngcp.csc.locales.callforward.cancel_destination[localStorage.getItem('languageSelected')],
+                xtype: 'button',
+                id: this._firstprefix + this._secondprefix + 'offlineButtonCancel',
+                width: 165,
+                margin: '15 0 0 155',
                 listeners: {
                     click: 'toggleNewDestinationForm'
+                },
+                bind: {
+                    hidden: '{offline_cancel_button_hidden}'
                 }
         }];
 

classic/src/view/pages/callforward/CallForwardModel.js

@@ -16,6 +16,12 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardModel', {
         online_add_new_then_hidden: true,
         busy_add_new_then_hidden: true,
         offline_add_new_then_hidden: true,
+        online_add_button_hidden: false,
+        busy_add_button_hidden: false,
+        offline_add_button_hidden: false,
+        online_cancel_button_hidden: true,
+        busy_cancel_button_hidden: true,
+        offline_cancel_button_hidden: true,
         selected_timeset: 'always',
         selected_sourceset: 'everybody',
         online_then_dest: 'Number',

classic/src/view/pages/callforward/CallForwardTab.js

@@ -42,8 +42,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardTab', {
                 title: Ngcp.csc.locales.callforward.from[localStorage.getItem('languageSelected')] + '{source_lista_title}'
             },
             id: this._tabId + '-tab-listA',
-            iconCls: Ngcp.csc.icons.pencil + ' cf-edit edit-listA',
-            iconAlign: 'right',
             items: [
                 Ext.create('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                     _firstprefix: this._firstPrefixes[1],
@@ -58,8 +56,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardTab', {
                 title: Ngcp.csc.locales.callforward.from[localStorage.getItem('languageSelected')] + '{source_listb_title}'
             },
             id: this._tabId + '-tab-listB',
-            iconCls: Ngcp.csc.icons.pencil + ' cf-edit edit-listB',
-            iconAlign: 'right',
             items: [
                 Ext.create('NgcpCsc.view.pages.callforward.CallForwardMainForm', {
                     _firstprefix: this._firstPrefixes[2],