diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 80c2cc24271..421538e210e 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -517,9 +517,6 @@ export class IgxFilteringService implements OnDestroy { } const fieldFilterIndex = filteringTree.findIndex(fieldName); - if (fieldFilterIndex > -1) { - filteringTree.filteringOperands.splice(fieldFilterIndex, 1); - } this.prepare_filtering_expression(filteringTree, fieldName, term, conditionOrExpressionsTree, ignoreCase, fieldFilterIndex); grid.filteringExpressionsTree = filteringTree; } @@ -537,27 +534,30 @@ export class IgxFilteringService implements OnDestroy { insertAtIndex = -1, createNewTree = false): FilteringExpressionsTree { - const expressionsTree = conditionOrExpressionsTree instanceof FilteringExpressionsTree ? + let expressionsTree = conditionOrExpressionsTree instanceof FilteringExpressionsTree ? conditionOrExpressionsTree as IFilteringExpressionsTree : null; const condition = conditionOrExpressionsTree instanceof FilteringExpressionsTree ? null : conditionOrExpressionsTree as IFilteringOperation; - const newExpression: IFilteringExpression = { fieldName, searchVal, condition, ignoreCase }; - const newExpressionsTree: FilteringExpressionsTree = createNewTree ? - new FilteringExpressionsTree(filteringState.operator, filteringState.fieldName) : filteringState as FilteringExpressionsTree; + let newExpressionsTree = filteringState as FilteringExpressionsTree; + + if (createNewTree) { + newExpressionsTree = new FilteringExpressionsTree(filteringState.operator, filteringState.fieldName); + newExpressionsTree.filteringOperands = [...filteringState.filteringOperands]; + } + + if (condition) { + const newExpression: IFilteringExpression = { fieldName, searchVal, condition, ignoreCase }; + expressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName); + expressionsTree.filteringOperands.push(newExpression); + } - // no expressions tree found for this field if (expressionsTree) { if (insertAtIndex > -1) { newExpressionsTree.filteringOperands[insertAtIndex] = expressionsTree; } else { newExpressionsTree.filteringOperands.push(expressionsTree); } - } else if (condition) { - // create expressions tree for this field and add the new expression to it - const newExprTree: FilteringExpressionsTree = new FilteringExpressionsTree(filteringState.operator, fieldName); - newExprTree.filteringOperands.push(newExpression); - newExpressionsTree.filteringOperands.push(newExprTree); } return newExpressionsTree; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index bafea772406..d2e499c6c2c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -3772,7 +3772,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { fix.detectChanges(); })); - it('display dansity is properly applied on the column selection container', fakeAsync(() => { + it('display density is properly applied on the column selection container', fakeAsync(() => { grid.columnSelection = GridSelectionMode.multiple; fix.detectChanges(); @@ -4375,6 +4375,94 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { [true, true, true]); })); + it('Should correctly modify existing filters.', fakeAsync(() => { + GridFunctions.clickExcelFilterIcon(fix, 'ProductName'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', '(Blanks)', 'Ignite UI for Angular', 'Ignite UI for JavaScript', + 'NetAdvantage', 'Some other item with Script'], + [true, true, true, true, true, true]); + toggleExcelStyleFilteringItems(fix, true, 1, 5); + expect(grid.rowList.length).toBe(3); + + GridFunctions.clickExcelFilterIcon(fix, 'Downloads'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', '20', '127', '254'], + [true, true, true, true]); + toggleExcelStyleFilteringItems(fix, true, 2); + expect(grid.rowList.length).toBe(2); + + GridFunctions.clickExcelFilterIcon(fix, 'ProductName'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', 'Ignite UI for Angular', 'Ignite UI for JavaScript'], + [true, true, true]); + + GridFunctions.clickExcelFilterIcon(fix, 'Downloads'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', '20', '127', '254'], + [null, true, false, true]); + toggleExcelStyleFilteringItems(fix, true, 1, 2, 3); + expect(grid.rowList.length).toBe(1); + + GridFunctions.clickExcelFilterIcon(fix, 'Downloads'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', '20', '127', '254'], + [null, false, true, false]); + })); + + it('Should correctly modify the first one of the existing filters.', fakeAsync(() => { + GridFunctions.clickExcelFilterIcon(fix, 'ProductName'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', '(Blanks)', 'Ignite UI for Angular', 'Ignite UI for JavaScript', + 'NetAdvantage', 'Some other item with Script'], + [true, true, true, true, true, true]); + toggleExcelStyleFilteringItems(fix, true, 1, 5); + expect(grid.rowList.length).toBe(3); + + GridFunctions.clickExcelFilterIcon(fix, 'Downloads'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', '20', '127', '254'], + [true, true, true, true]); + toggleExcelStyleFilteringItems(fix, true, 2); + expect(grid.rowList.length).toBe(2); + + GridFunctions.clickExcelFilterIcon(fix, 'ProductName'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', 'Ignite UI for Angular', 'Ignite UI for JavaScript'], + [true, true, true]); + toggleExcelStyleFilteringItems(fix, true, 1); + expect(grid.rowList.length).toBe(1); + + GridFunctions.clickExcelFilterIcon(fix, 'Downloads'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', '254'], + [true, true]); + + GridFunctions.clickExcelFilterIcon(fix, 'ProductName'); + tick(100); + fix.detectChanges(); + verifyExcelStyleFilterAvailableOptions(fix, + ['Select All', 'Ignite UI for Angular', 'Ignite UI for JavaScript'], + [null, false, true]); + })); + it('Should display the ESF based on the filterIcon within the grid', async () => { // Test prerequisites grid.width = '800px'; @@ -6585,8 +6673,6 @@ const verifyExcelStyleFilterAvailableOptions = (fix, labels: string[], checked: const checkboxElements: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu)); expect(labelElements.length).toBe(labels.length, 'incorrect rendered list items count'); - expect(labelElements.length).toBeGreaterThan(2); - expect(checkboxElements.length).toBeGreaterThan(2); labels.forEach((l, index) => { expect(l).toEqual(labelElements[index].innerText); });