diff --git a/frontend/src/lib/event-manager/event-manager.js b/frontend/src/lib/event-manager/event-manager.js index 5b590052f..a1400486a 100644 --- a/frontend/src/lib/event-manager/event-manager.js +++ b/frontend/src/lib/event-manager/event-manager.js @@ -6,6 +6,7 @@ export const EVENT_TYPE = { CHANGE : 'change', MOUSE_OVER : 'mouseover', SUBMIT : 'submit', + INPUT : 'input', //more to be added }; diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js index 93d3bcf99..0e3c49685 100644 --- a/frontend/src/utils/async-table/async-table.js +++ b/frontend/src/utils/async-table/async-table.js @@ -2,6 +2,7 @@ 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 { EventManager, EventWrapper, EVENT_TYPE } from '../../lib/event-manager/event-manager'; import * as debounce from 'lodash.debounce'; import * as throttle from 'lodash.throttle'; import './async-table-filter.sass'; @@ -30,6 +31,8 @@ export class AsyncTable { _element; _app; + _eventManager; + _asyncTableHeader; _asyncTableId; @@ -66,6 +69,8 @@ export class AsyncTable { this._element = element; this._app = app; + this._eventManager = new EventManager(); + if (this._element.classList.contains(ASYNC_TABLE_INITIALIZED_CLASS)) { return false; } @@ -144,7 +149,12 @@ export class AsyncTable { } destroy() { - console.log('TBD: Destroy AsyncTable'); + this._windowStorage.clear(); + this._historyStorage.clear(); + this._eventManager.removeAllEventListenersFromUtil(); + this._active = false; + if (this._element.classList.contains(ASYNC_TABLE_INITIALIZED_CLASS)) + this._element.classList.remove(ASYNC_TABLE_INITIALIZED_CLASS); } _startSortableHeaders() { @@ -156,7 +166,8 @@ export class AsyncTable { this._windowStorage.save('horizPos', (this._scrollTable || {}).scrollLeft); this._linkClickHandler(event); }; - th.element.addEventListener('click', th.clickHandler); + const linkClickEvent = new EventWrapper(EVENT_TYPE.CLICK, th.clickHandler.bind(this), th.element); + this._eventManager.registerNewListener(linkClickEvent); }); } @@ -179,7 +190,9 @@ export class AsyncTable { } this._linkClickHandler(event); }; - link.element.addEventListener('click', link.clickHandler); + + const clickEvent = new EventWrapper(EVENT_TYPE.CLICK, link.clickHandler.bind(this), link.element); + this._eventManager.registerNewListener(clickEvent); }); } } @@ -190,7 +203,8 @@ export class AsyncTable { if (this._pagesizeForm) { const pagesizeSelect = this._pagesizeForm.querySelector('[name=' + this._asyncTableId + '-pagesize]'); - pagesizeSelect.addEventListener('change', this._changePagesizeHandler); + const pageSizeChangeEvent = new EventWrapper(EVENT_TYPE.CHANGE, this._changePagesizeHandler.bind(this), pagesizeSelect); + this._eventManager.registerNewListener(pageSizeChangeEvent); } } @@ -254,33 +268,42 @@ export class AsyncTable { } }, INPUT_DEBOUNCE); this._cancelPendingUpdates.push(debouncedInput.cancel); - - input.addEventListener('input', () => { + + const inputHandler =() => { this._ignoreRequest = true; debouncedInput(); - }); + }; + const inputEvent = new EventWrapper(EVENT_TYPE.INPUT, inputHandler.bind(this), input ); + this._eventManager.registerNewListener(inputEvent); }); this._tableFilterInputs.change.forEach((input) => { - input.addEventListener('change', () => { + + const changeHandler = () => { //if (this._element.classList.contains(ASYNC_TABLE_LOADING_CLASS)) this._ignoreRequest = true; debouncedUpdateFromTableFilter(); - }); + }; + const changeEvent = new EventWrapper(EVENT_TYPE.CHANGE, changeHandler.bind(this), input); + this._eventManager.registerNewListener(changeEvent); }); this._tableFilterInputs.select.forEach((input) => { - input.addEventListener('change', () => { + const selectChangeHandler = () => { this._ignoreRequest = true; debouncedUpdateFromTableFilter(); - }); + }; + const selectEvent = new EventWrapper(EVENT_TYPE.CHANGE, selectChangeHandler.bind(this), input); + this._eventManager.registerNewListener(selectEvent); }); - tableFilterForm.addEventListener('submit', (event) =>{ + const submitEventHandler = (event) =>{ event.preventDefault(); this._ignoreRequest = true; debouncedUpdateFromTableFilter(); - }); + }; + const submitEvent = new EventWrapper(EVENT_TYPE.SUBMIT, submitEventHandler.bind(this), tableFilterForm); + this._eventManager.registerNewListener(submitEvent); } _updateFromTableFilter(tableFilterForm) { @@ -439,10 +462,10 @@ export class AsyncTable { ).finally(() => this._element.classList.remove(ASYNC_TABLE_LOADING_CLASS)); } - _debugLog() {} - // _debugLog(fName, ...args) { - // console.log(`[DEBUGLOG] AsyncTable.${fName}`, { args: args, instance: this }); - // } + //_debugLog() {} + _debugLog(fName, ...args) { + console.log(`[DEBUGLOG] AsyncTable.${fName}`, { args: args, instance: this }); + } } diff --git a/frontend/src/utils/async-table/async-table.spec.js b/frontend/src/utils/async-table/async-table.spec.js index 7f008ac49..61b476a9c 100644 --- a/frontend/src/utils/async-table/async-table.spec.js +++ b/frontend/src/utils/async-table/async-table.spec.js @@ -1,4 +1,4 @@ -import { AsyncTable } from './async-table'; +import { AsyncTable, ASYNC_TABLE_INITIALIZED_CLASS } from './async-table'; const AppTestMock = { httpClient: { @@ -50,4 +50,11 @@ describe('AsyncTable', () => { new AsyncTable(); }).toThrow(); }); + + it('should destroy Async Table', () => { + //asyncTable.destroy(); + asyncTable.start(); + expect(asyncTable._eventManager._registeredListeners.length).toBe(0); + expect(asyncTable._element.classList).not.toContain(ASYNC_TABLE_INITIALIZED_CLASS); + }); });