From 0b56ecc6ec50a110b6307045d3028e3bdcde7bd0 Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Fri, 6 Dec 2019 17:24:05 +0100 Subject: [PATCH] refactor(async-table): migrate to StorageManager --- .../lib/storage-manager/storage-manager.js | 10 +++- frontend/src/utils/async-table/async-table.js | 47 +++++++------------ 2 files changed, 27 insertions(+), 30 deletions(-) diff --git a/frontend/src/lib/storage-manager/storage-manager.js b/frontend/src/lib/storage-manager/storage-manager.js index a5e3e0e8f..d2e407593 100644 --- a/frontend/src/lib/storage-manager/storage-manager.js +++ b/frontend/src/lib/storage-manager/storage-manager.js @@ -138,6 +138,9 @@ export class StorageManager { } _saveToLocalStorage(value) { + if (!value) + return this._clearLocalStorage(); + window.localStorage.setItem(this.namespace, JSON.stringify(value)); } @@ -164,6 +167,9 @@ export class StorageManager { throw new Error('StorageManager._saveToWindow called when window.App is not available'); } + if (!value) + return this._clearWindow(); + if (!window.App.Storage) window.App.Storage = {}; @@ -175,6 +181,8 @@ export class StorageManager { throw new Error('StorageManager._saveToWindow called when window.App is not available'); } - delete window.App.Storage[this.namespace]; + if (window.App.Storage) { + delete window.App.Storage[this.namespace]; + } } } diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js index b8330aa4b..3067e0f1f 100644 --- a/frontend/src/utils/async-table/async-table.js +++ b/frontend/src/utils/async-table/async-table.js @@ -1,4 +1,5 @@ import { Utility } from '../../core/utility'; +import { StorageManager, LOCATION } from '../../lib/storage-manager/storage-manager'; import { Datepicker } from '../form/datepicker'; import { HttpClient } from '../../services/http-client/http-client'; import * as debounce from 'lodash.debounce'; @@ -40,6 +41,8 @@ export class AsyncTable { }; _ignoreRequest = false; + _storageManager = new StorageManager(ASYNC_TABLE_LOCAL_STORAGE_KEY, { location: LOCATION.LOCAL }); + constructor(element, app) { if (!element) { throw new Error('Async Table utility cannot be setup without an element!'); @@ -81,10 +84,10 @@ export class AsyncTable { this._setupPageSizeSelect(); this._setupTableFilter(); - this._processLocalStorage(); + this._processStorage(); // clear currentTableUrl from previous requests - setLocalStorageParameter('currentTableUrl', null); + this._storageManager.remove('currentTableUrl'); // mark initialized this._element.classList.add(ASYNC_TABLE_INITIALIZED_CLASS); @@ -100,7 +103,7 @@ export class AsyncTable { this._ths.forEach((th) => { th.clickHandler = (event) => { - setLocalStorageParameter('horizPos', (this._scrollTable || {}).scrollLeft); + this._storageManager.save('horizPos', (this._scrollTable || {}).scrollLeft); this._linkClickHandler(event); }; th.element.addEventListener('click', th.clickHandler); @@ -122,7 +125,7 @@ export class AsyncTable { left: this._scrollTable.offsetLeft || 0, behavior: 'smooth', }; - setLocalStorageParameter('scrollTo', scrollTo); + this._storageManager.save('scrollTo', scrollTo); } this._linkClickHandler(event); }; @@ -225,7 +228,7 @@ export class AsyncTable { const prefix = findCssIdPrefix(focusedInput.id); const focusId = focusedInput.id.replace(prefix, ''); callback = function(wrapper) { - const idPrefix = getLocalStorageParameter('cssIdPrefix'); + const idPrefix = this._storageManager.load('cssIdPrefix', { location: LOCATION.WINDOW }); const toBeFocused = wrapper.querySelector('#' + idPrefix + focusId); if (toBeFocused) { toBeFocused.focus(); @@ -238,7 +241,7 @@ export class AsyncTable { } _serializeTableFilterToURL(tableFilterForm) { - const url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href); + const url = new URL(this._storageManager.load('currentTableUrl') || window.location.href); // create new FormData and format any date values const formData = Datepicker.unformatAll(this._massInputForm, new FormData(tableFilterForm)); @@ -254,18 +257,18 @@ export class AsyncTable { return url; } - _processLocalStorage() { - const scrollTo = getLocalStorageParameter('scrollTo'); + _processStorage() { + const scrollTo = this._storageManager.load('scrollTo'); if (scrollTo && this._scrollTable) { window.scrollTo(scrollTo); } - setLocalStorageParameter('scrollTo', null); + this._storageManager.remove('scrollTo'); - const horizPos = getLocalStorageParameter('horizPos'); + const horizPos = this._storageManager.load('horizPos'); if (horizPos && this._scrollTable) { this._scrollTable.scrollLeft = horizPos; } - setLocalStorageParameter('horizPos', null); + this._storageManager.remove('horizPos'); } _removeListeners() { @@ -300,7 +303,7 @@ export class AsyncTable { } _changePagesizeHandler = () => { - const url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href); + const url = new URL(this._storageManager.load('currentTableUrl') || window.location.href); // create new FormData and format any date values const formData = Datepicker.unformatAll(this._pagesizeForm, new FormData(this._pagesizeForm)); @@ -336,7 +339,7 @@ export class AsyncTable { return false; } - setLocalStorageParameter('currentTableUrl', url.href); + this._storageManager.save('currentTableUrl', url.href); // reset table this._removeListeners(); this._element.classList.remove(ASYNC_TABLE_INITIALIZED_CLASS); @@ -346,9 +349,9 @@ export class AsyncTable { this._app.utilRegistry.setupAll(this._element); if (callback && typeof callback === 'function') { - setLocalStorageParameter('cssIdPrefix', response.idPrefix); + this._storageManager.save('cssIdPrefix', response.idPrefix, { location: LOCATION.WINDOW }); callback(this._element); - setLocalStorageParameter('cssIdPrefix', ''); + this._storageManager.remove('cssIdPrefix', { location: LOCATION.WINDOW }); } }).catch((err) => console.error(err) ).finally(() => this._element.classList.remove(ASYNC_TABLE_LOADING_CLASS)); @@ -365,17 +368,3 @@ function findCssIdPrefix(id) { } return ''; } - -function setLocalStorageParameter(key, value) { - const currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {}; - if (value !== null) { - currentLSState[key] = value; - } else { - delete currentLSState[key]; - } - window.localStorage.setItem(ASYNC_TABLE_LOCAL_STORAGE_KEY, JSON.stringify(currentLSState)); -} -function getLocalStorageParameter(key) { - const currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {}; - return currentLSState[key]; -}