From f654dd25886d5ae75ea2827bcf00cbcbb2fc723b Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Tue, 14 Mar 2023 21:09:45 +0000
Subject: [PATCH] Fix <thead> and <colgroup>

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
---
 .../src/app/share/grid/grid-header.component.html  |  42 +++----
 .../src/eg2/src/app/share/grid/grid.component.css  | 138 +++++++++++++++------
 .../src/eg2/src/app/share/grid/grid.component.html |  41 +++---
 3 files changed, 139 insertions(+), 82 deletions(-)

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 982104933d..a5f8c3b196 100644
--- 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,65 +1,53 @@
-<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 {{context.cellClassCallback(row, col)}}" 
-      [ngStyle]="{flex:col.flex}">
-  </colgroup>
-</tr>
+
 
 <tr row="row" class="eg-grid-row eg-grid-header-row">
   <ng-container *ngIf="!context.disableSelect">
-    <th role="columnheader"
-      class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
+    <th class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell">
       <input type='checkbox' (click)="handleBatchSelect($event)"
         i18n-aria-label aria-label="All rows"
         [(ngModel)]="batchRowCheckbox">
     </th>
   </ng-container>
-  <th role="columnheader"
-    class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell eg-grid-cell-skinny">
+  <th class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell">
     <span i18n="number|Row Number Header">#</span>
   </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>
   </th>
-  <th role="columnheader"
-    *ngFor="let col of context.columnSet.displayColumns()"
+  <th *ngFor="let col of context.columnSet.displayColumns()"
     draggable="true"
     (dragstart)="dragColumn = col"
     (drop)="onColumnDrop(col)"
     (dragover)="onColumnDragEnter($event, col)"
     (dragleave)="onColumnDragLeave($event, col)"
     [ngClass]="{'dragover' : col.isDragTarget}"
-    class="eg-grid-cell eg-grid-header-cell {{context.cellClassCallback(row, col)}}">
+    class="eg-grid-cell eg-grid-header-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}} {{context.cellClassCallback(row, col)}}">
     <span>{{col.headerLabel}}</span>
+    <div class="header-actions">
+      <wbr>
     <button class="sortable label-with-material-icon" *ngIf="col.isSortable"
       (click)="sortOneColumn(col)">
+      <span class="material-icons eg-grid-header-cell-sort-arrow" title="Sort ascending" i18n-title>sort</span>
       <span class="material-icons eg-grid-header-cell-sort-arrow"
-        *ngIf="isColumnSorting(col, 'ASC')">arrow_upwards</span>
+        *ngIf="isColumnSorting(col, 'ASC')" title="Sorted ascending" i18n-title>arrow_upwards</span>
       <span class="material-icons eg-grid-header-cell-sort-arrow"
-        *ngIf="isColumnSorting(col, 'DESC')">arrow_downwards</span>
+        *ngIf="isColumnSorting(col, 'DESC')"  title="Sorted descending" i18n-title>arrow_downwards</span>
     </button>
-    
+    </div>
   </th>
 </tr>
 <tr *ngIf="context.isFilterable"
   class="eg-grid-row eg-grid-filter-controls-row">
   <ng-container *ngIf="!context.disableSelect">
-    <td class="eg-grid-cell eg-grid-header-cell eg-grid-cell-skinny"></td>
+    <td class="eg-grid-cell eg-grid-header-cell"></td>
   </ng-container>
-  <th class="eg-grid-cell eg-grid-header-cell eg-grid-cell-skinny"></th>
+  <th class="eg-grid-cell eg-grid-header-cell"></th>
   <th *ngIf="context.rowFlairIsEnabled" 
-    class="eg-grid-cell eg-grid-header-cell  {{context.idlFieldDef}}"></th>
+    class="eg-grid-cell eg-grid-header-cell {{context.idlFieldDef}} eg-grid-class-{{context.idlClass}}"></th>
 
   <th *ngFor="let col of context.columnSet.displayColumns()" 
-    class="eg-grid-cell eg-grid-filter-control-cell {{context.cellClassCallback(row, col)}}">
+    class="eg-grid-cell eg-grid-filter-control-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}}">
     <eg-grid-filter-control [context]="context" [col]="col"></eg-grid-filter-control>
   </th>
 </tr>
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 33239d44b5..a0a664b994 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -1,7 +1,9 @@
 
 .eg-grid {
     width: 100%;
-    color: rgba(0,0,0,.87); 
+    color: rgba(0,0,0,.87);
+    table-layout: auto;
+    white-space: normal; 
 }
     
 .eg-grid-row {
@@ -31,16 +33,6 @@
   border-color: #b8daff;
 }
 
