feat(filters): change-filter-element-Container

ghiscoding · Dec 8, 2021 · 704c52a · 704c52a
1 parent 39b9177
commit 704c52a
Show file tree

Hide file tree

Showing 32 changed files with 182 additions and 51 deletions.
diff --git a/packages/common/src/filters/__tests__/autoCompleteFilter.spec.ts b/packages/common/src/filters/__tests__/autoCompleteFilter.spec.ts
@@ -56,7 +56,8 @@ describe('AutoCompleteFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new AutoCompleteFilter(translaterService, collectionService);
@@ -691,7 +692,8 @@ describe('AutoCompleteFilter', () => {
       filterArguments = {
         grid: gridStub,
         columnDef: mockColumn,
-        callback: jest.fn()
+        callback: jest.fn(),
+        filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
       };
 
       filter = new AutoCompleteFilter(translaterService, collectionService, rxjs);

diff --git a/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts b/packages/common/src/filters/__tests__/compoundDateFilter.spec.ts
@@ -46,7 +46,8 @@ describe('CompoundDateFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new CompoundDateFilter(translateService);

diff --git a/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts b/packages/common/src/filters/__tests__/compoundInputFilter.spec.ts
@@ -44,7 +44,8 @@ describe('CompoundInputFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new CompoundInputFilter(translateService);

diff --git a/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts b/packages/common/src/filters/__tests__/compoundInputNumberFilter.spec.ts
@@ -40,7 +40,8 @@ describe('CompoundInputNumberFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new CompoundInputNumberFilter(translateService);

diff --git a/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts b/packages/common/src/filters/__tests__/compoundInputPasswordFilter.spec.ts
@@ -40,7 +40,8 @@ describe('CompoundInputPasswordFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new CompoundInputPasswordFilter(translateService);

diff --git a/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts b/packages/common/src/filters/__tests__/compoundSliderFilter.spec.ts
@@ -44,7 +44,8 @@ describe('CompoundSliderFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new CompoundSliderFilter(translateService);

diff --git a/packages/common/src/filters/__tests__/dateRangeFilter.spec.ts b/packages/common/src/filters/__tests__/dateRangeFilter.spec.ts
@@ -41,7 +41,8 @@ describe('DateRangeFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new DateRangeFilter(translateService);

diff --git a/packages/common/src/filters/__tests__/inputFilter.spec.ts b/packages/common/src/filters/__tests__/inputFilter.spec.ts
@@ -36,7 +36,8 @@ describe('InputFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new InputFilter();

diff --git a/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts b/packages/common/src/filters/__tests__/inputMaskFilter.spec.ts
@@ -35,7 +35,8 @@ describe('InputMaskFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new InputMaskFilter();

diff --git a/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts b/packages/common/src/filters/__tests__/inputNumberFilter.spec.ts
@@ -36,7 +36,8 @@ describe('InputNumberFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new InputNumberFilter();

diff --git a/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts b/packages/common/src/filters/__tests__/inputPasswordFilter.spec.ts
@@ -36,7 +36,8 @@ describe('InputPasswordFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new InputPasswordFilter();

diff --git a/packages/common/src/filters/__tests__/multipleSelectFilter.spec.ts b/packages/common/src/filters/__tests__/multipleSelectFilter.spec.ts
@@ -53,7 +53,8 @@ describe('SelectFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new MultipleSelectFilter(translateService, collectionService);

diff --git a/packages/common/src/filters/__tests__/nativeSelectFilter.spec.ts b/packages/common/src/filters/__tests__/nativeSelectFilter.spec.ts
@@ -48,7 +48,8 @@ describe('NativeSelectFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new NativeSelectFilter(translateService);

diff --git a/packages/common/src/filters/__tests__/selectFilter.spec.ts b/packages/common/src/filters/__tests__/selectFilter.spec.ts
@@ -59,7 +59,8 @@ describe('SelectFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new SelectFilter(translateService, collectionService);
@@ -840,7 +841,8 @@ describe('SelectFilter', () => {
       filterArguments = {
         grid: gridStub,
         columnDef: mockColumn,
-        callback: jest.fn()
+        callback: jest.fn(),
+        filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
       };
 
       filter = new SelectFilter(translateService, collectionService, rxjs);

diff --git a/packages/common/src/filters/__tests__/selectFilterNoLibLoaded.spec.ts b/packages/common/src/filters/__tests__/selectFilterNoLibLoaded.spec.ts
@@ -54,7 +54,8 @@ describe('SelectFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new SelectFilter(translateService, collectionServiceStub);

diff --git a/packages/common/src/filters/__tests__/singleSelectFilter.spec.ts b/packages/common/src/filters/__tests__/singleSelectFilter.spec.ts
@@ -55,7 +55,8 @@ describe('SelectFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new SingleSelectFilter(translateService, collectionService);

diff --git a/packages/common/src/filters/__tests__/sliderFilter.spec.ts b/packages/common/src/filters/__tests__/sliderFilter.spec.ts
@@ -36,7 +36,8 @@ describe('SliderFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new SliderFilter();

diff --git a/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts b/packages/common/src/filters/__tests__/sliderRangeFilter.spec.ts
@@ -36,7 +36,8 @@ describe('SliderRangeFilter', () => {
     filterArguments = {
       grid: gridStub,
       columnDef: mockColumn,
-      callback: jest.fn()
+      callback: jest.fn(),
+      filterContainerElm: gridStub.getHeaderRowColumn(mockColumn.id)
     };
 
     filter = new SliderRangeFilter();

diff --git a/packages/common/src/filters/autoCompleteFilter.ts b/packages/common/src/filters/autoCompleteFilter.ts
@@ -43,6 +43,7 @@ export class AutoCompleteFilter implements Filter {
   columnDef!: Column;
   callback!: FilterCallback;
   isFilled = false;
+  filterContainerElm!: HTMLDivElement;
 
   /** The property name for labels in the collection */
   labelName!: string;
@@ -151,6 +152,7 @@ export class AutoCompleteFilter implements Filter {
     this.callback = args.callback;
     this.columnDef = args.columnDef;
     this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
+    this.filterContainerElm = args.filterContainerElm;
 
     if (!this.grid || !this.columnDef || !this.columnFilter || (!this.columnFilter.collection && !this.columnFilter.collectionAsync && !this.columnFilter.filterOptions)) {
       throw new Error(`[Slickgrid-Universal] You need to pass a "collection" (or "collectionAsync") for the AutoComplete Filter to work correctly. Also each option should include a value/label pair (or value/labelKey when using Locale). For example:: { filter: model: Filters.autoComplete, collection: [{ value: true, label: 'True' }, { value: false, label: 'False'}] }`);
@@ -355,8 +357,8 @@ export class AutoCompleteFilter implements Filter {
   protected createDomElement(filterTemplate: string, collection: any[], searchTerm?: SearchTerm) {
     this._collection = collection;
     const columnId = this.columnDef?.id ?? '';
-    const $headerElm = this.grid.getHeaderRowColumn(columnId);
-    $($headerElm).empty();
+
+    $(this.filterContainerElm).empty();
 
     // create the DOM element & add an ID and filter class
     this.$filterElm = $(filterTemplate) as any;
@@ -417,7 +419,7 @@ export class AutoCompleteFilter implements Filter {
     // append the new DOM element to the header row
     if (this.$filterElm && typeof this.$filterElm.appendTo === 'function') {
       const $container = $(`<div class="autocomplete-container"></div>`);
-      $container.appendTo($headerElm);
+      $container.appendTo(this.filterContainerElm);
       this.$filterElm.appendTo($container);
 
       // add a <span> in order to add spinner styling

diff --git a/packages/common/src/filters/compoundDateFilter.ts b/packages/common/src/filters/compoundDateFilter.ts
@@ -39,6 +39,7 @@ export class CompoundDateFilter implements Filter {
   searchTerms: SearchTerm[] = [];
   columnDef!: Column;
   callback!: FilterCallback;
+  filterContainerElm!: HTMLDivElement;
 
   constructor(protected readonly translaterService: TranslaterService) {
     this._bindEventService = new BindingEventService();
@@ -96,6 +97,7 @@ export class CompoundDateFilter implements Filter {
     this.columnDef = args.columnDef;
     this.operator = args.operator || '';
     this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
+    this.filterContainerElm = args.filterContainerElm;
 
     // date input can only have 1 search term, so we will use the 1st array index if it exist
     const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms.length >= 0) ? this.searchTerms[0] : '';
@@ -288,8 +290,7 @@ export class CompoundDateFilter implements Filter {
    */
   protected createDomElement(searchTerm?: SearchTerm): HTMLDivElement {
     const columnId = this.columnDef?.id ?? '';
-    const headerElm = this.grid.getHeaderRowColumn(columnId);
-    emptyElement(headerElm);
+    emptyElement(this.filterContainerElm);
 
 
     // create the DOM Select dropdown for the Operator
@@ -331,7 +332,7 @@ export class CompoundDateFilter implements Filter {
 
     // append the new DOM element to the header row
     if (filterContainerElm) {
-      headerElm.appendChild(filterContainerElm);
+      this.filterContainerElm.appendChild(filterContainerElm);
     }
 
     return filterContainerElm;

diff --git a/packages/common/src/filters/compoundInputFilter.ts b/packages/common/src/filters/compoundInputFilter.ts
@@ -32,6 +32,7 @@ export class CompoundInputFilter implements Filter {
   columnDef!: Column;
   callback!: FilterCallback;
   timer?: NodeJS.Timeout;
+  filterContainerElm!: HTMLDivElement;
 
   constructor(protected readonly translaterService: TranslaterService) {
     this._bindEventService = new BindingEventService();
@@ -90,6 +91,7 @@ export class CompoundInputFilter implements Filter {
     this.columnDef = args.columnDef;
     this.operator = args.operator as OperatorString;
     this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
+    this.filterContainerElm = args.filterContainerElm;
 
     // analyze if we have any keyboard debounce delay (do we wait for user to finish typing before querying)
     // it is used by default for a backend service but is optional when using local dataset
@@ -241,8 +243,7 @@ export class CompoundInputFilter implements Filter {
    */
   protected createDomElement(searchTerm?: SearchTerm) {
     const columnId = this.columnDef?.id ?? '';
-    const headerElm = this.grid.getHeaderRowColumn(columnId);
-    emptyElement(headerElm);
+    emptyElement(this.filterContainerElm);
 
     // create the DOM Select dropdown for the Operator
     this._selectOperatorElm = buildSelectOperator(this.getOperatorOptionValues(), this.gridOptions);
@@ -284,7 +285,7 @@ export class CompoundInputFilter implements Filter {
 
     // append the new DOM element to the header row
     if (filterContainerElm) {
-      headerElm.appendChild(filterContainerElm);
+      this.filterContainerElm.appendChild(filterContainerElm);
     }
 
     return filterContainerElm;

diff --git a/packages/common/src/filters/compoundSliderFilter.ts b/packages/common/src/filters/compoundSliderFilter.ts
@@ -39,6 +39,7 @@ export class CompoundSliderFilter implements Filter {
   searchTerms: SearchTerm[] = [];
   columnDef!: Column;
   callback!: FilterCallback;
+  filterContainerElm!: HTMLDivElement;
 
   constructor(protected readonly translaterService: TranslaterService) {
     this._bindEventService = new BindingEventService();
@@ -96,6 +97,7 @@ export class CompoundSliderFilter implements Filter {
     this.columnDef = args.columnDef;
     this.operator = args.operator || '';
     this.searchTerms = args?.searchTerms ?? [];
+    this.filterContainerElm = args.filterContainerElm;
 
     // define the input & slider number IDs
     this._elementRangeInputId = `rangeInput_${this.columnDef.field}`;
@@ -224,8 +226,8 @@ export class CompoundSliderFilter implements Filter {
     const defaultValue = this.filterParams?.sliderStartValue ?? minValue;
     const step = this.filterProperties?.valueStep ?? DEFAULT_STEP;
     const startValue = +(this.filterParams?.sliderStartValue ?? minValue);
-    const headerElm = this.grid.getHeaderRowColumn(this.columnDef.id);
-    emptyElement(headerElm);
+
+    emptyElement(this.filterContainerElm);
 
     let searchTermInput = (searchTerm || '0') as string;
     if (+searchTermInput < minValue) {
@@ -298,7 +300,7 @@ export class CompoundSliderFilter implements Filter {
     }
 
     // append the new DOM element to the header row
-    headerElm.appendChild(this.divContainerFilterElm);
+    this.filterContainerElm.appendChild(this.divContainerFilterElm);
 
     return this.divContainerFilterElm;
   }

diff --git a/packages/common/src/filters/dateRangeFilter.ts b/packages/common/src/filters/dateRangeFilter.ts
@@ -41,6 +41,7 @@ export class DateRangeFilter implements Filter {
   searchTerms: SearchTerm[] = [];
   columnDef!: Column;
   callback!: FilterCallback;
+  filterContainerElm!: HTMLDivElement;
 
   constructor(protected readonly translaterService: TranslaterService) {
     this._bindEventService = new BindingEventService();
@@ -95,6 +96,7 @@ export class DateRangeFilter implements Filter {
     this.callback = args.callback;
     this.columnDef = args.columnDef;
     this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
+    this.filterContainerElm = args.filterContainerElm;
 
     // step 1, create the DOM Element of the filter which contain the compound Operator+Input
     this._filterElm = this.createDomElement(this.searchTerms);
@@ -272,8 +274,7 @@ export class DateRangeFilter implements Filter {
    */
   protected createDomElement(searchTerms?: SearchTerm[]): HTMLDivElement {
     const columnId = this.columnDef?.id ?? '';
-    const headerElm = this.grid.getHeaderRowColumn(columnId);
-    emptyElement(headerElm);
+    emptyElement(this.filterContainerElm);
 
     // create the DOM Select dropdown for the Operator
     this._filterDivInputElm = this.buildDatePickerInput(searchTerms);
@@ -296,7 +297,7 @@ export class DateRangeFilter implements Filter {
 
     // append the new DOM element to the header row
     if (this._filterDivInputElm) {
-      headerElm.appendChild(this._filterDivInputElm);
+      this.filterContainerElm.appendChild(this._filterDivInputElm);
     }
 
     return this._filterDivInputElm;