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