fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(async-table): migrate to StorageManager

Browse Source
This commit is contained in:
Gregor Kleen 2019-12-06 17:24:05 +01:00
parent 33d9bacc8a
commit 0b56ecc6ec
2 changed files with 27 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/storage-manager/storage-manager.js
View File

@ -138,6 +138,9 @@ export class StorageManager {
} }
_saveToLocalStorage(value) { _saveToLocalStorage(value) {
if (!value)
return this._clearLocalStorage();
window.localStorage.setItem(this.namespace, JSON.stringify(value)); 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'); throw new Error('StorageManager._saveToWindow called when window.App is not available');
} }
if (!value)
return this._clearWindow();
if (!window.App.Storage) if (!window.App.Storage)
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'); 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];
}
} }
} }

47
frontend/src/utils/async-table/async-table.js
View File

@ -1,4 +1,5 @@
import { Utility } from '../../core/utility'; import { Utility } from '../../core/utility';
import { StorageManager, LOCATION } from '../../lib/storage-manager/storage-manager';
import { Datepicker } from '../form/datepicker'; import { Datepicker } from '../form/datepicker';
import { HttpClient } from '../../services/http-client/http-client'; import { HttpClient } from '../../services/http-client/http-client';
import * as debounce from 'lodash.debounce'; import * as debounce from 'lodash.debounce';
@ -40,6 +41,8 @@ export class AsyncTable {
}; };
_ignoreRequest = false; _ignoreRequest = false;
_storageManager = new StorageManager(ASYNC_TABLE_LOCAL_STORAGE_KEY, { location: LOCATION.LOCAL });
constructor(element, app) { constructor(element, app) {
if (!element) { if (!element) {
throw new Error('Async Table utility cannot be setup without an element!'); throw new Error('Async Table utility cannot be setup without an element!');
@ -81,10 +84,10 @@ export class AsyncTable {
this._setupPageSizeSelect(); this._setupPageSizeSelect();
this._setupTableFilter(); this._setupTableFilter();
this._processLocalStorage(); this._processStorage();
// clear currentTableUrl from previous requests // clear currentTableUrl from previous requests
setLocalStorageParameter('currentTableUrl', null); this._storageManager.remove('currentTableUrl');
// mark initialized // mark initialized
this._element.classList.add(ASYNC_TABLE_INITIALIZED_CLASS); this._element.classList.add(ASYNC_TABLE_INITIALIZED_CLASS);
@ -100,7 +103,7 @@ export class AsyncTable {
this._ths.forEach((th) => { this._ths.forEach((th) => {
th.clickHandler = (event) => { th.clickHandler = (event) => {
setLocalStorageParameter('horizPos', (this._scrollTable || {}).scrollLeft); this._storageManager.save('horizPos', (this._scrollTable || {}).scrollLeft);
this._linkClickHandler(event); this._linkClickHandler(event);
}; };
th.element.addEventListener('click', th.clickHandler); th.element.addEventListener('click', th.clickHandler);
@ -122,7 +125,7 @@ export class AsyncTable {
left: this._scrollTable.offsetLeft || 0, left: this._scrollTable.offsetLeft || 0,
behavior: 'smooth', behavior: 'smooth',
}; };
setLocalStorageParameter('scrollTo', scrollTo); this._storageManager.save('scrollTo', scrollTo);
} }
this._linkClickHandler(event); this._linkClickHandler(event);
}; };
@ -225,7 +228,7 @@ export class AsyncTable {
const prefix = findCssIdPrefix(focusedInput.id); const prefix = findCssIdPrefix(focusedInput.id);
const focusId = focusedInput.id.replace(prefix, ''); const focusId = focusedInput.id.replace(prefix, '');
callback = function(wrapper) { callback = function(wrapper) {
const idPrefix = getLocalStorageParameter('cssIdPrefix'); const idPrefix = this._storageManager.load('cssIdPrefix', { location: LOCATION.WINDOW });
const toBeFocused = wrapper.querySelector('#' + idPrefix + focusId); const toBeFocused = wrapper.querySelector('#' + idPrefix + focusId);
if (toBeFocused) { if (toBeFocused) {
toBeFocused.focus(); toBeFocused.focus();
@ -238,7 +241,7 @@ export class AsyncTable {
} }
_serializeTableFilterToURL(tableFilterForm) { _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 // create new FormData and format any date values
const formData = Datepicker.unformatAll(this._massInputForm, new FormData(tableFilterForm)); const formData = Datepicker.unformatAll(this._massInputForm, new FormData(tableFilterForm));
@ -254,18 +257,18 @@ export class AsyncTable {
return url; return url;
} }
_processLocalStorage() { _processStorage() {
const scrollTo = getLocalStorageParameter('scrollTo'); const scrollTo = this._storageManager.load('scrollTo');
if (scrollTo && this._scrollTable) { if (scrollTo && this._scrollTable) {
window.scrollTo(scrollTo); window.scrollTo(scrollTo);
} }
setLocalStorageParameter('scrollTo', null); this._storageManager.remove('scrollTo');
const horizPos = getLocalStorageParameter('horizPos'); const horizPos = this._storageManager.load('horizPos');
if (horizPos && this._scrollTable) { if (horizPos && this._scrollTable) {
this._scrollTable.scrollLeft = horizPos; this._scrollTable.scrollLeft = horizPos;
} }
setLocalStorageParameter('horizPos', null); this._storageManager.remove('horizPos');
} }
_removeListeners() { _removeListeners() {
@ -300,7 +303,7 @@ export class AsyncTable {
} }
_changePagesizeHandler = () => { _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 // create new FormData and format any date values
const formData = Datepicker.unformatAll(this._pagesizeForm, new FormData(this._pagesizeForm)); const formData = Datepicker.unformatAll(this._pagesizeForm, new FormData(this._pagesizeForm));
@ -336,7 +339,7 @@ export class AsyncTable {
return false; return false;
} }
setLocalStorageParameter('currentTableUrl', url.href); this._storageManager.save('currentTableUrl', url.href);
// reset table // reset table
this._removeListeners(); this._removeListeners();
this._element.classList.remove(ASYNC_TABLE_INITIALIZED_CLASS); this._element.classList.remove(ASYNC_TABLE_INITIALIZED_CLASS);
@ -346,9 +349,9 @@ export class AsyncTable {
this._app.utilRegistry.setupAll(this._element); this._app.utilRegistry.setupAll(this._element);
if (callback && typeof callback === 'function') { if (callback && typeof callback === 'function') {
setLocalStorageParameter('cssIdPrefix', response.idPrefix); this._storageManager.save('cssIdPrefix', response.idPrefix, { location: LOCATION.WINDOW });
callback(this._element); callback(this._element);
setLocalStorageParameter('cssIdPrefix', ''); this._storageManager.remove('cssIdPrefix', { location: LOCATION.WINDOW });
} }
}).catch((err) => console.error(err) }).catch((err) => console.error(err)
).finally(() => this._element.classList.remove(ASYNC_TABLE_LOADING_CLASS)); ).finally(() => this._element.classList.remove(ASYNC_TABLE_LOADING_CLASS));
@ -365,17 +368,3 @@ function findCssIdPrefix(id) {
} }
return ''; 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];
}