From d419fd944b4390ef233bf4c0bf133bbd017198b6 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 | 68 ++++++++++++++----- .../pages/callforward/CallForwardMainGrid.js | 8 +++ .../view/pages/callforward/CallForwardTab.js | 5 ++ 3 files changed, 64 insertions(+), 17 deletions(-) diff --git a/classic/src/view/pages/callforward/CallForwardController.js b/classic/src/view/pages/callforward/CallForwardController.js index d563daec..7430ca36 100644 --- a/classic/src/view/pages/callforward/CallForwardController.js +++ b/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 diff --git a/classic/src/view/pages/callforward/CallForwardMainGrid.js b/classic/src/view/pages/callforward/CallForwardMainGrid.js index 53051ffe..d71cd3f6 100644 --- a/classic/src/view/pages/callforward/CallForwardMainGrid.js +++ b/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 diff --git a/classic/src/view/pages/callforward/CallForwardTab.js b/classic/src/view/pages/callforward/CallForwardTab.js index 5f730fa3..1327c4c0 100644 --- a/classic/src/view/pages/callforward/CallForwardTab.js +++ b/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 } },