table markup and IDL-based classes for eg-grid

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts
index ee3daaa..4b613b6 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts
@@ -2,7 +2,7 @@ import {Component, Input} from '@angular/core';
 import {GridContext, GridColumn} from './grid';
 
 @Component({
-  selector: 'eg-grid-body-cell',
+  selector: 'td.eg-grid-body-cell',
   templateUrl: './grid-body-cell.component.html'
 })
 

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
index 55c7fef..7a4ef5b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
@@ -1,19 +1,15 @@
-<!-- uses dropdown menu CSS for easy stying, but it's not a dropdown -->
-<ng-template #contextMenu let-gridContext="gridContext">
-  <eg-grid-toolbar-actions-menu [gridContext]="gridContext" [viaContextMenu]="true">
-  </eg-grid-toolbar-actions-menu>
-</ng-template>
+
 
 <!--
   tabindex=1 so the grid body can capture keyboard events.
 -->
-<div class="eg-grid-body" tabindex="1" (keydown)="onGridKeyDown($event)">
-  <div role="row" class="eg-grid-row eg-grid-body-row {{context.rowClassCallback(row)}}"
+
+  <tr role="row" class="eg-grid-row eg-grid-body-row {{context.rowClassCallback(row)}}"
     [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
     *ngFor="let row of context.dataSource.getPageOfRows(context.pager); let idx = index">
 
     <ng-container *ngIf="!context.disableSelect">
-      <div class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
+      <td class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
         <input type='checkbox' 
           [ngModel]="context.rowSelector.indexes[context.getRowIndex(row)]"
           (ngModelChange)="context.rowSelector.toggle(context.getRowIndex(row))"
@@ -24,12 +20,12 @@
           [ngbPopover]="contextMenu"
           placement="right"
           triggers="manual">
-      </div>
+      </td>
     </ng-container>
-    <div class="eg-grid-cell eg-grid-number-cell eg-grid-cell-skinny-2">
+    <td class="eg-grid-cell eg-grid-number-cell eg-grid-cell-skinny-2">
       {{context.pager.rowNumber(idx)}}
-    </div>
-    <div *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">
+    </td>
+    <td *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">
       <!-- using *ngIf allows us to assign the flair callback to a value,
             obviating the need for multiple calls of the same function -->
       <ng-container *ngIf="context.rowFlairCallback(row); let flair">
@@ -41,11 +37,11 @@
           </span>
         </ng-container>
       </ng-container>
-    </div>
+    </td>
     <!-- contextMenu applied to cells instead of rows so the position
          of the popover is close to the mouse.  As of writing, no way
          to position the popover at the mouse -->
-    <div role="gridcell" class="eg-grid-cell eg-grid-body-cell"
+      <td [context]="context" [row]="row" [column]="col" role="gridcell" class="eg-grid-cell eg-grid-body-cell"
       [ngStyle]="{flex:col.flex}"
       [ngClass]="{'eg-grid-cell-overflow': context.overflowCells}"
       (dblclick)="onRowDblClick(row)"
@@ -57,10 +53,6 @@
       placement="bottom"
       triggers="manual"
       *ngFor="let col of context.columnSet.displayColumns()">
-
-      <eg-grid-body-cell [context]="context" [row]="row" [column]="col">
-      </eg-grid-body-cell>
-    </div>
-  </div>
-</div>
+      </td>
+  </tr>
 

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts
index 2c21527..ece5f9e 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts
@@ -4,7 +4,7 @@ import {GridComponent} from './grid.component';
 import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-  selector: 'eg-grid-body',
+  selector: 'tbody.eg-grid-body',
   templateUrl: './grid-body.component.html'
 })
 

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
index 25d8e0a..96669e3 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html
@@ -36,8 +36,8 @@
   </select>
 </ng-template>
 
-<div *ngIf="col.isFilterable" class="eg-grid-filter-control">
-  <div [ngSwitch]="col.datatype">
+<tr *ngIf="col.isFilterable" class="eg-grid-filter-control">
+  <th [ngSwitch]="col.datatype">
     <div *ngSwitchCase="'link'">
       <div class="input-group">
         <div ngbDropdown container="body" class="d-inline-block p-1" [autoClose]="false" placement="bottom-left" 
@@ -311,7 +311,7 @@
       <!-- this is a short-term fix to prevent *ngSwitchDefault from displaying -->
     </div>
     <div *ngSwitchDefault>I don't know how to filter {{col.name}} - {{col.datatype}}</div>
