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