github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(settings): replace cookies with local storage (#4075) 

* fix(datatables): persist state changes

* fix(datatables): persist order

* feat(sidebar): use local storage to store toggle toolbar

* feat(config): use local storage instead of cookies
pull/4073/head
Chaim Lev-Ari 2020-07-22 21:36:22 +03:00 committed by GitHub
parent c9dd6e3851
commit 4346bf95a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/docker/components/datatables/images-datatable/imagesDatatable.html
View File

@ -120,11 +120,11 @@
</div>
<div class="menuContent">
<div class="md-checkbox">
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedImages" ng-change="$ctrl.onUsageFilterChange()" />
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedImages" ng-change="$ctrl.onstateFilterChange()" />
<label for="filter_usage_usedImages">Used images</label>
</div>
<div class="md-checkbox">
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedImages" ng-change="$ctrl.onUsageFilterChange()" />
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedImages" ng-change="$ctrl.onstateFilterChange()" />
<label for="filter_usage_unusedImages">Unused images</label>
</div>
</div>

4
app/docker/components/datatables/volumes-datatable/volumesDatatable.html
View File

@ -93,11 +93,11 @@
</div>
<div class="menuContent">
<div class="md-checkbox">
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedVolumes" ng-change="$ctrl.onUsageFilterChange()" />
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedVolumes" ng-change="$ctrl.onstateFilterChange()" />
<label for="filter_usage_usedImages">Used volumes</label>
</div>
<div class="md-checkbox">
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedVolumes" ng-change="$ctrl.onUsageFilterChange()" />
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedVolumes" ng-change="$ctrl.onstateFilterChange()" />
<label for="filter_usage_unusedImages">Unused volumes</label>
</div>
</div>

5
app/portainer/components/datatables/genericDatatableController.js
View File

@ -43,12 +43,11 @@ angular.module('portainer.app').controller('GenericDatatableController', [
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
};
this.changeOrderBy = changeOrderBy.bind(this);
function changeOrderBy(orderField) {
this.changeOrderBy = function changeOrderBy(orderField) {
this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
this.state.orderBy = orderField;
DatatableService.setDataTableOrder(this.tableKey, orderField, this.state.reverseOrder);
}
};
this.selectItem = function (item, event) {
// Handle range select using shift

2
app/portainer/services/authentication.js
View File

@ -41,7 +41,7 @@ angular.module('portainer.app').factory('Authentication', [
StateManager.clean();
EndpointProvider.clean();
LocalStorage.clean();
LocalStorage.cleanAuthData();
LocalStorage.storeLoginStateUUID('');
}

1
app/portainer/services/endpointProvider.js
View File

@ -24,6 +24,7 @@ angular.module('portainer.app').factory('EndpointProvider', [
};
service.clean = function () {
LocalStorage.cleanEndpointData();
endpoint = {};
};

53
app/portainer/services/localStorage.js
View File

@ -1,7 +1,6 @@
angular.module('portainer.app').factory('LocalStorage', [
'localStorageService',
function LocalStorageFactory(localStorageService) {
'use strict';
return {
storeEndpointID: function (id) {
localStorageService.set('ENDPOINT_ID', id);
@ -16,10 +15,10 @@ angular.module('portainer.app').factory('LocalStorage', [
return localStorageService.get('ENDPOINT_PUBLIC_URL');
},
storeLoginStateUUID: function (uuid) {
localStorageService.cookie.set('LOGIN_STATE_UUID', uuid);
localStorageService.set('LOGIN_STATE_UUID', uuid);
},
getLoginStateUUID: function () {
return localStorageService.cookie.get('LOGIN_STATE_UUID');
return localStorageService.get('LOGIN_STATE_UUID');
},
storeOfflineMode: function (isOffline) {
localStorageService.set('ENDPOINT_OFFLINE_MODE', isOffline);
@ -46,10 +45,10 @@ angular.module('portainer.app').factory('LocalStorage', [
return localStorageService.get('APPLICATION_STATE');
},
storeUIState: function (state) {
localStorageService.cookie.set('UI_STATE', state);
localStorageService.set('UI_STATE', state);
},
getUIState: function () {
return localStorageService.cookie.get('UI_STATE');
return localStorageService.get('UI_STATE');
},
storeExtensionState: function (state) {
localStorageService.set('EXTENSION_STATE', state);
@ -67,40 +66,40 @@ angular.module('portainer.app').factory('LocalStorage', [
localStorageService.remove('JWT');
},
storePaginationLimit: function (key, count) {
localStorageService.cookie.set('datatable_pagination_' + key, count);
localStorageService.set('datatable_pagination_' + key, count);
},
getPaginationLimit: function (key) {
return localStorageService.cookie.get('datatable_pagination_' + key);
return localStorageService.get('datatable_pagination_' + key);
},
getDataTableOrder: function (key) {
return localStorageService.cookie.get('datatable_order_' + key);
return localStorageService.get('datatable_order_' + key);
},
storeDataTableOrder: function (key, data) {
localStorageService.cookie.set('datatable_order_' + key, data);
localStorageService.set('datatable_order_' + key, data);
},
getDataTableTextFilters: function (key) {
return localStorageService.cookie.get('datatable_text_filter_' + key);
return localStorageService.get('datatable_text_filter_' + key);
},
storeDataTableTextFilters: function (key, data) {
localStorageService.cookie.set('datatable_text_filter_' + key, data);
localStorageService.set('datatable_text_filter_' + key, data);
},
getDataTableFilters: function (key) {
return localStorageService.cookie.get('datatable_filters_' + key);
return localStorageService.get('datatable_filters_' + key);
},
storeDataTableFilters: function (key, data) {
localStorageService.cookie.set('datatable_filters_' + key, data);
localStorageService.set('datatable_filters_' + key, data);
},
getDataTableSettings: function (key) {
return localStorageService.cookie.get('datatable_settings_' + key);
return localStorageService.get('datatable_settings_' + key);
},
storeDataTableSettings: function (key, data) {
localStorageService.cookie.set('datatable_settings_' + key, data);
localStorageService.set('datatable_settings_' + key, data);
},
getDataTableExpandedItems: function (key) {
return localStorageService.cookie.get('datatable_expandeditems_' + key);
return localStorageService.get('datatable_expandeditems_' + key);
},
storeDataTableExpandedItems: function (key, data) {
localStorageService.cookie.set('datatable_expandeditems_' + key, data);
localStorageService.set('datatable_expandeditems_' + key, data);
},
getDataTableSelectedItems: function (key) {
return localStorageService.get('datatable_selecteditems_' + key);
@ -109,16 +108,16 @@ angular.module('portainer.app').factory('LocalStorage', [
localStorageService.set('datatable_selecteditems_' + key, data);
},
storeSwarmVisualizerSettings: function (key, data) {
localStorageService.cookie.set('swarmvisualizer_' + key, data);
localStorageService.set('swarmvisualizer_' + key, data);
},
getSwarmVisualizerSettings: function (key) {
return localStorageService.cookie.get('swarmvisualizer_' + key);
return localStorageService.get('swarmvisualizer_' + key);
},
storeColumnVisibilitySettings: function (key, data) {
localStorageService.cookie.set('col_visibility_' + key, data);
localStorageService.set('col_visibility_' + key, data);
},
getColumnVisibilitySettings: function (key) {
return localStorageService.cookie.get('col_visibility_' + key);
return localStorageService.get('col_visibility_' + key);
},
storeJobImage: function (data) {
localStorageService.set('job_image', data);
@ -133,12 +132,24 @@ angular.module('portainer.app').factory('LocalStorage', [
const activeTab = localStorageService.get('active_tab_' + key);
return activeTab === null ? 0 : activeTab;
},
storeToolbarToggle(value) {
localStorageService.set('toolbar_toggle', value);
},
getToolbarToggle() {
return localStorageService.get('toolbar_toggle');
},
storeLogoutReason: (reason) => localStorageService.set('logout_reason', reason),
getLogoutReason: () => localStorageService.get('logout_reason'),
cleanLogoutReason: () => localStorageService.remove('logout_reason'),
clean: function () {
localStorageService.clearAll();
},
cleanAuthData() {
localStorageService.remove('JWT', 'EXTENSION_STATE', 'APPLICATION_STATE', 'LOGIN_STATE_UUID');
},
cleanEndpointData() {
localStorageService.remove('ENDPOINT_ID', 'ENDPOINT_PUBLIC_URL', 'ENDPOINT_OFFLINE_MODE', 'ENDPOINTS_DATA', 'ENDPOINT_STATE');
},
};
},
]);

13
app/portainer/views/main/mainController.js
View File

@ -1,9 +1,9 @@
angular.module('portainer.app').controller('MainController', [
'$scope',
'$cookieStore',
'LocalStorage',
'StateManager',
'EndpointProvider',
function ($scope, $cookieStore, StateManager, EndpointProvider) {
function ($scope, LocalStorage, StateManager, EndpointProvider) {
/**
* Sidebar Toggle & Cookie Control
*/
@ -17,11 +17,8 @@ angular.module('portainer.app').controller('MainController', [
$scope.$watch($scope.getWidth, function (newValue) {
if (newValue >= mobileView) {
if (angular.isDefined($cookieStore.get('toggle'))) {
$scope.toggle = !$cookieStore.get('toggle') ? false : true;
} else {
$scope.toggle = true;
}
const toggleValue = LocalStorage.getToolbarToggle();
$scope.toggle = typeof toggleValue === 'boolean' ? toggleValue : true;
} else {
$scope.toggle = false;
}
@ -29,7 +26,7 @@ angular.module('portainer.app').controller('MainController', [
$scope.toggleSidebar = function () {
$scope.toggle = !$scope.toggle;
$cookieStore.put('toggle', $scope.toggle);
LocalStorage.storeToolbarToggle($scope.toggle);
};
window.onresize = function () {