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

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 });
+   }
 }
 
 

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);
+  });
 });