Skip to content

Commit a7b57d5

Browse files
rkaraivanovrkaraivanov
committed
feat(grid-toolbar): Toolbar refactor
Closes #8055
1 parent e0a4a70 commit a7b57d5

21 files changed

+626
-586
lines changed

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 40 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@ import {
2525
InjectionToken,
2626
Optional,
2727
DoCheck,
28-
Directive,
29-
OnChanges,
30-
SimpleChanges
28+
Directive
3129
} from '@angular/core';
3230
import ResizeObserver from 'resize-observer-polyfill';
3331
import 'igniteui-trial-watermark';
@@ -143,7 +141,6 @@ import { GridType } from './common/grid.interface';
143141
import { IgxDecimalPipeComponent, IgxDatePipeComponent } from './common/pipes';
144142
import { DropPosition } from './moving/moving.service';
145143
import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/row-selectors';
146-
import { IgxGridToolbarCustomContentDirective } from './toolbar/toolbar.directive';
147144
import { IgxColumnComponent } from './columns/column.component';
148145
import { IgxColumnGroupComponent } from './columns/column-group.component';
149146
import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
@@ -1703,16 +1700,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
17031700
* let customContentTemplate = this.grid.toolbarCustomContentTemplate;
17041701
* ```
17051702
*/
1706-
public get toolbarCustomContentTemplate(): IgxGridToolbarCustomContentDirective {
1707-
return this.toolbarCustomContentTemplates.first;
1708-
}
1703+
// public get toolbarCustomContentTemplate(): IgxGridToolbarCustomContentDirective {
1704+
// return this.toolbarCustomContentTemplates.first;
1705+
// }
17091706

1710-
/**
1711-
* @hidden
1712-
* @internal
1713-
*/
1714-
@ContentChildren(IgxGridToolbarCustomContentDirective, { read: IgxGridToolbarCustomContentDirective, descendants: false })
1715-
public toolbarCustomContentTemplates: QueryList<IgxGridToolbarCustomContentDirective>;
1707+
// /**
1708+
// * @hidden
1709+
// * @internal
1710+
// */
1711+
// @ContentChildren(IgxGridToolbarCustomContentDirective, { read: IgxGridToolbarCustomContentDirective, descendants: false })
1712+
// public toolbarCustomContentTemplates: QueryList<IgxGridToolbarCustomContentDirective>;
17161713

17171714
/**
17181715
* @hidden
@@ -2132,6 +2129,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
21322129
return this.columnList.filter((col) => col.columnGroup === false && col.hidden === true).length;
21332130
}
21342131

2132+
/**
2133+
* Gets the number of pinned columns.
2134+
*/
2135+
get pinnedColumnsCount() {
2136+
return this.pinnedColumns.filter(col => !col.columnLayout).length;
2137+
}
2138+
21352139
/**
21362140
* Gets/Sets the text to be displayed inside the toggle button.
21372141
* @remarks
@@ -2200,18 +2204,21 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
22002204
return this._currentRowState;
22012205
}
22022206

2203-
/**
2204-
* Provides access to the `IgxToolbarComponent`.
2205-
* @example
2206-
* ```typescript
2207-
* const gridToolbar = this.grid.toolbar;
2208-
* ```
2209-
*/
2210-
@ViewChild('toolbar', { read: IgxGridToolbarComponent })
2211-
public toolbar: IgxGridToolbarComponent = null;
2207+
// /**
2208+
// * Provides access to the `IgxToolbarComponent`.
2209+
// * @example
2210+
// * ```typescript
2211+
// * const gridToolbar = this.grid.toolbar;
2212+
// * ```
2213+
// */
2214+
// @ViewChild('toolbar', { read: IgxGridToolbarComponent })
2215+
// public toolbar: IgxGridToolbarComponent = null;
2216+
2217+
// @ViewChild('toolbar', { read: ElementRef })
2218+
// private toolbarHtml: ElementRef = null;
2219+
@ContentChildren(IgxGridToolbarComponent)
2220+
public toolbar: QueryList<IgxGridToolbarComponent>;
22122221

2213-
@ViewChild('toolbar', { read: ElementRef })
2214-
private toolbarHtml: ElementRef = null;
22152222

22162223
/**
22172224
* Gets/Sets whether the toolbar is shown.
@@ -3140,6 +3147,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
31403147
*/
31413148
public ngAfterContentInit() {
31423149
this.setupColumns();
3150+
this.toolbar.changes.pipe(takeUntil(this.destroy$), filter(() => !this._init)).subscribe(() => this.notifyChanges(true));
31433151
}
31443152

