From 611f5244cf1902becbec3e3e1b3ea781bbb287b4 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 23 Jan 2025 16:22:27 +0200 Subject: [PATCH 1/7] fix(AdvancedFiltering): Fixed advanced filtering count #15136 --- .../grid/grid-filtering-advanced.spec.ts | 20 +++++++++++++++++++ ...id-toolbar-advanced-filtering.component.ts | 9 ++++----- .../grid-filtering/grid-filtering.sample.html | 1 + 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index d84cde1a188..7560544aa6b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -117,6 +117,26 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull(); })); + it('Should set initial Advanced Filtering', fakeAsync(() => { + // Set filtering expressions tree + const tree = new FilteringExpressionsTree(FilteringLogic.And); + tree.filteringOperands.push({ + fieldName: 'ProductName', + condition: IgxStringFilteringOperand.instance().condition('contains'), + searchVal: 'angular', + ignoreCase: true + }); + + // Add filters to the grid + const advancedFilteringTree: FilteringExpressionsTree = tree; + grid.advancedFilteringExpressionsTree = advancedFilteringTree; + fix.detectChanges(); + + // Verify number of advanced filters is correct + const advancedFilters = grid.advancedFilteringExpressionsTree.filteringOperands; + expect(advancedFilters.length).toEqual(1); + })); + it('Should close Advanced Filtering dialog through API by respecting \'applyChanges\' argument.', fakeAsync(() => { grid.openAdvancedFilteringDialog(); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts index 06d6ed43f52..dc0ae9d5354 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts @@ -46,17 +46,16 @@ 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 { this.numberOfColumns = this.grid?.advancedFilteringExpressionsTree ? this.extractUniqueFieldNamesFromFilterTree(this.grid?.advancedFilteringExpressionsTree).length : 0; + this.grid?.advancedFilteringExpressionsTreeChange.subscribe(filteringTree => { + this.numberOfColumns = this.extractUniqueFieldNamesFromFilterTree(filteringTree).length; + }); } protected extractUniqueFieldNamesFromFilterTree(filteringTree?: IFilteringExpressionsTree) : string[] { diff --git a/src/app/grid-filtering/grid-filtering.sample.html b/src/app/grid-filtering/grid-filtering.sample.html index 83d453f5244..a89d4399318 100644 --- a/src/app/grid-filtering/grid-filtering.sample.html +++ b/src/app/grid-filtering/grid-filtering.sample.html @@ -14,6 +14,7 @@

Sample 1

[filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true" [rowSelection]="selectionMode" + [advancedFilteringExpressionsTree]="advancedFilteringTree" [height]="'600px'" [columnSelection]="'single'"> From 0f346516d134c897667a0baa3ac79827feb64674 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Fri, 21 Feb 2025 16:19:16 +0200 Subject: [PATCH 2/7] fix(AdvancedFiltering): Fixed tests and resolved comments --- .../grid/grid-filtering-advanced.spec.ts | 87 ++++++++++++++----- ...id-toolbar-advanced-filtering.component.ts | 11 ++- .../src/lib/test-utils/grid-samples.spec.ts | 30 +++++++ .../grid-filtering/grid-filtering.sample.html | 1 - 4 files changed, 99 insertions(+), 30 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index 7560544aa6b..3da8384dba9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/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, IgxGridToolbarComponent } 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 ] }); })); @@ -117,26 +119,6 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { expect(GridFunctions.getAdvancedFilteringComponent(fix)).toBeNull(); })); - it('Should set initial Advanced Filtering', fakeAsync(() => { - // Set filtering expressions tree - const tree = new FilteringExpressionsTree(FilteringLogic.And); - tree.filteringOperands.push({ - fieldName: 'ProductName', - condition: IgxStringFilteringOperand.instance().condition('contains'), - searchVal: 'angular', - ignoreCase: true - }); - - // Add filters to the grid - const advancedFilteringTree: FilteringExpressionsTree = tree; - grid.advancedFilteringExpressionsTree = advancedFilteringTree; - fix.detectChanges(); - - // Verify number of advanced filters is correct - const advancedFilters = grid.advancedFilteringExpressionsTree.filteringOperands; - expect(advancedFilters.length).toEqual(1); - })); - it('Should close Advanced Filtering dialog through API by respecting \'applyChanges\' argument.', fakeAsync(() => { grid.openAdvancedFilteringDialog(); fix.detectChanges(); @@ -3177,6 +3159,65 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { }); + describe('Advanced filtering with toolbar', () => { + let fix: ComponentFixture; + 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); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts index dc0ae9d5354..e97ce931626 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts +++ b/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. @@ -48,11 +48,10 @@ export class IgxGridToolbarAdvancedFilteringComponent implements AfterViewInit { 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; }); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 6a7dcb2990f..15504175734 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1186,6 +1186,36 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent { } } +@Component({ + template: ` + + + Really advanced filtering + + + + + + + + + + + `, + imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent] +}) +export class IgxGridAdvancedFilteringWithToolbarComponent extends BasicGridComponent { + public customFilter = CustomFilter.instance(); + public resizable = false; + public filterable = true; + + public override data = SampleTestData.excelFilteringData(); + public activateFiltering(activate: boolean) { + this.grid.allowFiltering = activate; + this.grid.cdr.markForCheck(); + } +} + @Component({ template: ` diff --git a/src/app/grid-filtering/grid-filtering.sample.html b/src/app/grid-filtering/grid-filtering.sample.html index a89d4399318..83d453f5244 100644 --- a/src/app/grid-filtering/grid-filtering.sample.html +++ b/src/app/grid-filtering/grid-filtering.sample.html @@ -14,7 +14,6 @@

Sample 1

[filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true" [rowSelection]="selectionMode" - [advancedFilteringExpressionsTree]="advancedFilteringTree" [height]="'600px'" [columnSelection]="'single'"> From 73e5726b9c12fd70f07dd0bdaa91239a3744802b Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Fri, 21 Feb 2025 16:59:39 +0200 Subject: [PATCH 3/7] fix(AdvancedFiltering): Resolving errors --- .../src/lib/grids/grid/grid-filtering-advanced.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index 3da8384dba9..82a57fc97bb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -23,7 +23,7 @@ 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, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent } 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'; From 6353828253d60bc61ec2eb2292904e51085ffe5a Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Mon, 24 Feb 2025 10:52:11 +0200 Subject: [PATCH 4/7] fix(AdvancedFiltering): Changes for fixing failing pipeline behaviour --- .../igniteui-angular/src/lib/test-utils/grid-samples.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 15504175734..2ef68eec834 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1202,6 +1202,7 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent { `, + standalone: true, imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent] }) export class IgxGridAdvancedFilteringWithToolbarComponent extends BasicGridComponent { From 2d97d6a13cbef3117edf18281d81cd2c08892b8e Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Mon, 24 Feb 2025 11:07:30 +0200 Subject: [PATCH 5/7] fix(AdvancedFiltering): Resolving failing tests errors --- .../igniteui-angular-elements/src/analyzer/elements.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts index 1873b1de146..dc3ec121926 100644 --- a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts +++ b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts @@ -450,7 +450,7 @@ export var registerConfig = [ parents: [IgxGridToolbarComponent], contentQueries: [], additionalProperties: [], - methods: [], + methods: ["ngOnInit"], }, { component: IgxGridToolbarComponent, From e99f6f006e157d30f5a1fce5383ee355a2fb40b0 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Mon, 24 Feb 2025 11:43:37 +0200 Subject: [PATCH 6/7] fix(AdvancedFiltering): Reverting changes on elements --- .../igniteui-angular-elements/src/analyzer/elements.config.ts | 2 +- .../grids/toolbar/grid-toolbar-advanced-filtering.component.ts | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts index dc3ec121926..1873b1de146 100644 --- a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts +++ b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts @@ -450,7 +450,7 @@ export var registerConfig = [ parents: [IgxGridToolbarComponent], contentQueries: [], additionalProperties: [], - methods: ["ngOnInit"], + methods: [], }, { component: IgxGridToolbarComponent, diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts index e97ce931626..a28af5401aa 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts @@ -48,6 +48,9 @@ export class IgxGridToolbarAdvancedFilteringComponent implements OnInit { constructor( @Inject(IgxToolbarToken) private toolbar: IgxToolbarToken) { } + /** + * @hidden + */ public ngOnInit(): void { // Initial value this.numberOfColumns = this.grid?.advancedFilteringExpressionsTree ? this.extractUniqueFieldNamesFromFilterTree(this.grid?.advancedFilteringExpressionsTree).length : 0; From 7313ad9ce015272cecf31fac433967c2aa0510b3 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Tue, 25 Feb 2025 02:30:15 +0200 Subject: [PATCH 7/7] fix(AdvancedFiltering): resolving comments from code review --- .../src/lib/test-utils/grid-samples.spec.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 2ef68eec834..02cc500b82f 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1207,14 +1207,7 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent { }) export class IgxGridAdvancedFilteringWithToolbarComponent extends BasicGridComponent { public customFilter = CustomFilter.instance(); - public resizable = false; - public filterable = true; - public override data = SampleTestData.excelFilteringData(); - public activateFiltering(activate: boolean) { - this.grid.allowFiltering = activate; - this.grid.cdr.markForCheck(); - } } @Component({