Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html

   1 <!-- uses dropdown menu CSS for easy stying, but it's not a dropdown -->
   2 <ng-template #contextMenu let-gridContext="gridContext">
   3   <eg-grid-toolbar-actions-menu [gridContext]="gridContext" [viaContextMenu]="true">
   4   </eg-grid-toolbar-actions-menu>
   5 </ng-template>
   6
   7 <div class="eg-grid-body" tabindex="0" (keydown)="onGridKeyDown($event)">
   8   <div role="row" class="eg-grid-row eg-grid-body-row {{context.rowClassCallback(row)}}"
   9     [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
  10     *ngFor="let row of context.dataSource.getPageOfRows(context.pager); let idx = index">
  11
  12     <ng-container *ngIf="!context.disableSelect">
  13       <div role="gridcell" class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
  14         <input type='checkbox'
  15           [ngModel]="context.rowSelector.indexes[context.getRowIndex(row)]"
  16           (ngModelChange)="context.rowSelector.toggle(context.getRowIndex(row))"
  17           i18n-aria-label="e.g. Row 13" attr.aria-label="Row {{context.pager.rowNumber(idx)}}"
  18           #rowContextMenu="ngbPopover"
  19           popoverTitle="Actions for Selected Rows" i18n-popoverTitle
  20           (contextmenu)="onRowContextClick($event, row, rowContextMenu)"
  21           [ngbPopover]="contextMenu"
  22           placement="right"
  23           triggers="manual">
  24       </div>
  25     </ng-container>
  26     <div role="gridcell" class="eg-grid-cell eg-grid-number-cell eg-grid-cell-skinny-2">
  27       {{context.pager.rowNumber(idx)}}
  28     </div>
  29     <div role="gridcell" *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">
  30       <!-- using *ngIf allows us to assign the flair callback to a value,
  31             obviating the need for multiple calls of the same function -->
  32       <ng-container *ngIf="context.rowFlairCallback(row); let flair">
  33         <ng-container *ngIf="flair.icon">
  34           <span class="material-icons" aria-hidden="true"
  35             title="{{flair.title}}" i18n-title>
  36             {{flair.icon}}
  37           </span>
  38           <span *ngIf="flair.title" class="visually-hidden" i18n>{{flair.title}}</span>
  39         </ng-container>
  40       </ng-container>
  41     </div>
  42     <!-- contextMenu applied to cells instead of rows so the position
  43          of the popover is close to the mouse.  As of writing, no way
  44          to position the popover at the mouse -->
  45     <!-- Silencing ESLint because this (click) action has a keyboard-
  46          compatible equivalent elsewhere -->
  47     <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/accessibility-interactive-supports-focus -->
  48     <div role="gridcell" class="eg-grid-cell eg-grid-body-cell"
  49       [ngStyle]="{flex:col.flex}"
  50       [ngClass]="{'eg-grid-cell-overflow': context.overflowCells}"
  51       (dblclick)="onRowDblClick(row)"
  52       (click)="onRowClick($event, row, idx)"
  53       #rowContextMenu="ngbPopover"
  54       popoverTitle="Actions for Selected Rows" i18n-popoverTitle
  55       (contextmenu)="onRowContextClick($event, row, rowContextMenu)"
  56       [ngbPopover]="contextMenu"
  57       placement="bottom"
  58       triggers="manual"
  59       *ngFor="let col of context.columnSet.displayColumns()">
  60
  61       <eg-grid-body-cell [context]="context" [row]="row" [column]="col">
  62       </eg-grid-body-cell>
  63     </div>
  64     <!-- eslint-enable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/accessibility-interactive-supports-focus -->
  65   </div>
  66 </div>
  67