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)="btn.action()">
  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             (click)="cb.onChange($event.target.checked)"/>
  22             {{cb.label}}
  23         </label>
  24       </ng-container>
  25     </div>
  26   </div>
  27
  28   <!-- push everything else to the right -->
  29   <div class="flex-1"></div>
  30
  31   <div ngbDropdown class="mr-1" placement="bottom-right">
  32     <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
  33         class="btn btn-outline-dark no-dropdown-caret">
  34       <span title="Actions For Selected Rows" i18n-title
  35         class="material-icons mat-icon-in-button">playlist_add_check</span>
  36     </button>
  37     <div class="dropdown-menu" ngbDropdownMenu>
  38       <button class="dropdown-item" (click)="performAction(action)"
  39         *ngFor="let action of gridContext.toolbarActions"
  40         [disabled]="shouldDisableAction(action)">
  41         <span class="ml-2">{{action.label}}</span>
  42       </button>
  43     </div>
  44   </div>
  45
  46   <button [disabled]="gridContext.pager.isFirstPage()" type="button"
  47     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
  48     <span title="First Page" i18n-title
  49         class="material-icons mat-icon-in-button">first_page</span>
  50   </button>
  51   <button [disabled]="gridContext.pager.isFirstPage()" type="button"
  52     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
  53     <span title="Previous Page" i18n-title
  54         class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
  55   </button>
  56   <button [disabled]="gridContext.pager.isLastPage()" type="button"
  57     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
  58     <span title="Next Page" i18n-title
  59         class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
  60   </button>
  61
  62   <!--
  63   Hiding jump-to-last since there's no analog in the angularjs grid and
  64   it has limited value since the size of the data set is often unknown.
  65   <button [disabled]="!gridContext.pager.resultCount || gridContext.pager.isLastPage()"
  66     type="button" class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toLast()">
  67     <span title="First Page" i18n-title
  68         class="material-icons mat-icon-in-button">last_page</span>
  69   </button>
  70   -->
  71
  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   <button type="button"
  88     class="btn btn-outline-dark mr-1"
  89     (click)="gridContext.overflowCells=!gridContext.overflowCells">
  90     <span *ngIf="!gridContext.overflowCells"
  91       title="Expand Cells Vertically" i18n-title
  92       class="material-icons mat-icon-in-button">expand_more</span>
  93     <span *ngIf="gridContext.overflowCells"
  94       title="Collaps Cells Vertically" i18n-title
  95       class="material-icons mat-icon-in-button">expand_less</span>
  96   </button>
  97
  98   <eg-grid-column-config #columnConfDialog [columnSet]="gridContext.columnSet">
  99   </eg-grid-column-config>
 100   <div ngbDropdown placement="bottom-right">
 101     <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
 102       <span title="Show Grid Options" i18n-title
 103         class="material-icons mat-icon-in-button">settings</span>
 104     </button>
 105     <div class="dropdown-menu" ngbDropdownMenu>
 106       <a class="dropdown-item label-with-material-icon"
 107         (click)="columnConfDialog.open({size:'lg'})">
 108         <span class="material-icons">build</span>
 109         <span class="ml-2" i18n>Manage Columns</span>
 110       </a>
 111       <a class="dropdown-item label-with-material-icon"
 112         (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
 113         <span class="material-icons">compare_arrows</span>
 114         <span class="ml-2" i18n>Manage Column Widths</span>
 115       </a>
 116       <a class="dropdown-item label-with-material-icon"
 117         (click)="saveGridConfig()">
 118         <span class="material-icons">save</span>
 119         <span class="ml-2" i18n>Save Grid Settings</span>
 120       </a>
 121       <a class="dropdown-item label-with-material-icon"
 122         (click)="gridContext.columnSet.reset()">
 123         <span class="material-icons">restore</span>
 124         <span class="ml-2" i18n>Reset Columns</span>
 125       </a>
 126       <a class="dropdown-item label-with-material-icon"
 127         (click)="generateCsvExportUrl($event)"
 128         [download]="csvExportFileName"
 129         [href]="csvExportUrl">
 130         <span class="material-icons">cloud_download</span>
 131         <span class="ml-2" i18n>Download Full CSV</span>
 132       </a>
 133       <a class="dropdown-item label-with-material-icon" (click)="printHtml()">
 134         <span class="material-icons">print</span>
 135         <span class="ml-2" i18n>Print Full Grid</span>
 136       </a>
 137
 138       <div class="dropdown-divider"></div>
 139
 140       <a class="dropdown-item label-with-material-icon"
 141         (click)="col.visible=!col.visible" *ngFor="let col of gridContext.columnSet.columns">
 142         <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
 143         <span *ngIf="!col.visible" class="badge badge-warning">&#x2717;</span>
 144         <span class="ml-2">{{col.label}}</span>
 145       </a>
 146
 147     </div>
 148   </div>
 149
 150 <div>
 151
 152
 153