1 <eg-grid-toolbar-actions-editor #toolbarActionsEditor [gridContext]="gridContext">
2 </eg-grid-toolbar-actions-editor>
4 <eg-grid-manage-filters-dialog #gridManageFiltersDialog [gridContext]="gridContext">
5 </eg-grid-manage-filters-dialog>
7 <div class="eg-grid-toolbar mb-2">
10 <div class="btn-toolbar">
11 <span class="fw-bold me-2" *ngIf="gridContext.toolbarLabel">
12 {{gridContext.toolbarLabel}}
16 <div class="btn-grp" *ngIf="gridContext.toolbarButtons.length || gridContext.isFilterable">
17 <!-- special case for remove filters button -->
18 <ng-container *ngIf="gridContext.isFilterable">
19 <button *ngIf="!gridContext.allowNamedFilterSets" type="button"
20 class="btn btn-outline-dark me-1" (click)="gridContext.removeFilters()"
21 [disabled]="!gridContext.filtersSet() || gridContext.dataSource.requestingData" i18n>
24 <button *ngIf="gridContext.allowNamedFilterSets"
25 class="btn btn-outline-dark me-1" type="button"
26 (click)="gridManageFiltersDialog.open().subscribe()"
27 [disabled]="gridContext.dataSource.requestingData" i18n>
31 <ng-container *ngFor="let btn of gridContext.toolbarButtons">
33 *ngIf="btn.adjacentPreceedingLabel"
34 [ngClass]="{'button-adjacent-label':true,'disabled':btn.disabled}">
35 {{btn.adjacentPreceedingLabel}}
38 [disabled]="btn.disabled" type="button"
39 class="btn btn-outline-dark me-1" (click)="performButtonAction(btn)">
43 *ngIf="btn.adjacentSubsequentLabel"
44 [ngClass]="{'button-adjacent-label':true,'disabled':btn.disabled}">
45 {{btn.adjacentSubsequentLabel}}
51 <ng-container *ngFor="let cb of gridContext.toolbarCheckboxes; index as i">
52 <div class="form-check form-check-inline">
53 <input class="form-check-input" type="checkbox" id="eg-grid-toolbar-cb{{i}}"
54 [(ngModel)]="cb.isChecked"
55 (click)="cb.onChange.emit($event.target.checked)"/>
56 <label class="form-check-label" for="eg-grid-toolbar-cb{{i}}">{{cb.label}}</label>
63 <!-- push everything else to the right -->
64 <div class="flex-1"></div>
66 <ng-container *ngIf="!gridContext.disableSelect">
68 <div class="font-sm fst-italic d-flex flex-column-reverse me-2">
69 {{gridContext.getSelectedRows().length}} selected
71 <div ngbDropdown autoClose="false" class="me-1" placement="bottom-right">
72 <button ngbDropdownToggle type="button" [disabled]="!gridContext.toolbarActions.length"
73 title="Actions For Selected Rows" i18n-title
74 aria-label="Actions For Selected Rows" i18n-aria-label
75 class="btn btn-outline-dark no-dropdown-caret" type="button">
76 <span class="material-icons mat-icon-in-button" aria-hidden="true">playlist_add_check</span>
78 <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
79 <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
80 </eg-grid-toolbar-actions-menu>
84 </ng-container><!-- if disableSelect -->
86 <ng-container *ngIf="!gridContext.disablePaging">
88 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
89 title="First Page" i18n-title aria-label="First Page" i18n-aria-label
90 class="btn btn-outline-dark me-1" (click)="gridContext.pager.toFirst()">
91 <span class="material-icons mat-icon-in-button">first_page</span>
93 <button [disabled]="gridContext.pager.isFirstPage()" type="button"
94 title="Previous Page" i18n-title aria-label="Previous Page" i18n-aria-label
95 class="btn btn-outline-dark me-1" (click)="gridContext.pager.decrement()">
96 <span class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
98 <button [disabled]="gridContext.pager.isLastPage()" type="button"
99 title="Next Page" i18n-title aria-label="Next Page" i18n-aria-label
100 class="btn btn-outline-dark me-1" (click)="gridContext.pager.increment()">
101 <span class="material-icons mat-icon-in-button" aria-hidden="true">keyboard_arrow_right</span>
103 <div ngbDropdown class="me-1" placement="bottom-right">
104 <button ngbDropdownToggle type="button" class="btn btn-outline-dark text-button">
105 <span title="Select Row Count" i18n-title i18n>
106 Rows {{gridContext.pager.limit}}
109 <div class="dropdown-menu" ngbDropdownMenu>
110 <button type="button" class="dropdown-item"
111 *ngFor="let count of [5, 10, 25, 50, 100]"
112 (click)="gridContext.pager.setLimit(count)">
113 <span class="ms-2">{{count}}</span>
118 </ng-container><!-- if disablePaging-->
121 <button type="button" *ngIf="!gridContext.overflowCells"
122 class="btn btn-outline-dark me-1"
123 title="Expand Cells Vertically" i18n-title
124 aria-label="Expand Cells Vertically" i18n-aria-label
125 (click)="gridContext.overflowCells=!gridContext.overflowCells">
126 <span aria-hidden="true"
127 class="material-icons mat-icon-in-button">expand_more</span>
130 <button type="button" *ngIf="gridContext.overflowCells"
131 class="btn btn-outline-dark me-1"
132 title="Condense Cells Vertically" i18n-title
133 aria-label="Condense Cells Vertically" i18n-aria-label
134 (click)="gridContext.overflowCells=!gridContext.overflowCells">
135 <span *ngIf="gridContext.overflowCells" aria-hidden="true"
136 class="material-icons mat-icon-in-button">expand_less</span>
139 <eg-grid-column-config #columnConfDialog [gridContext]="gridContext">
140 </eg-grid-column-config>
141 <div ngbDropdown placement="bottom-right">
142 <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret" type="button"
143 title="Show Grid Options" i18n-title aria-label="Show Grid Options" i18n-aria-label>
144 <span class="material-icons mat-icon-in-button" aria-hidden="true">settings</span>
146 <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
147 <button nbgDropdownItem class="dropdown-item label-with-material-icon"
148 (click)="columnConfDialog.open({size:'lg'})" type="button">
149 <span class="material-icons" aria-hidden="true">build</span>
150 <span class="ms-2" i18n>Manage Columns</span>
152 <button nbgDropdownItem class="dropdown-item label-with-material-icon"
153 (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible" type="button">
154 <span class="material-icons" aria-hidden="true">compare_arrows</span>
155 <span class="ms-2" i18n>Manage Column Widths</span>
157 <button nbgDropdownItem class="dropdown-item label-with-material-icon" type="button"
158 [disabled]="gridContext.toolbarActions.length === 0" (click)="toolbarActionsEditor.open().subscribe()">
159 <span class="material-icons" aria-hidden="true">menu</span>
160 <span class="ms-2" i18n>Manage Actions Menu</span>
162 <button nbgDropdownItem class="dropdown-item label-with-material-icon" *ngIf="!disableSaveSettings"
163 (click)="saveGridConfig()" type="button">
164 <span class="material-icons" aria-hidden="true">save</span>
165 <span class="ms-2" i18n>Save Grid Settings</span>
167 <button nbgDropdownItem class="dropdown-item label-with-material-icon"
168 (click)="gridContext.columnSet.reset()" type="button">
169 <span class="material-icons" aria-hidden="true">restore</span>
170 <span class="ms-2" i18n>Reset Columns</span>
172 <a nbgDropdownItem class="dropdown-item label-with-material-icon"
173 (click)="generateCsvExportUrl($event)" type="button"
174 [download]="csvExportFileName" [href]="csvExportUrl">
175 <span class="material-icons" aria-hidden="true">cloud_download</span>
176 <span class="ms-2" i18n>Download Full CSV</span>
178 <button nbgDropdownItem class="dropdown-item label-with-material-icon"
179 (click)="printHtml()" type="button">
180 <span class="material-icons" aria-hidden="true">print</span>
181 <span class="ms-2" i18n>Print Full Grid</span>
183 <button nbgDropdownItem type="button"
184 class="dropdown-item label-with-material-icon"
185 [disabled]="!gridContext.getSelectedRows().length"
186 (click)="printSelectedRows()">
187 <span class="material-icons" aria-hidden="true">print</span>
188 <span class="ms-2" i18n>Print Selected Rows</span>
191 <div class="dropdown-divider"></div>
193 <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="toggleVisibility(col)"
194 *ngFor="let col of gridContext.columnSet.sortForColPicker()" type="button">
195 <!-- Note that the ARIA labels describe the action that will happen when the button
196 is pressed, not the current state indicated by the badge -->
197 <span *ngIf="col.visible" class="badge badge-success" aria-label="Hide" i18n-aria-label>✓</span>
198 <span *ngIf="!col.visible" class="badge badge-warning" aria-label="Show" i18n-aria-label>✗</span>
199 <span class="ms-2">{{col.label}}</span>