chore: improve input filter code

ghiscoding · Nov 11, 2022 · ad4735c · ad4735c
1 parent 2513144
commit ad4735c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 18 deletions.
diff --git a/packages/common/src/filters/compoundInputFilter.ts b/packages/common/src/filters/compoundInputFilter.ts
@@ -19,7 +19,6 @@ import { TranslaterService } from '../services/translater.service';
 
 export class CompoundInputFilter implements Filter {
   protected _bindEventService: BindingEventService;
-  protected _clearFilterTriggered = false;
   protected _currentValue?: number | string;
   protected _debounceTypingDelay = 0;
   protected _shouldTriggerQuery = true;
@@ -113,15 +112,14 @@ export class CompoundInputFilter implements Filter {
    */
   clear(shouldTriggerQuery = true) {
     if (this._filterElm && this._selectOperatorElm) {
-      this._clearFilterTriggered = true;
       this._shouldTriggerQuery = shouldTriggerQuery;
       this.searchTerms = [];
       this._filterInputElm.value = '';
       this._selectOperatorElm.selectedIndex = 0;
       this._currentValue = undefined;
       this._filterElm.classList.remove('filled');
       this._filterInputElm.classList.remove('filled');
-      this.onTriggerEvent(undefined);
+      this.onTriggerEvent(undefined, true);
     }
   }
 
@@ -265,9 +263,9 @@ export class CompoundInputFilter implements Filter {
    * Event trigger, could be called by the Operator dropdown or the input itself and we will cover the following (keyup, change, mousewheel & spinner)
    * We will trigger the Filter Service callback from this handler
    */
-  protected onTriggerEvent(event: MouseEvent | KeyboardEvent | undefined) {
-    if (this._clearFilterTriggered) {
-      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
+  protected onTriggerEvent(event: MouseEvent | KeyboardEvent | undefined, isClearFilterEvent = false) {
+    if (isClearFilterEvent) {
+      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: isClearFilterEvent, shouldTriggerQuery: this._shouldTriggerQuery });
       this._filterElm.classList.remove('filled');
     } else {
       const eventType = event?.type ?? '';
@@ -300,7 +298,6 @@ export class CompoundInputFilter implements Filter {
     }
 
     // reset both flags for next use
-    this._clearFilterTriggered = false;
     this._shouldTriggerQuery = true;
   }
 }
diff --git a/packages/common/src/filters/inputFilter.ts b/packages/common/src/filters/inputFilter.ts
@@ -15,7 +15,6 @@ import { createDomElement, emptyElement, } from '../services';
 
 export class InputFilter implements Filter {
   protected _bindEventService: BindingEventService;
-  protected _clearFilterTriggered = false;
   protected _debounceTypingDelay = 0;
   protected _shouldTriggerQuery = true;
   protected _inputType = 'text';
@@ -103,12 +102,11 @@ export class InputFilter implements Filter {
    */
   clear(shouldTriggerQuery = true) {
     if (this._filterInputElm) {
-      this._clearFilterTriggered = true;
       this._shouldTriggerQuery = shouldTriggerQuery;
       this.searchTerms = [];
       this._filterInputElm.value = '';
       this._filterInputElm.classList.remove('filled');
-      this.onTriggerEvent(undefined);
+      this.onTriggerEvent(undefined, true);
     }
   }
 
@@ -224,9 +222,9 @@ export class InputFilter implements Filter {
    * Event handler to cover the following (keyup, change, mousewheel & spinner)
    * We will trigger the Filter Service callback from this handler
    */
-  protected onTriggerEvent(event: MouseEvent | KeyboardEvent | undefined) {
-    if (this._clearFilterTriggered) {
-      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
+  protected onTriggerEvent(event?: MouseEvent | KeyboardEvent, isClearFilterEvent = false) {
+    if (isClearFilterEvent) {
+      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: isClearFilterEvent, shouldTriggerQuery: this._shouldTriggerQuery });
       this._filterInputElm.classList.remove('filled');
     } else {
       const eventType = event?.type ?? '';
@@ -248,7 +246,6 @@ export class InputFilter implements Filter {
     }
 
     // reset both flags for next use
-    this._clearFilterTriggered = false;
     this._shouldTriggerQuery = true;
   }
 }
diff --git a/packages/common/src/filters/inputMaskFilter.ts b/packages/common/src/filters/inputMaskFilter.ts
@@ -56,7 +56,7 @@ export class InputMaskFilter extends InputFilter {
    * Event handler to cover the following (keyup, change, mousewheel & spinner)
    * We will trigger the Filter Service callback from this handler
    */
-  protected onTriggerEvent(event: MouseEvent | KeyboardEvent | undefined) {
+  protected onTriggerEvent(event?: MouseEvent | KeyboardEvent, isClearFilterEvent = false) {
     let value = '';
     if ((event?.target as HTMLInputElement)?.value) {
       let targetValue = (event?.target as HTMLInputElement)?.value ?? '';
@@ -77,15 +77,14 @@ export class InputMaskFilter extends InputFilter {
       }
     }
 
-    if (this._clearFilterTriggered) {
-      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
+    if (isClearFilterEvent) {
+      this.callback(event, { columnDef: this.columnDef, clearFilterTriggered: isClearFilterEvent, shouldTriggerQuery: this._shouldTriggerQuery });
       this._filterInputElm.classList.remove('filled');
     } else {
       this._filterInputElm.classList.add('filled');
       this.callback(event, { columnDef: this.columnDef, operator: this.operator, searchTerms: [value], shouldTriggerQuery: this._shouldTriggerQuery });
     }
     // reset both flags for next use
-    this._clearFilterTriggered = false;
     this._shouldTriggerQuery = true;
   }