Skip to content

Commit 9e989c8

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Add functionality to filter area as well.
1 parent 32f2853 commit 9e989c8

File tree

7 files changed

+88
-28
lines changed

7 files changed

+88
-28
lines changed

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
3232
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
3333
<ng-template igxGridFor let-rowData [igxGridForOf]="data
34-
| pivotGridFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
34+
| pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree
3535
| pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger
3636
| pivotGridRowExpansion:pivotConfiguration:expansionStates:pipeTrigger
3737
| pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger"

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -208,11 +208,15 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
208208
}
209209

210210
public get rowDimensions() {
211-
return this.pivotConfiguration.rows.filter(x => x.enabled);
211+
return this.pivotConfiguration.rows.filter(x => x.enabled) || [];
212212
}
213213

214214
public get columnDimensions() {
215-
return this.pivotConfiguration.columns.filter(x => x.enabled);
215+
return this.pivotConfiguration.columns.filter(x => x.enabled) || [];
216+
}
217+
218+
public get filterDimensions() {
219+
return this.pivotConfiguration.filters?.filter(x => x.enabled) || [];
216220
}
217221

218222
public get values() {

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export interface IPivotConfiguration {
88
rows: IPivotDimension[] | null;
99
columns: IPivotDimension[] | null;
1010
values: IPivotValue[] | null;
11-
// A predefined or defined via the `igxPivotSelector` filter expression tree to be applied in the filter pipe.
12-
filters: FilteringExpressionsTree | null;
11+
// dimensions to be displayed in the filter area.
12+
filters?: IPivotDimension[] | null;
1313
}
1414

1515
export interface IPivotDimension {
@@ -21,6 +21,8 @@ export interface IPivotDimension {
2121
enabled: boolean;
2222
// additional field name when using member as a function
2323
fieldName?: string;
24+
// A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe.
25+
filter?: FilteringExpressionsTree | null;
2426
}
2527

2628
export interface IPivotValue {
@@ -46,5 +48,6 @@ export interface IPivotKeys {
4648

4749
export enum PivotDimensionType {
4850
Row,
49-
Column
51+
Column,
52+
Filter
5053
}

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import { cloneArray } from '../../core/utils';
33
import { DataUtil } from '../../data-operations/data-util';
44
import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
55
import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
6-
import { IPivotConfiguration, IPivotKeys } from './pivot-grid.interface';
6+
import { IPivotConfiguration, IPivotDimension, IPivotKeys } from './pivot-grid.interface';
77
import { PivotColumnDimensionsStrategy, PivotRowDimensionsStrategy } from '../../data-operations/pivot-strategy';
88
import { PivotUtil } from './pivot-util';
9+
import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
910
/**
1011
* @hidden
1112
*/
@@ -96,10 +97,20 @@ export class IgxPivotColumnPipe implements PipeTransform {
9697
export class IgxPivotGridFilterPipe implements PipeTransform {
9798

9899
public transform(collection: any[],
99-
expressionsTree: IFilteringExpressionsTree,
100+
config: IPivotConfiguration,
100101
filterStrategy: IFilteringStrategy,
101102
advancedExpressionsTree: IFilteringExpressionsTree): any[] {
102103

104+
const allDimensions = config.rows.concat(config.columns).concat(config.filters);
105+
const enabledDimensions = allDimensions.filter(x => x && x.enabled);
106+
107+
const expressionsTree = new FilteringExpressionsTree(FilteringLogic.And);
108+
// add expression trees from all filters
109+
enabledDimensions.forEach(x => {
110+
if (x.filter) {
111+
expressionsTree.filteringOperands.push(x.filter);
112+
}
113+
});
103114
const state = {
104115
expressionsTree,
105116
strategy: filterStrategy,

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
11
<div class="igx-grid-thead__wrapper" role="row" [style.width.px]="width" *ngIf="!row" >
22
<div class="igx-grid__tr" role="row" [style.width.px]="width">
3-
<span #pivotFilterContainer class="igx-grid__tr-action" [style.min-width.px] = "grid.pivotRowWidths"
4-
(pointerdown)="$event.preventDefault()">
3+
<div #pivotFilterContainer class="igx-grid__tr-action" [style.min-width.px] = "grid.pivotRowWidths"
4+
(pointerdown)="$event.preventDefault()" style='display: flex; align-items: flex-end;'>
55
<!-- Filter area -->
6-
<igx-chips-area>
7-
<igx-chip *ngFor="let filter of grid.pivotConfiguration.filters" [id]="filter.fieldName" [removable]="true">
6+
<igx-chips-area #filterArea
7+
(dropped)="onDimDrop($event, filterArea, 2)"
8+
igxDrop
9+
(igxDragEnter)="onAreaDragEnter($event, filterArea, 2)"
10+
(igxDragLeave)="onAreaDragLeave($event, filterArea)">
11+
<div *ngIf="grid.filterDimensions.length === 0">
12+
<span class='igx-pivot__emptyChipArea'>Drop Filter Fields here.</span>
13+
</div>
14+
<igx-chip *ngFor="let filter of grid.filterDimensions" [id]="filter.fieldName" [draggable]="true"
15+
[removable]="true" (remove)="filterRemoved($event)"
16+
(dragEnter)="onDimDragEnter($event, 2)"
17+
(dragLeave)="onDimDragLeave($event)"
18+
(dragDrop)="onDimDrop($event, filterArea, 2)"
19+
>
820
<igx-icon igxPrefix>filter_list</igx-icon>
921
{{filter.fieldName}}
1022
</igx-chip>
1123
</igx-chips-area>
12-
</span>
24+
</div>
1325
<div #pivotValueContainer [style.min-width.px] = "grid.unpinnedWidth"
1426
(pointerdown)="$event.preventDefault()">
1527

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
6767
this.grid.pipeTrigger++;
6868
}
6969

70+
public filterRemoved(event: IBaseChipEventArgs) {
71+
const filter = this.grid.pivotConfiguration.filters.find(x => x.fieldName === event.owner.id);
72+
filter.enabled = false;
73+
}
74+
7075
public onDimDragEnter(event, dimension: PivotDimensionType) {
7176
const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id) :
7277
!this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id);
@@ -91,13 +96,15 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
9196
// cannot drag between dimensions and value
9297
return;
9398
}
94-
const lastElem = area.chipsList.last.nativeElement;
95-
const targetElem = event.detail.originalEvent.target;
96-
const targetOwner = event.detail.owner.element.nativeElement.parentElement;
97-
if (targetOwner !== lastElem && targetElem.getBoundingClientRect().x >= lastElem.getBoundingClientRect().x) {
98-
this.renderer.addClass(area.chipsList.last.nativeElement, this._dropIndicatorClass);
99-
// TODO- remove once classes are added.
100-
area.chipsList.last.nativeElement.style.borderRight = '1px solid red';
99+
const lastElem = area.chipsList.last?.nativeElement;
100+
if (lastElem) {
101+
const targetElem = event.detail.originalEvent.target;
102+
const targetOwner = event.detail.owner.element.nativeElement.parentElement;
103+
if (targetOwner !== lastElem && targetElem.getBoundingClientRect().x >= lastElem.getBoundingClientRect().x) {
104+
this.renderer.addClass(area.chipsList.last.nativeElement, this._dropIndicatorClass);
105+
// TODO- remove once classes are added.
106+
area.chipsList.last.nativeElement.style.borderRight = '1px solid red';
107+
}
101108
}
102109
}
103110
public onAreaDragLeave(event, area) {
@@ -124,24 +131,25 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
124131

125132
public onDimDrop(event, area, dimension: PivotDimensionType) {
126133
const dragId = event.dragChip?.id || event.dragData?.chip.id;
127-
const currentDim = dimension === PivotDimensionType.Row ? this.grid.pivotConfiguration.rows :
128-
this.grid.pivotConfiguration.columns;
134+
const currentDim = this.getDimensionsByType(dimension);
129135
const chipsArray = area.chipsList.toArray();
130136
const chip = chipsArray.find(x => x.id === dragId);
131137
const isNewChip = chip === undefined;
132138
const chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
133139
if (isNewChip) {
140+
const allDims = this.grid.pivotConfiguration.rows
141+
.concat(this.grid.pivotConfiguration.columns)
142+
.concat(this.grid.pivotConfiguration.filters);
134143
// chip moved from external collection
135-
const oppositeDim = dimension === PivotDimensionType.Row ? this.grid.pivotConfiguration.columns :
136-
this.grid.pivotConfiguration.rows;
137-
const dim = oppositeDim.find(x => x.fieldName === dragId);
144+
const dim = allDims.find(x => x && x.fieldName === dragId);
138145
if (!dim) {
139146
// you have dragged something that is not a dimension
140147
return;
141148
}
142149
dim.enabled = false;
143-
if (dimension === PivotDimensionType.Row) {
144-
// opposite dimension has changed.
150+
const isDraggedFromColumn = !!this.grid.pivotConfiguration.columns?.find(x => x && x.fieldName === dragId);
151+
if (isDraggedFromColumn) {
152+
// columns have changed.
145153
this.grid.setupColumns();
146154
}
147155

@@ -162,4 +170,26 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
162170
}
163171
this.grid.pipeTrigger++;
164172
}
173+
174+
protected getDimensionsByType(dimension: PivotDimensionType) {
175+
switch (dimension) {
176+
case PivotDimensionType.Row:
177+
if (!this.grid.pivotConfiguration.rows) {
178+
this.grid.pivotConfiguration.rows = [];
179+
}
180+
return this.grid.pivotConfiguration.rows;
181+
case PivotDimensionType.Column:
182+
if (!this.grid.pivotConfiguration.columns) {
183+
this.grid.pivotConfiguration.columns = [];
184+
}
185+
return this.grid.pivotConfiguration.columns;
186+
case PivotDimensionType.Filter:
187+
if (!this.grid.pivotConfiguration.filters) {
188+
this.grid.pivotConfiguration.filters = [];
189+
}
190+
return this.grid.pivotConfiguration.filters;
191+
default:
192+
return null;
193+
}
194+
}
165195
}

‎src/app/pivot-grid/pivot-grid.sample.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div class="sample-column">
2-
<igx-pivot-grid #grid1 [data]="origData" [width]= '"1200px"' [pivotConfiguration]="pivotConfigHierarchy">
2+
<igx-pivot-grid #grid1 [data]="origData" [width]= '"1200px"' [pivotConfiguration]="pivotConfigHierarchy">
33
</igx-pivot-grid>
44
</div>

0 commit comments

Comments
 (0)