fraport/fradrive
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) {
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];
}
}
}

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

@ -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];
}