Skip to content

Commit e08e5bd

Browse files
dkamburovdkamburov
authored
Merge pull request #10785 from IgniteUI/mdragnev/feat-10713
feat(pivot): Implement filters area dropdown
2 parents d37d948 + fa89fdd commit e08e5bd

File tree

13 files changed

+509
-80
lines changed

13 files changed

+509
-80
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,11 @@
8888
$item-border-color: transparent,
8989
$item-selected-border-color: transparent
9090
));
91+
92+
igx-chips-area {
93+
padding: rem(16px) rem(16px) 0 rem(16px);
94+
gap: rem(8px);
95+
}
9196
}
9297

9398
%grid-excel-menu__header {
@@ -119,7 +124,6 @@
119124
%grid-excel-menu__footer {
120125
display: flex;
121126
justify-content: space-between;
122-
padding: rem(8px) rem(16px);
123127

124128
%grid-excel-filter__apply,
125129
%grid-excel-filter__cancel {
@@ -241,19 +245,26 @@
241245
flex-direction: column;
242246
flex-grow: 1;
243247
overflow: hidden;
244-
padding: 0 rem(16px);
248+
padding: rem(16px);
249+
gap: rem(16px);
250+
245251

246252
igx-list {
247253
flex-grow: 1;
248254
overflow: hidden;
249-
margin: rem(8px) -#{rem(16px)} 0;
255+
margin-left: -#{rem(16px)};
256+
margin-right: -#{rem(16px)};
250257
border: 0;
251258
border-top: 1px dashed igx-color($palette, 'grays', 300);
252259
border-bottom: 1px dashed igx-color($palette, 'grays', 300);
253260
}
254261
}
255262

256263
%grid-excel-menu--cosy {
264+
igx-chips-area {
265+
padding: rem(8px) rem(8px) 0 rem(8px);
266+
}
267+
257268
%grid-excel-menu__header {
258269
justify-content: space-between;
259270
padding: rem(8px);
@@ -276,19 +287,22 @@
276287
}
277288

278289
%grid-excel-main {
279-
padding: 0 rem(8px);
290+
padding: rem(8px);
291+
gap: rem(8px);
280292
}
281293

282294
igx-list {
283-
margin: rem(8px) -#{rem(8px)} 0;
284-
}
285-
286-
%grid-excel-menu__footer {
287-
padding: rem(8px);
295+
margin-left: -#{rem(8px)};
296+
margin-right: -#{rem(8px)};
288297
}
289298
}
290299

291300
%grid-excel-menu--compact {
301+
igx-chips-area {
302+
padding: rem(4px) rem(4px) 0 rem(4px);
303+
gap: rem(4px);
304+
}
305+
292306
%grid-excel-menu__header {
293307
justify-content: space-between;
294308
padding: rem(4px);
@@ -319,15 +333,13 @@
319333
}
320334

321335
%grid-excel-main {
322-
padding: 0 rem(4px);
336+
padding: rem(4px);
337+
gap: rem(4px);
323338
}
324339

325340
igx-list {
326-
margin: rem(8px) -#{rem(4px)} 0;
327-
}
328-
329-
%grid-excel-menu__footer {
330-
padding: rem(8px) rem(4px);
341+
margin-left: -#{rem(4px)};
342+
margin-right: -#{rem(4px)};
331343
}
332344
}
333345

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -553,6 +553,16 @@
553553
@extend %igx-grid__tr-pivot !optional
554554
}
555555

556+
@include e(pivot-filter-toggle) {
557+
@extend %igx-grid__pivot-filter-toggle !optional
558+
}
559+
560+
@include e(pivot-empty-chip-area) {
561+
@extend %igx-grid__pivot-empty-chip-area !optional
562+
}
563+
564+
565+
556566
@include e(tr-pivot, $m: 'row-area') {
557567
@extend %igx-grid__tr-pivot--row-area !optional
558568
}

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2931,6 +2931,32 @@
29312931
}
29322932
}
29332933

