From e99c1a069ecfbff0ac0d8b684719f3c0cf86cb7c Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Wed, 27 Jun 2018 11:26:57 -0400
Subject: [PATCH] LP#1775466 Grid body/cell components; print fixes

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../app/share/grid/grid-body-cell.component.html   | 16 +++++
 .../src/app/share/grid/grid-body-cell.component.ts | 22 ++++++
 .../src/app/share/grid/grid-body.component.html    | 25 +++++++
 .../eg2/src/app/share/grid/grid-body.component.ts  | 78 ++++++++++++++++++++++
 .../src/app/share/grid/grid-print.component.html   |  6 +-
 .../src/eg2/src/app/share/grid/grid.component.html | 34 +---------
 .../src/eg2/src/app/share/grid/grid.component.ts   | 59 +---------------
 Open-ILS/src/eg2/src/app/share/grid/grid.module.ts |  4 ++
 .../eg2/src/app/share/print/print.component.html   | 13 ++--
 .../src/eg2/src/app/share/print/print.component.ts |  2 +-
 .../share/bib-summary/bib-summary.component.ts     |  2 +-
 11 files changed, 161 insertions(+), 100 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
 create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts
 create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
 create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
new file mode 100644
index 0000000000..5b488ebf1f
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
@@ -0,0 +1,16 @@
+
+<span *ngIf="!column.cellTemplate"
+  ngbTooltip="{{context.getRowColumnValue(row, column)}}"
+  triggers="mouseenter:mouseleave">
+  {{context.getRowColumnValue(row, column)}}
+</span>
+<span *ngIf="column.cellTemplate" 
+  [ngbTooltip]="column.cellTemplate"
+  #tooltip="ngbTooltip" 
+  (mouseenter)="tooltip.open(column.getCellContext(row))"
+  (mouseleave)="tooltip.close()" triggers="manual">
+  <ng-container #templateContainer
+    *ngTemplateOutlet="column.cellTemplate; context: column.getCellContext(row)">
+  </ng-container> 
+</span>
+
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
new file mode 100644
index 0000000000..ca31fe7cee
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.ts
@@ -0,0 +1,22 @@
+import {Component, Input, OnInit, TemplateRef} from '@angular/core';
+import {GridContext, GridColumn, GridRowSelector,
+    GridColumnSet, GridDataSource} from './grid';
+
+@Component({
+  selector: 'eg-grid-body-cell',
+  templateUrl: './grid-body-cell.component.html'
+})
+
+export class GridBodyCellComponent implements OnInit {
+
+    /** TODO: extract component text content for printing compiled cells */
+
+    @Input() context: GridContext;
+    @Input() row: any;
+    @Input() column: GridColumn;
+
+    constructor() {}
+
+    ngOnInit() {}
+}
+
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
new file mode 100644
index 0000000000..dd326c6263
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
@@ -0,0 +1,25 @@
+<!--
+  tabindex=1 so the grid body can capture keyboard events.
+-->
+<div class="eg-grid-body" tabindex="1" (keydown)="onGridKeyDown($event)">
+  <div class="eg-grid-row eg-grid-body-row"
+    [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
+    *ngFor="let row of context.dataSource.getPageOfRows(context.pager); let idx = index">
+
+    <div class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
+      <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]">
+    </div>
+    <div class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell eg-grid-cell-skinny">
+      {{context.pager.rowNumber(idx)}}
+    </div>
+    <div class="eg-grid-cell eg-grid-body-cell" [ngStyle]="{flex:col.flex}"
+      (dblclick)="onRowDblClick(row)"
+      (click)="onRowClick($event, row, idx)"
+      *ngFor="let col of context.columnSet.displayColumns()">
+
+      <eg-grid-body-cell [context]="context" [row]="row" [column]="col">
+      </eg-grid-body-cell>
+    </div>
+  </div>
+</div>
+
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
new file mode 100644
index 0000000000..7bbe727d79
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.ts
@@ -0,0 +1,78 @@
+import {Component, Input, OnInit, Host} from '@angular/core';
+import {GridContext, GridColumn, GridRowSelector,
+    GridColumnSet, GridDataSource} from './grid';
+import {GridComponent} from './grid.component';
+
+@Component({
+  selector: 'eg-grid-body',
+  templateUrl: './grid-body.component.html'
+})
+
+export class GridBodyComponent implements OnInit {
+
+    @Input() context: GridContext;
+
+    constructor(@Host() private grid: GridComponent) {
+    }
+
+    ngOnInit() {}
+
+    // Not using @HostListener because it only works globally.
+    onGridKeyDown(evt: KeyboardEvent) {
+        switch (evt.key) {
+            case 'ArrowUp':
+                this.context.selectPreviousRow();
+                evt.stopPropagation();
+                break;
+            case 'ArrowDown':
+                this.context.selectNextRow();
+                evt.stopPropagation();
+                break;
+            case 'ArrowLeft':
+                this.context.toPrevPage()
+                .then(ok => this.context.selectFirstRow(), err => {});
+                evt.stopPropagation();
+                break;
+            case 'ArrowRight':
+                this.context.toNextPage()
+                .then(ok => this.context.selectFirstRow(), err => {});
+                evt.stopPropagation();
+                break;
+            case 'Enter':
+                if (this.context.lastSelectedIndex) {
+                    this.grid.onRowActivate$.emit(
+                        this.context.getRowByIndex(
+                            this.context.lastSelectedIndex)
+                    );
+                }
+                evt.stopPropagation();
+                break;
+        }
+    }
+
+    onRowClick($event: any, row: any, idx: number) {
+        const index = this.context.getRowIndex(row);
+
+        if (this.context.disableMultiSelect) {
+            this.context.selectOneRow(index);
+        } else if ($event.ctrlKey || $event.metaKey /* mac command */) {
+            if (this.context.toggleSelectOneRow(index)) {
+                this.context.lastSelectedIndex = index;
+            }
+
+        } else if ($event.shiftKey) {
+            // TODO shift range click
+
+        } else {
+            this.context.selectOneRow(index);
+        }
+
+        this.grid.onRowClick$.emit(row);
+    }
+
+    onRowDblClick(row: any) {
+        this.grid.onRowActivate$.emit(row);
+    }
+
+}
+
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.html
index bcb29e70fa..a098792207 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-print.component.html
@@ -5,16 +5,16 @@
   <ng-template #printTemplate let-context>
     <div>
       <style>
