Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(advance-filtering): handle error when columns are dynamically changed - 18.1.x #14577

Merged
merged 4 commits into from
Jul 29, 2024
Merged

fix(advance-filtering): handle error when columns are dynamically changed - 18.1.x #14577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d8119d
fix(advance-filtering): handle error when columns are dynamically cha…
georgianastasov Jul 24, 2024
19045a4
test(advance-filtering): remove grid resize and setTimeout usage
georgianastasov Jul 25, 2024
f1fea0c
Merge branch '18.1.x' into ganastasov/fix-14314-18.1.x
georgianastasov Jul 25, 2024
0d5f6de
Merge branch '18.1.x' into ganastasov/fix-14314-18.1.x
kacheshmarova Jul 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 77 additions & 2 deletions projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,15 @@ import {
IgxGridAdvancedFilteringComponent,
IgxGridExternalAdvancedFilteringComponent,
IgxGridAdvancedFilteringBindingComponent,
IgxGridAdvancedFilteringOverlaySettingsComponent
IgxGridAdvancedFilteringOverlaySettingsComponent,
IgxGridAdvancedFilteringDynamicColumnsComponent
} 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 { SampleTestData } from '../../test-utils/sample-test-data.spec';

const ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS = 'igx-filter-tree__line--and';
const ADVANCED_FILTERING_OPERATOR_LINE_OR_CSS_CLASS = 'igx-filter-tree__line--or';
Expand All @@ -38,7 +40,8 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
IgxGridAdvancedFilteringComponent,
IgxGridExternalAdvancedFilteringComponent,
IgxGridAdvancedFilteringBindingComponent,
IgxHierGridExternalAdvancedFilteringComponent
IgxHierGridExternalAdvancedFilteringComponent,
IgxGridAdvancedFilteringDynamicColumnsComponent
]
});
}));
Expand Down Expand Up @@ -2048,6 +2051,78 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
expect(rows.length).toEqual(1, 'Wrong filtered rows count');
}));

it('should handle advanced filtering correctly when grid columns and data are dynamically changed', fakeAsync(() => {
const fixture = TestBed.createComponent(IgxGridAdvancedFilteringDynamicColumnsComponent);
grid = fixture.componentInstance.grid;
fixture.detectChanges();

expect(grid.filteredData).toBeNull();
expect(grid.rowList.length).toBe(8);
expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('NetAdvantage');

// Open Advanced Filtering dialog
GridFunctions.clickAdvancedFilteringButton(fixture);
fixture.detectChanges();

// Click the initial 'Add And Group' button
GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fixture, 0);
tick(100);
fixture.detectChanges();

// Populate edit inputs
selectColumnInEditModeExpression(fixture, 1);
selectOperatorInEditModeExpression(fixture, 2);
const input = GridFunctions.getAdvancedFilteringValueInput(fixture).querySelector('input');
UIInteractions.clickAndSendInputElementValue(input, 'ign', fixture);

// Commit the populated expression
GridFunctions.clickAdvancedFilteringExpressionCommitButton(fixture);
fixture.detectChanges();

// Apply the filters
GridFunctions.clickAdvancedFilteringApplyButton(fixture);
fixture.detectChanges();

// Verify the filter results
expect(grid.filteredData.length).toEqual(2);
expect(grid.rowList.length).toBe(2);
expect(GridFunctions.getCurrentCellFromGrid(grid, 0, 1).value).toBe('Ignite UI for JavaScript');
expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');

// Change the grid's columns collection
fixture.componentInstance.columns = [
{ field: 'ID', header: 'ID', width: '200px', type: 'string' },
{ field: 'CompanyName', header: 'Company Name', width: '200px', type: 'string'},
{ field: 'ContactName', header: 'Contact Name', width: '200px', type: 'string' },
{ field: 'ContactTitle', header: 'Contact Title', width: '200px', type: 'string' },
{ field: 'City', header: 'City', width: '200px', type: 'string' },
{ field: 'Country', header: 'Country', width: '200px', type: 'string' },
];
fixture.detectChanges();
flush();

// Change the grid's data collection
grid.data = SampleTestData.contactInfoDataFull();
fixture.detectChanges();
flush();

// Spy for error messages in the console
const consoleSpy = spyOn(console, 'error');

// Open Advanced Filtering dialog
GridFunctions.clickAdvancedFilteringButton(fixture);
fixture.detectChanges();
flush();

// Verify the filters are cleared
expect(grid.filteredData).toEqual([]);
expect(grid.rowList.length).toBe(0);

// Check for error messages in the console
expect(consoleSpy).not.toHaveBeenCalled();
}));

