From: Kyle Huckins <khuckins@catalyte.io>
Date: Sat, 26 Feb 2022 22:20:00 +0000 (+0000)
Subject: lp1778311 On The Fly Resizing of Grids WIP
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=260da9fafdea9f4c83c458a0634a2277268fcd2b;p=working%2FEvergreen.git

lp1778311 On The Fly Resizing of Grids WIP

- Introduce resizing component
- Refactor grid into html table

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-print.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
	modified:   Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
	new file:   Open-ILS/src/eg2/src/app/share/grid/resizable.component.html
	new file:   Open-ILS/src/eg2/src/app/share/grid/resizable.component.ts
	new file:   Open-ILS/src/eg2/src/app/share/grid/resizable.css
	new file:   Open-ILS/src/eg2/src/app/share/grid/resizable.directive.ts
	new file:   Open-ILS/src/eg2/src/app/share/grid/resizable.style.less
---

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 fed22766ba..597144f13e 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
@@ -7,13 +7,11 @@
 <!--
   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)}}"
+<div 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"(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 +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">
@@ -39,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 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 +56,5 @@
 
       <eg-grid-body-cell [context]="context" [row]="row" [column]="col">
       </eg-grid-body-cell>
-    </div>
-  </div>
-</div>
-
+    </td>
+    </div>
\ 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 14c6b4c7f4..e99636e9b8 100644
--- 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 ca24c00afd..5451d2fcdf 100644
--- 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,19 @@
-<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" class="eg-grid-column-width-config">
+    <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" class="eg-grid-column-width-config">
+    <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>
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 bb597cd86e..3c8b9cb39a 100644
--- 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 a68076514c..cc7d302c60 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,23 +1,23 @@
 
-<div row="row" class="eg-grid-row eg-grid-header-row">
+
   <ng-container *ngIf="!context.disableSelect">
-    <div role="columnheader"
+    <th resizable role="columnheader" scope="col"
       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 resizable role="columnheader" scope="col"
     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 resizable *ngIf="context.rowFlairIsEnabled" scope="col"
     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 resizable role="columnheader" scope="col"
     *ngFor="let col of context.columnSet.displayColumns()"
     draggable="true"
     (dragstart)="dragColumn = col"
@@ -35,19 +35,4 @@
         *ngIf="isColumnSorting(col, 'DESC')">arrow_downwards</span>
     </a>
     <span *ngIf="!col.isSortable">{{col.label}}</span>