-        .grid-table {
+        .grid-print-table {
           border-collapse: collapse;
           margin: 1px;
         }
-        .grid-table td {
+        .grid-print-table td {
           padding: 2px;
           border: 1px solid #aaa;
         }
       </style>
-      <table class="grid-table">
+      <table class="grid-print-table">
         <thead>
           <tr><th *ngFor="let col of context.columns">{{col.label}}</th></tr>
         </thead>
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 b539f9248c..4e54f8a4fe 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
@@ -15,43 +15,13 @@
   <eg-grid-print #gridPrinter [gridContext]="context">
   </eg-grid-print>
 
+  <!-- move me too -->
   <div class="row" *ngIf="dataSource.data.length == 0">
     <div class="col-lg-12 text-center alert alert-light font-italic" i18n>
       Nothing to Display
     </div>
   </div>
 
-  <div class="eg-grid-body" tabindex="1" (keydown)="onGridKeyDown($event)">
-    <div class="eg-grid-row eg-grid-body-row"
-      [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
-      *ngFor="let row of dataSource.getPageOfRows(context.pager); let idx = index">
-
-      <div class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
-        <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]">
-      </div>
-      <div class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell eg-grid-cell-skinny">
-        {{context.pager.rowNumber(idx)}}
-      </div>
-      <div class="eg-grid-cell eg-grid-body-cell" [ngStyle]="{flex:col.flex}"
-        (dblclick)="onRowDblClick(row)"
-        (click)="onRowClick($event, row, idx)"
-        *ngFor="let col of context.columnSet.displayColumns()">
-        <span *ngIf="!col.cellTemplate"
-          ngbTooltip="{{context.getRowColumnValue(row, col)}}"
-          triggers="mouseenter:mouseleave">
-          {{context.getRowColumnValue(row, col)}}
-        </span>
-        <span *ngIf="col.cellTemplate" 
-          [ngbTooltip]="col.cellTemplate"
-          #tooltip="ngbTooltip" 
-          (mouseenter)="tooltip.open(col.getCellContext(row))"
-          (mouseleave)="tooltip.close()" triggers="manual">
-          <ng-container #templateContainer
-            *ngTemplateOutlet="col.cellTemplate; context: col.getCellContext(row)">
-          </ng-container> 
-        </span>
-      </div>
-    </div>
-  </div>
+  <eg-grid-body [context]="context"></eg-grid-body>
 </div>
 
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 51565dc417..65f1ea5fef 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
@@ -26,6 +26,8 @@ export class GridComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input() disableMultiSelect: boolean;
 
     context: GridContext;
+
+    // These events are emitted from our grid-body component.
     onRowActivate$: EventEmitter<any>;
     onRowClick$: EventEmitter<any>;
 
@@ -60,66 +62,9 @@ export class GridComponent implements OnInit, AfterViewInit, OnDestroy {
         this.context.destroy();
     }
 
-    // Not using @HostListener because it only works globally.
-    onGridKeyDown(evt: KeyboardEvent) {
-        switch (evt.key) {
-            case 'ArrowUp':
-                this.context.selectPreviousRow();
-                evt.stopPropagation();
-                break;
-            case 'ArrowDown':
-                this.context.selectNextRow();
-                evt.stopPropagation();
-                break;
-            case 'ArrowLeft':
-                this.context.toPrevPage()
-                .then(ok => this.context.selectFirstRow(), err => {});
-                evt.stopPropagation();
-                break;
-            case 'ArrowRight':
-                this.context.toNextPage()
-                .then(ok => this.context.selectFirstRow(), err => {});
-                evt.stopPropagation();
-                break;
-            case 'Enter':
-                if (this.context.lastSelectedIndex) {
-                    this.onRowActivate$.emit(
-                        this.context.getRowByIndex(
-                            this.context.lastSelectedIndex)
-                    );
-                }
-                evt.stopPropagation();
-                break;
-        }
-    }
-
     reload() {
         this.context.reload();
     }
-
-    onRowClick($event: any, row: any, idx: number) {
-        const index = this.context.getRowIndex(row);
-
-        if (this.context.disableMultiSelect) {
-            this.context.selectOneRow(index);
-        } else if ($event.ctrlKey || $event.metaKey /* mac command */) {
-            if (this.context.toggleSelectOneRow(index)) {
-                this.context.lastSelectedIndex = index;
-            }
-
-        } else if ($event.shiftKey) {
-            // TODO shift range click
-
-        } else {
-            this.context.selectOneRow(index);
-        }
-
-        this.onRowClick$.emit(row);
-    }
-
-    onRowDblClick(row: any) {
-        this.onRowActivate$.emit(row);
-    }
 }
 
 
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 31a052cba4..4a5bc1be6a 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
@@ -3,6 +3,8 @@ import {EgCommonModule} from '@eg/common.module';
 import {GridComponent} from './grid.component';
 import {GridColumnComponent} from './grid-column.component';
 import {GridHeaderComponent} from './grid-header.component';
+import {GridBodyComponent} from './grid-body.component';
+import {GridBodyCellComponent} from './grid-body-cell.component';
 import {GridToolbarComponent} from './grid-toolbar.component';
 import {GridToolbarButtonComponent} from './grid-toolbar-button.component';
 import {GridToolbarActionComponent} from './grid-toolbar-action.component';
@@ -17,6 +19,8 @@ import {GridPrintComponent} from './grid-print.component';
         GridComponent,
         GridColumnComponent,
         GridHeaderComponent,
+        GridBodyComponent,
+        GridBodyCellComponent,
         GridToolbarComponent,
         GridToolbarButtonComponent,
         GridToolbarActionComponent,
diff --git a/Open-ILS/src/eg2/src/app/share/print/print.component.html b/Open-ILS/src/eg2/src/app/share/print/print.component.html
index 094e5b7b24..12d05bcbcf 100644
--- a/Open-ILS/src/eg2/src/app/share/print/print.component.html
+++ b/Open-ILS/src/eg2/src/app/share/print/print.component.html
@@ -3,13 +3,14 @@ Global print container.
 There should only be one print component active in a page.
 -->
 
-<!-- container for inline template compilation -->
-<ng-container *ngIf="template">
-  <ng-container *ngTemplateOutlet="template; context:context">
+<div id='eg-print-container'>
+  <!-- container for inline template compilation -->
+  <ng-container *ngIf="template">
+    <ng-container *ngTemplateOutlet="template; context:context">
+    </ng-container>
   </ng-container>
-</ng-container>
-
+  <div id='eg-print-html-container'>
+  </div>
 <!-- container for pre-compiled HTML -->
-<div id='eg-print-container'>
 </div>
 
diff --git a/Open-ILS/src/eg2/src/app/share/print/print.component.ts b/Open-ILS/src/eg2/src/app/share/print/print.component.ts
index 09ef2447eb..3abc449af0 100644
--- a/Open-ILS/src/eg2/src/app/share/print/print.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/print/print.component.ts
@@ -36,7 +36,7 @@ export class PrintComponent implements OnInit {
             printReq => this.handlePrintRequest(printReq));
 
         this.htmlContainer =
-            this.renderer.selectRootElement('#eg-print-container');
+            this.renderer.selectRootElement('#eg-print-html-container');
     }
 
     handlePrintRequest(printReq: PrintRequest) {
diff --git a/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.ts b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.ts
index aa7247df6e..3d96f8e420 100644
--- a/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/bib-summary/bib-summary.component.ts
@@ -21,7 +21,7 @@ export class BibSummaryComponent implements OnInit {
     summary: BibRecordSummary;
     @Input() set bibSummary(s: any) {
         this.summary = s;
-        if (this.initDone) {
+        if (this.initDone && this.summary) {
             this.summary.getBibCallNumber();
         }
     }
-- 
2.11.0