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.getSelectedRows().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