From 9f6c0940815944d2478f9a4176c742a2cfc8d692 Mon Sep 17 00:00:00 2001 From: Robert Axelsen Date: Fri, 14 Jul 2017 09:51:29 +0200 Subject: [PATCH] TT#20806 Implement loading indicator for grids Also closes TT#18650: - Csc implement loading indicator for grids Change-Id: I61fb0115562944fc6ecd1a15fd7a52ae22bf7442 --- .../callforward/CallForwardController.js | 80 +++++++++++++++---- .../pages/callforward/CallForwardMainGrid.js | 11 +++ 2 files changed, 75 insertions(+), 16 deletions(-) diff --git a/classic/src/view/pages/callforward/CallForwardController.js b/classic/src/view/pages/callforward/CallForwardController.js index d563daec..4bbaefd6 100644 --- a/classic/src/view/pages/callforward/CallForwardController.js +++ b/classic/src/view/pages/callforward/CallForwardController.js @@ -41,6 +41,30 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', { store.sync(); }, + unmaskDestinationGrids: function () { + var $cf = this; + var moduleName = $cf.getModuleFromRoute(); + var stores = $cf.getStoresByStatus('all'); + var grids; // TODO Get grids from stores + var gridNames = [ + 'everybody-' + moduleName + '-CallForwardBusy', + 'everybody-' + moduleName + '-CallForwardOnline', + 'everybody-' + moduleName + '-CallForwardOffline', + 'ListA-' + moduleName + '-CallForwardBusy', + 'ListA-' + moduleName + '-CallForwardOnline', + 'ListA-' + moduleName + '-CallForwardOffline', + 'ListB-' + moduleName + '-CallForwardBusy', + 'ListB-' + moduleName + '-CallForwardOnline', + 'ListB-' + moduleName + '-CallForwardOffline' + ]; + gridNames.map(function(gridName) { + var grid = Ext.getCmp(gridName); + if (grid) { + grid.body.unmask(); + } + }); + }, + cfTimesetStoreLoaded: function(store, data) { var me = this; var arrayOfModels = []; @@ -115,7 +139,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 +190,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 +256,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,12 +267,13 @@ 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) { $cf.populateDestinationStores(arrayOfModels); }; + $cf.unmaskDestinationGrids(); }; }, @@ -256,7 +281,6 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardController', { console.log('server-side failure with status code ' + response.status); } }); - }, destinationIdExistsInArray: function(arr, id) { @@ -525,7 +549,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 +588,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 +672,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') >= 0); + }); + break; + case 'online': + stores = Ext.data.StoreManager.filterBy(function (item, key) { + return (key.indexOf('CallForwardOnline') >= 0); + }); + break; + case 'busy': + stores = Ext.data.StoreManager.filterBy(function (item, key) { + return (key.indexOf('CallForwardBusy') >= 0); + }); + break; + case 'offline': + stores = Ext.data.StoreManager.filterBy(function (item, key) { + return (key.indexOf('CallForwardOffline') >= 0); + }); + 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 +727,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) { @@ -870,8 +919,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 diff --git a/classic/src/view/pages/callforward/CallForwardMainGrid.js b/classic/src/view/pages/callforward/CallForwardMainGrid.js index 53051ffe..9b8012d6 100644 --- a/classic/src/view/pages/callforward/CallForwardMainGrid.js +++ b/classic/src/view/pages/callforward/CallForwardMainGrid.js @@ -30,6 +30,17 @@ Ext.define('NgcpCsc.view.pages.callforward.CallForwardMainGrid', { } }, + listeners: { + render: function(grid) { + grid.body.mask('Loading...'); + var store = grid.getStore(); + Ext.defer(function() { + store.load; + }, 100); + }, + delay: 200 + }, + plugins: { ptype: 'cellediting', clicksToEdit: 1