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