fix(common): add missing Filter model Type of FilterConstructor (#…

…1430) - add a `FilterConstructor` type on the `model` prop of a Column filter, this is similar to the recently added `EditorConstructor` type for Editor
ghiscoding · Mar 13, 2024 · 3f3e952 · 3f3e952
1 parent 409115c
commit 3f3e952
Show file tree

Hide file tree

Showing 21 changed files with 33 additions and 27 deletions.
diff --git a/packages/common/src/filters/autocompleterFilter.ts b/packages/common/src/filters/autocompleterFilter.ts
@@ -78,8 +78,8 @@ export class AutocompleterFilter<T extends AutocompleteItem = any> implements Fi
    * Initialize the Filter
    */
   constructor(
-    protected readonly translaterService: TranslaterService,
-    protected readonly collectionService: CollectionService,
+    protected readonly translaterService?: TranslaterService,
+    protected readonly collectionService?: CollectionService,
     protected readonly rxjs?: RxJsFacade
   ) {
     this._bindEventService = new BindingEventService();
@@ -283,7 +283,7 @@ export class AutocompleterFilter<T extends AutocompleteItem = any> implements Fi
     if (this.columnFilter && this.columnFilter.collectionFilterBy) {
       const filterBy = this.columnFilter.collectionFilterBy;
       const filterCollectionBy = this.columnFilter.collectionOptions && this.columnFilter.collectionOptions.filterResultAfterEachPass || null;
-      outputCollection = this.collectionService.filterCollection(outputCollection, filterBy, filterCollectionBy);
+      outputCollection = this.collectionService?.filterCollection(outputCollection, filterBy, filterCollectionBy) || [];
     }
 
     return outputCollection;
@@ -300,7 +300,7 @@ export class AutocompleterFilter<T extends AutocompleteItem = any> implements Fi
     // user might want to sort the collection
     if (this.columnFilter && this.columnFilter.collectionSortBy) {
       const sortBy = this.columnFilter.collectionSortBy;
-      outputCollection = this.collectionService.sortCollection(this.columnDef, outputCollection, sortBy, this.enableTranslateLabel);
+      outputCollection = this.collectionService?.sortCollection(this.columnDef, outputCollection, sortBy, this.enableTranslateLabel) || [];
     }
 
     return outputCollection;

diff --git a/packages/common/src/filters/compoundDateFilter.ts b/packages/common/src/filters/compoundDateFilter.ts
@@ -3,7 +3,7 @@ import { DateFilter } from './dateFilter';
 
 export class CompoundDateFilter extends DateFilter {
   /** Initialize the Filter */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.inputFilterType = 'compound';
   }

diff --git a/packages/common/src/filters/compoundInputFilter.ts b/packages/common/src/filters/compoundInputFilter.ts
@@ -5,7 +5,7 @@ export class CompoundInputFilter extends InputFilter {
   /**
    * Initialize the Filter
    */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.inputType = 'text';
     this.inputFilterType = 'compound';

diff --git a/packages/common/src/filters/compoundInputNumberFilter.ts b/packages/common/src/filters/compoundInputNumberFilter.ts
@@ -3,7 +3,7 @@ import type { TranslaterService } from '../services/translater.service';
 
 export class CompoundInputNumberFilter extends InputFilter {
   /** Initialize the Filter */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.inputType = 'number';
     this.inputFilterType = 'compound';

diff --git a/packages/common/src/filters/compoundInputPasswordFilter.ts b/packages/common/src/filters/compoundInputPasswordFilter.ts
@@ -3,7 +3,7 @@ import type { TranslaterService } from '../services/translater.service';
 
 export class CompoundInputPasswordFilter extends InputFilter {
   /** Initialize the Filter */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.inputType = 'password';
     this.inputFilterType = 'compound';

diff --git a/packages/common/src/filters/compoundSliderFilter.ts b/packages/common/src/filters/compoundSliderFilter.ts
@@ -5,7 +5,7 @@ export class CompoundSliderFilter extends SliderFilter {
   /**
    * Initialize the Filter
    */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.sliderType = 'compound';
   }

diff --git a/packages/common/src/filters/dateFilter.ts b/packages/common/src/filters/dateFilter.ts
@@ -48,7 +48,7 @@ export class DateFilter implements Filter {
   callback!: FilterCallback;
   filterContainerElm!: HTMLDivElement;
 
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     this._bindEventService = new BindingEventService();
   }
 

diff --git a/packages/common/src/filters/dateRangeFilter.ts b/packages/common/src/filters/dateRangeFilter.ts
@@ -3,7 +3,7 @@ import type { TranslaterService } from '../services';
 
 export class DateRangeFilter extends DateFilter {
   /** Initialize the Filter */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.inputFilterType = 'range';
   }

diff --git a/packages/common/src/filters/inputFilter.ts b/packages/common/src/filters/inputFilter.ts
@@ -32,7 +32,7 @@ export class InputFilter implements Filter {
   columnDef!: Column;
   callback!: FilterCallback;
 
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     this._bindEventService = new BindingEventService();
   }
 

diff --git a/packages/common/src/filters/inputMaskFilter.ts b/packages/common/src/filters/inputMaskFilter.ts
@@ -6,7 +6,7 @@ export class InputMaskFilter extends InputFilter {
   protected _inputMask = '';
 
   /** Initialize the Filter */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.inputType = 'text';
   }

diff --git a/packages/common/src/filters/inputNumberFilter.ts b/packages/common/src/filters/inputNumberFilter.ts
@@ -3,7 +3,7 @@ import type { TranslaterService } from '../services/translater.service';
 
 export class InputNumberFilter extends InputFilter {
   /** Initialize the Filter */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.inputType = 'number';
   }

diff --git a/packages/common/src/filters/inputPasswordFilter.ts b/packages/common/src/filters/inputPasswordFilter.ts
@@ -3,7 +3,7 @@ import type { TranslaterService } from '../services/translater.service';
 
 export class InputPasswordFilter extends InputFilter {
   /** Initialize the Filter */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.inputType = 'password';
   }

diff --git a/packages/common/src/filters/multipleSelectFilter.ts b/packages/common/src/filters/multipleSelectFilter.ts
@@ -7,7 +7,7 @@ export class MultipleSelectFilter extends SelectFilter {
   /**
    * Initialize the Filter
    */
-  constructor(protected readonly translaterService: TranslaterService, protected readonly collectionService: CollectionService, protected readonly rxjs?: RxJsFacade) {
+  constructor(protected readonly translaterService?: TranslaterService, protected readonly collectionService?: CollectionService, protected readonly rxjs?: RxJsFacade) {
     super(translaterService, collectionService, rxjs, true);
   }
 }
diff --git a/packages/common/src/filters/nativeSelectFilter.ts b/packages/common/src/filters/nativeSelectFilter.ts
@@ -25,7 +25,7 @@ export class NativeSelectFilter implements Filter {
   callback!: FilterCallback;
   filterContainerElm!: HTMLDivElement;
 
-  constructor(protected readonly translater: TranslaterService) {
+  constructor(protected readonly translater?: TranslaterService) {
     this._bindEventService = new BindingEventService();
   }
 
@@ -171,7 +171,7 @@ export class NativeSelectFilter implements Filter {
         }
 
         const labelKey = option.labelKey || option[labelName];
-        const textLabel = ((option.labelKey || isEnabledTranslate) && typeof this.translater !== undefined && this.translater.getCurrentLanguage?.()) ? this.translater.translate(labelKey || ' ') : labelKey;
+        const textLabel = ((option.labelKey || isEnabledTranslate) && typeof this.translater !== undefined && this.translater?.getCurrentLanguage?.()) ? this.translater.translate(labelKey || ' ') : labelKey;
 
         selectElm.appendChild(
           createDomElement('option', { value: option[valueName], textContent: textLabel })

diff --git a/packages/common/src/filters/selectFilter.ts b/packages/common/src/filters/selectFilter.ts
@@ -56,8 +56,8 @@ export class SelectFilter implements Filter {
    * Initialize the Filter
    */
   constructor(
-    protected readonly translaterService: TranslaterService,
-    protected readonly collectionService: CollectionService,
+    protected readonly translaterService?: TranslaterService,
+    protected readonly collectionService?: CollectionService,
     protected readonly rxjs?: RxJsFacade,
     isMultipleSelect = true) {
     this._isMultipleSelect = isMultipleSelect;
@@ -254,7 +254,7 @@ export class SelectFilter implements Filter {
     if (this.columnFilter && this.columnFilter.collectionFilterBy) {
       const filterBy = this.columnFilter.collectionFilterBy;
       const filterCollectionBy = this.columnFilter.collectionOptions?.filterResultAfterEachPass || null;
-      outputCollection = this.collectionService.filterCollection(outputCollection, filterBy, filterCollectionBy);
+      outputCollection = this.collectionService?.filterCollection(outputCollection, filterBy, filterCollectionBy) || [];
     }
 
     return outputCollection;
@@ -271,7 +271,7 @@ export class SelectFilter implements Filter {
     // user might want to sort the collection
     if (this.columnFilter && this.columnFilter.collectionSortBy) {
       const sortBy = this.columnFilter.collectionSortBy;
-      outputCollection = this.collectionService.sortCollection(this.columnDef, outputCollection, sortBy, this.enableTranslateLabel);
+      outputCollection = this.collectionService?.sortCollection(this.columnDef, outputCollection, sortBy, this.enableTranslateLabel) || [];
     }
 
     return outputCollection;

diff --git a/packages/common/src/filters/singleSelectFilter.ts b/packages/common/src/filters/singleSelectFilter.ts
@@ -7,7 +7,7 @@ export class SingleSelectFilter extends SelectFilter {
   /**
    * Initialize the Filter
    */
-  constructor(protected readonly translaterService: TranslaterService, protected readonly collectionService: CollectionService, protected readonly rxjs?: RxJsFacade) {
+  constructor(protected readonly translaterService?: TranslaterService, protected readonly collectionService?: CollectionService, protected readonly rxjs?: RxJsFacade) {
     super(translaterService, collectionService, rxjs, false);
   }
 }
diff --git a/packages/common/src/filters/singleSliderFilter.ts b/packages/common/src/filters/singleSliderFilter.ts
@@ -5,7 +5,7 @@ export class SingleSliderFilter extends SliderFilter {
   /**
    * Initialize the Filter
    */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.sliderType = 'single';
   }

diff --git a/packages/common/src/filters/sliderFilter.ts b/packages/common/src/filters/sliderFilter.ts
@@ -52,7 +52,7 @@ export class SliderFilter implements Filter {
   columnDef!: Column;
   callback!: FilterCallback;
 
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     this._bindEventService = new BindingEventService();
   }
 

diff --git a/packages/common/src/filters/sliderRangeFilter.ts b/packages/common/src/filters/sliderRangeFilter.ts
@@ -5,7 +5,7 @@ export class SliderRangeFilter extends SliderFilter {
   /**
    * Initialize the Filter
    */
-  constructor(protected readonly translaterService: TranslaterService) {
+  constructor(protected readonly translaterService?: TranslaterService) {
     super(translaterService);
     this.sliderType = 'double';
   }

diff --git a/packages/common/src/interfaces/columnFilter.interface.ts b/packages/common/src/interfaces/columnFilter.interface.ts
@@ -6,6 +6,7 @@ import type {
   CollectionSortBy,
   Column,
   Filter,
+  FilterConstructor,
   OperatorDetail,
 } from './index';
 import type { Observable, Subject } from '../services/rxjsFacade';
@@ -42,7 +43,7 @@ export interface ColumnFilter {
   minValue?: number | string;
 
   /** Filter to use (input, multipleSelect, singleSelect, select, custom) */
-  model?: any;
+  model?: FilterConstructor;
 
   /** A collection of items/options that will be loaded asynchronously (commonly used with a Select/Multi-Select Filter) */
   collectionAsync?: Promise<any> | Observable<any> | Subject<any>;

diff --git a/packages/common/src/interfaces/filter.interface.ts b/packages/common/src/interfaces/filter.interface.ts
@@ -1,6 +1,7 @@
 import type { Column, FilterArguments, FilterCallback } from './index';
 import type { OperatorType, OperatorString, SearchTerm, } from '../enums/index';
 import type { SlickGrid } from '../core/index';
+import type { CollectionService, RxJsFacade, TranslaterService } from '../services';
 
 // export type Filter = (searchTerms: string | number | string[] | number[], columnDef: Column, params?: any) => string;
 export interface Filter {
@@ -45,3 +46,7 @@ export interface Filter {
   /** Set value(s) on the DOM element */
   setValues: (values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString) => void;
 }
+
+export type FilterConstructor = {
+  new(translaterService?: TranslaterService, collectionService?: CollectionService, rxjs?: RxJsFacade): Filter;
+};