fix: make sure that colType and field are set before trying to config…

…ure filters Angular could assign colType and field in an random order, so we need to wait before we could start using them to assign the filter type for that reason we use ngOnChanges to be sure everything is set and then call setupDefaultFilter Signed-off-by: Bozhidar Dryanovski <[email protected]>
vmware-archive · Aug 24, 2020 · e51db02 · e51db02
1 parent 7528ff3
commit e51db02
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/golden/clr-angular.d.ts b/golden/clr-angular.d.ts
@@ -446,7 +446,7 @@ export declare class ClrDatagridCell implements OnInit {
     ngOnInit(): void;
 }
 
-export declare class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>> implements OnDestroy, OnInit {
+export declare class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>> implements OnDestroy, OnInit, OnChanges {
     get _view(): any;
     get ariaSort(): "none" | "ascending" | "descending";
     get colType(): 'string' | 'number';
@@ -472,6 +472,7 @@ export declare class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<
     sortedChange: EventEmitter<boolean>;
     set updateFilterValue(newValue: string | [number, number]);
     constructor(_sort: Sort<T>, filters: FiltersProvider<T>, vcr: ViewContainerRef, detailService: DetailService, changeDetectorRef: ChangeDetectorRef, commonStrings: ClrCommonStringsService);
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
     sort(reverse?: boolean): void;

diff --git a/src/clr-angular/data/datagrid/datagrid-column.spec.ts b/src/clr-angular/data/datagrid/datagrid-column.spec.ts
@@ -432,6 +432,14 @@ export default function(): void {
         expect(context.clarityElement.querySelector('clr-dg-numeric-filter')).toBeDefined();
       });
 
+      it('order of the argument should not have effect when settings filters', function() {
+        context.testComponent.field = 'id';
+        context.testComponent.type = 'number';
+        context.detectChanges();
+        expect(context.clarityDirective.registered.filter instanceof DatagridNumericFilterImpl).toBe(true);
+        expect(context.clarityElement.querySelector('clr-dg-numeric-filter')).toBeDefined();
+      });
+
       it('when clrDgColType is set to `string` it shoul use the string filter', function() {
         context.testComponent.type = 'string';
         context.testComponent.field = 'id';

diff --git a/src/clr-angular/data/datagrid/datagrid-column.ts b/src/clr-angular/data/datagrid/datagrid-column.ts
@@ -15,6 +15,8 @@ import {
   ViewContainerRef,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
+  SimpleChanges,
+  OnChanges,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 
@@ -88,7 +90,7 @@ import { DetailService } from './providers/detail.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>>
-  implements OnDestroy, OnInit {
+  implements OnDestroy, OnInit, OnChanges {
   constructor(
     private _sort: Sort<T>,
     filters: FiltersProvider<T>,
@@ -169,20 +171,15 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
   @Input('clrDgColType')
   set colType(value: 'string' | 'number') {
     this._colType = value;
-    if (!this.customFilter && !this.filter && this._colType && this._field) {
-      this.setupDefaultFilter(this._field, this._colType);
-    }
   }
 
   @Input('clrDgField')
   public set field(field: string) {
     if (typeof field === 'string') {
       this._field = field;
-      if (!this.customFilter && this._colType) {
-        this.setupDefaultFilter(this._field, this._colType);
-      }
-      if (!this._sortBy) {
-        this._sortBy = new DatagridPropertyComparator(this._field);
+
+      if (!this.sortBy) {
+        this._sortBy = new DatagridPropertyComparator(field);
       }
     }
   }
@@ -202,6 +199,23 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
     }
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (
+      changes.colType &&
+      changes.colType.currentValue &&
+      changes.colType.currentValue !== changes.colType.previousValue
+    ) {
+      if (!this.customFilter && !this.filter && this.colType && this.field) {
+        this.setupDefaultFilter(this.field, this.colType);
+      }
+    }
+    if (changes.field && changes.field.currentValue && changes.field.currentValue !== changes.field.previousValue) {
+      if (!this.customFilter && this.colType) {
+        this.setupDefaultFilter(this.field, this.colType);
+      }
+    }
+  }
+
   /**
    * ClrDatagridComparatorInterface to use when sorting the column
    */
@@ -220,8 +234,8 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
       if (comparator) {
         this._sortBy = comparator;
       } else {
-        if (this._field) {
-          this._sortBy = new DatagridPropertyComparator(this._field);
+        if (this.field) {
+          this._sortBy = new DatagridPropertyComparator(this.field);
         } else {
           delete this._sortBy;
         }