-  </div>
-</div>
-<div *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>
-  </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>
-
-  <div *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>
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.ts
index f7c857a4ab..6a7338296e 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.ts
@@ -4,7 +4,7 @@ import {PrintService} from '@eg/share/print/print.service';
 import {GridContext} from '@eg/share/grid/grid';
 
 @Component({
-  selector: 'eg-grid-print',
+  selector: 'eg-grid-print, [eg-grid-print]',
   templateUrl: './grid-print.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 83a907c72a..77b7ab4072 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,11 +1,9 @@
 
 .eg-grid {
-    width: 100%;
-    color: rgba(0,0,0,.87); 
+    color: rgba(0,0,0,.87);
 }
     
 .eg-grid-row {
-    display: flex;
     border-bottom: 1px solid rgba(0,0,0,.12);
     padding-left: 10px;
     padding-right: 10px;
@@ -54,6 +52,11 @@
     white-space: normal;
 }
 
+.eg-grid-resizable th {
+    resize: horizontal;
+    overflow: auto;
+}
+
 .eg-grid-body-cell {
 }
 
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 2ab6be0505..ebcf24f9e5 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
@@ -1,18 +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>
+</eg-grid-toolbar>
+<table class="eg-grid" role="grid">
 
-  <div #egGridStickyHeader [ngClass]="{'eg-grid-sticky-header' : context.stickyGridHeader}">
-    <eg-grid-header [context]="context"></eg-grid-header>
-  </div>
+  <thead #egGridStickyHeader class="eg-grid-resizable" [ngClass]="{'eg-grid-sticky-header' : context.stickyGridHeader}">
+    <tr row="row" class="eg-grid-row eg-grid-header-row"><eg-grid-header [context]="context"></eg-grid-header></tr>
+  </thead>
 
-  <eg-grid-column-width #colWidthConfig [gridContext]="context">
+  
+
+<eg-grid-column-width #colWidthConfig [gridContext]="context">
   </eg-grid-column-width>
 
   <eg-grid-print #gridPrinter [gridContext]="context">
@@ -35,7 +35,8 @@
       </ng-container>
     </div>
   </ng-container>
-
-  <eg-grid-body [context]="context"></eg-grid-body>
-</div>
+  <tbody class="eg-grid-body" tabindex="1">
+  <tr role="row" eg-grid-body [context]="context"></tr>
+  </tbody>
+</table>
 
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts b/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
index 0757fab28e..9e285b351a 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.module.ts
@@ -16,6 +16,8 @@ import {GridColumnWidthComponent} from './grid-column-width.component';
 import {GridPrintComponent} from './grid-print.component';
 import {GridFilterControlComponent} from './grid-filter-control.component';
 import {GridToolbarActionsEditorComponent} from './grid-toolbar-actions-editor.component';
+import {ResizableComponent} from './resizable.component';
+import {ResizableDirective} from './resizable.directive';
 
 
 @NgModule({
@@ -35,7 +37,9 @@ import {GridToolbarActionsEditorComponent} from './grid-toolbar-actions-editor.c
         GridColumnWidthComponent,
         GridPrintComponent,
         GridFilterControlComponent,
-        GridToolbarActionsEditorComponent
+        GridToolbarActionsEditorComponent,
+        ResizableComponent,
+        ResizableDirective
     ],
     imports: [
         EgCommonModule,
@@ -47,7 +51,8 @@ import {GridToolbarActionsEditorComponent} from './grid-toolbar-actions-editor.c
         GridColumnComponent,
         GridToolbarButtonComponent,
         GridToolbarCheckboxComponent,
-        GridToolbarActionComponent
+        GridToolbarActionComponent,
+        ResizableComponent
     ],
     providers: [
     ]
diff --git a/Open-ILS/src/eg2/src/app/share/grid/resizable.component.html b/Open-ILS/src/eg2/src/app/share/grid/resizable.component.html
new file mode 100644
index 0000000000..0795e06e02
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/resizable.component.html
@@ -0,0 +1,6 @@
+<div class="resizable-wrapper">
+	<div class="resizable-content">
+		<ng-content></ng-content>
+	</div>
+	<div class="resizable-bar" (resizable)="onResize($event)"></div>
+</div>
\ No newline at end of file
diff --git a/Open-ILS/src/eg2/src/app/share/grid/resizable.component.ts b/Open-ILS/src/eg2/src/app/share/grid/resizable.component.ts
new file mode 100644
index 0000000000..44cfeb4e67
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/resizable.component.ts
@@ -0,0 +1,15 @@
+import { Component, ElementRef, HostBinding } from "@angular/core";
+
+@Component({
+  selector: "th[resizable]",
+  templateUrl: "./resizable.component.html",
+  styleUrls: ["./resizable.style.less"]
+})
+export class ResizableComponent {
+  @HostBinding("style.width.px")
+  width: number | null = null;
+
+  onResize(width: number) {
+    this.width = width;
+  }
+}
diff --git a/Open-ILS/src/eg2/src/app/share/grid/resizable.css b/Open-ILS/src/eg2/src/app/share/grid/resizable.css
new file mode 100644
index 0000000000..6f5d12775f
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/resizable.css
@@ -0,0 +1,35 @@
+:host {
+  &:last-child .bar {
+    display: none;
+  }
+}
+
+.resizable-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.resizable-content {
+  flex: 2;
+}
+
+.resizable-bar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  margin: 0 -16px 0 16px;
+  justify-self: flex-end;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  background: blueviolet;
+  background-clip: content-box;
+  cursor: ew-resize;
+  opacity: 0;
+  transition: opacity .3s;
+
+  &:hover,
+  &:active {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/Open-ILS/src/eg2/src/app/share/grid/resizable.directive.ts b/Open-ILS/src/eg2/src/app/share/grid/resizable.directive.ts
new file mode 100644
index 0000000000..06fad98ae2
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/resizable.directive.ts
@@ -0,0 +1,36 @@
+import { DOCUMENT } from "@angular/common";
+import { Directive, ElementRef, Inject, Output } from "@angular/core";
+import {
+  distinctUntilChanged, map, switchMap, takeUntil, tap
+} from "rxjs/operators";
+import { fromEvent } from "rxjs";
+
+@Directive({
+  selector: "[resizable]"
+})
+export class ResizableDirective {
+  @Output()
+  readonly resizable = fromEvent<MouseEvent>(
+    this.elementRef.nativeElement,
+    "mousedown"
+  ).pipe(
+    tap(e => e.preventDefault()),
+    switchMap(() => {
+      const { width, right } = this.elementRef.nativeElement
+        .closest("th")
+        .getBoundingClientRect();
+
+      return fromEvent<MouseEvent>(this.documentRef, "mousemove").pipe(
+        map(({ clientX }) => width + clientX - right),
+        distinctUntilChanged(),
+        takeUntil(fromEvent(this.documentRef, "mouseup"))
+      );
+    })
+  );
+
+  constructor(
+    @Inject(DOCUMENT) private readonly documentRef: Document,
+    @Inject(ElementRef)
+    private readonly elementRef: ElementRef<HTMLElement>
+  ) {}
+}
diff --git a/Open-ILS/src/eg2/src/app/share/grid/resizable.style.less b/Open-ILS/src/eg2/src/app/share/grid/resizable.style.less
new file mode 100644
index 0000000000..997ad05165
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/resizable.style.less
@@ -0,0 +1,35 @@
+:host {
+  &:last-child .bar {
+    display: none;
+  }
+}
+
+.resizable-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.resizable-content {
+  flex: 1;
+}
+
+.resizable-bar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  margin: 0 -16px 0 16px;
+  justify-self: flex-end;
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  background: blueviolet;
+  background-clip: content-box;
+  cursor: ew-resize;
+  opacity: 0;
+  transition: opacity .3s;
+
+  &:hover,
+  &:active {
+    opacity: 1;
+  }
+}
\ No newline at end of file