lp1778311 On-The-Fly Grid Column Resizing

- Refactor Grid into HTML Table
- Enable Resize CSS class on Table Header Columns

Signed-off-by: Kyle Huckins <khuckins@catalyte.io>
 Changes to be committed:
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.ts
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid-header.component.ts
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid.component.css
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid.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 fed2276..ad81f21 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
@@ -7,13 +7,14 @@
 <!--
   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">
+    *ngFor="let row of context.dataSource.getPageOfRows(context.pager); let idx = index"
+     tabindex="1" (keydown)="onGridKeyDown($event)">
 
     <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)]"
           i18n-aria-label="e.g. Row 13" attr.aria-label="Row {{context.pager.rowNumber(idx)}}"
           #rowContextMenu="ngbPopover"
@@ -22,12 +23,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">
@@ -39,11 +40,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 role="gridcell" class="eg-grid-cell eg-grid-body-cell"
       [ngStyle]="{flex:col.flex}"
       [ngClass]="{'eg-grid-cell-overflow': context.overflowCells}"
       (dblclick)="onRowDblClick(row)"
@@ -58,7 +59,5 @@
 
       <eg-grid-body-cell [context]="context" [row]="row" [column]="col">
       </eg-grid-body-cell>
-    </div>
-  </div>
-</div>
-
+    </td>
+  </tr>
\ No newline at end of file

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 14c6b4c..e99636e 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
@@ -5,7 +5,7 @@ import {GridComponent} from './grid.component';
 import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-  selector: 'eg-grid-body',
+  selector: 'eg-grid-body, [eg-grid-body]',
   templateUrl: './grid-body.component.html'
 })
 

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html
index ca24c00..a887835 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.html
@@ -1,20 +1,18 @@
-<div *ngIf="isVisible" class="eg-grid-column-width-config">
-  <div class="eg-grid-row">
-    <div class="eg-grid-column-width-header" i18n>Expand</div>
-    <div *ngFor="let col of columnSet.displayColumns()" 
+  <tr class="eg-grid-row" *ngIf="isVisible">
+    <td class="eg-grid-column-width-header" i18n>Expand</td>
+    <td *ngFor="let col of columnSet.displayColumns()" 
       class="eg-grid-cell text-center" [ngStyle]="{flex:col.flex}">
       <a (click)="expandColumn(col)" title="Expand Column" i18n-title>
         <span class="material-icons eg-grid-column-width-icon">call_made</span>
       </a>
-    </div>
-  </div>
-  <div class="eg-grid-row">
-    <div class="eg-grid-column-width-header" i18n>Shrink</div>
-    <div *ngFor="let col of columnSet.displayColumns()" 
+    </td>
+  </tr>
+  <tr class="eg-grid-row" *ngIf="isVisible"><td>
+    <td class="eg-grid-column-width-header" i18n>Shrink</td>
+    <td *ngFor="let col of columnSet.displayColumns()" 
       class="eg-grid-cell text-center" [ngStyle]="{flex:col.flex}">
       <a (click)="shrinkColumn(col)" title="Shrink Column" i18n-title>
         <span class="material-icons eg-grid-column-width-icon">call_received</span>
       </a>
-    </div>
-  </div>
-</div>
+    </td>
+  </tr>
\ No newline at end of file

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.ts
index bb597cd..3c8b9cb 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column-width.component.ts
@@ -2,7 +2,7 @@ import {Component, Input, OnInit} from '@angular/core';
 import {GridContext, GridColumn, GridColumnSet} from './grid';
 
 @Component({
-  selector: 'eg-grid-column-width',
+  selector: 'eg-grid-column-width, [eg-grid-column-width]',
   templateUrl: './grid-column-width.component.html'
 })
 

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 a680765..82ab36c 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,22 @@
-
-<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"
@@ -35,19 +34,19 @@
         *ngIf="isColumnSorting(col, 'DESC')">arrow_downwards</span>
     </a>
     <span *ngIf="!col.isSortable">{{col.label}}</span>
-  </div>
-</div>
-<div *ngIf="context.isFilterable"
+  </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>
+    <th class="eg-grid-cell eg-grid-header-cell eg-grid-cell-skinny"></th>
   </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"></th>
 
-  <div *ngFor="let col of context.columnSet.displayColumns()" 
+  <th *ngFor="let col of context.columnSet.displayColumns()" 
     class="eg-grid-cell eg-grid-filter-control-cell" [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..2a38e8e 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, [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..0afd3d3 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
@@ -39,6 +39,11 @@
     overflow: hidden;
 }
 
+.eg-grid-resizable th {
+    resize: horizontal;
+    overflow: auto;
+}
+
 /* allow tooltips to be wider than the default 200px */
 .eg-grid-cell .tooltip-inner {
   max-width: 400px; 

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 2ab6be0..78df63f 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,19 +1,18 @@
-
-<div class="eg-grid" role="grid">
-
-  <eg-grid-toolbar #toolbar
+ <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>
+<table class="eg-grid" role="grid">
+
+  <thead eg-grid-header [context]="context"
+    #egGridStickyHeader [ngClass]="{'eg-grid-sticky-header' : context.stickyGridHeader}">
+  </thead>
 
-  <eg-grid-column-width #colWidthConfig [gridContext]="context">
-  </eg-grid-column-width>
+  <tbody eg-grid-column-width #colWidthConfig [gridContext]="context" class="eg-grid-column-width-config">
+  </tbody>
 
   <eg-grid-print #gridPrinter [gridContext]="context">
   </eg-grid-print>
@@ -36,6 +35,6 @@
     </div>
   </ng-container>
 
-  <eg-grid-body [context]="context"></eg-grid-body>
-</div>
+  <tbody eg-grid-body class="eg-grid-body"  [context]="context"></tbody>
+</table>