2934+
%igx-grid__pivot-filter-toggle {
2935+
display: flex;
2936+
align-items: center;
2937+
justify-content: center;
2938+
cursor: pointer;
2939+
position: relative;
2940+
2941+
> igx-badge {
2942+
position: absolute;
2943+
top: rem(-4px);
2944+
left: 60%;
2945+
width: rem(18px);
2946+
min-width: rem(18px);
2947+
height: rem(18px);
2948+
font-size: rem(10px);
2949+
pointer-events: none;
2950+
user-select: none;
2951+
}
2952+
}
2953+
2954+
%igx-grid__pivot-empty-chip-area {
2955+
line-height: normal;
2956+
font-size: rem(14px);
2957+
margin-right: 0 !important;
2958+
}
2959+
29342960
%igx-grid__tr-pivot--row-area {
29352961
height: auto !important;
29362962
align-items: flex-end;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ export class IgxFilteringService implements OnDestroy {
3535

3636
private columnsWithComplexFilter = new Set<string>();
3737
private areEventsSubscribed = false;
38-
private destroy$ = new Subject<boolean>();
38+
protected destroy$ = new Subject<boolean>();
3939
private isFiltering = false;
4040
private columnToExpressionsMap = new Map<string, ExpressionUI[]>();
4141
private columnStartIndex = -1;
42-
private _filterMenuOverlaySettings: OverlaySettings = {
42+
protected _filterMenuOverlaySettings: OverlaySettings = {
4343
closeOnEscape: true,
4444
closeOnOutsideClick: true,
4545
modal: false,
@@ -50,11 +50,11 @@ export class IgxFilteringService implements OnDestroy {
5050
}),
5151
scrollStrategy: new AbsoluteScrollStrategy()
5252
};
53-
private lastActiveNode;
53+
protected lastActiveNode;
5454

5555
constructor(
5656
private iconService: IgxIconService,
57-
private _overlayService: IgxOverlayService,
57+
protected _overlayService: IgxOverlayService,
5858
) { }
5959

6060
public ngOnDestroy(): void {

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3701,7 +3701,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
37013701

37023702
listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
37033703
expect(inputNativeElement.value).toBe('', 'incorrect rendered list items count');
3704-
expect(listItems.length).toBe(9, 'incorrect rendered list items count');
3704+
expect(listItems.length).toBe(8, 'incorrect rendered list items count');
37053705
});
37063706

37073707
it('Should enable/disable the apply button correctly.', async () => {
@@ -4012,15 +4012,15 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
40124012
fix.detectChanges();
40134013

40144014
// Verify scrollbar's scrollTop.
4015-
expect(scrollbar.scrollTop >= 670 && scrollbar.scrollTop <= 700).toBe(true,
4015+
expect(scrollbar.scrollTop >= 660 && scrollbar.scrollTop <= 700).toBe(true,
40164016
'search scrollbar has incorrect scrollTop: ' + scrollbar.scrollTop);
40174017
// Verify display container height.
40184018
const displayContainer = searchComponent.querySelector('igx-display-container');
40194019
const displayContainerRect = displayContainer.getBoundingClientRect();
4020-
expect(displayContainerRect.height).toBe(216, 'incorrect search display container height');
4020+
expect(displayContainerRect.height).toBe(240, 'incorrect search display container height');
40214021
// Verify rendered list items count.
40224022
const listItems = displayContainer.querySelectorAll('igx-list-item');
4023-
expect(listItems.length).toBe(9, 'incorrect rendered list items count');
4023+
expect(listItems.length).toBe(10, 'incorrect rendered list items count');
40244024
}));
40254025

40264026
it('should correctly display all items in search list after filtering it', (async () => {
@@ -4294,8 +4294,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
42944294
fix.detectChanges();
42954295

42964296
verifyExcelStyleFilterAvailableOptions(fix,
4297-
['Select All', '(Blanks)', '0', '20', '100', '127', '254', '702', '1,000'],
4298-
[true, true, true, true, true, true, true, true, true]);
4297+
['Select All', '(Blanks)', '0', '20', '100', '127', '254', '702'],
4298+
[true, true, true, true, true, true, true, true]);
42994299

43004300
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
43014301
tick(100);
@@ -5869,7 +5869,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
58695869

58705870
// Verify items in search have loaded and that the loading indicator is not visible.
58715871
listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
5872-
expect(listItems.length).toBe(9, 'incorrect rendered list items count');
5872+
expect(listItems.length).toBe(8, 'incorrect rendered list items count');
58735873

58745874
listItems.forEach((item, ind) => {
58755875
expect(item.innerText).toBe(downloads[ind]);
@@ -6026,7 +6026,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
60266026
fix.detectChanges();
60276027
expect(compInstance.doneCallbackCounter).toBe(2, 'Incorrect done callback execution count');
60286028
listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
6029-
expect(listItems.length).toBe(9, 'incorrect rendered list items count');
6029+
expect(listItems.length).toBe(8, 'incorrect rendered list items count');
60306030
loadingIndicator = GridFunctions.getExcelFilteringLoadingIndicator(fix);
60316031
expect(loadingIndicator).toBeNull('esf loading indicator is visible');
60326032
}));

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { Injectable } from '@angular/core';
2+
import { first, takeUntil } from 'rxjs/operators';
23
import { IFilteringOperation } from '../../data-operations/filtering-condition';
34
import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
45
import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
6+
import { ColumnType } from '../common/grid.interface';
57
import { IgxFilteringService } from '../filtering/grid-filtering.service';
68
import { IgxPivotGridComponent } from './pivot-grid.component';
79
import { PivotUtil } from './pivot-util';
810

911
@Injectable()
1012
export class IgxPivotFilteringService extends IgxFilteringService {
13+
private filtersESFId;
14+
1115
public clearFilter(field: string): void {
1216
this.clear_filter(field);
1317
}
@@ -47,4 +51,44 @@ export class IgxPivotFilteringService extends IgxFilteringService {
4751
(grid as any).setupColumns();
4852
}
4953
}
54+
55+
public toggleFiltersESF(dropdown: any, element: HTMLElement, column: ColumnType, shouldReattach: boolean) {
56+
const filterIcon = column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
57+
const filterIconTarget = element.querySelector(`.${filterIcon}`) as HTMLElement || element;
58+
59+
const { id, ref } = (this.grid as IgxPivotGridComponent).createFilterESF(dropdown, column, {
60+
...this._filterMenuOverlaySettings,
61+
...{ target: filterIconTarget }
62+
}, shouldReattach);
63+
64+
this.filtersESFId = id;
65+
66+
if (shouldReattach) {
67+
this._overlayService.opening
68+
.pipe(
69+
first(overlay => overlay.id === id),
70+
takeUntil(this.destroy$)
71+
)
72+
.subscribe(() => this.lastActiveNode = this.grid.navigation.activeNode);
73+
74+
this._overlayService.closed
75+
.pipe(
76+
first(overlay => overlay.id === id),
77+
takeUntil(this.destroy$)
78+
)
79+
.subscribe(() => {
80+
this._overlayService.detach(id);
81+
ref?.destroy();
82+
this.grid.navigation.activeNode = this.lastActiveNode;
83+
this.grid.theadRow.nativeElement.focus();
84+
});
85+
86+
this.grid.columnPinned.pipe(first()).subscribe(() => ref?.destroy());
87+
this._overlayService.show(id);
88+
}
89+
}
90+
91+
public hideESF() {
92+
this._overlayService.hide(this.filtersESFId);
93+
}
5094
}

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
</ng-template>
6363
</ng-template>
6464
<ng-template #record_template let-rowIndex="index" let-rowData>
65-
<igx-pivot-row [pivotRowWidths]='pivotRowWidths' [gridID]="id" [index]="rowIndex" [data]="rowData"
65+
<igx-pivot-row [pivotRowWidths]='pivotRowWidths' [gridID]="id" [index]="rowIndex" [data]="rowData"
6666
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
6767
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
6868
</igx-pivot-row>
@@ -139,13 +139,11 @@
139139
</div>
140140
</ng-template>
141141

142-
143142
<div [hidden]='true'>
144-
<igx-grid-excel-style-filtering>
145-
<div igxExcelStyleColumnOperations [hidden]='true'>
146-
</div>
147-
<igx-excel-style-filter-operations>
148-
<igx-excel-style-search></igx-excel-style-search>
149-
</igx-excel-style-filter-operations>
150-
</igx-grid-excel-style-filtering>
143+
<igx-grid-excel-style-filtering>
144+
<div igxExcelStyleColumnOperations [hidden]='true'></div>
145+
<igx-excel-style-filter-operations>
146+
<igx-excel-style-search></igx-excel-style-search>
147+
</igx-excel-style-filter-operations>
148+
</igx-grid-excel-style-filtering>
151149
</div>

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { IgxGridBaseDirective } from '../grid-base.directive';
3030
import { IgxFilteringService } from '../filtering/grid-filtering.service';
3131
import { IgxGridSelectionService } from '../selection/selection.service';
3232
import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
33-
import { GridType, IGX_GRID_BASE, RowType } from '../common/grid.interface';
33+
import { ColumnType, GridType, IGX_GRID_BASE, RowType } from '../common/grid.interface';
3434
import { IgxGridCRUDService } from '../common/crud.service';
3535
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
3636
import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IPivotConfiguration, IPivotDimension, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
@@ -122,8 +122,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
122122
@ViewChild(IgxPivotHeaderRowComponent, { static: true })
123123
public theadRow: IgxPivotHeaderRowComponent;
124124

125-
126-
127125
@Input()
128126
/**
129127
* Gets/Sets the pivot configuration with all related dimensions and values.
@@ -643,6 +641,20 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
643641
return;
644642
}
645643

644+
/** @hidden @internal */
645+
public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) {
646+
options.outlet = this.outlet;
647+
if (dropdown) {
648+
dropdown.initialize(column, this.overlayService);
649+
if (shouldReatach) {
650+
const id = this.overlayService.attach(dropdown.element, options);
651+
dropdown.overlayComponentId = id;
652+
return { id, ref: undefined };
653+
}
654+
return {id: dropdown.overlayComponentId, ref: undefined};
655+
}
656+
}
657+
646658
/** @hidden */
647659
public featureColumnsWidth() {
648660
return this.pivotRowWidths;

0 commit comments

Comments
 (0)