Filter state two-way binding, custom equals

src/clr-angular/data/datagrid/built-in/filters/datagrid-string-filter-impl.ts

@@ -5,16 +5,27 @@
  */
 import { Observable } from 'rxjs';
 import { Subject } from 'rxjs';
-import { ClrDatagridFilterInterface } from '../../interfaces/filter.interface';
 import { ClrDatagridStringFilterInterface } from '../../interfaces/string-filter.interface';
+import { DatagridPropertyStringFilter } from './datagrid-property-string-filter';
+import { SerializableFilter } from '../../interfaces/serializable.filter.interface';
+import { StringFilterStateInterface } from '../../interfaces/string.filter.state.interface';
 
-export class DatagridStringFilterImpl<T = any> implements ClrDatagridFilterInterface<T> {
-  constructor(public filterFn: ClrDatagridStringFilterInterface<T>) {}
+export class DatagridStringFilterImpl<T = any> implements SerializableFilter<T> {
+  constructor(public filterFn: ClrDatagridStringFilterInterface<T>) {
+    const datagridPropertyStringFilter = <DatagridPropertyStringFilter>filterFn;
+    this._state = {
+      type: 'BuiltinStringFilter',
+      property: datagridPropertyStringFilter.prop,
+      value: '',
+    };
+  }
 
   /**
    * The Observable required as part of the Filter interface
    */
   private _changes = new Subject<string>();
+  private _state: StringFilterStateInterface;
+
   // We do not want to expose the Subject itself, but the Observable which is read-only
   public get changes(): Observable<string> {
     return this._changes.asObservable();
@@ -44,10 +55,21 @@ export class DatagridStringFilterImpl<T = any> implements ClrDatagridFilterInter
     if (value !== this._rawValue) {
       this._rawValue = value;
       this._lowerCaseValue = value.toLowerCase().trim();
+      this._state.value = this.value;
       this._changes.next(value);
     }
   }
 
+  public get filterState(): StringFilterStateInterface {
+    return this._state;
+  }
+
+  public set filterState(state: StringFilterStateInterface) {
+    this._state = state;
+    this._rawValue = state.value;
+    this._changes.next();
+  }
+
   /**
    * Indicates if the filter is currently active, meaning the input is not empty
    */
@@ -62,4 +84,15 @@ export class DatagridStringFilterImpl<T = any> implements ClrDatagridFilterInter
     // We always test with the lowercase value of the input, to stay case insensitive
     return this.filterFn.accepts(item, this.lowerCaseValue);
   }
+
+  /**
+   * Compare objects by properties
+   */
+  public equals(other: DatagridStringFilterImpl): boolean {
+    if (other && other.filterState.type === this._state.type) {
+      return other.filterState.property === this._state.property;
+    } else {
+      return false;
+    }
+  }
 }

src/clr-angular/data/datagrid/built-in/filters/datagrid-string-filter.spec.ts

@@ -17,6 +17,10 @@ import { DomAdapter } from '../../../../utils/dom-adapter/dom-adapter';
 
 import { DatagridStringFilter } from './datagrid-string-filter';
 import { DatagridStringFilterImpl } from './datagrid-string-filter-impl';
+import { SerializableFilter } from '../../interfaces/serializable.filter.interface';
+import { Observable } from 'rxjs';
+import { FilterStateInterface } from '../../interfaces/filter.state.interface';
+import { DatagridPropertyStringFilter } from '@clr/angular';
 
 const PROVIDERS = [FiltersProvider, DomAdapter, Page, StateDebouncer];
 
@@ -106,9 +110,20 @@ export default function(): void {
   });
 }
 
