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