Merge pull request #9297 from IgniteUI/dmdimitrov/fix-9050-10.2.x

kdinev · web-flow · commit 6c3482bfe160 · 2021-04-09T11:20:38.000+03:00
fix(hierarchical-grid): fixed row island filtering - 10.2.x
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts
@@ -2,13 +2,10 @@ import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 import { cloneArray, isEqual, reverseMapper, mergeObjects } from '../core/utils';
 import { DataUtil, DataType } from '../data-operations/data-util';
-import { IFilteringExpression } from '../data-operations/filtering-expression.interface';
 import { ISortingExpression, SortingDirection } from '../data-operations/sorting-expression.interface';
 import { IgxGridCellComponent } from './cell.component';
 import { IgxGridBaseDirective } from './grid-base.directive';
 import { IgxRowDirective } from './row.directive';
-import { IFilteringOperation } from '../data-operations/filtering-condition';
-import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 import { Transaction, TransactionType, State } from '../services/transaction/transaction';
 import { IgxCell, IgxRow } from './selection/selection.service';
 import { GridType } from './common/grid.interface';
@@ -328,61 +325,6 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
         this.grid.sortingExpressions = sortingState;
     }
 
-    public filter(fieldName: string, term, conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree,
-        ignoreCase: boolean) {
-        const grid = this.grid;
-        const filteringTree = grid.filteringExpressionsTree;
-        this.grid.endEdit(false);
-
-        if (grid.paging) {
-            grid.page = 0;
-        }
-
-        const fieldFilterIndex = filteringTree.findIndex(fieldName);
-        if (fieldFilterIndex > -1) {
-            filteringTree.filteringOperands.splice(fieldFilterIndex, 1);
-        }
-
-        this.prepare_filtering_expression(filteringTree, fieldName, term, conditionOrExpressionsTree, ignoreCase, fieldFilterIndex);
-        grid.filteringExpressionsTree = filteringTree;
-    }
-
-    public filter_global(term, condition, ignoreCase) {
-        if (!condition) {
-            return;
-        }
-
-        const grid = this.grid;
-        const filteringTree = grid.filteringExpressionsTree;
-        grid.endEdit(false);
-        if (grid.paging) {
-            grid.page = 0;
-        }
-
-        filteringTree.filteringOperands = [];
-        for (const column of grid.columns) {
-            this.prepare_filtering_expression(filteringTree, column.field, term,
-                condition, ignoreCase || column.filteringIgnoreCase);
-        }
-
-        grid.filteringExpressionsTree = filteringTree;
-    }
-
-    public clear_filter(fieldName: string) {
-        const grid = this.grid;
-        grid.endEdit(false);
-        const filteringState = grid.filteringExpressionsTree;
-        const index = filteringState.findIndex(fieldName);
-
-        if (index > -1) {
-            filteringState.filteringOperands.splice(index, 1);
-        } else if (!fieldName) {
-            filteringState.filteringOperands = [];
-        }
-
-        grid.filteringExpressionsTree = filteringState;
-    }
-
     public clear_sort(fieldName: string) {
         const sortingState = this.grid.sortingExpressions;
         const index = sortingState.findIndex((expr) => expr.fieldName === fieldName);
@@ -392,34 +334,6 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
         }
     }
 