-class TestFilter implements ClrDatagridStringFilterInterface<string> {
-  accepts(item: string, search: string) {
-    return item.toLowerCase() === search;
+class TestFilter implements SerializableFilter<string> {
+  changes: Observable<any>;
+  filterState: FilterStateInterface;
+
+  accepts(item: string): boolean {
+    return false;
+  }
+
+  equals(state: SerializableFilter<string>): boolean {
+    return false;
+  }
+
+  isActive(): boolean {
+    return false;
   }
 }
 
@@ -119,6 +134,6 @@ class TestFilter implements ClrDatagridStringFilterInterface<string> {
 class FullTest {
   @ViewChild(CustomFilter) customFilter: CustomFilter;
 
-  filter: ClrDatagridStringFilterInterface<string>;
+  filter: ClrDatagridStringFilterInterface<string> = new DatagridPropertyStringFilter<string>('test');
   filterValue: string;
 }

src/clr-angular/data/datagrid/datagrid-column.spec.ts

@@ -6,7 +6,7 @@
 import { Component, Renderer2, ViewChild } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Subject } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 
 import { DatagridPropertyComparator } from './built-in/comparators/datagrid-property-comparator';
 import { DatagridStringFilter } from './built-in/filters/datagrid-string-filter';
@@ -16,8 +16,6 @@ import { DatagridHideableColumnModel } from './datagrid-hideable-column.model';
 import { ClrDatagridSortOrder } from './enums/sort-order.enum';
 import { TestContext } from './helpers.spec';
 import { ClrDatagridComparatorInterface } from './interfaces/comparator.interface';
-import { ClrDatagridFilterInterface } from './interfaces/filter.interface';
-import { ClrDatagridStringFilterInterface } from './interfaces/string-filter.interface';
 import { DragDispatcher } from './providers/drag-dispatcher';
 import { FiltersProvider } from './providers/filters';
 import { Page } from './providers/page';
@@ -26,6 +24,8 @@ import { StateDebouncer } from './providers/state-debouncer.provider';
 import { TableSizeService } from './providers/table-size.service';
 import { DomAdapter } from '../../utils/dom-adapter/dom-adapter';
 import { DatagridRenderOrganizer } from './render/render-organizer';
+import { SerializableFilter } from './interfaces/serializable.filter.interface';
+import { FilterStateInterface } from './interfaces/filter.state.interface';
 
 const PROVIDERS_NEEDED = [
   Sort,
@@ -436,7 +436,7 @@ class TestComparator implements ClrDatagridComparatorInterface<number> {
   }
 }
 
-class TestFilter implements ClrDatagridFilterInterface<number> {
+class TestFilter implements SerializableFilter<number> {
   isActive(): boolean {
     return true;
   }
@@ -446,12 +446,33 @@ class TestFilter implements ClrDatagridFilterInterface<number> {
   }
 
   changes = new Subject<boolean>();
+  filterState: FilterStateInterface;
+
+  equals(state: SerializableFilter<number>): boolean {
+    return false;
+  }
 }
 
-class TestStringFilter implements ClrDatagridStringFilterInterface<number> {
-  accepts(n: number, search: string): boolean {
+class TestStringFilter implements SerializableFilter<number> {
+  id: string;
+  changes: Observable<any>;
+  filterState: FilterStateInterface;
+
+  constructor() {
+    this.id = Math.random().toString();
+  }
+
+  accepts(item: number): boolean {
     return true;
   }
+
+  equals(state: TestStringFilter): boolean {
+    return state.filterState.type === state.filterState.type && this.id === state.id;
+  }
+
+  isActive(): boolean {
+    return false;
+  }
 }
 
 @Component({

src/clr-angular/data/datagrid/datagrid-filter.spec.ts

@@ -13,6 +13,8 @@ import { CustomFilter } from './providers/custom-filter';
 import { FiltersProvider } from './providers/filters';
 import { Page } from './providers/page';
 import { StateDebouncer } from './providers/state-debouncer.provider';
+import { SerializableFilter } from './interfaces/serializable.filter.interface';
+import { FilterStateInterface } from './interfaces/filter.state.interface';
 
 export default function(): void {
   describe('ClrDatagridFilter component', function() {
@@ -76,7 +78,7 @@ export default function(): void {
         expect(context.clarityDirective.filter).toBe(filter);
       });
 
-      it('offers two-way binding on he open state of the filter dropdown', function() {
+      it('offers two-way binding on the open state of the filter dropdown', function() {
         context.testComponent.filter = filter;
         context.testComponent.open = true;
         context.detectChanges();
@@ -119,9 +121,15 @@ export default function(): void {
   });
 }
 
-class TestFilter implements ClrDatagridFilterInterface<number> {
+class TestFilter implements SerializableFilter<number> {
+  public id;
   public active = true;
 
+  constructor() {
+    this.id = Math.random().toString();
+    this.filterState = { type: 'TestFilter' };
+  }
+
   isActive(): boolean {
     return this.active;
   }
@@ -131,6 +139,12 @@ class TestFilter implements ClrDatagridFilterInterface<number> {
   }
 
   changes = new Subject<boolean>();
+
+  filterState: FilterStateInterface;
+
+  equals(state: TestFilter): boolean {
+    return this.filterState.type === state.filterState.type && this.id === state.id;
+  }
 }
 
 @Component({ template: `<clr-dg-filter [clrDgFilter]="filter" [(clrDgFilterOpen)]="open">Hello world</clr-dg-filter>` })

src/clr-angular/data/datagrid/datagrid-filter.ts

@@ -13,6 +13,7 @@ import { CustomFilter } from './providers/custom-filter';
 import { FiltersProvider, RegisteredFilter } from './providers/filters';
 import { DatagridFilterRegistrar } from './utils/datagrid-filter-registrar';
 import { ClrCommonStrings } from '../../utils/i18n/common-strings.interface';
+import { SerializableFilter } from './interfaces/serializable.filter.interface';
 
 /**
  * Custom filter that can be added in any column to override the default object property string filter.
@@ -43,7 +44,7 @@ import { ClrCommonStrings } from '../../utils/i18n/common-strings.interface';
         </ng-template>
     `,
 })
-export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>>
+export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, SerializableFilter<T>>
   implements CustomFilter {
   constructor(_filters: FiltersProvider<T>, public commonStrings: ClrCommonStrings) {
     super(_filters);
@@ -72,7 +73,7 @@ export class ClrDatagridFilter<T = any> extends DatagridFilterRegistrar<T, ClrDa
   @Output('clrDgFilterOpenChange') public openChanged = new EventEmitter<boolean>(false);
 
   @Input('clrDgFilter')
-  public set customFilter(filter: ClrDatagridFilterInterface<T> | RegisteredFilter<T, ClrDatagridFilterInterface<T>>) {
+  public set customFilter(filter: SerializableFilter<T> | RegisteredFilter<T, SerializableFilter<T>>) {
     this.setFilter(filter);
   }
 

src/clr-angular/data/datagrid/datagrid-row.spec.ts

@@ -62,7 +62,7 @@ export default function(): void {
         renderer.resize();
       });
 
-      it('initialzes in display mode', function() {
+      it('initializes in display mode', function() {
         expect(context.clarityDirective.displayCells).toBe(true);
       });