describe('Context Menu - ', () => {
it('Should discard added group when clicking its operator line without having a single expression.', fakeAsync(() => {
// Open Advanced Filtering dialog.
Expand Down
38 changes: 20 additions & 18 deletions projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -988,31 +988,33 @@ export class IgxQueryBuilderComponent implements AfterViewInit, OnDestroy {
this.currentGroup = groupItem;
}

private createExpressionGroupItem(expressionTree: IExpressionTree, parent?: ExpressionGroupItem): ExpressionGroupItem {
let groupItem: ExpressionGroupItem;
if (expressionTree) {
groupItem = new ExpressionGroupItem(expressionTree.operator, parent);

for (const expr of expressionTree.filteringOperands) {
if (expr instanceof FilteringExpressionsTree) {
groupItem.children.push(this.createExpressionGroupItem(expr, groupItem));
} else {
const filteringExpr = expr as IFilteringExpression;
const exprCopy: IFilteringExpression = {
fieldName: filteringExpr.fieldName,
condition: filteringExpr.condition,
searchVal: filteringExpr.searchVal,
ignoreCase: filteringExpr.ignoreCase
};
private createExpressionGroupItem(expressionTree: IExpressionTree, parent?: ExpressionGroupItem): ExpressionGroupItem | null {
if (!expressionTree) {
return null;
}

const groupItem = new ExpressionGroupItem(expressionTree.operator, parent);

for (const expr of expressionTree.filteringOperands) {
if (expr instanceof FilteringExpressionsTree) {
const childGroup = this.createExpressionGroupItem(expr, groupItem);
if (childGroup) {
groupItem.children.push(childGroup);
}
} else {
const filteringExpr = expr as IFilteringExpression;
const field = this.fields.find(el => el.field === filteringExpr.fieldName);

if (field) {
const exprCopy: IFilteringExpression = { ...filteringExpr };
const operandItem = new ExpressionOperandItem(exprCopy, groupItem);
const field = this.fields.find(el => el.field === filteringExpr.fieldName);
operandItem.fieldLabel = field.label || field.header || field.field;
groupItem.children.push(operandItem);
}
}
}

return groupItem;
return groupItem.children.length > 0 ? groupItem : null;
}

private createExpressionTreeFromGroupItem(groupItem: ExpressionGroupItem): FilteringExpressionsTree {
Expand Down
31 changes: 31 additions & 0 deletions projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1174,6 +1174,37 @@ export class IgxGridAdvancedFilteringComponent extends BasicGridComponent {
}
}

@Component({
template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="true">
<igx-grid-toolbar></igx-grid-toolbar>
<igx-column *ngFor="let c of columns"
[field]="c.field"
[header]="c.header"
[width]="c.width"
[filterable]="true"
[dataType]="c.type">
</igx-column>
</igx-grid>`,
standalone: true,
imports: [NgFor, IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent]
})
export class IgxGridAdvancedFilteringDynamicColumnsComponent extends BasicGridComponent {
public override data = [];
public columns = [];

public ngOnInit(): void {
this.columns = [
{ field: 'ID', header: 'HeaderID', width: '100px', type: 'number' },
{ field: 'ProductName', header: 'Product Name', width: '200px', type: 'string'},
{ field: 'Downloads', header: 'Downloads', width: '100px', type: 'number' },
{ field: 'Released', header: 'Released', width: '100px', type: 'boolean' },
{ field: 'ReleaseDate', header: 'Release Date', width: '200px', type: 'date' },
{ field: 'AnotherField', header: 'Another Field', width: '200px', type: 'string' },
];
this.data = SampleTestData.excelFilteringData();
}
}

@Component({
template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="true">
<igx-grid-toolbar>
Expand Down
Loading