fix(esf): Correctly process esf nested props and hiearchical structure (#16893)

Author: mddragnev

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-search.component.ts

@@ -12,7 +12,7 @@ import { IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxList
 import { IgxButtonDirective, IgxForOfDirective } from 'igniteui-angular/directives';
 import { IgxTreeComponent, IgxTreeNodeComponent, ITreeNodeSelectionEvent } from 'igniteui-angular/tree';
 import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar';
-import { cloneHierarchicalArray, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, PlatformUtil, ɵSize } from 'igniteui-angular/core';
+import { cloneHierarchicalArray, columnFieldPath, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, PlatformUtil, resolveNestedPath, ɵSize } from 'igniteui-angular/core';
 import { Navigate } from 'igniteui-angular/drop-down';
 
 @Directive({
@@ -601,13 +601,15 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
                         searchVal = new Set(selectedItems.map(e => e.value.toLocaleTimeString()));
                         break;
                     case GridColumnDataType.String:
-                        if (this.esf.column.filteringIgnoreCase) {
+                        if (this.esf.column.filteringIgnoreCase && !this.isHierarchical()) {
                             const selectedValues = new Set(selectedItems.map(item => item.value.toLowerCase()));
                             searchVal = new Set();
 
                             this.esf.grid.data.forEach(item => {
-                                if (typeof item[this.esf.column.field] === "string" && selectedValues.has(item[this.esf.column.field]?.toLowerCase())) {
-                                    searchVal.add(item[this.esf.column.field]);
+                                const fieldPaths = columnFieldPath(this.esf.column.field)
+                                const itemValue = resolveNestedPath(item, fieldPaths);
+                                if (typeof itemValue === "string" && selectedValues.has(itemValue.toLowerCase())) {
+                                    searchVal.add(itemValue);
                                 }
                             });
                             break;

projects/igniteui-angular/grids/grid/src/grid.nested.props.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, ComponentFixture, fakeAsync, waitForAsync } from '@angular/core/testing';
+import { TestBed, ComponentFixture, fakeAsync, waitForAsync, tick } from '@angular/core/testing';
 import { IgxGridComponent } from './grid.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Component, DebugElement, ViewChild } from '@angular/core';
@@ -318,6 +318,29 @@ describe('Grid - nested data source properties #grid', () => {
 
             expect(first(copiedData).user.name.first).toMatch('Updated!');
         });
+
+        it('should correctly filter with ESF', fakeAsync(() => {
+            setupData(DATA);
+            grid.getColumnByName('user').field = 'user.name.first';
+            fixture.detectChanges();
+            grid.allowFiltering = true;
+            grid.filterMode="excelStyleFilter";
+            fixture.detectChanges();
+
+            GridFunctions.clickExcelFilterIcon(fixture, 'user.name.first');
+            fixture.detectChanges();
+            tick();
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fixture, 'igx-grid');
+            const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-grid'));
+            checkboxes[1].click();
+            fixture.detectChanges();
+            tick();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fixture, null, 'igx-grid');
+            fixture.detectChanges();
+            tick();
+            expect(grid.filteredSortedData.length).toBeGreaterThan(0);
+        }));
     });
 });
 

projects/igniteui-angular/grids/tree-grid/src/tree-grid-filtering.spec.ts

@@ -770,6 +770,25 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => {
 
             expect(console.error).not.toHaveBeenCalled();
         }));
+
+        it('Should filter hierarchical data when an item is unselected.', fakeAsync(() => {
+            tGrid.filterStrategy = new TreeGridFilteringStrategy(['ID', "Name"]);
+            GridFunctions.clickExcelFilterIcon(fix, 'Name');
+            fix.detectChanges();
+            tick();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix, 'igx-tree-grid');
+            const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu, 'igx-tree-grid'));
+            checkboxes[1].click();
+            fix.detectChanges();
+            tick();
+
+            GridFunctions.clickApplyExcelStyleFiltering(fix, null, 'igx-tree-grid');
+            fix.detectChanges();
+            tick();
+
+            expect(tGrid.filteredSortedData.length).toBeGreaterThan(0);
+        }));
     });
 
     describe('Tree grid ESF templates', () => {