chore(filtering): Change filtering components strategy to OnPush (#2938)

IgniteUI · Nov 19, 2018 · 334c1a2 · 334c1a2
1 parent ef196bd
commit 334c1a2
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 40 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts
@@ -8,7 +8,9 @@ import {
     AfterViewInit,
     ElementRef,
     HostListener,
-    OnInit
+    OnInit,
+    ChangeDetectionStrategy,
+    DoCheck
 } from '@angular/core';
 import { IgxColumnComponent } from '../column.component';
 import { IFilteringExpression } from '../../data-operations/filtering-expression.interface';
@@ -22,11 +24,12 @@ import { IgxGridGroupByRowComponent } from '../grid';
  * @hidden
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     preserveWhitespaces: false,
     selector: 'igx-grid-filtering-cell',
     templateUrl: './grid-filtering-cell.component.html'
 })
-export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
+export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoCheck {
 
     private baseClass = 'igx-grid__filtering-cell-indicator';
     private currentTemplate = null;
@@ -73,6 +76,10 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit {
         this.updateFilterCellArea();
     }
 
+    public ngDoCheck() {
+        this.updateFilterCellArea();
+    }
+
     @HostListener('keydown.tab', ['$event'])
     public onTabKeyDown(eventArgs) {
         const pinnedColumns = this.filteringService.grid.pinnedColumns;

diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.ts
@@ -5,12 +5,12 @@ import {
     Input,
     TemplateRef,
     ViewChild,
-    OnDestroy,
     ViewChildren,
     QueryList,
     ElementRef,
     HostBinding,
-    HostListener
+    HostListener,
+    ChangeDetectionStrategy
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { DataType } from '../../data-operations/data-util';
@@ -20,7 +20,6 @@ import { IFilteringOperation } from '../../data-operations/filtering-condition';
 import { FilteringLogic, IFilteringExpression } from '../../data-operations/filtering-expression.interface';
 import { HorizontalAlignment, VerticalAlignment, OverlaySettings } from '../../services/overlay/utilities';
 import { ConnectedPositioningStrategy } from '../../services/overlay/position/connected-positioning-strategy';
-import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IChipSelectEventArgs, IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../chips';
 import { ExpressionUI } from './grid-filtering.service';
 import { IgxDropDownItemComponent } from '../../drop-down/drop-down-item.component';
@@ -32,11 +31,12 @@ import { AbsoluteScrollStrategy } from '../../services/overlay/scroll';
  * @hidden
  */
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     preserveWhitespaces: false,
     selector: 'igx-grid-filtering-row',
     templateUrl: './grid-filtering-row.component.html'
 })
-export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
+export class IgxGridFilteringRowComponent implements AfterViewInit {
 
     private _positionSettings = {
         horizontalStartPoint: HorizontalAlignment.Left,
@@ -59,8 +59,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
 
     private chipsAreaWidth: number;
     private chipAreaScrollOffset = 0;
-    private conditionChanged = new Subject();
-    private unaryConditionChanged = new Subject();
     private _column = null;
 
     public showArrows: boolean;
@@ -140,10 +138,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
     @HostBinding('class.igx-grid__filtering-row')
     public cssClass = 'igx-grid__filtering-row';
 
-    constructor(public filteringService: IgxFilteringService, public element: ElementRef, public cdr: ChangeDetectorRef) {
-        this.unaryConditionChanged.subscribe(() => this.unaryConditionChangedCallback());
-        this.conditionChanged.subscribe(() => this.conditionChangedCallback());
-    }
+    constructor(public filteringService: IgxFilteringService, public element: ElementRef, public cdr: ChangeDetectorRef) {}
 
     ngAfterViewInit() {
         this._conditionsOverlaySettings.outlet = this.column.grid.outletDirective;
@@ -157,11 +152,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         this.input.nativeElement.focus();
     }
 
-    ngOnDestroy() {
-        this.conditionChanged.unsubscribe();
-        this.unaryConditionChanged.unsubscribe();
-    }
-
     @HostListener('keydown.shift.tab', ['$event'])
     @HostListener('keydown.tab', ['$event'])
     public onTabKeydown(event) {
@@ -395,9 +385,11 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         const value = (eventArgs.newSelection as IgxDropDownItemComponent).value;
         this.expression.condition = this.getCondition(value);
         if (this.expression.condition.isUnary) {
-            this.unaryConditionChanged.next(value);
+            // update grid's filtering on the next cycle to ensure the drop-down is closed
+            // if the drop-down is not closed this event handler will be invoked multiple times
+            requestAnimationFrame(() => this.unaryConditionChangedCallback());
         } else {
-            this.conditionChanged.next(value);
+            requestAnimationFrame(() => this.conditionChangedCallback());
         }
 
         if (this.input) {
@@ -464,7 +456,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         if (eventArgs.oldSelection) {
             expression.afterOperator = (eventArgs.newSelection as IgxDropDownItemComponent).value;
             this.expressionsList[this.expressionsList.indexOf(expression) + 1].beforeOperator = expression.afterOperator;
-            this.filter();
+
+            // update grid's filtering on the next cycle to ensure the drop-down is closed
+            // if the drop-down is not closed this event handler will be invoked multiple times
+            requestAnimationFrame(() => this.filter());
         }
     }
 

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -1165,7 +1165,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     get headerGroupsList(): IgxGridHeaderGroupComponent[] {
-        return flatten(this.headerGroups.toArray());
+        return this.headerGroups ? flatten(this.headerGroups.toArray()) : [];
     }
 
     /**
@@ -2758,6 +2758,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         if (this.rowList) {
             this.rowList.forEach((row) => row.cdr.markForCheck());
         }
+
+        if (this.filterCellList) {
+            this.filterCellList.forEach((c) => c.cdr.markForCheck());
+        }
+
         this.cdr.detectChanges();
     }
 

diff --git a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.html
@@ -13,16 +13,16 @@
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left"></span>
     <igx-grid-header [gridID]="column.gridID" [column]="column"></igx-grid-header>
     <igx-grid-filtering-cell [attr.draggable]="false" *ngIf="grid.allowFiltering" [column]="column"></igx-grid-filtering-cell>
-    <span *ngIf="!column.columnGroup" [attr.draggable]="false" [style.cursor]="colReszingService.resizeCursor" #resizeArea
+    <span *ngIf="!column.columnGroup" [attr.draggable]="false" [style.cursor]="colResizingService.resizeCursor" #resizeArea
             (mouseover)="onResizeAreaMouseOver()" (mousedown)="onResizeAreaMouseDown($event)" (dblclick)="autosizeColumnOnDblClick($event)"
             class="igx-grid__th-resize-handle">
-        <div *ngIf="colReszingService.showResizer" igxResizer
+        <div *ngIf="colResizingService.showResizer" igxResizer
             class="igx-grid__th-resize-line"
-            [style.height.px]="colReszingService.resizerHeight"
-            [restrictHResizeMax]="colReszingService.restrictResizeMax"
-            [restrictHResizeMin]="colReszingService.restrictResizeMin"
-            [resizeEndTimeout]="colReszingService.resizeEndTimeout"
-            (resizeEnd)="colReszingService.resizeColumn($event)">
+            [style.height.px]="colResizingService.resizerHeight"
+            [restrictHResizeMax]="colResizingService.restrictResizeMax"
+            [restrictHResizeMin]="colResizingService.restrictResizeMin"
+            [resizeEndTimeout]="colResizingService.resizeEndTimeout"
+            (resizeEnd)="colResizingService.resizeColumn($event)">
         </div>
     </span>
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-right"></span>

diff --git a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts
@@ -123,31 +123,31 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
 
     constructor(private cdr: ChangeDetectorRef,
                 public gridAPI: GridBaseAPIService<IgxGridBaseComponent>,
-                public colReszingService: IgxColumnResizingService,
+                public colResizingService: IgxColumnResizingService,
                 public filteringService: IgxFilteringService) { }
 
     public onResizeAreaMouseOver() {
         if (this.column.resizable) {
-            this.colReszingService.resizeCursor = 'col-resize';
+            this.colResizingService.resizeCursor = 'col-resize';
         }
     }
 
     public onResizeAreaMouseDown(event) {
         if (event.button === 0 && this.column.resizable) {
-            this.colReszingService.column = this.column;
-            this.colReszingService.showResizer = true;
-            this.colReszingService.isColumnResizing = true;
-            this.colReszingService.resizerHeight = this.column.grid.calcResizerHeight;
-            this.colReszingService.startResizePos = event.clientX;
+            this.colResizingService.column = this.column;
+            this.colResizingService.showResizer = true;
+            this.colResizingService.isColumnResizing = true;
+            this.colResizingService.resizerHeight = this.column.grid.calcResizerHeight;
+            this.colResizingService.startResizePos = event.clientX;
         } else {
-            this.colReszingService.resizeCursor = null;
+            this.colResizingService.resizeCursor = null;
         }
     }
 
     public autosizeColumnOnDblClick(event) {
         if (event.button === 0 && this.column.resizable) {
-            this.colReszingService.column = this.column;
-            this.colReszingService.autosizeColumnOnDblClick();
+            this.colResizingService.column = this.column;
+            this.colResizingService.autosizeColumnOnDblClick();
          }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header.component.ts
@@ -106,7 +106,7 @@ export class IgxGridHeaderComponent implements OnInit, DoCheck {
 
     constructor(
         public gridAPI: GridBaseAPIService<IgxGridBaseComponent>,
-        public colReszingService: IgxColumnResizingService,
+        public colResizingService: IgxColumnResizingService,
         public cdr: ChangeDetectorRef,
         public elementRef: ElementRef,
         public zone: NgZone,
@@ -125,7 +125,7 @@ export class IgxGridHeaderComponent implements OnInit, DoCheck {
 
     @HostListener('click', ['$event'])
     public onClick(event) {
-        if (!this.colReszingService.isColumnResizing) {
+        if (!this.colResizingService.isColumnResizing) {
             event.stopPropagation();
             if (this.grid.filteringService.isFilterRowVisible) {
                 if (this.column.filterable && !this.column.columnGroup &&