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 <div class="eg-grid-toolbar mb-2">
   5
   6   <div class="btn-toolbar">
   7     <span class="fw-bold me-2" *ngIf="gridContext.toolbarLabel">
   8       {{gridContext.toolbarLabel}}
   9     </span>
  10
  11     <!-- buttons -->
  12     <div class="btn-grp" *ngIf="gridContext.toolbarButtons.length || gridContext.isFilterable">
  13       <!-- special case for remove filters button -->
  14       <button *ngIf="gridContext.isFilterable" type="button"
  15         class="btn btn-outline-dark me-1" (click)="gridContext.removeFilters()"
  16         [disabled]="!gridContext.filtersSet() || gridContext.dataSource.requestingData" i18n>
  17         Remove Filters
  18       </button>
  19       <ng-container *ngFor="let btn of gridContext.toolbarButtons">
  20         <label
  21             *ngIf="btn.adjacentPreceedingLabel"
  22             [ngClass]="{'button-adjacent-label':true,'disabled':btn.disabled}">
  23             {{btn.adjacentPreceedingLabel}}
  24         </label>
  25         <button
  26           [disabled]="btn.disabled" type="button"
  27           class="btn btn-outline-dark me-1" (click)="performButtonAction(btn)">
  28           {{btn.label}}
  29         </button>
  30         <label
  31             *ngIf="btn.adjacentSubsequentLabel"
  32             [ngClass]="{'button-adjacent-label':true,'disabled':btn.disabled}">
  33             {{btn.adjacentSubsequentLabel}}
  34         </label>
  35       </ng-container>
  36     </div>
  37
  38     <!-- checkboxes -->
  39     <ng-container *ngFor="let cb of gridContext.toolbarCheckboxes; index as i">
  40       <div class="form-check form-check-inline">
  41         <input class="form-check-input" type="checkbox" id="eg-grid-toolbar-cb{{i}}"
  42           [(ngModel)]="cb.isChecked"
  43           (click)="cb.onChange.emit($event.target.checked)"/>
  44         <label class="form-check-label" for="eg-grid-toolbar-cb{{i}}">{{cb.label}}</label>
  45       </div>
  46     </ng-container>
  47
  48
  49   </div>
  50
  51   <!-- push everything else to the right -->
  52   <div class="flex-1"></div>
  53
  54   <ng-container *ngIf="!gridContext.disableSelect">
  55
  56   <div class="font-sm fst-italic d-flex flex-column-reverse me-2">
  57     {{gridContext.getSelectedRows().length}} selected
  58   </div>
  59   <div ngbDropdown autoClose="false" class="me-1" placement="bottom-right">
  60     <button ngbDropdownToggle type="button" [disabled]="!gridContext.toolbarActions.length"
  61       title="Actions For Selected Rows" i18n-title
  62       aria-label="Actions For Selected Rows" i18n-aria-label
  63       class="btn btn-outline-dark no-dropdown-caret">
  64       <span class="material-icons mat-icon-in-button" aria-hidden="true">playlist_add_check</span>
  65     </button>
  66     <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
  67       <eg-grid-toolbar-actions-menu [gridContext]="gridContext">
  68       </eg-grid-toolbar-actions-menu>
  69     </div>
  70   </div>
  71
  72   </ng-container><!-- if disableSelect -->
  73
  74   <ng-container *ngIf="!gridContext.disablePaging">
  75
  76   <button [disabled]="gridContext.pager.isFirstPage()" type="button"
  77     title="First Page" i18n-title aria-label="First Page" i18n-aria-label
  78     class="btn btn-outline-dark me-1" (click)="gridContext.pager.toFirst()">
  79     <span class="material-icons mat-icon-in-button">first_page</span>
  80   </button>
  81   <button [disabled]="gridContext.pager.isFirstPage()" type="button"
  82     title="Previous Page" i18n-title aria-label="Previous Page" i18n-aria-label
  83     class="btn btn-outline-dark me-1" (click)="gridContext.pager.decrement()">
  84     <span class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
  85   </button>
  86   <button [disabled]="gridContext.pager.isLastPage()" type="button"
  87     title="Next Page" i18n-title aria-label="Next Page" i18n-aria-label
  88     class="btn btn-outline-dark me-1" (click)="gridContext.pager.increment()">
  89     <span class="material-icons mat-icon-in-button" aria-hidden="true">keyboard_arrow_right</span>
  90   </button>
  91   <div ngbDropdown class="me-1" placement="bottom-right">
  92     <button ngbDropdownToggle type="button" class="btn btn-outline-dark text-button">
  93       <span title="Select Row Count" i18n-title i18n>
  94         Rows {{gridContext.pager.limit}}
  95       </span>
  96     </button>
  97     <div class="dropdown-menu" ngbDropdownMenu>
  98       <button type="button" class="dropdown-item"
  99         *ngFor="let count of [5, 10, 25, 50, 100]"
 100         (click)="gridContext.pager.setLimit(count)">
 101         <span class="ms-2">{{count}}</span>
 102       </button>
 103     </div>
 104   </div>
 105
 106   </ng-container><!-- if disablePaging-->
 107
 108
 109   <button type="button" *ngIf="!gridContext.overflowCells"
 110     class="btn btn-outline-dark me-1"
 111     title="Expand Cells Vertically" i18n-title
 112     aria-label="Expand Cells Vertically" i18n-aria-label
 113     (click)="gridContext.overflowCells=!gridContext.overflowCells">
 114     <span aria-hidden="true"
 115       class="material-icons mat-icon-in-button">expand_more</span>
 116     </button>
 117
 118   <button type="button" *ngIf="gridContext.overflowCells"
 119     class="btn btn-outline-dark me-1"
 120     title="Condense Cells Vertically" i18n-title
 121     aria-label="Condense Cells Vertically" i18n-aria-label
 122     (click)="gridContext.overflowCells=!gridContext.overflowCells">
 123     <span *ngIf="gridContext.overflowCells" aria-hidden="true"
 124       class="material-icons mat-icon-in-button">expand_less</span>
 125   </button>
 126
 127   <eg-grid-column-config #columnConfDialog [gridContext]="gridContext">
 128   </eg-grid-column-config>
 129   <div ngbDropdown placement="bottom-right">
 130     <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret"
 131       title="Show Grid Options" i18n-title aria-label="Show Grid Options" i18n-aria-label>
 132       <span class="material-icons mat-icon-in-button" aria-hidden="true">settings</span>
 133     </button>
 134     <div class="dropdown-menu scrollable-menu" ngbDropdownMenu>
 135       <button nbgDropdownItem class="dropdown-item label-with-material-icon"
 136         (click)="columnConfDialog.open({size:'lg'})">
 137         <span class="material-icons" aria-hidden="true">build</span>
 138         <span class="ms-2" i18n>Manage Columns</span>
 139       </button>
 140       <button nbgDropdownItem class="dropdown-item label-with-material-icon"
 141         (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
 142         <span class="material-icons" aria-hidden="true">compare_arrows</span>
 143         <span class="ms-2" i18n>Manage Column Widths</span>
 144       </button>
 145       <button nbgDropdownItem class="dropdown-item label-with-material-icon"
 146         [disabled]="gridContext.toolbarActions.length === 0" (click)="toolbarActionsEditor.open().subscribe()">
 147         <span class="material-icons" aria-hidden="true">menu</span>
 148         <span class="ms-2" i18n>Manage Actions Menu</span>
 149       </button>
 150       <button nbgDropdownItem class="dropdown-item label-with-material-icon" *ngIf="!disableSaveSettings"
 151         (click)="saveGridConfig()">
 152         <span class="material-icons" aria-hidden="true">save</span>
 153         <span class="ms-2" i18n>Save Grid Settings</span>
 154       </button>
 155       <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="gridContext.columnSet.reset()">
 156         <span class="material-icons" aria-hidden="true">restore</span>
 157         <span class="ms-2" i18n>Reset Columns</span>
 158       </button>
 159       <a nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="generateCsvExportUrl($event)"
 160         [download]="csvExportFileName" [href]="csvExportUrl">
 161         <span class="material-icons" aria-hidden="true">cloud_download</span>
 162         <span class="ms-2" i18n>Download Full CSV</span>
 163       </a>
 164       <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="printHtml()">
 165         <span class="material-icons" aria-hidden="true">print</span>
 166         <span class="ms-2" i18n>Print Full Grid</span>
 167       </button>
 168       <button nbgDropdownItem
 169         class="dropdown-item label-with-material-icon"
 170         [disabled]="!gridContext.getSelectedRows().length"
 171         (click)="printSelectedRows()">
 172         <span class="material-icons" aria-hidden="true">print</span>
 173         <span class="ms-2" i18n>Print Selected Rows</span>
 174       </button>
 175
 176       <div class="dropdown-divider"></div>
 177
 178       <button nbgDropdownItem class="dropdown-item label-with-material-icon" (click)="toggleVisibility(col)"
 179         *ngFor="let col of gridContext.columnSet.sortForColPicker()">
 180         <!-- Note that the ARIA labels describe the action that will happen when the button
 181           is pressed, not the current state indicated by the badge -->
 182         <span *ngIf="col.visible" class="badge badge-success" aria-label="Hide" i18n-aria-label>&#x2713;</span>
 183         <span *ngIf="!col.visible" class="badge badge-warning" aria-label="Show" i18n-aria-label>&#x2717;</span>
 184         <span class="ms-2">{{col.label}}</span>
 185       </button>
 186
 187     </div>
 188   </div>
 189
 190 <div>