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   <ng-container *ngFor="let action of gridContext.toolbarActions">
   4     <ng-container *ngIf="action.separator">
   5       <div class="dropdown-divider"></div>
   6     </ng-container>
   7     <ng-container *ngIf="!action.separator">
   8       <a class="dropdown-item" (click)="performAction(action)">
   9         <span class="ml-2">{{action.label}}</span>
  10       </a>
  11     </ng-container>
  12   </ng-container>
  13 </ng-template>
  14
  15 <!--
  16   tabindex=1 so the grid body can capture keyboard events.
  17 -->
  18 <div class="eg-grid-body" tabindex="1" (keydown)="onGridKeyDown($event)">
  19   <div role="row" class="eg-grid-row eg-grid-body-row {{context.rowClassCallback(row)}}"
  20     [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
  21     *ngFor="let row of context.dataSource.getPageOfRows(context.pager); let idx = index">
  22
  23     <ng-container *ngIf="!context.disableSelect">
  24       <div class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
  25         <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]">
  26       </div>
  27     </ng-container>
  28     <div class="eg-grid-cell eg-grid-number-cell eg-grid-cell-skinny">
  29       {{context.pager.rowNumber(idx)}}
  30     </div>
  31     <div *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">
  32       <!-- using *ngIf allows us to assign the flair callback to a value,
  33             obviating the need for multiple calls of the same function -->
  34       <ng-container *ngIf="context.rowFlairCallback(row); let flair">
  35         <ng-container *ngIf="flair.icon">
  36           <!-- tooltip is disabled when no title is set -->
  37           <span class="material-icons"
  38             ngbTooltip="{{flair.title || ''}}" triggers="mouseenter:mouseleave">
  39             {{flair.icon}}
  40           </span>
  41         </ng-container>
  42       </ng-container>
  43     </div>
  44     <!-- contextMenu applied to cells instead of rows so the position
  45          of the popover is close to the mouse.  As of writing, no way
  46          to position the popover at the mouse -->
  47     <div role="gridcell" class="eg-grid-cell eg-grid-body-cell"
  48       [ngStyle]="{flex:col.flex}"
  49       [ngClass]="{'eg-grid-cell-overflow': context.overflowCells}"
  50       (dblclick)="onRowDblClick(row)"
  51       (click)="onRowClick($event, row, idx)"
  52       #rowContextMenu="ngbPopover"
  53       popoverTitle="Actions for Selected Rows" i18n-popoverTitle
  54       (contextmenu)="onRowContextClick($event, row, rowContextMenu)"
  55       [ngbPopover]="contextMenu"
  56       placement="bottom"
  57       triggers="manual"
  58       *ngFor="let col of context.columnSet.displayColumns()">
  59
  60       <eg-grid-body-cell [context]="context" [row]="row" [column]="col">
  61       </eg-grid-body-cell>
  62     </div>
  63   </div>
  64 </div>
  65