-  </div>
+  </th>
   <!--
   <span *ngIf="col.datatype !== 'org_unit'" class="eg-grid-filter-operator"><ng-container i18n>Operator:</ng-container>
     <span [ngSwitch]="col.filterOperator">
@@ -337,4 +337,4 @@
     </span>
   </span>
   -->
-</div>
+</tr>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
index a3d0a6b..ef9feb5 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
@@ -1,23 +1,35 @@
+<tr row="row" class="eg-grid-row eg-grid-header-row">
+  <colgroup class="eg-grid-col-utilities">
+    <col *ngIf="!context.disableSelect" class="eg-grid-col eg-grid-checkbox-col eg-grid-col-skinny">
+    <col class="eg-grid-col eg-grid-number-col eg-grid-col-skinny-2">
+    <col *ngIf="context.rowFlairIsEnabled" class="eg-grid-col eg-grid-flair-col">
+  </colgroup>
+  <colgroup class="eg-grid-col-data">
+    <col *ngFor="let col of context.columnSet.displayColumns()" 
+      class="eg-grid-col eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}}" 
+      [ngStyle]="{flex:col.flex}">
+  </colgroup>
+</tr>
 
-<div row="row" class="eg-grid-row eg-grid-header-row">
+<tr row="row" class="eg-grid-row eg-grid-header-row">
   <ng-container *ngIf="!context.disableSelect">
-    <div role="columnheader"
+    <th role="columnheader"
       class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
       <input type='checkbox' (click)="handleBatchSelect($event)"
         i18n-aria-label aria-label="All rows"
         [(ngModel)]="batchRowCheckbox">
-    </div>
+    </th>
   </ng-container>
-  <div role="columnheader"
+  <th role="columnheader"
     class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell eg-grid-cell-skinny">
     <span i18n="number|Row Number Header">#</span>
-  </div>
-  <div *ngIf="context.rowFlairIsEnabled"
+  </th>
+  <th *ngIf="context.rowFlairIsEnabled"
     role="columnheader"
     class="eg-grid-cell eg-grid-header-cell eg-grid-flair-cell">
     <span class="material-icons">notifications</span>
-  </div>
-  <div role="columnheader"
+  </th>
+  <th role="columnheader"
     *ngFor="let col of context.columnSet.displayColumns()"
     draggable="true"
     (dragstart)="dragColumn = col"
@@ -25,29 +37,29 @@
     (dragover)="onColumnDragEnter($event, col)"
     (dragleave)="onColumnDragLeave($event, col)"
     [ngClass]="{'dragover' : col.isDragTarget}"
-    class="eg-grid-cell eg-grid-header-cell" [ngStyle]="{flex:col.flex}">
-    <a class="sortable label-with-material-icon" *ngIf="col.isSortable"
+    class="eg-grid-cell eg-grid-header-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}}" [ngStyle]="{flex:col.flex}">
+    <span>{{col.headerLabel}}</span>
+    <button class="sortable label-with-material-icon" *ngIf="col.isSortable"
       (click)="sortOneColumn(col)">
-      <span class="eg-grid-header-cell-sort-label">{{col.headerLabel}}</span>
       <span class="material-icons eg-grid-header-cell-sort-arrow"
         *ngIf="isColumnSorting(col, 'ASC')">arrow_upwards</span>
       <span class="material-icons eg-grid-header-cell-sort-arrow"
         *ngIf="isColumnSorting(col, 'DESC')">arrow_downwards</span>
-    </a>
-    <span *ngIf="!col.isSortable">{{col.headerLabel}}</span>
-  </div>
-</div>
-<div *ngIf="context.isFilterable"
+    </button>
+    
+  </th>
+</tr>
+<tr *ngIf="context.isFilterable"
   class="eg-grid-row eg-grid-filter-controls-row">
   <ng-container *ngIf="!context.disableSelect">
-    <div class="eg-grid-cell eg-grid-header-cell eg-grid-cell-skinny"></div>
+    <td class="eg-grid-cell eg-grid-header-cell eg-grid-cell-skinny"></td>
   </ng-container>
-  <div class="eg-grid-cell eg-grid-header-cell eg-grid-cell-skinny"></div>
-  <div *ngIf="context.rowFlairIsEnabled" 
-    class="eg-grid-cell eg-grid-header-cell"></div>
+  <th class="eg-grid-cell eg-grid-header-cell eg-grid-cell-skinny"></th>
+  <th *ngIf="context.rowFlairIsEnabled" 
+    class="eg-grid-cell eg-grid-header-cell  {{context.idlFieldDef}}"></th>
 
