fix(pivot): Fix specifying filter in dimensions

dkamburov · dkamburov · commit 5395368a2e30 · 2021-12-16T20:34:56.000+02:00
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -43,7 +43,7 @@ import { FilteringLogic, IFilteringExpression } from '../data-operations/filteri
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
 import { IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
-import { IgxSummaryOperand, ISummaryExpression } from './summaries/grid-summary';
+import { ISummaryExpression } from './summaries/grid-summary';
 import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
 import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
 import { IgxRowDirective } from './row.directive';
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-filtering.service.ts
@@ -18,7 +18,7 @@ export class IgxPivotFilteringService extends IgxFilteringService {
         const config = (grid as IgxPivotGridComponent).pivotConfiguration;
         const allDimensions = PivotUtil.flatten(config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined));
         const dim = allDimensions.find(x => x.memberName === fieldName || x.member === fieldName);
-        dim.filters = undefined;
+        dim.filter = undefined;
         grid.filteringPipeTrigger++;
         if (PivotUtil.flatten(config.columns).indexOf(dim) !== -1) {
             // update columns
@@ -33,14 +33,14 @@ export class IgxPivotFilteringService extends IgxFilteringService {
         const allDimensions = PivotUtil.flatten(config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined));
         const enabledDimensions = allDimensions.filter(x => x && x.enabled);
         const dim = enabledDimensions.find(x => x.memberName === fieldName || x.member === fieldName);
-        const filteringTree = dim.filters || new FilteringExpressionsTree(FilteringLogic.And);
+        const filteringTree = dim.filter || new FilteringExpressionsTree(FilteringLogic.And);
         const fieldFilterIndex = filteringTree.findIndex(fieldName);
         if (fieldFilterIndex > -1) {
             filteringTree.filteringOperands.splice(fieldFilterIndex, 1);
         }
 
         this.prepare_filtering_expression(filteringTree, fieldName, term, conditionOrExpressionsTree, ignoreCase, fieldFilterIndex);
-        dim.filters = filteringTree;
+        dim.filter = filteringTree;
         grid.filteringPipeTrigger++;
         if (PivotUtil.flatten(config.columns).indexOf(dim) !== -1) {
             // update columns
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -1115,9 +1115,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         }
         currentFields.forEach((value, key) => {
             let shouldGenerate = true;
-            if (value.dimension && value.dimension.filters) {
+            if (value.dimension && value.dimension.filter) {
                 const state = {
-                    expressionsTree: value.dimension.filters.filteringOperands[0],
+                    expressionsTree: value.dimension.filter.filteringOperands[0],
                     strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(),
                     advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree
                 };
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts
@@ -3,7 +3,7 @@ import { cloneArray } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
-import { DEFAULT_PIVOT_KEYS, IPivotConfiguration, IPivotKeys } from './pivot-grid.interface';
+import { DEFAULT_PIVOT_KEYS, IPivotConfiguration, IPivotDimension, IPivotKeys } from './pivot-grid.interface';
 import {
     DefaultPivotSortingStrategy, DimensionValuesFilteringStrategy, PivotColumnDimensionsStrategy,
     PivotRowDimensionsStrategy
@@ -142,9 +142,9 @@ export class IgxPivotGridFilterPipe implements PipeTransform {
 
         const expressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
         // add expression trees from all filters
-        PivotUtil.flatten(enabledDimensions).forEach(x => {
-            if (x.filters) {
-                expressionsTree.filteringOperands.push(x.filters);
+        PivotUtil.flatten(enabledDimensions).forEach((x: IPivotDimension) => {
+            if (x.filter && x.filter.filteringOperands) {
+                expressionsTree.filteringOperands.push(...x.filter.filteringOperands);
             }
         });
         const state = {
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts
@@ -1,7 +1,7 @@
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxPivotDateDimension, IgxPivotGridModule } from 'igniteui-angular';
+import { FilteringExpressionsTree, FilteringLogic, IgxPivotDateDimension, IgxPivotGridModule, IgxStringFilteringOperand } from 'igniteui-angular';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec';
 import { IgxPivotGridTestBaseComponent, IgxPivotGridTestComplexHierarchyComponent, IgxTotalSaleAggregate } from '../../test-utils/pivot-grid-samples.spec';
@@ -106,6 +106,37 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
         expect(pivotGrid.columns.length).not.toBe(9);
     });
 
+    it('should remove filter dimension from chip', () => {
+        const pivotGrid = fixture.componentInstance.pivotGrid;
+
+        const filteringExpressionTree = new FilteringExpressionsTree(FilteringLogic.And);
+        filteringExpressionTree.filteringOperands = [
+            {
+                condition: IgxStringFilteringOperand.instance().condition('equals'),
+                fieldName: 'SellerName',
+                searchVal: 'Stanley'
+            }
+        ];
+        const filterDimension = {
+            memberName: 'SellerName',
+            enabled: true,
+            filter: filteringExpressionTree
+        };
+        pivotGrid.pivotConfiguration.filters = [filterDimension];
+        pivotGrid.pipeTrigger++;
+        fixture.detectChanges();
+        expect(pivotGrid.pivotConfiguration.filters[0].enabled).toBeTrue();
+        expect(pivotGrid.rowList.length).toBe(2);
+
+        const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
+        const rowChip = headerRow.querySelector('igx-chip[id="SellerName"]');
+        const removeIcon = rowChip.querySelectorAll('igx-icon')[2];
+        removeIcon.click();
+        fixture.detectChanges();
+        expect(pivotGrid.pivotConfiguration.filters[0].enabled).toBeFalse();
+        expect(pivotGrid.rowList.length).toBe(5);
+    });
+
     it('should collapse column with 1 value dimension', () => {
         const pivotGrid = fixture.componentInstance.pivotGrid;
         pivotGrid.pivotConfiguration.values.pop();
diff --git a/src/app/pivot-grid/pivot-grid.sample.ts b/src/app/pivot-grid/pivot-grid.sample.ts
@@ -8,7 +8,10 @@ import {
     IgxPivotDateDimension,
     IPivotDimension,
     IDimensionsChange,
-    DisplayDensity
+    DisplayDensity,
+    FilteringExpressionsTree,
+    FilteringLogic,
+    IgxStringFilteringOperand
 } from 'igniteui-angular';
 import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
 
@@ -49,6 +52,18 @@ export class PivotGridSampleComponent {
     public cosy: DisplayDensity = DisplayDensity.cosy;
     public compact: DisplayDensity = DisplayDensity.compact;
 
+    public filterExpTree = new FilteringExpressionsTree(FilteringLogic.And);
+
+    constructor() {
+        this.filterExpTree.filteringOperands = [
+            {
+                condition: IgxStringFilteringOperand.instance().condition('equals'),
+                fieldName: 'SellerName',
+                searchVal: 'Stanley'
+            }
+        ];
+    }
+
     public dimensions: IPivotDimension[] = [
         {
             memberName: 'Country',
@@ -139,7 +154,13 @@ export class PivotGridSampleComponent {
                 },
             }
         ],
-        filters: null
+        filters: [
+            {
+                memberName: 'SellerName',
+                enabled: true,
+                filter: this.filterExpTree
+            }
+        ]
     };
 
     public origData = [