-    protected prepare_filtering_expression(filteringState: IFilteringExpressionsTree, fieldName: string, searchVal,
-        conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree, ignoreCase: boolean, insertAtIndex = -1) {
-
-        let newExpressionsTree;
-        const oldExpressionsTreeIndex = filteringState.findIndex(fieldName);
-        const expressionsTree = conditionOrExpressionsTree instanceof FilteringExpressionsTree ?
-            conditionOrExpressionsTree as IFilteringExpressionsTree : null;
-        const condition = conditionOrExpressionsTree instanceof FilteringExpressionsTree ?
-            null : conditionOrExpressionsTree as IFilteringOperation;
-        const newExpression: IFilteringExpression = { fieldName, searchVal, condition, ignoreCase };
-
-        if (oldExpressionsTreeIndex === -1) {
-            // no expressions tree found for this field
-            if (expressionsTree) {
-                if (insertAtIndex > -1) {
-                    filteringState.filteringOperands.splice(insertAtIndex, 0, expressionsTree);
-                } else {
-                    filteringState.filteringOperands.push(expressionsTree);
-                }
-            } else if (condition) {
-                // create expressions tree for this field and add the new expression to it
-                newExpressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName);
-                newExpressionsTree.filteringOperands.push(newExpression);
-                filteringState.filteringOperands.push(newExpressionsTree);
-            }
-        }
-    }
-
     protected prepare_sorting_expression(stateCollections: Array<Array<any>>, expression: ISortingExpression) {
         if (expression.dir === SortingDirection.None) {
             stateCollections.forEach(state => {
@@ -629,5 +543,4 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
     private isToggleKey(key: string): boolean {
         return ROW_COLLAPSE_KEYS.has(key) || ROW_EXPAND_KEYS.has(key);
     }
-
 }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
@@ -7,13 +7,11 @@ import { takeUntil, first } from 'rxjs/operators';
 import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
-import { GridBaseAPIService } from '../api.service';
 import { IColumnResizeEventArgs } from '../common/events';
-import { GridType } from '../common/grid.interface';
 import { OverlaySettings, PositionSettings, VerticalAlignment } from '../../services/overlay/utilities';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { useAnimation } from '@angular/animations';
-import { fadeIn, fadeOut } from '../../animations/main';
+import { fadeIn } from '../../animations/main';
 import { ExcelStylePositionStrategy } from './excel-style/excel-style-position-strategy';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
 import { IgxGridExcelStyleFilteringComponent } from './excel-style/grid.excel-style-filtering.component';
@@ -56,7 +54,7 @@ export class IgxFilteringService implements OnDestroy {
     public activeFilterCell = 0;
     grid: IgxGridBaseDirective;
 
-    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, private _moduleRef: NgModuleRef<any>,
+    constructor(private _moduleRef: NgModuleRef<any>,
         private iconService: IgxIconService,  private _overlayService: IgxOverlayService) {}
 
     ngOnDestroy(): void {
@@ -200,41 +198,61 @@ export class IgxFilteringService implements OnDestroy {
      */
     public filter(field: string, value: any, conditionOrExpressionTree?: IFilteringOperation | IFilteringExpressionsTree,
         ignoreCase?: boolean) {
-        const col = this.gridAPI.get_column_by_name(field);
+        const col = this.grid.getColumnByName(field);
         const filteringIgnoreCase = ignoreCase || (col ? col.filteringIgnoreCase : false);
 
         if (conditionOrExpressionTree) {
-            this.gridAPI.filter(field, value, conditionOrExpressionTree, filteringIgnoreCase);
+            this.filter_internal(field, value, conditionOrExpressionTree, filteringIgnoreCase);
         } else {
             const expressionsTreeForColumn = this.grid.filteringExpressionsTree.find(field);
             if (!expressionsTreeForColumn) {
                 throw new Error('Invalid condition or Expression Tree!');
             } else if (expressionsTreeForColumn instanceof FilteringExpressionsTree) {
-                this.gridAPI.filter(field, value, expressionsTreeForColumn, filteringIgnoreCase);
+                this.filter_internal(field, value, expressionsTreeForColumn, filteringIgnoreCase );
             } else {
                 const expressionForColumn = expressionsTreeForColumn as IFilteringExpression;
-                this.gridAPI.filter(field, value, expressionForColumn.condition, filteringIgnoreCase);
+                this.filter_internal(field, value, expressionForColumn.condition, filteringIgnoreCase );
             }
         }
         const eventArgs = this.grid.filteringExpressionsTree.find(field) as FilteringExpressionsTree;
         // Wait for the change detection to update filtered data through the pipes and then emit the event.
         requestAnimationFrame(() => this.grid.onFilteringDone.emit(eventArgs));
     }
 
+    public filter_global(term, condition, ignoreCase) {
+        if (!condition) {
+            return;
+        }
+
+        const grid = this.grid;
+        const filteringTree = grid.filteringExpressionsTree;
+        grid.endEdit(false);
+        if (grid.paging) {
+            grid.page = 0;
+        }
+
+        filteringTree.filteringOperands = [];
+        for (const column of grid.columns) {
+            this.prepare_filtering_expression(filteringTree, column.field, term,
+                condition, ignoreCase || column.filteringIgnoreCase);
+        }
+
+        grid.filteringExpressionsTree = filteringTree;
+    }
+
     /**
      * Clears the filter of a given column if name is provided. Otherwise clears the filters of all columns.
      */
     public clearFilter(field: string): void {
         if (field) {
-            const column = this.gridAPI.get_column_by_name(field);
+            const column = this.grid.getColumnByName(field);
             if (!column) {
                 return;
             }
         }
 
         this.isFiltering = true;
-
-        this.gridAPI.clear_filter(field);
+        this.clear_filter(field);
 
         // Wait for the change detection to update filtered data through the pipes and then emit the event.
         requestAnimationFrame(() => this.grid.onFilteringDone.emit(null));
@@ -252,11 +270,26 @@ export class IgxFilteringService implements OnDestroy {
         this.isFiltering = false;
     }
 
+    public clear_filter(fieldName: string) {
+        const grid = this.grid;
+        grid.endEdit(false);
+        const filteringState = grid.filteringExpressionsTree;
+        const index = filteringState.findIndex(fieldName);
+
+        if (index > -1) {
+            filteringState.filteringOperands.splice(index, 1);
+        } else if (!fieldName) {
+            filteringState.filteringOperands = [];
+        }
+
+        grid.filteringExpressionsTree = filteringState;
+    }
+
     /**
      * Filters all the `IgxColumnComponent` in the `IgxGridComponent` with the same condition.
      */
     public filterGlobal(value: any, condition, ignoreCase?) {
-        this.gridAPI.filter_global(value, condition, ignoreCase);
+        this.filter_global(value, condition, ignoreCase);
 
         // Wait for the change detection to update filtered data through the pipes and then emit the event.
         requestAnimationFrame(() => this.grid.onFilteringDone.emit(this.grid.filteringExpressionsTree));
@@ -435,6 +468,53 @@ export class IgxFilteringService implements OnDestroy {
         return this.grid.filteredData;
     }
 
+    private filter_internal(fieldName: string, term, conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree,
+        ignoreCase: boolean) {
+        const grid = this.grid;
+        const filteringTree = grid.filteringExpressionsTree;
+        this.grid.endEdit(false);
+
+        if (grid.paging) {
+            grid.page = 0;
+        }
+
+        const fieldFilterIndex = filteringTree.findIndex(fieldName);
+        if (fieldFilterIndex > -1) {
+            filteringTree.filteringOperands.splice(fieldFilterIndex, 1);
+        }
+
+        this.prepare_filtering_expression(filteringTree, fieldName, term, conditionOrExpressionsTree, ignoreCase, fieldFilterIndex);
+        grid.filteringExpressionsTree = filteringTree;
+    }
+
+    private prepare_filtering_expression(filteringState: IFilteringExpressionsTree, fieldName: string, searchVal,
+        conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree, ignoreCase: boolean, insertAtIndex = -1) {
+
+        let newExpressionsTree;
+        const oldExpressionsTreeIndex = filteringState.findIndex(fieldName);
+        const expressionsTree = conditionOrExpressionsTree instanceof FilteringExpressionsTree ?
+            conditionOrExpressionsTree as IFilteringExpressionsTree : null;
+        const condition = conditionOrExpressionsTree instanceof FilteringExpressionsTree ?
+            null : conditionOrExpressionsTree as IFilteringOperation;
+        const newExpression: IFilteringExpression = { fieldName, searchVal, condition, ignoreCase };
+
+        if (oldExpressionsTreeIndex === -1) {
+            // no expressions tree found for this field
+            if (expressionsTree) {
+                if (insertAtIndex > -1) {
+                    filteringState.filteringOperands.splice(insertAtIndex, 0, expressionsTree);
+                } else {
+                    filteringState.filteringOperands.push(expressionsTree);
+                }
+            } else if (condition) {
+                // create expressions tree for this field and add the new expression to it
+                newExpressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName);
+                newExpressionsTree.filteringOperands.push(newExpression);
+                filteringState.filteringOperands.push(newExpressionsTree);
+            }
+        }
+    }
+
     private isFilteringTreeComplex(expressions: IFilteringExpressionsTree | IFilteringExpression): boolean {
         if (!expressions) {
             return false;
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -5221,7 +5221,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                     this.gridAPI.clear_groupby(record.item.field);
 
                     // Clear Filtering
-                    this.gridAPI.clear_filter(record.item.field);
+                    this.filteringService.clear_filter(record.item.field);
 
                     // Close filter row
                     if (this.filteringService.isFilterRowVisible
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts
@@ -1104,7 +1104,7 @@ describe('IgxGrid - Cell Editing #grid', () => {
 
             grid.filter('fullName', 'Al', IgxStringFilteringOperand.instance().condition('equals'));
             fixture.detectChanges();
-            cell.gridAPI.clear_filter('fullName');
+            grid.clearFilter('fullName');
             fixture.detectChanges();
 
             cell = grid.getCellByColumn(0, 'fullName');
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts
@@ -720,6 +720,57 @@ describe('IgxHierarchicalGrid Row Islands #hGrid', () => {
         expect(ri1.onCellClick.emit).toHaveBeenCalledTimes(1);
         expect(ri1.onCellClick.emit).toHaveBeenCalledWith(args);
     });
+
+    it('should filter correctly on row island',
+    fakeAsync(() => { /** height/width setter rAF + row toggle rAF */
+        const uniqueData = [
+            {
+                ID: 1,
+                ProductName : 'Parent Name',
+                childData: [
+                    {
+                        ID: 11,
+                        ProductName : 'Child11 ProductName'
+                    },
+                    {
+                        ID: 12,
+                        ProductName : 'Child12 ProductName'
+                    }
+                ],
+                childData2: [
+                    {
+                        ID: 21,
+                        Col1: 'Child21 Col1',
+                        Col2: 'Child21 Col2',
+                        Col3: 'Child21 Col3'
+                    },
+                    {
+                        ID: 22,
+                        Col1: 'Child22 Col1',
+                        Col2: 'Child22 Col2',
+                        Col3: 'Child22 Col3'
+                    }
+                ]
+            }
+        ];
+        fixture.componentInstance.data = uniqueData;
+        fixture.detectChanges();
+
+        const rowIsland1 = fixture.componentInstance.rowIsland1 as IgxRowIslandComponent;
+        rowIsland1.filter('ProductName', 'Child12', IgxStringFilteringOperand.instance().condition('contains'), true);
+
+        const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        UIInteractions.simulateClickAndSelectEvent(row.expander);
+        tick();
+        fixture.detectChanges();
+
+        const childGrids =  fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+        const childGrid1 = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+        expect(childGrid1.data.length).toEqual(2);
+        expect(childGrid1.filteredData.length).toEqual(1);
+        expect(childGrid1.rowList.length).toEqual(1);
+        expect(childGrid1.getCellByColumn(0, 'ProductName').nativeElement.innerText).toEqual('Child12 ProductName');
+    }));
 });
 
 describe('IgxHierarchicalGrid Children Sizing #hGrid', () => {
@@ -1384,12 +1435,12 @@ export class IgxHierarchicalGridTestBaseComponent {
         // 3 level hierarchy
         this.data = this.generateDataUneven(20, 3);
     }
-    generateDataUneven(count: number, level: number, parendID: string = null) {
+    generateDataUneven(count: number, level: number, parentID: string = null) {
         const prods = [];
         const currLevel = level;
         let children;
         for (let i = 0; i < count; i++) {
-            const rowID = parendID ? parendID + i : i.toString();
+            const rowID = parentID ? parentID + i : i.toString();
             if (level > 0 ) {
                // Have child grids for row with even id less rows by not multiplying by 2
                children = this.generateDataUneven((i % 2 + 1) * Math.round(count / 3) , currLevel - 1, rowID);
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts
