TT#20806 Implement loading indicator for grids

Also closes TT#18650:
- Csc implement loading indicator for grids

Change-Id: I61fb0115562944fc6ecd1a15fd7a52ae22bf7442

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

@@ -41,6 +41,18 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         store.sync();
     },
 
+    unmaskDestinationGrids: function () {
+        var stores = this.getStoresByStatus('all');
+        Ext.each(stores.keys, function (storeName) {
+            if (storeName.indexOf('always') > -1) {
+                var grid = Ext.getCmp(storeName);
+                if (grid && grid.body) {
+                    grid.body.unmask();
+                }
+            }
+        });
+    },
+
     cfTimesetStoreLoaded: function(store, data) {
         var me = this;
         var arrayOfModels = [];
@@ -115,7 +127,8 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         },100)
     },
 
-    getTimesetFromRoute: function(route) {
+    getTimesetFromRoute: function() {
+        var route = window.location.hash;
         switch (route) {
             case ('#callforward/always'):
                 return null;
@@ -165,7 +178,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         return mapping.length !== 0;
     },
 
-    buildArrayOfModels: function (cfMappings, cfType, routeTimeset, cfdestinationsets, cftRingTimeout, arrayOfModels) {
+    buildArrayOfModels: function (cfMappings, cfType, routeTimeset, cfdestinationsets, cftRingTimeout, arrayOfModels, hasCftAndCfuMappings) {
         var $cf = this;
         Ext.each(cfMappings, function(mapping, j) {
             var cfmappings = {};
@@ -231,8 +244,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         var hasCftAndCfuMappings = $cf.hasMappings(cfuMappings) && $cf.hasMappings(cftMappings);
         var timeset = store._type;
         var arrayOfModels = [];
-        var currentRoute = window.location.hash;
-        var routeTimeset = this.getTimesetFromRoute(currentRoute);
+        var routeTimeset = this.getTimesetFromRoute();
         $vm.set('cft_ringtimeout', cftRingTimeout);
         store.removeAll();
         Ext.Ajax.request({
@@ -243,7 +255,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                     var cfdestinationsets = decodedResponse._embedded['ngcp:cfdestinationsets'];
                     $cf.buildArrayOfModels(cfbMappings, 'cfb', routeTimeset, cfdestinationsets, cftRingTimeout, arrayOfModels);
                     $cf.buildArrayOfModels(cfuMappings, 'cfu', routeTimeset, cfdestinationsets, cftRingTimeout, arrayOfModels);
-                    $cf.buildArrayOfModels(cftMappings, 'cft', routeTimeset, cfdestinationsets, cftRingTimeout, arrayOfModels);
+                    $cf.buildArrayOfModels(cftMappings, 'cft', routeTimeset, cfdestinationsets, cftRingTimeout, arrayOfModels, hasCftAndCfuMappings);
                     $cf.buildArrayOfModels(cfnaMappings, 'cfna', routeTimeset, cfdestinationsets, cftRingTimeout, arrayOfModels);
                     $cf.addOwnPhoneToEmptyOnline();
                     if (arrayOfModels.length > 0) {
@@ -256,7 +268,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                 console.log('server-side failure with status code ' + response.status);
             }
         });
-
     },
 
     destinationIdExistsInArray: function(arr, id) {
@@ -525,7 +536,8 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         }
     },
 
-    getModuleFromRoute: function(currentRoute) {
+    getModuleFromRoute: function() {
+        var currentRoute = window.location.hash;
         switch (currentRoute) {
             case '#callforward/always':
                 return 'always';
@@ -563,8 +575,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
 
     populateTimesetStores: function(models) {
         var vm = this.getViewModel();
-        var currentRoute = window.location.hash;
-        var moduleName = this.getModuleFromRoute(currentRoute);
+        var moduleName = this.getModuleFromRoute();
         var store = Ext.getStore(moduleName + '-Timeset');
         if (store.getCount() === 0) {
             Ext.each(models, function(model) {
@@ -648,15 +659,41 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                 store._emptied = false;
             });
         };
+        $cf.unmaskDestinationGrids();
+    },
+
+    getStoresByStatus: function (status) {
+        var stores;
+        switch (status) {
+            case 'all':
+                stores = Ext.data.StoreManager.filterBy(function (item, key) {
+                    return (key.indexOf('CallForward') > -1);
+                });
+                break;
+            case 'online':
+                stores = Ext.data.StoreManager.filterBy(function (item, key) {
+                    return (key.indexOf('CallForwardOnline') > -1);
+                });
+                break;
+            case 'busy':
+                stores = Ext.data.StoreManager.filterBy(function (item, key) {
+                    return (key.indexOf('CallForwardBusy') > -1);
+                });
+                break;
+            case 'offline':
+                stores = Ext.data.StoreManager.filterBy(function (item, key) {
+                    return (key.indexOf('CallForwardOffline') > -1);
+                });
+                break;
+        };
+        return stores;
     },
 
     addOwnPhoneToEmptyOnline: function () {
         var $cf = this;
         var $vm = $cf.getViewModel();
         var timeout = $vm.get('cftRingTimeout');
-        var stores = Ext.data.StoreManager.filterBy(function (item, key) {
-            return (key.indexOf('CallForwardOnline') >= 0);
-        });
+        var stores = $cf.getStoresByStatus('online');
         Ext.each(stores.getRange(), function(store) {
             if (!store.last()) {
                 var cfModel = Ext.create('NgcpCsc.model.CallForwardDestination', {
@@ -677,8 +714,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         var $vm = this.getViewModel();
         var subscriberId = localStorage.getItem('subscriber_id');
         var cfTabPanels = Ext.ComponentQuery.query('[name=cfTab]');
-        var currentRoute = window.location.hash;
-        var moduleName = this.getModuleFromRoute(currentRoute);
+        var moduleName = this.getModuleFromRoute();
         if (sourcesets && sourcesets.length > 0) {
             Ext.each(cfTabPanels, function(tabP) {
                 if (tabP._tabId == moduleName) {
@@ -706,7 +742,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                                             _sourcesetListId: sourcesetId,
                                             _firstprefix: tabP._firstPrefixes[index + 1],
                                             _secondprefix: tabP._secondprefix
-
                                         })
                                     ]
                                 });
@@ -870,8 +905,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         var vm = this.getViewModel();
         var me = this;
         var cfTabPanels = Ext.ComponentQuery.query('[name=cfTab]');
-        var currentRoute = window.location.hash;
-        var moduleName = this.getModuleFromRoute(currentRoute);
+        var moduleName = this.getModuleFromRoute();
         var newTitle = vm.get('sourceset-' + sourcesetId + "-titleField-value");
 
         Ext.each(cfTabPanels, function(tabP) { // every CF submodule has its own vm

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

@@ -7,6 +7,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainGrid', {
     width: '100%',
     hideHeaders: true,
     ui: 'cf-grid',
+    minHeight: 70,
 
     viewConfig: {
         plugins: {
@@ -30,6 +31,13 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainGrid', {
         }
     },
 
+    listeners: {
+        render: function(grid) {
+           grid.body.mask('Loading...');
+        },
+        delay: 200
+   },
+
     plugins: {
         ptype: 'cellediting',
         clicksToEdit: 1

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

@@ -14,6 +14,11 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardTab', {
         click: {
             element: 'el',
             fn: 'addOwnPhoneToEmptyOnline'
+        },
+        click: {
+            element: 'el',
+            fn: 'unmaskDestinationGrids',
+            delay: 200
         }
     },