ESF on igx-grid does not reflect current filters in esf dialog

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

@@ -150,11 +150,10 @@ export class FilteringExpressionsTree implements IFilteringExpressionsTree {
         for (const expr of expressionsTree.filteringOperands) {
             if ((expr instanceof FilteringExpressionsTree)) {
                 return this.isFilteringExpressionsTreeForColumn(expr, fieldName);
-            } else {
-                return (expr as IFilteringExpression).fieldName === fieldName;
+            } else if ((expr as IFilteringExpression).fieldName === fieldName) {
+                return true;
             }
         }
-
         return false;
     }
 }

projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts

@@ -1,5 +1,5 @@
 import { IDropDownBase, IGX_DROPDOWN_BASE } from './drop-down.common';
-import { Directive, Input, HostBinding, HostListener, ElementRef, Optional, Inject, DoCheck, Output, EventEmitter, booleanAttribute } from '@angular/core';
+import { Directive, Input, HostBinding, HostListener, ElementRef, Optional, Inject, Output, EventEmitter, booleanAttribute, DoCheck } from '@angular/core';
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxDropDownGroupComponent } from './drop-down-group.component';
 
@@ -287,11 +287,11 @@ export class IgxDropDownItemBaseDirective implements DoCheck {
         if (this._selected) {
             const dropDownSelectedItem = this.dropDown.selectedItem;
             if (!dropDownSelectedItem) {
-                this.dropDown.selectItem(this);
+                this.dropDown.selectItem(this, undefined, false);
             } else if (this.hasIndex
                 ? this._index !== dropDownSelectedItem.index || this.value !== dropDownSelectedItem.value :
                 this !== dropDownSelectedItem) {
-                this.dropDown.selectItem(this);
+                this.dropDown.selectItem(this, undefined, false);
             }
         }
     }

projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts

@@ -214,7 +214,7 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit
      * @param newSelection the item selected
      * @param event the event that triggered the call
      */
