Skip to content

Commit 7a918bd

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Show excel style filter for dimension chips.
1 parent f1413ba commit 7a918bd

File tree

6 files changed

+137
-9
lines changed

6 files changed

+137
-9
lines changed

‎projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export class IgxFilteringService implements OnDestroy {
8181
this.initFilteringSettings();
8282
this.column = column;
8383
const filterIcon = this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
84-
const filterIconTarget = element.querySelector(`.${filterIcon}`) as HTMLElement;
84+
const filterIconTarget = element.querySelector(`.${filterIcon}`) as HTMLElement || element;
8585

8686
this._filterMenuOverlaySettings.target = filterIconTarget;
8787
this._filterMenuOverlaySettings.outlet = (this.grid as any).outlet;

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { IgxGridNavigationService } from '../grid-navigation.service';
2+
import { Injectable } from '@angular/core';
3+
import { IgxPivotGridComponent } from './pivot-grid.component';
4+
5+
@Injectable()
6+
export class IgxPivotGridNavigationService extends IgxGridNavigationService {
7+
public grid: IgxPivotGridComponent;
8+
9+
public dispatchEvent(event: KeyboardEvent) {
10+
// TODO
11+
}
12+
}

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,11 @@
1515
(copy)="copyHandler($event)"
1616
(keydown)="navigation.headerNavigation($event)"
1717
(scroll)="preventHeaderScroll($event)"
18-
(focus)="navigation.focusFirstCell()"
1918
>
2019
</igx-pivot-header-row>
2120

2221
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
23-
<div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
22+
<div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)"
2423
(dragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
2524
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
2625
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
@@ -121,4 +120,15 @@
121120
{{columnGroupStates.get(column.field) ? 'expand_more' : 'expand_less'}}</igx-icon>
122121
{{column.header}}
123122
</div>
124-
</ng-template>
123+
</ng-template>
124+
125+
126+
<div [hidden]='true'>
127+
<igx-grid-excel-style-filtering>
128+
<div igxExcelStyleColumnOperations [hidden]='true'>
129+
</div>
130+
<igx-excel-style-filter-operations>
131+
<igx-excel-style-search></igx-excel-style-search>
132+
</igx-excel-style-filter-operations>
133+
</igx-grid-excel-style-filtering>
134+
</div>

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

Lines changed: 88 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
11
import {
22
AfterContentInit,
33
ChangeDetectionStrategy,
4+
ChangeDetectorRef,
45
Component,
6+
ComponentFactoryResolver,
7+
ElementRef,
58
forwardRef,
69
HostBinding,
10+
Inject,
711
Input,
12+
IterableDiffers,
13+
LOCALE_ID,
14+
NgZone,
815
OnInit,
16+
Optional,
17+
QueryList,
918
TemplateRef,
10-
ViewChild
19+
ViewChild,
20+
ViewChildren,
21+
ViewContainerRef
1122
} from '@angular/core';
1223
import { IgxGridBaseDirective } from '../grid-base.directive';
1324
import { GridBaseAPIService } from '../api.service';
@@ -24,6 +35,14 @@ import { IgxColumnGroupComponent } from '../columns/column-group.component';
2435
import { IgxColumnComponent } from '../columns/column.component';
2536
import { PivotUtil } from './pivot-util';
2637
import { NoopPivotDimensionsStrategy } from '../../data-operations/pivot-strategy';
38+
import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/grid.excel-style-filtering.component';
39+
import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service';
40+
import { IgxColumnResizingService } from '../resizing/resizing.service';
41+
import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api';
42+
import { DOCUMENT } from '@angular/common';
43+
import { DisplayDensityToken, IDisplayDensityOptions } from '../../core/displayDensity';
44+
import { PlatformUtil } from '../../core/utils';
45+
import { IgxGridTransaction } from '../hierarchical-grid/public_api';
2746

2847
let NEXT_ID = 0;
2948
const MINIMUM_COLUMN_WIDTH = 200;
@@ -39,7 +58,7 @@ const MINIMUM_COLUMN_WIDTH = 200;
3958
GridBaseAPIService,
4059
{ provide: IgxGridBaseDirective, useExisting: forwardRef(() => IgxPivotGridComponent) },
4160
IgxFilteringService,
42-
IgxGridNavigationService,
61+
IgxPivotGridNavigationService,
4362
IgxForOfSyncService,
4463
IgxForOfScrollSyncService
4564
]
@@ -51,6 +70,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
5170
@ViewChild(IgxPivotHeaderRowComponent, { static: true })
5271
public theadRow: IgxPivotHeaderRowComponent;
5372

73+
74+
5475
@Input()
5576
/**
5677
* Gets/Sets the pivot configuration with all related dimensions and values.
@@ -80,15 +101,64 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
80101
@ViewChild('headerTemplate', { read: TemplateRef, static: true })
81102
public headerTemplate: TemplateRef<any>;
82103

104+
/**
105+
* @hidden @internal
106+
*/
107+
@ViewChildren(IgxGridExcelStyleFilteringComponent, { read: IgxGridExcelStyleFilteringComponent })
108+
public excelStyleFilteringComponents: QueryList<IgxGridExcelStyleFilteringComponent>;
109+
83110

