Merge pull request #10745 from IgniteUI/dkamburov/pivot-tests

dkamburov · web-flow · commit 717180254835 · 2022-01-12T21:36:01.000+02:00
fix(pivot): Fix specifying filter in dimensions
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,9 +18,9 @@ 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) {
+        if (allDimensions.indexOf(dim) !== -1) {
             // update columns
             (grid as any).setupColumns();
         }
@@ -33,16 +33,16 @@ 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) {
+        if (allDimensions.indexOf(dim) !== -1) {
             // update columns
             (grid as any).setupColumns();
         }
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
@@ -7,7 +7,6 @@ import {
     EventEmitter,
     ComponentFactoryResolver,
     ElementRef,
-    forwardRef,
     HostBinding,
     Inject,
     Input,
@@ -30,10 +29,10 @@ import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSelectionService } from '../selection/selection.service';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
-import { GridServiceType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface';
+import { GridType, IGX_GRID_BASE, RowType } from '../common/grid.interface';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
+import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IPivotConfiguration, IPivotDimension, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
 import { IgxColumnComponent } from '../columns/column.component';
@@ -551,6 +550,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         // pivot grid always generates columns automatically.
         this.autoGenerate = true;
         this.uniqueColumnValuesStrategy = this.uniqueColumnValuesStrategy || this.uniqueDimensionValuesStrategy;
+        const config = this.pivotConfiguration;
+        this.filteringExpressionsTree = PivotUtil.buildExpressionTree(config);
         super.ngOnInit();
     }
 
@@ -1042,7 +1043,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
      */
     protected autogenerateColumns() {
         let columns = [];
-        const data = this.gridAPI.get_data();
+        const data = this.gridAPI.filterDataByExpressions(this.filteringExpressionsTree);
         this.dimensionDataColumns = this.generateDimensionColumns();
         let fieldsMap;
         if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
@@ -1122,9 +1123,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
@@ -138,16 +138,8 @@ export class IgxPivotGridFilterPipe implements PipeTransform {
         advancedExpressionsTree: IFilteringExpressionsTree,
         _filterPipeTrigger: number,
         _pipeTrigger: number): any[] {
-        const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined);
-        const enabledDimensions = allDimensions.filter(x => x && x.enabled);
+        const expressionsTree = PivotUtil.buildExpressionTree(config);
 
-        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);
-            }
-        });
         const state = {
             expressionsTree,
             strategy: filterStrategy || new DimensionValuesFilteringStrategy(),
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 { IgxChipsAreaComponent } from '../../chips/chips-area.component';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec';
@@ -109,6 +109,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();
@@ -479,6 +510,29 @@ describe('Basic IgxPivotGrid #pivotGrid', () => {
             expect(pivotGrid.gridAPI.get_cell_by_index(0, 'USA').value).toBe(0);
             expect(pivotGrid.gridAPI.get_cell_by_index(0, 'Uruguay').value).toBe(242.08);
         });
+        it('should show one aggregations drop-down at a time', () => {
+            const pivotGrid = fixture.componentInstance.pivotGrid;
+            pivotGrid.width = '1500px';
+            fixture.detectChanges();
+            const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row');
+            const valueChipUnitsSold = headerRow.querySelector('igx-chip[id="UnitsSold"]');
+
+            const aggregatesIconUnitsSold = valueChipUnitsSold.querySelectorAll('igx-icon')[1];
+            aggregatesIconUnitsSold.click();
+            fixture.detectChanges();
+
+            let dropDown = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_LIST}`));
+            expect(dropDown.length).toBe(1);
+
+            const valueChipUnitPrice = headerRow.querySelector('igx-chip[id="UnitPrice"]');
+
+            const aggregatesIconUnitPrice = valueChipUnitPrice.querySelectorAll('igx-icon')[1];
+            aggregatesIconUnitPrice.click();
+            fixture.detectChanges();
+
+            dropDown = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_LIST}`));
+            expect(dropDown.length).toBe(1);
+        });
 
         it('should allow reorder in row chip area.', () => {
             const pivotGrid = fixture.componentInstance.pivotGrid;
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts
@@ -1,5 +1,7 @@
 import { cloneValue } from '../../core/utils';
 import { DataUtil } from '../../data-operations/data-util';
+import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
+import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { ISortingExpression } from '../../data-operations/sorting-strategy';
 import { IGridSortingStrategy, IgxSorting } from '../common/strategy';
 import { IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotValue, PivotDimensionType } from './pivot-grid.interface';
@@ -407,6 +409,21 @@ export class PivotUtil {
         return flatData;
     }
 
+    public static buildExpressionTree(config: IPivotConfiguration) {
+        const allDimensions = config.rows.concat(config.columns).concat(config.filters).filter(x => x !== null && x !== undefined);
+        const enabledDimensions = allDimensions.filter(x => x && x.enabled);
+
+        const expressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
+        // add expression trees from all filters
+        PivotUtil.flatten(enabledDimensions).forEach((x: IPivotDimension) => {
+            if (x.filter && x.filter.filteringOperands) {
+                expressionsTree.filteringOperands.push(...x.filter.filteringOperands);
+            }
+        });
+
+        return expressionsTree;
+    }
+
     private static collectRecords(children, pivotKeys: IPivotKeys) {
         let result = [];
         children.forEach(value => result = result.concat(value[pivotKeys.records]));
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 = [