-  <div *ngFor="let col of context.columnSet.displayColumns()" 
-    class="eg-grid-cell eg-grid-filter-control-cell" [ngStyle]="{flex:col.flex}">
+  <th *ngFor="let col of context.columnSet.displayColumns()" 
+    class="eg-grid-cell eg-grid-filter-control-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}}" [ngStyle]="{flex:col.flex}">
     <eg-grid-filter-control [context]="context" [col]="col"></eg-grid-filter-control>
-  </div>
-</div>
+  </th>
+</tr>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
index cc53b26..355d52f 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
@@ -4,7 +4,7 @@ import {GridContext, GridColumn, GridRowSelector,
 import {GridFilterControlComponent} from './grid-filter-control.component';
 
 @Component({
-  selector: 'eg-grid-header',
+  selector: '.eg-grid-header',
   templateUrl: './grid-header.component.html'
 })
 

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
index 83a907c..33239d4 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -5,7 +5,7 @@
 }
     
 .eg-grid-row {
-    display: flex;
+/*    display: flex; */
     border-bottom: 1px solid rgba(0,0,0,.12);
     padding-left: 10px;
     padding-right: 10px;
@@ -32,11 +32,13 @@
 }
 
 .eg-grid-cell {
-    flex: 2; /* applied per column */
-    padding: 6px;
+    padding: 6px 1rem 6px 2px;
+    /*
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    /**/
+    vertical-align: top;
 }
 
 /* allow tooltips to be wider than the default 200px */
@@ -67,11 +69,6 @@
     border-color: #b8daff;
 }
 
-.eg-grid-header-cell-sort-label {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
 .eg-grid-header-cell-sort-arrow {
   font-size: 14px;
 }

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
index ad8b6e4..d911108 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
@@ -1,25 +1,23 @@
-
-<div class="eg-grid" role="grid">
-
+<div class="eg-grid-wrapper">
   <eg-grid-toolbar #toolbar
     [gridContext]="context"
-    [gridPrinter]="gridPrinter"
-    [colWidthConfig]="colWidthConfig"
     [disableSaveSettings]="!persistKey || ('disabled' === persistKey)">
   </eg-grid-toolbar>
 
-  <div #egGridStickyHeader [ngClass]="{'eg-grid-sticky-header' : context.stickyGridHeader}">
-    <eg-grid-header [context]="context"></eg-grid-header>
-  </div>
+<!-- uses dropdown menu CSS for easy stying, but it's not a dropdown -->
+<ng-template #contextMenu let-gridContext="gridContext">
+  <eg-grid-toolbar-actions-menu [gridContext]="gridContext" [viaContextMenu]="true">
+  </eg-grid-toolbar-actions-menu>
+</ng-template>
+
+<table class="eg-grid eg-grid-table">
+  <thead class="eg-grid-header" #egGridStickyHeader [context]="context" [ngClass]="{'eg-grid-sticky-header' : context.stickyGridHeader}">  </thead>
 
-  <eg-grid-column-width #colWidthConfig [gridContext]="context">
-  </eg-grid-column-width>
+  <!-- eg-grid-column-width -->
 
-  <eg-grid-print #gridPrinter [gridContext]="context">
-  </eg-grid-print>
+  <!-- eg-grid-print -->
 
-  <ng-container *ngIf="dataSource.data.length === 0">
-    <div class="row">
+    <tr class="row"  *ngIf="dataSource.data.length === 0">
       <ng-container *ngIf="dataSource.requestingData">
         <div class="col-lg-6 offset-lg-3 text-center mt-3">
           <eg-progress-inline></eg-progress-inline>
@@ -33,9 +31,10 @@
           <span i18n>Nothing to Display</span>
         </div>
       </ng-container>
-    </div>
-  </ng-container>
+    </tr>
+ 
 
-  <eg-grid-body [context]="context"></eg-grid-body>
-</div>
+  <tbody [context]="context" class="eg-grid-body" tabindex="1"></tbody>
+</table>
 
+</div>
\ No newline at end of file

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
index eab8442..23ed27a 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
@@ -155,7 +155,7 @@ export class GridComponent implements OnInit, AfterViewInit, OnDestroy {
     ngOnInit() {
 
         if (!this.dataSource) {
-            throw new Error('<eg-grid/> requires a [dataSource]');
+            throw new Error('[egGrid] requires a [dataSource]');
         }
 
         this.context.idlClass = this.idlClass;