Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html

   1 <eg-grid-toolbar-actions-editor #toolbarActionsEditor [gridContext]="gridContext">
   2 </eg-grid-toolbar-actions-editor>
   3
   4 <eg-grid-manage-filters-dialog #gridManageFiltersDialog [gridContext]="gridContext">
   5 </eg-grid-manage-filters-dialog>
   6
   7 <div class="eg-grid-toolbar mb-2">
   8
   9
  10   <div class="btn-toolbar">
  11     <span class="fw-bold me-2" *ngIf="gridContext.toolbarLabel">
  12       {{gridContext.toolbarLabel}}
  13     </span>
  14
  15     <!-- buttons -->
  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>
  22           Remove Filters
  23         </button>
  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>
  28           Manage Grid Filters
  29         </button>
  30       </ng-container>
  31       <ng-container *ngFor="let btn of gridContext.toolbarButtons">
  32         <span
  33             *ngIf="btn.adjacentPreceedingLabel"
  34             [ngClass]="{'button-adjacent-label':true,'disabled':btn.disabled}">
  35             {{btn.adjacentPreceedingLabel}}
  36         </span>
  37         <button
  38           [disabled]="btn.disabled" type="button"
  39           class="btn btn-outline-dark me-1" (click)="performButtonAction(btn)">
  40           {{btn.label}}
  41         </button>
  42         <span
  43             *ngIf="btn.adjacentSubsequentLabel"
  44             [ngClass]="{'button-adjacent-label':true,'disabled':btn.disabled}">
  45             {{btn.adjacentSubsequentLabel}}
  46         </span>
  47       </ng-container>
  48     </div>
  49
  50     <!-- checkboxes -->
  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>
  57       </div>
  58     </ng-container>
  59
  60
  61   </div>
  62
  63   <!-- push everything else to the right -->
  64   <div class="flex-1"></div>
  65
  66   <ng-container *ngIf="!gridContext.disableSelect">
  67
  68   <div class="font-sm fst-italic d-flex flex-column-reverse me-2">
  69     {{gridContext.getSelectedRows().length}} selected
  70   </div>
  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>
  77     </button>
  78     <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
  79       <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
  80       </eg-grid-toolbar-actions-menu>
  81     </div>
  82   </div>
  83
  84   </ng-container><!-- if disableSelect -->
  85
  86   <ng-container *ngIf="!gridContext.disablePaging">
  87
  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>
  92   </button>
  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>
  97   </button>
  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>
 102   </button>
 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}}
 107       </span>
 108     </button>
 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>
 114       </button>
 115     </div>
 116   </div>
 117
 118   </ng-container><!-- if disablePaging-->
 119
 120
 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>
 128     </button>
 129
 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>
 137   </button>
 138
 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>
 145     </button>
 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>
 151       </button>
 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>
 156       </button>
 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>
 161       </button>
 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>
 166       </button>
 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>
 171       </button>
 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>
 177       </a>
 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>
 182       </button>
 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>
 189       </button>
 190
 191       <div class="dropdown-divider"></div>
 192
 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>&#x2713;</span>
 198         <span *ngIf="!col.visible" class="badge badge-warning" aria-label="Show" i18n-aria-label>&#x2717;</span>
 199         <span class="ms-2">{{col.label}}</span>
 200       </button>
 201
 202     </div>
 203   </div>
 204
 205 <div>