31453153
/**
@@ -4724,11 +4732,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
47244732
*/
47254733
protected getToolbarHeight(): number {
47264734
let toolbarHeight = 0;
4727-
if (this.showToolbar && this.toolbarHtml != null) {
4728-
const height = this.getComputedHeight(this.toolbarHtml.nativeElement);
4729-
toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ?
4730-
height : 0;
4731-
}
4735+
if (this.toolbar.first) {
4736+
toolbarHeight = this.getComputedHeight(this.toolbar.first.nativeElement);
4737+
}
4738+
// if (this.showToolbar && this.toolbarHtml != null) {
4739+
// const height = this.getComputedHeight(this.toolbarHtml.nativeElement);
4740+
// toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ?
4741+
// height : 0;
4742+
// }
47324743
return toolbarHeight;
47334744
}
47344745

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
<igx-grid-toolbar [style.max-width.px]='outerWidth' [style.flex-basis.px]="outerWidth" role="toolbar" *ngIf="showToolbar" [gridID]="id"
2-
[displayDensity]="displayDensity" #toolbar>
3-
</igx-grid-toolbar>
1+
<ng-content select="igx-grid-toolbar"></ng-content>
42

53
<div [style.flex-basis.px]='outerWidth' class="igx-grid__grouparea"
64
*ngIf="showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)" #groupArea>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -316,9 +316,10 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
316316
this.childLayoutKeys = this.parentIsland.children.map((item) => item.key);
317317
}
318318

319-
this.toolbarCustomContentTemplates = this.parentIsland ?
320-
this.parentIsland.toolbarCustomContentTemplates :
321-
this.toolbarCustomContentTemplates;
319+
// TODO: Clean up
320+
// this.toolbarCustomContentTemplates = this.parentIsland ?
321+
// this.parentIsland.toolbarCustomContentTemplates :
322+
// this.toolbarCustomContentTemplates;
322323

