Fixed advanced filtering count issue (#15295)

Author: MarielaTihova

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

@@ -16,13 +16,14 @@ import {
     IgxGridExternalAdvancedFilteringComponent,
     IgxGridAdvancedFilteringBindingComponent,
     IgxGridAdvancedFilteringOverlaySettingsComponent,
-    IgxGridAdvancedFilteringDynamicColumnsComponent
+    IgxGridAdvancedFilteringDynamicColumnsComponent,
+    IgxGridAdvancedFilteringWithToolbarComponent
 } from '../../test-utils/grid-samples.spec';
 import { ControlsFunction } from '../../test-utils/controls-functions.spec';
 import { FormattedValuesFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { IgxHierGridExternalAdvancedFilteringComponent } from '../../test-utils/hierarchical-grid-components.spec';
 import { IgxHierarchicalGridComponent } from '../hierarchical-grid/public_api';
-import { IFilteringEventArgs } from '../public_api';
+import { IFilteringEventArgs, IgxGridToolbarAdvancedFilteringComponent } from '../public_api';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { By } from '@angular/platform-browser';
 import { IgxDateTimeEditorDirective } from '../../directives/date-time-editor/date-time-editor.directive';
@@ -43,7 +44,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
                 IgxGridExternalAdvancedFilteringComponent,
                 IgxGridAdvancedFilteringBindingComponent,
                 IgxHierGridExternalAdvancedFilteringComponent,
-                IgxGridAdvancedFilteringDynamicColumnsComponent
+                IgxGridAdvancedFilteringDynamicColumnsComponent,
+                IgxGridAdvancedFilteringWithToolbarComponent
             ]
         });
     }));
@@ -3157,6 +3159,65 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
 
     });
 
+    describe('Advanced filtering with toolbar', () => {
+        let fix: ComponentFixture<IgxGridAdvancedFilteringWithToolbarComponent>;
+        let grid: IgxGridComponent;
+
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(IgxGridAdvancedFilteringWithToolbarComponent);
+            grid = fix.componentInstance.grid;
+            fix.detectChanges();
+        }));
+
+        it('Should update toolbar when advancedFilteringExpressionsTreeChange emits a new value', fakeAsync(() => {
+            // Set initial filtering expressions tree
+            const tree = new FilteringExpressionsTree(FilteringLogic.And);
+            tree.filteringOperands.push({
+                fieldName: 'ProductName',
+                condition: IgxStringFilteringOperand.instance().condition('contains'),
+                searchVal: 'angular',
+                ignoreCase: true
+            });
+
+            // Apply the initial filtering tree
+            grid.advancedFilteringExpressionsTree = tree;
+            fix.detectChanges();
+
+            // Create a new filtering tree with more filters
+            const updatedTree = new FilteringExpressionsTree(FilteringLogic.And);
+            updatedTree.filteringOperands.push({
+                fieldName: 'Downloads',
+                condition: IgxStringFilteringOperand.instance().condition('equals'),
+                searchVal: 10,
+                ignoreCase: true
+            });
+            updatedTree.filteringOperands.push({
+                fieldName: 'ProductName',
+                condition: IgxStringFilteringOperand.instance().condition('contains'),
+                searchVal: 'angular',
+                ignoreCase: true
+            });
+            updatedTree.filteringOperands.push({
+                fieldName: 'Category',
+                condition: IgxStringFilteringOperand.instance().condition('equals'),
+                searchVal: 'electronics',
+                ignoreCase: false
+            });
+
+            // Update the filtering expressions tree
+            grid.advancedFilteringExpressionsTree = updatedTree;
+            fix.detectChanges();
+
+            // Verify the correct number of filters
+            const toolbarDebugElement = fix.debugElement.query(By.directive(IgxGridToolbarAdvancedFilteringComponent));
+            const toolbarComponent = toolbarDebugElement.componentInstance as IgxGridToolbarAdvancedFilteringComponent;
+            const numberOfFilters = (toolbarComponent as any).numberOfColumns;
+
+            expect(grid.advancedFilteringExpressionsTree.filteringOperands.length).toEqual(3);
+            expect(numberOfFilters).toEqual(3);
+        }));
+    })
+
     describe('Localization - ', () => {
         it('Should correctly change resource strings for Advanced Filtering dialog.', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxGridAdvancedFilteringComponent);

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Inject, Input } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { IgxToolbarToken } from './token';
 import { OverlaySettings } from '../../services/overlay/utilities';
 import { IgxIconComponent } from '../../icon/icon.component';
@@ -33,7 +33,7 @@ import { IFilteringExpression } from '../../data-operations/filtering-expression
     standalone: true,
     imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf]
 })
-export class IgxGridToolbarAdvancedFilteringComponent implements AfterViewInit {
+export class IgxGridToolbarAdvancedFilteringComponent implements OnInit {
     protected numberOfColumns: number;
     /**
      * Returns the grid containing this component.
@@ -46,17 +46,18 @@ export class IgxGridToolbarAdvancedFilteringComponent implements AfterViewInit {
     @Input()
     public overlaySettings: OverlaySettings;
 
-    constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) {
-        this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => {
-            this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length;
-        });
-    }
+    constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) { }
 
     /**
      * @hidden
      */
-    public ngAfterViewInit(): void {
+    public ngOnInit(): void {
+        // Initial value
         this.numberOfColumns = this.grid?.advancedFilteringExpressionsTree ? this.extractUniqueFieldNamesFromFilterTree(this.grid?.advancedFilteringExpressionsTree).length : 0;
+        // Subscribing for future updates
+        this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => {
+            this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length;
+        });
     }
 
     protected extractUniqueFieldNamesFromFilterTree(filteringTree?: IFilteringExpressionsTree) : string[] {

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

@@ -1186,6 +1186,30 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent {
     }
 }
 
+@Component({
+    template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="false">
+        <igx-grid-toolbar >
+            <igx-grid-toolbar-actions>
+                <igx-grid-toolbar-advanced-filtering>Really advanced filtering</igx-grid-toolbar-advanced-filtering>
+            </igx-grid-toolbar-actions>
+        </igx-grid-toolbar>
+        <igx-column width="100px" [field]="'ID'" [header]="'HeaderID'" [hasSummary]="true"></igx-column>
+        <igx-column width="100px" [field]="'ProductName'" dataType="string"></igx-column>
+        <igx-column width="100px" [field]="'Downloads'" dataType="number" [hasSummary]="true"></igx-column>
+        <igx-column width="100px" [field]="'Released'" dataType="boolean"></igx-column>
+        <igx-column width="100px" [field]="'ReleaseDate'" dataType="date" headerClasses="header-release-date"></igx-column>
+        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" dataType="string" [filters]="customFilter">
+        <igx-column width="100px" [field]="'ReleaseTime'" dataType="time"></igx-column>
+        </igx-column>
+    </igx-grid>`,
+    standalone: true,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent]
+})
+export class IgxGridAdvancedFilteringWithToolbarComponent extends BasicGridComponent {
+    public customFilter = CustomFilter.instance();
+    public override data = SampleTestData.excelFilteringData();
+}
+
 @Component({
     template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="true">
         <igx-grid-toolbar></igx-grid-toolbar>