-    public selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event) {  // eslint-disable-line
+    public selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event, emit = true) {  // eslint-disable-line
         this.selectionChanging.emit({
             newSelection,
             oldSelection: null,

projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts

@@ -75,6 +75,6 @@ export interface IDropDownBase extends IDropDownList, IToggleView {
     closed: EventEmitter<IBaseEventArgs>;
     allowItemsFocus?: boolean;
     setSelectedItem(index: number): void;
-    selectItem(item: IgxDropDownItemBaseDirective, event?: Event): void;
+    selectItem(item: IgxDropDownItemBaseDirective, event?: Event, emit?: boolean): void;
 }
 

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -505,9 +505,10 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
      * @hidden
      * @internal
      * @param newSelection
+     * @param emit
      * @param event
      */
-    public override selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event) {
+    public override selectItem(newSelection?: IgxDropDownItemBaseDirective, event?: Event, emit = true) {
         const oldSelection = this.selectedItem;
         if (!newSelection) {
             newSelection = this.focusedItem;
@@ -525,7 +526,10 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
             } as IgxDropDownItemBaseDirective;
         }
         const args: ISelectionEventArgs = { oldSelection, newSelection, cancel: false, owner: this };
-        this.selectionChanging.emit(args);
+
+        if (emit) {
+            this.selectionChanging.emit(args);
+        }
 
         if (!args.cancel) {
             if (this.isSelectionValid(args.newSelection)) {

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html

@@ -8,7 +8,7 @@
         aria-haspopup="true"
         [attr.aria-controls]="this.subMenu.listId"
         [attr.aria-activedescendant]="!this.subMenu.collapsed ? this.subMenu.focusedItem?.id : null">
-        <span>{{ subMenuText }}</span>
+        <span class="igx-excel-filter__filter-number">{{ subMenuText }} <ng-container *ngIf="filterNumber > 0">({{filterNumber}})</ng-container></span>
         <igx-icon name="chevron_right" family="default"></igx-icon>
     </div>
 
@@ -20,13 +20,15 @@
         <div>
             <igx-drop-down-item
             *ngFor="let condition of conditions"
+            [selected]="getSelectedCondition(condition)"
             [value]="condition">
                 <div class="igx-grid__filtering-dropdown-items">
                     <igx-icon family="default" [name]="getCondition(condition).iconName"></igx-icon>
                     <span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
                 </div>
             </igx-drop-down-item>
-            <igx-drop-down-item *ngIf="showCustomFilterItem()">
+            <igx-drop-down-item *ngIf="showCustomFilterItem()"
+            [selected]="getSelectedCondition('custom')" >
                 <div class="igx-grid__filtering-dropdown-items">
                     <igx-icon name="filter_list" family="default"></igx-icon>
                     <span class="igx-grid__filtering-dropdown-text">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts

@@ -40,6 +40,10 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
     @ViewChild('subMenu', { read: IgxDropDownComponent })
     public subMenu: IgxDropDownComponent;
 
+    protected get filterNumber() {
+        return this.esf.expressionsList.length;
+    }
+
     private shouldOpenSubMenu = true;
     private destroy$ = new Subject<boolean>();
 
@@ -120,6 +124,14 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
         return this.esf.column.filters.condition(value);
     }
 
+    protected getSelectedCondition(condition: string): boolean {
+        const expressions = this.esf.expressionsList;
+        if (expressions.length < 1) {
+            return false;
+        }
+        return expressions.length === 1 ? expressions[0].expression.condition.name === condition : condition === 'custom';
+    }
+
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.ts

@@ -245,6 +245,23 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
     }
 
     private createInitialExpressionUIElement() {
+        if (this.expressionsList.length == 1) {
+            const currentExprUI = this.expressionsList.pop();
+            if (currentExprUI.expression.condition.name === this.selectedOperator) {
+                currentExprUI.beforeOperator = FilteringLogic.And;
+                const secondExprUI = new ExpressionUI();
+                secondExprUI.expression = {
+                    condition: null,
+                    fieldName: this.column.field,
+                    ignoreCase: this.column.filteringIgnoreCase,
+                    searchVal: null
+                };
+                currentExprUI.afterOperator = FilteringLogic.And;
+                this.expressionsList.push(currentExprUI);
+                this.expressionsList.push(secondExprUI);
+                return;
+            }
+        }
         this.expressionsList = [];
         const firstExprUI = new ExpressionUI();
 

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

@@ -783,6 +783,49 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             fix.detectChanges();
 
             expect(grid.filteringDone.emit).toHaveBeenCalledWith(grid.advancedFilteringExpressionsTree);
+            expect(grid.nativeElement.querySelector('.igx-adv-filter--column-number').textContent).toContain('1');
+        }));
+
+        it('Applying/Clearing filter through the API should correctly update the UI and correctly show number of filtered columns', fakeAsync(() => {
+            grid.height = '800px';
+            fix.detectChanges();
+            tick(50);
+
+            // Verify the initial state of the grid and that no filters are present.
+            expect(grid.filteredData).toBeNull();
+            expect(grid.nativeElement.querySelector('.igx-adv-filter--column-number')).toBeNull();
+
+            // Apply advanced filter through API.
+            const tree = new FilteringExpressionsTree(FilteringLogic.And);
+            tree.filteringOperands.push({
+                fieldName: 'Downloads', searchVal: 100, condition: IgxNumberFilteringOperand.instance().condition('greaterThan')
+            });
+            const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
+            orTree.filteringOperands.push({
+                fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                ignoreCase: true
+            });
+            orTree.filteringOperands.push({
+                fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                ignoreCase: true
+            });
+            tree.filteringOperands.push(orTree);
+            grid.advancedFilteringExpressionsTree = tree;
+            fix.detectChanges();
+
+            // Verify the state of the grid after filtering.
+            expect(grid.filteredData.length).toBe(2);
+            expect(grid.nativeElement.querySelector('.igx-adv-filter--column-number').textContent).toContain('(2)');
+            expect(GridFunctions.getExcelFilterIconFiltered(fix, 'ProductName')).toBeDefined();
+            expect(GridFunctions.getExcelFilterIconFiltered(fix, 'Downloads')).toBeDefined();
+
+            // Clear filters through API.
+            grid.advancedFilteringExpressionsTree = null;
+            fix.detectChanges();
+
+            // Verify there are not filters present and that the default text is shown.
+            expect(grid.advancedFilteringExpressionsTree).toBeNull();
+            expect(grid.nativeElement.querySelector('.igx-adv-filter--column-number')).toBeNull();
         }));
 
         it('Applying/Clearing filter through the API should correctly update the UI.', fakeAsync(() => {

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

@@ -3322,6 +3322,37 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             checkboxes.forEach(c => expect(c.checked).toBeFalsy());
         }));
 
+        it('Should show the previously entered filter value when reopen esf dialog.', fakeAsync(() => {
+            const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
+            const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'ProductName');
+            columnsFilteringTree.filteringOperands = [
+                { fieldName: 'ProductName', searchVal: 'Angular', condition: IgxStringFilteringOperand.instance().condition('contains') }
+            ];
+            gridFilteringExpressionsTree.filteringOperands.push(columnsFilteringTree);
+            grid.filteringExpressionsTree = gridFilteringExpressionsTree;
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
+
+            expect(grid.nativeElement.querySelector('.igx-excel-filter__filter-number').textContent).toContain('(1)');
+            expect(grid.filteredData.length).toEqual(1);
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu));
+            checkboxes.forEach(c => expect(c.checked).toBeFalsy());
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick(30);
+            fix.detectChanges();
+
+            expect(GridFunctions.getExcelStyleFilteringComponent(fix).querySelector('.igx-drop-down__item--selected')).toBeDefined();
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 10);
+            tick(100);
+            fix.detectChanges();
+
+            expect(GridFunctions.getExcelFilteringInput(fix, 0).value).toEqual('Angular');
+        }));
+
         it('Should not select values in list if two values with Or operator are entered and contains operand.', fakeAsync(() => {
             const gridFilteringExpressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
             const columnsFilteringTree = new FilteringExpressionsTree(FilteringLogic.Or, 'ProductName');
@@ -3335,11 +3366,18 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
 
+            expect(grid.nativeElement.querySelector('.igx-excel-filter__filter-number').textContent).toContain('(2)');
             expect(grid.filteredData.length).toEqual(2);
 
             const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
             const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu));
             checkboxes.forEach(c => expect(c.checked).toBeFalsy());
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick(30);
+            fix.detectChanges();
+
+            expect(GridFunctions.getExcelStyleFilteringComponent(fix).querySelector('.igx-drop-down__item--selected')).toBeDefined();
         }));
 
         it('Should select values in list if two values with Or operator are entered and they are in the list below.', fakeAsync(() => {
@@ -4811,6 +4849,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
             GridFunctions.clickExcelFilterCascadeButton(fix);
             fix.detectChanges();
+
+            expect(grid.nativeElement.querySelector('.igx-excel-filter__filter-number').textContent).not.toContain('9');
             GridFunctions.clickOperatorFromCascadeMenu(fix, 0);
             tick(200);
 

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -154,7 +154,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
     }
 
     public get filterIconClassName() {
-        return this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
+        return this.column.filteringExpressionsTree || this.isAdvancedFilterApplied() ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
     }
 
     public get selectable() {
@@ -276,6 +276,13 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
         this.sortDirection = expr ? expr.dir : SortingDirection.None;
     }
 
+    protected isAdvancedFilterApplied() {
+        if(!this.grid.advancedFilteringExpressionsTree) {
+            return false;
+        }
+        return !!this.grid.advancedFilteringExpressionsTree.find(this.column.field);
+    }
+
     private triggerSort() {
         const groupingExpr = this.grid.groupingExpressions ?
             this.grid.groupingExpressions.find((expr) => expr.fieldName === this.column.field) :

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html

@@ -7,4 +7,5 @@
         <ng-content></ng-content>
     </span>
     <span *ngIf="!ref.childNodes.length">{{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }}</span>
+    <span class="igx-adv-filter--column-number" *ngIf="grid?.advancedFilteringExpressionsTree"> ({{ numberOfColumns }}) </span>
 </button>

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts

@@ -1,10 +1,12 @@
-import { Component, Inject, Input } from '@angular/core';
+import { AfterViewInit, Component, Inject, Input } from '@angular/core';
 import { IgxToolbarToken } from './token';
 import { OverlaySettings } from '../../services/overlay/utilities';
 import { IgxIconComponent } from '../../icon/icon.component';
 import { NgClass, NgIf } from '@angular/common';
 import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
 import { IgxButtonDirective } from '../../directives/button/button.directive';
+import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { IFilteringExpression } from '../../data-operations/filtering-expression.interface';
 
 
 /**
@@ -26,8 +28,8 @@ import { IgxButtonDirective } from '../../directives/button/button.directive';
     standalone: true,
     imports: [IgxButtonDirective, IgxRippleDirective, NgClass, IgxIconComponent, NgIf]
 })
-export class IgxGridToolbarAdvancedFilteringComponent {
-
+export class IgxGridToolbarAdvancedFilteringComponent implements AfterViewInit {
+    protected numberOfColumns: number;
     /**
      * Returns the grid containing this component.
      */
@@ -38,5 +40,26 @@ export class IgxGridToolbarAdvancedFilteringComponent {
     @Input()
     public overlaySettings: OverlaySettings;
 
-    constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) { }
+    constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) {
+        this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => {
+            this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length;
+        });
+    }
+
+    public ngAfterViewInit(): void {
+        this.numberOfColumns = this.grid?.advancedFilteringExpressionsTree ? this.extractUniqueFieldNamesFromFilterTree(this.grid?.advancedFilteringExpressionsTree).length : 0;
+    }
+
+    protected extractUniqueFieldNamesFromFilterTree(filteringTree?: IFilteringExpressionsTree) : string[] {
+        const columnNames = [];
+        if (!filteringTree) return columnNames;
+        filteringTree.filteringOperands.forEach((expr) => {
+            if (expr instanceof FilteringExpressionsTree) {
+                columnNames.push(...this.extractUniqueFieldNamesFromFilterTree(expr));
+            } else {
+                columnNames.push((expr as IFilteringExpression).fieldName);
+            }
+        });
+        return [...new Set(columnNames)];
+    }
 }