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

@@ -91,6 +91,19 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         }
     },
 
+    unmaskDestinationGrids: function () {
+        var stores = this.getStoresByStatus('all');
+        var moduleName = this.getModuleFromRoute();
+        Ext.each(stores.keys, function (storeName) {
+            if (storeName.indexOf(moduleName) > -1) {
+                var grid = Ext.getCmp(storeName);
+                if (grid && grid.body) {
+                    grid.unmask();
+                }
+            }
+        });
+    },
+
     cfTimesetStoreLoaded: function(store, data) {
         var me = this;
         var arrayOfModels = [];
@@ -164,7 +177,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;
@@ -269,9 +283,8 @@ 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);
         $vm.set('destStoresPopulated', false);
+        var routeTimeset = this.getTimesetFromRoute();
         $vm.set('cft_ringtimeout', cftRingTimeout);
         store.removeAll();
         Ext.Ajax.request({
@@ -289,6 +302,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                         $vm.set('arrayOfDestModels', arrayOfModels);
                         $cf.populateDestinationStores();
                     };
+                    $cf.unmaskDestinationGrids();
                 };
             },
 
@@ -296,7 +310,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                 console.log('server-side failure with status code ' + response.status);
             }
         });
-
     },
 
     hasDestinationWithId: function(arr, id) {
@@ -565,7 +578,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';
@@ -603,8 +617,7 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
 
     populateTimesetStores: function(models) {
         var vm = this.getViewModel();
-        var currentRoute = window.location.hash;
+        var moduleName = this.getModuleFromRoute();
-        var moduleName = this.getModuleFromRoute(currentRoute);
         var store = Ext.getStore(moduleName + '-Timeset');
         if (store && store.getCount() === 0) {
             Ext.each(models, function(model) {
@@ -695,13 +708,38 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
         };
     },
 
-    addOwnPhoneToEmptyOnline: function() {
+    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) {
+        var stores = $cf.getStoresByStatus('online');
-            return (key.indexOf('CallForwardOnline') >= 0);
-        });
         Ext.each(stores.getRange(), function(store) {
             if (!store.last()) {
                 var cfModel = Ext.create('NgcpCsc.model.CallForwardDestination', {
@@ -722,8 +760,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();
-        var moduleName = this.getModuleFromRoute(currentRoute);
         if (sourcesets && sourcesets.length > 0) {
             Ext.each(cfTabPanels, function(tabP) {
                 if (tabP._tabId == moduleName) {
@@ -751,7 +788,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', {
                                             _sourcesetListId: sourcesetId,
                                             _firstprefix: tabP._firstPrefixes[index + 1],
                                             _secondprefix: tabP._secondprefix
-
                                         })
                                     ]
                                 });
@@ -916,8 +952,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();
-        var moduleName = this.getModuleFromRoute(currentRoute);
         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.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
         }
     },