From 2562b0b0ad9e84d9a9b8af61be68fff9c3824ee6 Mon Sep 17 00:00:00 2001
From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Fri, 17 Mar 2023 19:04:28 +0000
Subject: [PATCH] Class logic cleanup

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
---
 .../src/app/share/grid/grid-body.component.html    |  5 ++-
 .../src/app/share/grid/grid-header.component.html  |  6 ++--
 .../src/eg2/src/app/share/grid/grid.component.css  | 24 ++++---------
 Open-ILS/src/eg2/src/app/share/grid/grid.ts        | 39 ++++++++++++++--------
 4 files changed, 38 insertions(+), 36 deletions(-)

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 30ccaf6b50..7da561cfca 100644
--- 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
@@ -45,9 +45,8 @@
     <!-- 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 -->
-    <td role="cell" class="eg-grid-cell eg-grid-body-cell {{context.setClassNames(row, col)}}"
-      [ngClass]="{'eg-grid-cell-overflow': context.overflowCells}"
-      *ngFor="let col of context.columnSet.displayColumns()">
+    <td role="cell" *ngFor="let col of context.columnSet.displayColumns()"
+      class="eg-grid-cell eg-grid-body-cell {{context.setClassNames(row, col)}}">
         <div class="eg-grid-cell-contents" (dblclick)="onRowDblClick(row)"
           (click)="onRowClick($event, row, idx)"
           #rowContextMenu="ngbPopover"
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 4058d49b95..88a7d04002 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
@@ -24,7 +24,7 @@
     (dragleave)="onColumnDragLeave($event, col)"
     [ngClass]="{'dragover' : col.isDragTarget}"
     [attr.aria-sort]="ariaSortDirection(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)}}">
+    class="eg-grid-cell eg-grid-header-cell {{context.setClassNames(row, col)}}">
     <a class="sortable label-with-material-icon" *ngIf="col.isSortable"
       (click)="sortOneColumn(col)">
       <span class="eg-grid-header-cell-sort-label">{{col.headerLabel}}</span>
@@ -43,10 +43,10 @@
   </ng-container>
   <th scope="col" role="columnheader" class="eg-grid-cell eg-grid-header-cell"></th>
   <th *ngIf="context.rowFlairIsEnabled" scope="col" role="columnheader"
-    class="eg-grid-cell eg-grid-header-cell {{context.idlFieldDef}} eg-grid-class-{{context.idlClass}}"></th>
+    class="eg-grid-cell eg-grid-header-cell {{context.setClassNames(row, col)}}"></th>
 
   <th *ngFor="let col of context.columnSet.displayColumns()" scope="col" role="columnheader"
-    class="eg-grid-cell eg-grid-filter-control-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}}">
+    class="eg-grid-cell eg-grid-filter-control-cell {{context.setClassNames(row, col)}}">
     <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 e05ba8308a..cc8c824281 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
@@ -2,8 +2,9 @@
   overflow-x: auto;
 }
 
-[role="region"][aria-labelledby][tabindex]:focus {
+[role="region"][aria-labelledby][tabindex]:focus-visible {
   outline: 2px solid #0A58CA;
+  outline-offset: 5px;
 }
 
 .eg-grid {
@@ -223,29 +224,18 @@ components' CSS to override the default width.
   text-align: center;
 }
 
-.eg-grid .numeric,
-.eg-grid-number-cell,
-.eg-grid-type-id,
-.eg-grid-type-int,
-.eg-grid-type-number,
-.eg-grid-type-money,
-.eg-grid-col-circ_count {
+.eg-grid .numeric {
   font-variant-numeric: tabular-nums lining-nums;
   text-align: right;
 }
 
-.compact td.numeric .eg-grid-cell-contents
-.compact td.eg-grid-type-id .eg-grid-cell-contents,
-.compact td.eg-grid-type-int .eg-grid-cell-contents,
-.compact td.eg-grid-type-number .eg-grid-cell-contents,
-.compact td.eg-grid-type-money .eg-grid-cell-contents,
-.compact td.eg-grid-col-circ_count .eg-grid-cell-contents {
+.compact td.numeric .eg-grid-cell-contents {
   padding: .1rem .25rem .1rem .4rem;
 }
 
-/* These contain numbers we might want to compare, but should not be aligned right */
-.eg-grid-col-callnumber,
-.eg-grid-col-barcode {
+/* These contain numbers we might want to compare vertically, but should not be aligned right */
+.eg-grid .alphanumeric,
+.eg-grid-type-timestamp {
   font-variant-numeric: tabular-nums lining-nums;
 }
 
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
index b2e16fa17f..3c7c6baf7f 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -1359,33 +1359,45 @@ export class GridContext {
         const classes = [this.cellClassCallback(row, col)];
         /* preserve alignmnet, if set */
         switch (col.align) {
-            case "left":
+            case 'left':
                 classes.push('text-start');
                 break;
-            case "right":
+            case 'right':
                 classes.push('text-end');
                 break;
-            case "center":
+            case 'center':
                 classes.push('text-center');
                 break;
+            default:
+                break;
         }
 
         /* Base classes */
         if (col.datatype)
-            classes.push('eg-grid-type-'+col.datatype);
+            classes.push('eg-grid-type-' + col.datatype);
         if (col.name)
-            classes.push('eg-grid-col-'+col.name);
+            classes.push('eg-grid-col-' + col.name);
         if (col.idlClass)
-            classes.push('eg-grid-class-'+col.idlClass);
+            classes.push('eg-grid-class-' + col.idlClass);
         if (col.path)
-            classes.push('eg-grid-path-'+col.path.replace('.', '-'));
+            classes.push('eg-grid-path-' + col.path);
         if (this.overflowCells)
             classes.push('eg-grid-cell-overflow');
         
-        /* Type-based formats */
-        if (col.datatype.endsWith('count'))
+        /* Name-based formats */
+        if (col.name.endsWith('count'))
             classes.push('numeric');
 
+        switch (col.name) {
+            case 'callnumber':
+            case 'barcode':
+                classes.push('alphanumeric');
+                break;
+            default:
+                break;
+        }
+
+        /* Type-based formats */
         switch (col.datatype) {
             case 'money':
                 // get raw value
@@ -1400,16 +1412,17 @@ export class GridContext {
                 }
                 // don't break
             case 'id':
+            case 'int':
             case 'number':
             case 'money':
                 classes.push('numeric');
                 break;
-            case 'callnumber':
-            case 'barcode':
-                classes.push('alphanumeric');
+            default:
+                break;
         }
 
-        return classes.join(' ');
+        // smush into string and replace dots in name and path
+        return classes.join(' ').replaceAll('.', '');
     }
 }
 
-- 
2.11.0