Skip to content

Commit e30c02f

Browse files
DiyanDimitrovDiyanDimitrov
committed
feat(filtering): add advanced filtering dialog stub #5496 
1 parent 03daa14 commit e30c02f

File tree

5 files changed

+246
-8
lines changed

5 files changed

+246
-8
lines changed

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<article #toggle
2+
class="igx-excel-filter__secondary"
3+
[ngClass]="{
4+
'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',
5+
'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'
6+
}"
7+
(keydown)="onKeyDown($event)"
8+
(onOpening)="onCustomDialogOpening()"
9+
(onOpened)="onCustomDialogOpened()">
10+
<header class="igx-advanced-filter__secondary-header">
11+
<h4 class="igx-typography__h6">
12+
Adv. Filtering
13+
</h4>
14+
</header>
15+
16+
<article #expressionsContainer class="igx-advanced-filter__secondary-main">
17+
<!-- <ng-container *ngIf="column.dataType === 'date'">
18+
<igx-excel-style-date-expression *ngFor="let expression of expressionsList;"
19+
class="igx-excel-filter__condition"
20+
[expressionUI]="expression"
21+
[column]="column"
22+
[grid]="grid"
23+
[displayDensity]="displayDensity"
24+
[expressionsList]="expressionsList"
25+
(onExpressionRemoved)="onExpressionRemoved($event)"
26+
(onLogicOperatorChanged)="onLogicOperatorChanged($event)">
27+
</igx-excel-style-date-expression>
28+
</ng-container> -->
29+
30+
<!-- <ng-container *ngIf="column.dataType !== 'date'">
31+
<igx-excel-style-default-expression *ngFor="let expression of expressionsList;"
32+
class="igx-excel-filter__condition"
33+
[expressionUI]="expression"
34+
[column]="column"
35+
[grid]="grid"
36+
[displayDensity]="displayDensity"
37+
[expressionsList]="expressionsList"
38+
(onExpressionRemoved)="onExpressionRemoved($event)"
39+
(onLogicOperatorChanged)="onLogicOperatorChanged($event)">
40+
</igx-excel-style-default-expression>
41+
</ng-container> -->
42+
43+
<!-- <button igxButton [displayDensity]="displayDensity"
44+
class="igx-advanced-filter__add-filter"
45+
(click)="onAddButtonClick()">
46+
<igx-icon>add</igx-icon>
47+
<span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>
48+
</button> -->
49+
</article>
50+
51+
<footer class="igx-advanced-filter__secondary-footer">
52+
<button igxButton [displayDensity]="displayDensity" (click)="onClearButtonClick()">{{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}</button>
53+
54+
<div>
55+
<button igxButton [displayDensity]="displayDensity" (click)="closeDialog()">{{ grid.resourceStrings.igx_grid_excel_cancel }}</button>
56+
<button igxButton="raised" [displayDensity]="displayDensity" (click)="onApplyButtonClick()" (keydown)="onApplyButtonKeyDown($event)">
57+
{{ grid.resourceStrings.igx_grid_excel_apply }}
58+
</button>
59+
</div>
60+
</footer>
61+
</article>

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { Component, AfterViewInit, Input, ViewChild } from '@angular/core';
2+
import { PositionSettings, VerticalAlignment, HorizontalAlignment, OverlaySettings } from '../../../services/overlay/utilities';
3+
import { ConnectedPositioningStrategy } from '../../../services/overlay/position/connected-positioning-strategy';
4+
import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll/absolute-scroll-strategy';
5+
import { IgxFilteringService } from '../grid-filtering.service';
6+
import { IgxOverlayService } from '../../../services/overlay/overlay';
7+
import { DisplayDensity } from '../../../core/displayDensity';
8+
import { IgxToggleDirective } from 'igniteui-angular';
9+
10+
@Component({
11+
// changeDetection: ChangeDetectionStrategy.OnPush,
12+
preserveWhitespaces: false,
13+
selector: 'igx-advanced-filtering-dialog',
14+
templateUrl: './advanced-filtering-dialog.component.html'
15+
})
16+
export class IgxAdvancedFilteringDialogComponent implements AfterViewInit {
17+
private _customDialogPositionSettings: PositionSettings = {
18+
verticalDirection: VerticalAlignment.Middle,
19+
horizontalDirection: HorizontalAlignment.Center,
20+
horizontalStartPoint: HorizontalAlignment.Center,
21+
verticalStartPoint: VerticalAlignment.Middle
22+
};
23+
24+
private _customDialogOverlaySettings: OverlaySettings = {
25+
closeOnOutsideClick: true,
26+
modal: false,
27+
positionStrategy: new ConnectedPositioningStrategy(this._customDialogPositionSettings),
28+
scrollStrategy: new AbsoluteScrollStrategy()
29+
};
30+
31+
@Input()
32+
public filteringService: IgxFilteringService;
33+
34+
@Input()
35+
public overlayComponentId: string;
36+
37+
@Input()
38+
public overlayService: IgxOverlayService;
39+
40+
@Input()
41+
public displayDensity: DisplayDensity;
42+
43+
ngAfterViewInit(): void {
44+
this._customDialogOverlaySettings.outlet = this.grid.outlet;
45+
}
46+
47+
get grid(): any {
48+
return this.filteringService.grid;
49+
}
50+
51+
public initialize(filteringService: IgxFilteringService, overlayService: IgxOverlayService,
52+
overlayComponentId: string) {
53+
this.filteringService = filteringService;
54+
this.overlayService = overlayService;
55+
this.overlayComponentId = overlayComponentId;
56+
57+
// this._subMenuOverlaySettings.outlet = this.grid.outlet;
58+
}
59+
60+
public onClearButtonClick() {
61+
// this.filteringService.clearFilter();
62+
// this.createInitialExpressionUIElement();
63+
// this.cdr.detectChanges();
64+
}
65+
66+
public closeDialog() {
67+
if (this.overlayComponentId) {
68+
this.overlayService.hide(this.overlayComponentId);
69+
}
70+
}
71+
72+
public onApplyButtonClick() {
73+
// this.expressionsList = this.expressionsList.filter(
74+
// element => element.expression.condition &&
75+
// (element.expression.searchVal || element.expression.searchVal === 0 || element.expression.condition.isUnary));
76+
77+
// if (this.expressionsList.length > 0) {
78+
// this.expressionsList[0].beforeOperator = null;
79+
// this.expressionsList[this.expressionsList.length - 1].afterOperator = null;
80+
// }
81+
82+
// this.filteringService.filterInternal(this.column.field, this.expressionsList);
83+
this.closeDialog();
84+
}
85+
}

‎projects/igniteui-angular/src/lib/grids/grid-common.module.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ import { IgxGridExcelStyleFilteringModule } from './filtering/excel-style/grid.e
6767
import { IgxGridDragSelectDirective } from './drag-select.directive';
6868
import { IgxGridColumnResizerComponent } from './grid-column-resizer.component';
6969
import { IgxRowDragModule } from './row-drag.directive';
70+
import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
7071
/**
7172
* @hidden
7273
*/
@@ -102,12 +103,14 @@ import { IgxRowDragModule } from './row-drag.directive';
102103
IgxGridDragSelectDirective,
103104
IgxGridColumnResizerComponent,
104105
IgxFilterCellTemplateDirective,
105-
IgxGridFooterComponent
106+
IgxGridFooterComponent,
107+
IgxAdvancedFilteringDialogComponent
106108
],
107109
entryComponents: [
108110
IgxColumnComponent,
109111
IgxColumnGroupComponent,
110-
IgxColumnLayoutComponent
112+
IgxColumnLayoutComponent,
113+
IgxAdvancedFilteringDialogComponent
111114
],
112115
exports: [
113116
IgxGridCellComponent,
@@ -164,7 +167,8 @@ import { IgxRowDragModule } from './row-drag.directive';
164167
IgxFilterCellTemplateDirective,
165168
IgxRowDragModule,
166169
IgxPaginatorModule,
167-
IgxGridFooterComponent
170+
IgxGridFooterComponent,
171+
IgxAdvancedFilteringDialogComponent
168172
],
169173
imports: [
170174
CommonModule,

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@
4848
</igx-drop-down>
4949
</div>
5050

51+
<button igxButton="flat" [displayDensity]="grid.displayDensity" igxButton igxRipple
52+
(click)="showAdvancedFilteringUI()">
53+
<div class="igx-grid-toolbar__button-space">
54+
<igx-icon fontSet="material">filter_list</igx-icon>
55+
<span>Adv. Filtering</span>
56+
</div>
57+
</button>
5158

5259
<div class="igx-grid-toolbar__dropdown" *ngIf="shouldShowExportButton" id="btnExport">
5360
<button igxButton="flat" [displayDensity]="grid.displayDensity" igxRipple #btnExport

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

Lines changed: 86 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import {
77
Optional,
88
ViewChild,
99
Inject,
10-
TemplateRef
10+
TemplateRef,
11+
NgModuleRef,
12+
OnInit,
13+
OnDestroy
1114
} from '@angular/core';
1215

1316
import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
@@ -18,15 +21,22 @@ import {
1821
IgxCsvExporterService,
1922
IgxExcelExporterOptions,
2023
IgxExcelExporterService,
21-
AbsoluteScrollStrategy
24+
AbsoluteScrollStrategy,
25+
IgxOverlayService
2226
} from '../services/index';
2327
import { GridBaseAPIService } from './api.service';
2428
import { IgxGridBaseComponent, IGridDataBindable } from './grid-base.component';
2529
import { IgxDropDownComponent } from '../drop-down/drop-down.component';
2630
import { IgxColumnHidingComponent } from './column-hiding.component';
2731
import { IgxColumnPinningComponent } from './column-pinning.component';
2832
import { OverlaySettings, PositionSettings, HorizontalAlignment, VerticalAlignment } from '../services/overlay/utilities';
29-
import { ConnectedPositioningStrategy } from '../services/overlay/position';
33+
import { ConnectedPositioningStrategy, AutoPositionStrategy, GlobalPositionStrategy } from '../services/overlay/position';
34+
import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
35+
import { IgxFilteringService } from './filtering/grid-filtering.service';
36+
import { filter, takeUntil } from 'rxjs/operators';
37+
import { Subject } from 'rxjs';
38+
import { useAnimation } from '@angular/animations';
39+
import { fadeIn, fadeOut } from '../animations/main';
3040

3141
/**
3242
* This class encapsulates the Toolbar's logic and is internally used by
@@ -36,7 +46,8 @@ import { ConnectedPositioningStrategy } from '../services/overlay/position';
3646
selector: 'igx-grid-toolbar',
3747
templateUrl: './grid-toolbar.component.html'
3848
})
39-
export class IgxGridToolbarComponent extends DisplayDensityBase {
49+
export class IgxGridToolbarComponent extends DisplayDensityBase implements OnInit, OnDestroy {
50+
private _componentOverlayId: string;
4051

4152
/**
4253
* @hidden
@@ -218,10 +229,14 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
218229
public cdr: ChangeDetectorRef,
219230
@Optional() public excelExporter: IgxExcelExporterService,
220231
@Optional() public csvExporter: IgxCsvExporterService,
221-
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
232+
@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
233+
private _moduleRef: NgModuleRef<any>,
234+
private _filteringService: IgxFilteringService,
235+
@Inject(IgxOverlayService) private _overlayService: IgxOverlayService) {
222236
super(_displayDensityOptions);
223237
}
224238

239+
private _destroy$ = new Subject<boolean>();
225240
private _positionSettings: PositionSettings = {
226241
horizontalDirection: HorizontalAlignment.Left,
227242
horizontalStartPoint: HorizontalAlignment.Right,
@@ -237,6 +252,49 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
237252
excludePositionTarget: true
238253
};
239254

255+
// private _filterMenuPositionSettings = {
256+
// verticalStartPoint: VerticalAlignment.Bottom,
257+
// openAnimation: useAnimation(fadeIn, {
258+
// params: {
259+
// duration: '250ms'
260+
// }
261+
// }),
262+
// closeAnimation: useAnimation(fadeOut, {
263+
// params: {
264+
// duration: '200ms'
265+
// }
266+
// })
267+
// };
268+
269+
private _filterMenuOverlaySettings: OverlaySettings = {
270+
closeOnOutsideClick: false,
271+
modal: true,
272+
positionStrategy: new GlobalPositionStrategy(), // new AutoPositionStrategy(this._filterMenuPositionSettings),
273+
scrollStrategy: new AbsoluteScrollStrategy()
274+
};
275+
276+
ngOnInit() {
277+
this._overlayService.onOpening.pipe(
278+
filter((overlay) => overlay.id === this._componentOverlayId),
279+
takeUntil(this._destroy$)).subscribe((eventArgs) => {
280+
this.onOverlayOpening(eventArgs);
281+
});
282+
283+
this._overlayService.onClosed.pipe(
284+
filter(overlay => overlay.id === this._componentOverlayId),
285+
takeUntil(this._destroy$)).subscribe(() => {
286+
this.onOverlayClosed();
287+
});
288+
}
289+
290+
ngOnDestroy(): void {
291+
this._destroy$.next(true);
292+
this._destroy$.complete();
293+
294+
if (this._componentOverlayId) {
295+
this._overlayService.hide(this._componentOverlayId);
296+
}
297+
}
240298

241299
/**
242300
* Returns the title of `IgxGridToolbarComponent`.
@@ -351,6 +409,29 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
351409
this.columnPinningDropdown.toggle(this._overlaySettings);
352410
}
353411

412+
public showAdvancedFilteringUI() {
413+
if (!this._componentOverlayId) {
414+
this._filterMenuOverlaySettings.positionStrategy.settings.target =
415+
(this.grid as any).rootGrid ? (this.grid as any).rootGrid.nativeElement : this.grid.nativeElement;
416+
this._filterMenuOverlaySettings.outlet = this.grid.outletDirective;
417+
418+
this._componentOverlayId =
419+
this._overlayService.attach(IgxAdvancedFilteringDialogComponent, this._filterMenuOverlaySettings, this._moduleRef);
420+
this._overlayService.show(this._componentOverlayId, this._filterMenuOverlaySettings);
421+
}
422+
}
423+
424+
private onOverlayOpening(eventArgs) {
425+
const instance = eventArgs.componentRef.instance as IgxAdvancedFilteringDialogComponent;
426+
if (instance) {
427+
instance.initialize(this._filteringService, this._overlayService, eventArgs.id);
428+
}
429+
}
430+
431+
private onOverlayClosed() {
432+
this._componentOverlayId = null;
433+
}
434+
354435
/**
355436
* Returns the `context` object which represents the `template context` binding into the
356437
* `toolbar custom container` by providing references to the parent IgxGird and the toolbar itself.

0 commit comments

Comments
 (0)