323324
this.headSelectorsTemplates = this.parentIsland ?
324325
this.parentIsland.headSelectorsTemplates :

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import { Directive, Input } from '@angular/core';
2+
import { GridBaseAPIService } from '../api.service';
3+
import { IgxGridBaseDirective } from '../grid-base.directive';
4+
import { GridType } from '../common/grid.interface';
5+
import { IgxToggleDirective } from '../../directives/toggle/toggle.directive';
6+
import {
7+
AbsoluteScrollStrategy,
8+
ConnectedPositioningStrategy,
9+
HorizontalAlignment,
10+
OverlaySettings,
11+
PositionSettings,
12+
VerticalAlignment
13+
} from '../../services/public_api';
14+
15+
16+
// tslint:disable-next-line: directive-selector
17+
@Directive({ selector: '[excelText],excel-text' })
18+
export class IgxExcelTextDirective { }
19+
20+
21+
// tslint:disable-next-line: directive-selector
22+
@Directive({ selector: '[csvText],csv-text' })
23+
export class IgxCSVTextDirective { }
24+
25+
/**
26+
* Provides a way to template the title portion of the toolbar in the grid.
27+
*
28+
* @igxModule IgxGridToolbarModule
29+
* @igxParent IgxGridToolbarComponent
30+
*
31+
* @example
32+
* ```html
33+
* <igx-grid-toolbar-title>My custom title</igx-grid-toolbar-title>
34+
* ```
35+
*/
36+
@Directive({ selector: '[igxGridToolbarTitle],igx-grid-toolbar-title' })
37+
export class IgxGridToolbarTitleDirective { }
38+
39+
/**
40+
* Provides a way to template the action portion of the toolbar in the grid.
41+
*
42+
* @igxModule IgxGridToolbarModule
43+
* @igxParent IgxGridToolbarComponent
44+
*
45+
* @example
46+
* ```html
47+
* <igx-grid-toolbar-actions>
48+
* <some-toolbar-action-here />
49+
* </igx-grid-toolbar-actions>
50+
* ```
51+
*/
52+
@Directive({ selector: '[igxGridToolbarActions],igx-grid-toolbar-actions' })
53+
export class IgxGridToolbarActionsDirective { }
54+
55+
/**
56+
* Base class for the pinning/hiding column actions.
57+
*
58+
* @hidden
59+
* @internal
60+
*/
61+
@Directive()
62+
export abstract class BaseToolbarDirective {
63+
64+
/**
65+
* Returns the grid containing this component.
66+
*/
67+
public get grid() {
68+
return this.api.grid;
69+
}
70+
71+
constructor(protected api: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
72+
73+
public toggle(anchorElement: HTMLElement, toggleRef: IgxToggleDirective): void {
74+
const settings = _makeOverlaySettings();
75+
settings.positionStrategy.settings.target = anchorElement;
76+
settings.outlet = this.grid.outlet;
77+
toggleRef.toggle(settings);
78+
}
79+
}
80+
81+
82+
function _makeOverlaySettings(): OverlaySettings {
83+
const positionSettings: PositionSettings = {
84+
horizontalDirection: HorizontalAlignment.Left,
85+
horizontalStartPoint: HorizontalAlignment.Right,
86+
verticalDirection: VerticalAlignment.Bottom,
87+
verticalStartPoint: VerticalAlignment.Bottom
88+
};
89+
return {
90+
positionStrategy: new ConnectedPositioningStrategy(positionSettings),
91+
scrollStrategy: new AbsoluteScrollStrategy(),
92+
modal: false,
93+
closeOnOutsideClick: true,
94+
excludePositionTarget: true
95+
};
96+
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<button igxButton="outlined" [displayDensity]="grid.displayDensity" name="btnAdvancedFiltering" igxRipple
2+
(click)="grid.openAdvancedFilteringDialog()"
3+
[ngClass]="grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'">
4+
<div class="igx-grid-toolbar__button-space">
5+
<igx-icon>filter_list</igx-icon>
6+
<span #ref>
7+
<ng-content></ng-content>
8+
</span>
9+
<span *ngIf="!ref.childNodes.length">Advanced Filtering</span>
10+
</div>
11+
</button>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Component } from '@angular/core';
2+
import { GridBaseAPIService } from '../api.service';
3+
import { IgxGridBaseDirective } from '../grid-base.directive';
4+
import { GridType } from '../common/grid.interface';
5+
6+
7+
/**
8+
* Provides a pre-configured button to open the advanced filtering dialog of the grid.
9+
*
10+
*
11+
* @igxModule IgxGridToolbarModule
12+
* @igxParent IgxGridToolbarComponent
13+
*
14+
* @example
15+
* ```html
16+
* <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
17+
* <igx-grid-toolbar-advanced-filtering>Custom text</igx-grid-toolbar-advanced-filtering>
18+
* ```
19+
*/
20+
@Component({
21+
selector: 'igx-grid-toolbar-advanced-filtering',
22+
templateUrl: './grid-toolbar-advanced-filtering.component.html'
23+
})
24+
export class IgxGridToolbarAdvancedFilteringComponent {
25+
26+
/**
27+
* Returns the grid containing this component.
28+
*/
29+
get grid() {
30+
return this.api.grid;
31+
}
32+
33+
constructor(private api: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
34+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<div class="igx-grid-toolbar__dropdown" id="btnExport">
2+
<button [disabled]="isExporting" igxButton="outlined" [displayDensity]="grid.displayDensity" igxRipple #btn
3+
(click)="toggle(btn, toggleRef)">
4+
<span class="igx-grid-toolbar__button-space">
5+
<igx-icon>import_export</igx-icon>
6+
<span #ref>
7+
<ng-content></ng-content>
8+
</span>
9+
<span *ngIf="!ref.childNodes.length">Export</span>
10+
<igx-icon>arrow_drop_down</igx-icon>
11+
</span>
12+
</button>
13+
14+
<ul class="igx-grid-toolbar__dd-list" igxToggle #toggleRef="toggle">
15+
<!-- Angular sucks donkey balls with default content -->
16+
<li *ngIf="exportExcel" #btnExportExcel id="btnExportExcel" class="igx-grid-toolbar__dd-list-items" igxRipple
17+
(click)="export('excel', toggleRef)">
18+
<ng-template #excel>
19+
<ng-content select=[excelText],excel-text></ng-content>
20+
</ng-template>
21+
<excel-text *ngIf="!hasExcelAttr">Export Excel</excel-text>
22+
<ng-container *ngTemplateOutlet="excel"></ng-container>
23+
</li>
24+
25+
<li *ngIf="exportCSV" #btnExportCsv id="btnExportCsv" class="igx-grid-toolbar__dd-list-items" igxRipple
26+
(click)="export('csv', toggleRef)">
27+
<ng-template #csv>
28+
<ng-content select=[csvText],csv-text></ng-content>
29+
</ng-template>
30+
<csv-text *ngIf="!hasCSVAttr">Export CSV</csv-text>
31+
<ng-container *ngTemplateOutlet="csv"></ng-container>
32+
</li>
33+
</ul>
34+
</div>

0 commit comments

Comments
 (0)