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