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

   1 <!--
   2   tabindex=1 so the grid body can capture keyboard events.
   3 -->
   4 <div class="eg-grid-body" tabindex="1" (keydown)="onGridKeyDown($event)">
   5   <div role="row" class="eg-grid-row eg-grid-body-row {{context.rowClassCallback(row)}}"
   6     [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
   7     *ngFor="let row of context.dataSource.getPageOfRows(context.pager); let idx = index">
   8
   9     <ng-container *ngIf="!context.disableSelect">
  10       <div class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
  11         <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]">
  12       </div>
  13     </ng-container>
  14     <div class="eg-grid-cell eg-grid-number-cell eg-grid-cell-skinny">
  15       {{context.pager.rowNumber(idx)}}
  16     </div>
  17     <div *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">
  18       <!-- using *ngIf allows us to assign the flair callback to a value,
  19             obviating the need for multiple calls of the same function -->
  20       <ng-container *ngIf="context.rowFlairCallback(row); let flair">
  21         <ng-container *ngIf="flair.icon">
  22           <!-- tooltip is disabled when no title is set -->
  23           <span class="material-icons"
  24             ngbTooltip="{{flair.title || ''}}" triggers="mouseenter:mouseleave">
  25             {{flair.icon}}
  26           </span>
  27         </ng-container>
  28       </ng-container>
  29     </div>
  30     <div role="gridcell" class="eg-grid-cell eg-grid-body-cell"
  31       [ngStyle]="{flex:col.flex}"
  32       [ngClass]="{'eg-grid-cell-overflow': context.overflowCells}"
  33       (dblclick)="onRowDblClick(row)"
  34       (click)="onRowClick($event, row, idx)"
  35       *ngFor="let col of context.columnSet.displayColumns()">
  36
  37       <eg-grid-body-cell [context]="context" [row]="row" [column]="col">
  38       </eg-grid-body-cell>
  39     </div>
  40   </div>
  41 </div>
  42