From 0e6053795515c53443b4e6f7f2638547593df38c Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 8 Sep 2017 10:25:21 +0300 Subject: [PATCH] UI: Preserve dashboard state when switching to edit mode. --- ui/src/app/dashboard/dashboard.controller.js | 2 +- .../states/default-state-controller.js | 54 ++++++++----- .../states/entity-state-controller.js | 76 +++++++++++-------- .../states/states-component.directive.js | 14 +++- .../states/states-controller.service.js | 14 +++- 5 files changed, 105 insertions(+), 55 deletions(-) diff --git a/ui/src/app/dashboard/dashboard.controller.js b/ui/src/app/dashboard/dashboard.controller.js index 61cdf666db..5772f3519a 100644 --- a/ui/src/app/dashboard/dashboard.controller.js +++ b/ui/src/app/dashboard/dashboard.controller.js @@ -993,6 +993,7 @@ export default function DashboardController(types, utils, dashboardUtils, widget function setEditMode(isEdit, revert) { vm.isEdit = isEdit; if (vm.isEdit) { + vm.dashboardCtx.stateController.preserveState(); vm.prevDashboard = angular.copy(vm.dashboard); } else { if (vm.widgetEditMode) { @@ -1009,7 +1010,6 @@ export default function DashboardController(types, utils, dashboardUtils, widget } else { vm.dashboard.configuration.timewindow = vm.dashboardCtx.dashboardTimewindow; } - vm.dashboardCtx.stateController.resetState(); } } } diff --git a/ui/src/app/dashboard/states/default-state-controller.js b/ui/src/app/dashboard/states/default-state-controller.js index 129be284e7..0dfe229f17 100644 --- a/ui/src/app/dashboard/states/default-state-controller.js +++ b/ui/src/app/dashboard/states/default-state-controller.js @@ -15,7 +15,8 @@ */ /*@ngInject*/ -export default function DefaultStateController($scope, $location, $state, $stateParams, utils, types, dashboardUtils) { +export default function DefaultStateController($scope, $timeout, $location, $state, + $stateParams, utils, types, dashboardUtils, preservedState) { var vm = this; @@ -24,6 +25,7 @@ export default function DefaultStateController($scope, $location, $state, $state vm.openState = openState; vm.updateState = updateState; vm.resetState = resetState; + vm.getStateObject = getStateObject; vm.navigatePrevState = navigatePrevState; vm.getStateId = getStateId; vm.getStateParams = getStateParams; @@ -77,6 +79,10 @@ export default function DefaultStateController($scope, $location, $state, $state gotoState(rootStateId, true); } + function getStateObject() { + return vm.stateObject; + } + function navigatePrevState(index) { if (index < vm.stateObject.length-1) { stopWatchStateObject(); @@ -168,27 +174,33 @@ export default function DefaultStateController($scope, $location, $state, $state } function init() { - var initialState = $stateParams.state; - vm.stateObject = parseState(initialState); - - gotoState(vm.stateObject[0].id, false); - - $scope.$watchCollection(function(){ - return $state.params; - }, function(){ - var currentState = $state.params.state; - vm.stateObject = parseState(currentState); - }); - - $scope.$watch('vm.dashboardCtrl.dashboardCtx.state', function() { - if (vm.stateObject[0].id !== vm.dashboardCtrl.dashboardCtx.state) { - stopWatchStateObject(); - vm.stateObject[0].id = vm.dashboardCtrl.dashboardCtx.state; - updateLocation(); - watchStateObject(); - } + if (preservedState) { + vm.stateObject = preservedState; + gotoState(vm.stateObject[0].id, true); + } else { + var initialState = $stateParams.state; + vm.stateObject = parseState(initialState); + gotoState(vm.stateObject[0].id, false); + } + + $timeout(() => { + $scope.$watchCollection(function () { + return $state.params; + }, function () { + var currentState = $state.params.state; + vm.stateObject = parseState(currentState); + }); + + $scope.$watch('vm.dashboardCtrl.dashboardCtx.state', function () { + if (vm.stateObject[0].id !== vm.dashboardCtrl.dashboardCtx.state) { + stopWatchStateObject(); + vm.stateObject[0].id = vm.dashboardCtrl.dashboardCtx.state; + updateLocation(); + watchStateObject(); + } + }); + watchStateObject(); }); - watchStateObject(); } function stopWatchStateObject() { diff --git a/ui/src/app/dashboard/states/entity-state-controller.js b/ui/src/app/dashboard/states/entity-state-controller.js index 6afeff9065..11017a8792 100644 --- a/ui/src/app/dashboard/states/entity-state-controller.js +++ b/ui/src/app/dashboard/states/entity-state-controller.js @@ -17,7 +17,8 @@ import './entity-state-controller.scss'; /*@ngInject*/ -export default function EntityStateController($scope, $location, $state, $stateParams, $q, $translate, utils, types, dashboardUtils, entityService) { +export default function EntityStateController($scope, $timeout, $location, $state, $stateParams, + $q, $translate, utils, types, dashboardUtils, entityService, preservedState) { var vm = this; @@ -26,6 +27,7 @@ export default function EntityStateController($scope, $location, $state, $stateP vm.openState = openState; vm.updateState = updateState; vm.resetState = resetState; + vm.getStateObject = getStateObject; vm.navigatePrevState = navigatePrevState; vm.getStateId = getStateId; vm.getStateParams = getStateParams; @@ -84,6 +86,10 @@ export default function EntityStateController($scope, $location, $state, $stateP gotoState(rootStateId, true); } + function getStateObject() { + return vm.stateObject; + } + function navigatePrevState(index) { if (index < vm.stateObject.length-1) { stopWatchStateObject(); @@ -212,41 +218,49 @@ export default function EntityStateController($scope, $location, $state, $stateP }); function init() { - var initialState = $stateParams.state; - vm.stateObject = parseState(initialState); - vm.selectedStateIndex = vm.stateObject.length-1; - gotoState(vm.stateObject[vm.stateObject.length-1].id, false); - - $scope.$watchCollection(function() { - return $state.params; - }, function(){ - var currentState = $state.params.state; - vm.stateObject = parseState(currentState); - }); + if (preservedState) { + vm.stateObject = preservedState; + vm.selectedStateIndex = vm.stateObject.length-1; + gotoState(vm.stateObject[vm.stateObject.length-1].id, true); + } else { + var initialState = $stateParams.state; + vm.stateObject = parseState(initialState); + vm.selectedStateIndex = vm.stateObject.length-1; + gotoState(vm.stateObject[vm.stateObject.length-1].id, false); + } - $scope.$watch('vm.dashboardCtrl.dashboardCtx.state', function() { - if (vm.stateObject[vm.stateObject.length-1].id !== vm.dashboardCtrl.dashboardCtx.state) { - stopWatchStateObject(); - vm.stateObject[vm.stateObject.length-1].id = vm.dashboardCtrl.dashboardCtx.state; - updateLocation(); - watchStateObject(); - } - }); + $timeout(() => { + $scope.$watchCollection(function () { + return $state.params; + }, function () { + var currentState = $state.params.state; + vm.stateObject = parseState(currentState); + }); - watchStateObject(); + $scope.$watch('vm.dashboardCtrl.dashboardCtx.state', function () { + if (vm.stateObject[vm.stateObject.length - 1].id !== vm.dashboardCtrl.dashboardCtx.state) { + stopWatchStateObject(); + vm.stateObject[vm.stateObject.length - 1].id = vm.dashboardCtrl.dashboardCtx.state; + updateLocation(); + watchStateObject(); + } + }); - if (vm.dashboardCtrl.isMobile) { - watchSelectedStateIndex(); - } + watchStateObject(); - $scope.$watch('vm.dashboardCtrl.isMobile', function(newVal, prevVal) { - if (!angular.equals(newVal, prevVal)) { - if (vm.dashboardCtrl.isMobile) { - watchSelectedStateIndex(); - } else { - stopWatchSelectedStateIndex(); - } + if (vm.dashboardCtrl.isMobile) { + watchSelectedStateIndex(); } + + $scope.$watch('vm.dashboardCtrl.isMobile', function (newVal, prevVal) { + if (!angular.equals(newVal, prevVal)) { + if (vm.dashboardCtrl.isMobile) { + watchSelectedStateIndex(); + } else { + stopWatchSelectedStateIndex(); + } + } + }); }); } diff --git a/ui/src/app/dashboard/states/states-component.directive.js b/ui/src/app/dashboard/states/states-component.directive.js index 143a694af2..02d6fee937 100644 --- a/ui/src/app/dashboard/states/states-component.directive.js +++ b/ui/src/app/dashboard/states/states-component.directive.js @@ -47,6 +47,13 @@ export default function StatesComponent($compile, $templateCache, $controller, s } } + stateController.preserveState = function() { + if (scope.statesController) { + var state = scope.statesController.getStateObject(); + statesControllerService.preserveStateControllerState(scope.statesControllerId, state); + } + } + stateController.navigatePrevState = function(index) { if (scope.statesController) { scope.statesController.navigatePrevState(index); @@ -109,7 +116,12 @@ export default function StatesComponent($compile, $templateCache, $controller, s } var template = $templateCache.get(statesControllerInfo.templateUrl); element.html(template); - var locals = {}; + + var preservedState = statesControllerService.withdrawStateControllerState(scope.statesControllerId); + + var locals = { + preservedState: preservedState + }; angular.extend(locals, {$scope: scope, $element: element}); var controller = $controller(statesControllerInfo.controller, locals, true, 'vm'); controller.instance = controller(); diff --git a/ui/src/app/dashboard/states/states-controller.service.js b/ui/src/app/dashboard/states/states-controller.service.js index e4c1f2977e..be695c3e1e 100644 --- a/ui/src/app/dashboard/states/states-controller.service.js +++ b/ui/src/app/dashboard/states/states-controller.service.js @@ -40,7 +40,9 @@ export default function StatesControllerService() { var service = { registerStatesController: registerStatesController, getStateControllers: getStateControllers, - getStateController: getStateController + getStateController: getStateController, + preserveStateControllerState: preserveStateControllerState, + withdrawStateControllerState: withdrawStateControllerState }; return service; @@ -57,4 +59,14 @@ export default function StatesControllerService() { return statesControllers[id]; } + function preserveStateControllerState(id, state) { + statesControllers[id].state = angular.copy(state); + } + + function withdrawStateControllerState(id) { + var state = statesControllers[id].state; + statesControllers[id].state = null; + return state; + } + }