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