-.eg-grid-cell {
-    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 */
 .eg-grid-cell .tooltip-inner {
   max-width: 400px; 
@@ -64,6 +56,10 @@
   white-space: normal;
 }
 
+.eg-grid-header-cell[draggable=true] {
+  cursor: grab;
+}
+
 .eg-grid-header-cell.dragover {
     background-color: #cce5ff;
     border-color: #b8daff;
@@ -98,34 +94,6 @@
   padding-bottom: 11px;
 }
 
-.eg-grid-cell-skinny {
-  width: 2em;
-  text-align: center;
-  flex: none;
-}
-
-.eg-grid-cell-skinny-2 {
-  width: 2.6em;
-  flex: none;
-}
-
-.eg-grid-flair-cell {
-  /* mat icons currently 22px, unclear why it needs this much space */
-  width: 34px; 
-  text-align: center;
-  flex: none;
-}
-
-/* depends on width of .eg-grid-cell-skinny */
-.eg-grid-column-width-header {
-  width: 4.6em;
-  text-align: center;
-  flex: none;
-  display: inline-flex;
-  vertical-align: middle;
-  align-items: center;
-}
-
 .eg-grid-column-width-config .eg-grid-cell {
     border-left: 2px dashed grey;
 }
@@ -177,3 +145,95 @@
 .popover {
     max-width: initial;
 }
+
+/* GRID COLUMN WIDTHS */
+/* 
+Sets up column widths and text alignment for eg-grid tables according to
+datatype, column name, and IDL class. Use more specific combinations in
+components' CSS to override the default width.
+/**/
+
+/* override Bootstrap's table settings */
+.table > :not(caption) > * > * {
+  padding: revert;
+}
+
+.eg-grid th,
+.eg-grid td {
+  padding: .2rem .5rem;
+  /*
+  width: min-content;
+  /**/
+}
+
+.eg-grid.compact th,
+.eg-grid.compact td {
+  line-height: 1.4;
+  padding: .1rem .5rem .1rem .1rem;
+}
+
+.eg-grid.wide th,
+.eg-grid.wide td {
+  padding: .5rem;
+}
+
+.eg-grid th {
+  vertical-align: bottom;
+}
+
+.eg-grid td {
+  vertical-align: top;
+  /*
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  /**/
+}
+
+.eg-grid-col-utilities col {
+  min-width: 2em;
+  max-width: 8ch;
+}
+
+.eg-grid-checkbox-cell,
+.eg-grid-flair-cell {
+  text-align: center;
+}
+
+.eg-grid-number-cell,
+.eg-grid-type-id,
+.eg-grid-type-number,
+.eg-grid-type-money {
+  font-variant-numeric: tabular-nums lining-nums;
+  text-align: right;
+}
+
+.compact .eg-grid-type-id,
+.compact .eg-grid-type-number,
+.compact .eg-grid-type-money {
+  padding: .1rem .25rem .1rem .4rem;
+}
+
+.eg-grid-col-name {
+  min-width: 10ch;
+  white-space: nowrap;
+  /* use with <wbr> before periods: */
+  /*
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+  /**/
+}
+
+.eg-grid-col-description,
+.eg-grid-col-label {
+  min-width: 20ch;
+}
+
+/* <td> only, not the headers */
+td.eg-grid-col-datatype {
+  font-family: monospace;
+  font-size: .85rem;
+}
\ No newline at end of file
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 d91110890b..a24c15457e 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
@@ -10,31 +10,40 @@
   </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>
-
+<table class="eg-grid eg-grid-table table" tabindex="1">
+  
   <!-- eg-grid-column-width -->
 
   <!-- eg-grid-print -->
 
-    <tr class="row"  *ngIf="dataSource.data.length === 0">
+    <ng-container *ngIf="dataSource.data.length === 0">
       <ng-container *ngIf="dataSource.requestingData">
-        <div class="col-lg-6 offset-lg-3 text-center mt-3">
+        <caption>
           <eg-progress-inline></eg-progress-inline>
-        </div>
+        </caption>
       </ng-container>
       <ng-container *ngIf="!dataSource.requestingData">
-        <div class="col-lg-12 text-center alert alert-danger fst-italic fw-bold" *ngIf="dataSource.retrievalError">
-          <span i18n>Error Retrieving Results</span>
-        </div>
-        <div class="col-lg-12 text-center alert fst-italic fw-bold" *ngIf="!dataSource.retrievalError">
-          <span i18n>Nothing to Display</span>
-        </div>
+        <caption i18n *ngIf="dataSource.retrievalError">
+          Error Retrieving Results
+        </caption>
+        <caption i18n *ngIf="!dataSource.retrievalError">
+          Nothing to Display
+        </caption>
       </ng-container>
-    </tr>
- 
-
-  <tbody [context]="context" class="eg-grid-body" tabindex="1"></tbody>
+    </ng-container>
+    
+    <colgroup class="eg-grid-col-utilities">
+      <col *ngIf="!context.disableSelect" class="eg-grid-col eg-grid-checkbox-col">
+      <col class="eg-grid-col eg-grid-number-col">
+      <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}} {{context.cellClassCallback(row, col)}}">
+    </colgroup>
+    
+    <thead class="eg-grid-header" #egGridStickyHeader [context]="context" [ngClass]="{'eg-grid-sticky-header' : context.stickyGridHeader}">  </thead>
+    <tbody class="eg-grid-body" [context]="context"></tbody>
 </table>
 
 </div>
\ No newline at end of file
-- 
2.11.0