Merge pull request #5101 from IgniteUI/filtering-refactor

chore(*): Refactoring filtering-condition code

Author: kdinev

azure-pipelines.yml

@@ -14,7 +14,7 @@ steps:
   displayName: 'Build source code and styles'
 
 - script: npm run test:lib:azure
-  displayName: 'Run non-grid tests'
+  displayName: 'Run tests'
   env:
     NODE_OPTIONS: "--max_old_space_size=4096"
 

projects/igniteui-angular/src/lib/data-operations/filtering-condition.spec.ts

@@ -1,7 +1,8 @@
 import { IgxStringFilteringOperand,
     IgxNumberFilteringOperand,
     IgxDateFilteringOperand,
-    IgxBooleanFilteringOperand } from './filtering-condition';
+    IgxBooleanFilteringOperand,
+    IgxFilteringOperand} from './filtering-condition';
 
 describe('Unit testing FilteringCondition', () => {
     it('tests string conditions', () => {
@@ -138,4 +139,23 @@ describe('Unit testing FilteringCondition', () => {
         expect(!f.condition('notNull').logic(null) && f.condition('notNull').logic(undefined) && f.condition('notNull').logic(false))
             .toBeTruthy('notNull');
     });
+    it('tests custom conditions', () => {
+        const f = CustomFilter.instance();
+        expect(f.condition('Custom').logic('Asd', 'asd')).toBeFalsy();
+        expect(f.condition('Custom').logic('Asd', 'Asd')).toBeTruthy();
+    });
 });
+
+class CustomFilter extends IgxFilteringOperand {
+    private constructor() {
+        super();
+        this.append({
+            name: 'Custom',
+            logic: (value: any, searchVal: any, ignoreCase: boolean) => {
+                return value === searchVal;
+            },
+            isUnary: false,
+            iconName: 'starts_with'
+        });
+    }
+}

projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts

@@ -5,6 +5,7 @@
  * @export
  */
 export class IgxFilteringOperand {
+    protected static _instance: IgxFilteringOperand = null;
     public operations: IFilteringOperation[];
 
     public constructor() {
@@ -25,6 +26,10 @@ export class IgxFilteringOperand {
         }];
     }
 
+    public static instance(): IgxFilteringOperand {
+        return this._instance || (this._instance = new this());
+    }
+
     public conditionList(): string[] {
         return this.operations.map((element) => element.name);
     }
@@ -44,8 +49,6 @@ export class IgxFilteringOperand {
  * @export
  */
 export class IgxBooleanFilteringOperand extends IgxFilteringOperand {
-    private static _instance: IgxBooleanFilteringOperand = null;
-
     protected constructor() {
         super();
         this.operations = [{
@@ -85,10 +88,6 @@ export class IgxBooleanFilteringOperand extends IgxFilteringOperand {
             }
         }].concat(this.operations);
     }
-
-    public static instance(): IgxBooleanFilteringOperand {
-        return this._instance || (this._instance = new this());
-    }
 }
 
 /**
@@ -97,8 +96,6 @@ export class IgxBooleanFilteringOperand extends IgxFilteringOperand {
  * @export
  */
 export class IgxDateFilteringOperand extends IgxFilteringOperand {
-    private static _instance: IgxDateFilteringOperand = null;
-
     protected constructor() {
         super();
         this.operations = [{
@@ -318,10 +315,6 @@ export class IgxDateFilteringOperand extends IgxFilteringOperand {
         }].concat(this.operations);
     }
 
-    public static instance(): IgxDateFilteringOperand {
-        return this._instance || (this._instance = new this());
-    }
-
     /**
      * Splits a Date object into parts
      *
@@ -377,8 +370,6 @@ export class IgxDateFilteringOperand extends IgxFilteringOperand {
  * @export
  */
 export class IgxNumberFilteringOperand extends IgxFilteringOperand {
-    private static _instance: IgxNumberFilteringOperand = null;
-
     protected constructor() {
         super();
         this.operations = [{
@@ -439,10 +430,6 @@ export class IgxNumberFilteringOperand extends IgxFilteringOperand {
             }
         }].concat(this.operations);
     }
-
-    public static instance(): IgxNumberFilteringOperand {
-        return this._instance || (this._instance = new this());
-    }
 }
 
 /**
@@ -451,8 +438,6 @@ export class IgxNumberFilteringOperand extends IgxFilteringOperand {
  * @export
  */
 export class IgxStringFilteringOperand extends IgxFilteringOperand {
-    private static _instance: IgxStringFilteringOperand = null;
-
     protected constructor() {
         super();
         this.operations = [{
@@ -526,10 +511,6 @@ export class IgxStringFilteringOperand extends IgxFilteringOperand {
         }].concat(this.operations);
     }
 
-    public static instance(): IgxStringFilteringOperand {
-        return this._instance || (this._instance = new this());
-    }
-
     /**
      * Applies case sensitivity on strings if provided
      *

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -894,8 +894,6 @@ export class SelectionWithTransactionsComponent extends BasicGridComponent {
 }
 
 export class CustomFilter extends IgxFilteringOperand {
-    private static _instance: CustomFilter;
-
     private constructor () {
         super();
         this.operations = [{
@@ -907,10 +905,6 @@ export class CustomFilter extends IgxFilteringOperand {
             iconName: 'custom'
         }];
     }
-
-    public static instance(): CustomFilter {
-        return this._instance || (this._instance = new this());
-    }
 }
 @Component({
     template: `<igx-grid [data]="data" height="500px" [allowFiltering]='true'>

src/app/grid/grid.sample.html

@@ -139,9 +139,9 @@ <h4>{{ col.field }}</h4>
                 </div>
             </div>
 
-            <igx-grid #grid2 [data]="data | async" [paging]="true" [perPage]="10" (onCellSelection)="onInlineEdit($event)">
+            <igx-grid #grid2 [data]="data | async" [paging]="true" [perPage]="10" [allowFiltering]="true" (onCellSelection)="onInlineEdit($event)">
                 <igx-column [sortable]="true" [field]="'ProductID'" [header]="'ID'"></igx-column>
-                <igx-column [sortable]="true" [field]="'ProductName'"></igx-column>
+                <igx-column [sortable]="true" [field]="'ProductName'" [filters]="customFilter" [filterable]="true"></igx-column>
                 <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'In Stock'">
                     <!--
                     <ng-template igxCell let-col="column" let-ri="rowIndex" let-item="item">
@@ -188,7 +188,7 @@ <h4 class="sample-title">Grid with templated cell remote data</h4>
             </div>
             <igx-grid #grid3 displayDensity="compact" [data]="remote | async" [paging]="true" [perPage]="10" (onPagingDone)="process($event)" (onSortingDone)="process($event)" [primaryKey]="'ProductID'" [rowSelectable]="true">
                 <igx-column [sortable]="true" [field]="'ProductID'" ></igx-column>
-                <igx-column [editable]="true" [field]="'ProductName'" ></igx-column>
+                <igx-column [editable]="true" [field]="'ProductName'"></igx-column>
                 <igx-column [sortable]="true" [field]="'UnitsInStock'" [header]="'Units in Stock'"></igx-column>
                 <igx-column [field]="'Discontinued'" [sortable]="true" [hidden]="true">
                     <ng-template igxHeader let-column="column">

src/app/grid/grid.sample.ts

@@ -49,6 +49,7 @@ export class GridSampleComponent implements OnInit, AfterViewInit {
     newRecord = '';
     editCell;
     exportFormat = 'XLSX';
+    customFilter = CustomStringFilter.instance();
 
     constructor(private localService: LocalService,
                 private remoteService: RemoteService,
@@ -282,3 +283,18 @@ export class GridSampleComponent implements OnInit, AfterViewInit {
         column.editable = true;
     }
 }
+
+export class CustomStringFilter extends IgxStringFilteringOperand {
+
+    private constructor() {
+        super();
+        this.append({
+            name: 'Custom',
+            logic: (value: any, searchVal: any, ignoreCase: boolean) => {
+                return value === searchVal;
+            },
+            isUnary: false,
+            iconName: 'starts_with'
+        });
+    }
+}