84111
public columnGroupStates = new Map<string, boolean>();
112+
public originalDataColumns;
85113
public pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'};
86114
public isPivot = true;
87115
protected _defaultExpandState = true;
88116
private _data;
89117
private _filteredData;
90118
private p_id = `igx-pivot-grid-${NEXT_ID++}`;
91119

120+
121+
constructor(
122+
public selectionService: IgxGridSelectionService,
123+
public colResizingService: IgxColumnResizingService,
124+
gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
125+
protected transactionFactory: IgxFlatTransactionFactory,
126+
elementRef: ElementRef,
127+
zone: NgZone,
128+
@Inject(DOCUMENT) public document,
129+
cdr: ChangeDetectorRef,
130+
resolver: ComponentFactoryResolver,
131+
differs: IterableDiffers,
132+
viewRef: ViewContainerRef,
133+
navigation: IgxPivotGridNavigationService,
134+
filteringService: IgxFilteringService,
135+
@Inject(IgxOverlayService) protected overlayService: IgxOverlayService,
136+
public summaryService: IgxGridSummaryService,
137+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
138+
@Inject(LOCALE_ID) localeId: string,
139+
protected platform: PlatformUtil,
140+
@Optional() @Inject(IgxGridTransaction) protected _diTransactions?: TransactionService<Transaction, State>) {
141+
super(
142+
selectionService,
143+
colResizingService,
144+
gridAPI,
145+
transactionFactory,
146+
elementRef,
147+
zone,
148+
document,
149+
cdr,
150+
resolver,
151+
differs,
152+
viewRef,
153+
navigation,
154+
filteringService,
155+
overlayService,
156+
summaryService,
157+
_displayDensityOptions,
158+
localeId,
159+
platform);
160+
}
161+
92162
/**
93163
* @hidden
94164
*/
@@ -288,6 +358,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
288358
protected autogenerateColumns() {
289359
let columns = [];
290360
const data = this.gridAPI.get_data();
361+
this.originalDataColumns = this.generateOriginalColumns();
291362
let fieldsMap;
292363
if (this.pivotConfiguration.columnStrategy && this.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy) {
293364
const fields = this.generateDataFields(data);
@@ -313,6 +384,21 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
313384
}
314385
}
315386

387+
protected generateOriginalColumns() {
388+
const data = this.gridAPI.get_data();
389+
const fields = this.generateDataFields(data);
390+
const columns = [];
391+
const factory = this.resolver.resolveComponentFactory(IgxColumnComponent);
392+
fields.forEach((field) => {
393+
const ref = factory.create(this.viewRef.injector);
394+
ref.instance.field = field;
395+
ref.instance.dataType = this.resolveDataTypes(data[0][field]);
396+
ref.changeDetectorRef.detectChanges();
397+
columns.push(ref.instance);
398+
});
399+
return columns;
400+
}
401+
316402
protected generateFromData(fields: string[]) {
317403
const dataArr = fields.map(x => x.split('-')).sort(x => x.length);
318404
const hierarchy = new Map<string, any>();

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
(dragLeave)="onDimDragLeave($event)"
1818
(dragDrop)="onDimDrop($event, filterArea, 2)"
1919
>
20-
<igx-icon igxPrefix>filter_list</igx-icon>
20+
<igx-icon igxPrefix (pointerdown)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>
2121
{{filter.fieldName}}
2222
</igx-chip>
2323
</igx-chips-area>
@@ -42,7 +42,7 @@
4242
(dragDrop)="onDimDrop($event, colArea, 1)"
4343
>
4444
<igx-icon igxPrefix>view_column</igx-icon>
45-
<igx-icon igxPrefix>filter_list</igx-icon>
45+
<igx-icon (pointerdown)='onFilteringIconClick($event, col)'>filter_list</igx-icon>
4646
{{col.fieldName}}
4747
</igx-chip>
4848
</igx-chips-area>
@@ -93,7 +93,7 @@
9393
(dragDrop)="onDimDrop($event, rowArea, 0)"
9494
>
9595
<igx-icon igxPrefix>table_rows</igx-icon>
96-
<igx-icon igxPrefix>filter_list</igx-icon>
96+
<igx-icon igxPrefix (pointerdown)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
9797
{{ row.fieldName}}
9898
</igx-chip>
9999
</igx-chips-area>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,26 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
7272
filter.enabled = false;
7373
}
7474

75+
public onFilteringIconClick(event, dimension) {
76+
event.stopPropagation();
77+
event.preventDefault();
78+
// we are bound on pointerdown but excel filter listens on document click and closes :(
79+
setTimeout(() => {
80+
let dim = dimension;
81+
let col;
82+
while(dim) {
83+
col = this.grid.originalDataColumns.find(x => x.field === dim.fieldName || x.field === dim.member);
84+
if (col) {
85+
break;
86+
} else {
87+
dim = dimension.childLevels[0];
88+
}
89+
}
90+
this.grid.filteringService.toggleFilterDropdown(event.target, col);
91+
}, 100);
92+
93+
}
94+
7595
public onDimDragEnter(event, dimension: PivotDimensionType) {
7696
const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id) :
7797
!this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id);

0 commit comments

Comments
 (0)