be7b19cb7e9a6aa55ca42410652e7dd5988ff615
[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">
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($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 class="font-sm font-italic d-flex flex-column-reverse mr-2">
33     {{gridContext.rowSelector.selected().length}} selected
34   </div>
35   <div ngbDropdown class="mr-1" placement="bottom-right">
36     <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
37         class="btn btn-outline-dark no-dropdown-caret">
38       <span title="Actions For Selected Rows" i18n-title
39         class="material-icons mat-icon-in-button">playlist_add_check</span>
40     </button>
41     <div class="dropdown-menu" ngbDropdownMenu>
42       <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
43       </eg-grid-toolbar-actions-menu>
44     </div>
45   </div>
46
47   <ng-container *ngIf="!gridContext.disablePaging">
48
49   <button [disabled]="gridContext.pager.isFirstPage()" type="button"
50     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
51     <span title="First Page" i18n-title
52         class="material-icons mat-icon-in-button">first_page</span>
53   </button>
54   <button [disabled]="gridContext.pager.isFirstPage()" type="button"
55     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
56     <span title="Previous Page" i18n-title
57         class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
58   </button>
59   <button [disabled]="gridContext.pager.isLastPage()" type="button"
60     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
61     <span title="Next Page" i18n-title
62         class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
63   </button>
64   <div ngbDropdown class="mr-1" placement="bottom-right">
65     <button ngbDropdownToggle class="btn btn-outline-dark text-button">
66       <span title="Select Row Count" i18n-title i18n>
67         Rows {{gridContext.pager.limit}}
68       </span>
69     </button>
70     <div class="dropdown-menu" ngbDropdownMenu>
71       <a class="dropdown-item"
72         *ngFor="let count of [5, 10, 25, 50, 100]"
73         (click)="gridContext.pager.setLimit(count)">
74         <span class="ml-2">{{count}}</span>
75       </a>
76     </div>
77   </div>
78   
79   </ng-container><!-- if disablePaging-->
80
81
82   <button type="button"
83     class="btn btn-outline-dark mr-1"
84     (click)="gridContext.overflowCells=!gridContext.overflowCells">
85     <span *ngIf="!gridContext.overflowCells"
86       title="Expand Cells Vertically" i18n-title
87       class="material-icons mat-icon-in-button">expand_more</span>
88     <span *ngIf="gridContext.overflowCells"
89       title="Collaps Cells Vertically" i18n-title
90       class="material-icons mat-icon-in-button">expand_less</span>
91   </button>
92
93   <eg-grid-column-config #columnConfDialog [columnSet]="gridContext.columnSet">
94   </eg-grid-column-config>
95   <div ngbDropdown placement="bottom-right">
96     <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
97       <span title="Show Grid Options" i18n-title
98         class="material-icons mat-icon-in-button">settings</span>
99     </button>
100     <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
101       <a class="dropdown-item label-with-material-icon"
102         (click)="columnConfDialog.open({size:'lg'})">
103         <span class="material-icons">build</span>
104         <span class="ml-2" i18n>Manage Columns</span>
105       </a>
106       <a class="dropdown-item label-with-material-icon"
107         (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
108         <span class="material-icons">compare_arrows</span>
109         <span class="ml-2" i18n>Manage Column Widths</span>
110       </a>
111       <a class="dropdown-item label-with-material-icon"
112         *ngIf="!disableSaveSettings"
113         (click)="saveGridConfig()">
114         <span class="material-icons">save</span>
115         <span class="ml-2" i18n>Save Grid Settings</span>
116       </a>
117       <a class="dropdown-item label-with-material-icon"
118         (click)="gridContext.columnSet.reset()">
119         <span class="material-icons">restore</span>
120         <span class="ml-2" i18n>Reset Columns</span>
121       </a>
122       <a class="dropdown-item label-with-material-icon"
123         (click)="generateCsvExportUrl($event)"
124         [download]="csvExportFileName"
125         [href]="csvExportUrl">
126         <span class="material-icons">cloud_download</span>
127         <span class="ml-2" i18n>Download Full CSV</span>
128       </a>
129       <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
130         <span class="material-icons">print</span>
131         <span class="ml-2" i18n>Print Full Grid</span>
132       </a>
133
134       <div class="dropdown-divider"></div>
135
136       <a class="dropdown-item label-with-material-icon"
137         (click)="col.visible=!col.visible" *ngFor="let col of gridContext.columnSet.columns">
138         <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
139         <span *ngIf="!col.visible" class="badge badge-warning">&#x2717;</span>
140         <span class="ml-2">{{col.label}}</span>
141       </a>
142
143     </div>
144   </div>
145
146 <div>
147
148
149