55ca188f501a8661190e9dab2da74f869d7873ee
[working/Evergreen.git] / Open-ILS / src / eg2 / src / app / share / grid / grid-toolbar.component.html
1
2 <div class="eg-grid-toolbar mb-2">
3
4   <div class="btn-toolbar">
5
6     <!-- buttons -->
7     <div class="btn-grp" *ngIf="gridContext.toolbarButtons.length || gridContext.isFilterable">
8       <!-- special case for remove filters button -->
9       <button *ngIf="gridContext.isFilterable"
10         class="btn btn-outline-dark mr-1" (click)="gridContext.removeFilters()"
11         [disabled]="!gridContext.filtersSet()" i18n>
12         Remove Filters
13       </button>
14       <button *ngFor="let btn of gridContext.toolbarButtons"
15         [disabled]="btn.disabled"
16         class="btn btn-outline-dark mr-1" (click)="performButtonAction(btn)">
17         {{btn.label}}
18       </button>
19     </div>
20
21     <!-- checkboxes -->
22     <div class="form-check form-check-inline"
23       *ngIf="gridContext.toolbarCheckboxes.length">
24       <ng-container *ngFor="let cb of gridContext.toolbarCheckboxes">
25         <label class="form-check-label">
26           <input class="form-check-input" type="checkbox"
27             [(ngModel)]="cb.isChecked"
28             (click)="cb.onChange.emit($event.target.checked)"/>
29             {{cb.label}}
30         </label>
31       </ng-container>
32     </div>
33   </div>
34
35   <!-- push everything else to the right -->
36   <div class="flex-1"></div>
37
38   <div class="font-sm font-italic d-flex flex-column-reverse mr-2">
39     {{gridContext.getSelectedRows().length}} selected
40   </div>
41   <div ngbDropdown class="mr-1" placement="bottom-right">
42     <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
43         class="btn btn-outline-dark no-dropdown-caret">
44       <span title="Actions For Selected Rows" i18n-title
45         class="material-icons mat-icon-in-button">playlist_add_check</span>
46     </button>
47     <div class="dropdown-menu" ngbDropdownMenu>
48       <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
49       </eg-grid-toolbar-actions-menu>
50     </div>
51   </div>
52
53   <ng-container *ngIf="!gridContext.disablePaging">
54
55   <button [disabled]="gridContext.pager.isFirstPage()" type="button"
56     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
57     <span title="First Page" i18n-title
58         class="material-icons mat-icon-in-button">first_page</span>
59   </button>
60   <button [disabled]="gridContext.pager.isFirstPage()" type="button"
61     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
62     <span title="Previous Page" i18n-title
63         class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
64   </button>
65   <button [disabled]="gridContext.pager.isLastPage()" type="button"
66     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
67     <span title="Next Page" i18n-title
68         class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
69   </button>
70   <div ngbDropdown class="mr-1" placement="bottom-right">
71     <button ngbDropdownToggle class="btn btn-outline-dark text-button">
72       <span title="Select Row Count" i18n-title i18n>
73         Rows {{gridContext.pager.limit}}
74       </span>
75     </button>
76     <div class="dropdown-menu" ngbDropdownMenu>
77       <a class="dropdown-item"
78         *ngFor="let count of [5, 10, 25, 50, 100]"
79         (click)="gridContext.pager.setLimit(count)">
80         <span class="ml-2">{{count}}</span>
81       </a>
82     </div>
83   </div>
84   
85   </ng-container><!-- if disablePaging-->
86
87
88   <button type="button"
89     class="btn btn-outline-dark mr-1"
90     (click)="gridContext.overflowCells=!gridContext.overflowCells">
91     <span *ngIf="!gridContext.overflowCells"
92       title="Expand Cells Vertically" i18n-title
93       class="material-icons mat-icon-in-button">expand_more</span>
94     <span *ngIf="gridContext.overflowCells"
95       title="Collaps Cells Vertically" i18n-title
96       class="material-icons mat-icon-in-button">expand_less</span>
97   </button>
98
99   <eg-grid-column-config #columnConfDialog [columnSet]="gridContext.columnSet">
100   </eg-grid-column-config>
101   <div ngbDropdown placement="bottom-right">
102     <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
103       <span title="Show Grid Options" i18n-title
104         class="material-icons mat-icon-in-button">settings</span>
105     </button>
106     <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
107       <a class="dropdown-item label-with-material-icon"
108         (click)="columnConfDialog.open({size:'lg'})">
109         <span class="material-icons">build</span>
110         <span class="ml-2" i18n>Manage Columns</span>
111       </a>
112       <a class="dropdown-item label-with-material-icon"
113         (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
114         <span class="material-icons">compare_arrows</span>
115         <span class="ml-2" i18n>Manage Column Widths</span>
116       </a>
117       <a class="dropdown-item label-with-material-icon"
118         *ngIf="!disableSaveSettings"
119         (click)="saveGridConfig()">
120         <span class="material-icons">save</span>
121         <span class="ml-2" i18n>Save Grid Settings</span>
122       </a>
123       <a class="dropdown-item label-with-material-icon"
124         (click)="gridContext.columnSet.reset()">
125         <span class="material-icons">restore</span>
126         <span class="ml-2" i18n>Reset Columns</span>
127       </a>
128       <a class="dropdown-item label-with-material-icon"
129         (click)="generateCsvExportUrl($event)"
130         [download]="csvExportFileName"
131         [href]="csvExportUrl">
132         <span class="material-icons">cloud_download</span>
133         <span class="ml-2" i18n>Download Full CSV</span>
134       </a>
135       <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
136         <span class="material-icons">print</span>
137         <span class="ml-2" i18n>Print Full Grid</span>
138       </a>
139
140       <div class="dropdown-divider"></div>
141
142       <a class="dropdown-item label-with-material-icon"
143         (click)="col.visible=!col.visible" *ngFor="let col of gridContext.columnSet.columns">
144         <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
145         <span *ngIf="!col.visible" class="badge badge-warning">&#x2717;</span>
146         <span class="ml-2">{{col.label}}</span>
147       </a>
148
149     </div>
150   </div>
151
152 <div>
153
154
155