LP#1775466 Grid row flair tooltips

Signed-off-by: Bill Erickson <berickxx@gmail.com>

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 28cfdff..3979c81 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
@@ -13,7 +13,17 @@
       {{context.pager.rowNumber(idx)}}
     </div>
     <div *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">
-      <span class="material-icons">{{context.rowFlairCallback(row)}}</span>
+      <!-- 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">
+        <ng-container *ngIf="flair.icon">
+          <!-- tooltip is disabled when no title is set -->
+          <span class="material-icons"
+            ngbTooltip="{{flair.title || ''}}" triggers="mouseenter:mouseleave">
+            {{flair.icon}}
+          </span>
+        </ng-container>
+      </ng-container>
     </div>
     <div class="eg-grid-cell eg-grid-body-cell" [ngStyle]="{flex:col.flex}"
       (dblclick)="onRowDblClick(row)"

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 6cd2a15..2de7922 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.ts
@@ -5,7 +5,7 @@ import {IdlService} from '@eg/core/idl.service';
 import {OrgService} from '@eg/core/org.service';
 import {StoreService} from '@eg/core/store.service';
 import {FormatService} from '@eg/share/util/format.service';
-import {GridContext, GridColumn, GridDataSource} from './grid';
+import {GridContext, GridColumn, GridDataSource, GridRowFlairEntry} from './grid';
 
 /**
  * Main grid entry point.
@@ -48,7 +48,7 @@ export class GridComponent implements OnInit, AfterViewInit, OnDestroy {
 
     // Returns a material icon name to display in the flar column
     // (if enabled) for the given row.
-    @Input() rowFlairCallback: (row: any) => string;
+    @Input() rowFlairCallback: (row: any) => GridRowFlairEntry;
 
     // Returns a space-separated list of CSS class names to apply to
     // a given row
@@ -85,10 +85,9 @@ export class GridComponent implements OnInit, AfterViewInit, OnDestroy {
         this.context.isMultiSortable = this.multiSortable === true;
         this.context.disableMultiSelect = this.disableMultiSelect === true;
         this.context.rowFlairIsEnabled = this.rowFlairIsEnabled  === true;
+        this.context.rowFlairCallback = this.rowFlairCallback;
 
         // TS doesn't seem to like: let foo = bar || () => '';
-        this.context.rowFlairCallback =
-            this.rowFlairCallback || function () { return ''; };
         this.context.rowClassCallback =
             this.rowClassCallback || function () { return ''; };
         this.context.cellClassCallback =

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 d947b2e..ae5dab5 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -310,7 +310,10 @@ export class GridRowSelector {
     }
 }
 
-
+export interface GridRowFlairEntry {
+    icon: string;   // name of material icon
+    title: string;  // tooltip string
+}
 
 export class GridContext {
 
@@ -328,7 +331,7 @@ export class GridContext {
     lastSelectedIndex: any;
     pageChanges: Subscription;
     rowFlairIsEnabled: boolean;
-    rowFlairCallback: (row: any) => string;
+    rowFlairCallback: (row: any) => GridRowFlairEntry;
     rowClassCallback: (row: any) => string;
     cellClassCallback: (row: any, col: GridColumn) => string;
 

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index 68762b3..d0cee1b 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -6,7 +6,7 @@ import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/observable/timer';
 import {map} from 'rxjs/operators/map';
 import {take} from 'rxjs/operators/take';
-import {GridDataSource, GridColumn} from '@eg/share/grid/grid';
+import {GridDataSource, GridColumn, GridRowFlairEntry} from '@eg/share/grid/grid';
 import {IdlService, IdlObject} from '@eg/core/idl.service';
 import {PcrudService} from '@eg/core/pcrud.service';
 import {OrgService} from '@eg/core/org.service';
@@ -89,12 +89,15 @@ export class SandboxComponent implements OnInit {
         }
     }
 
-    btGridRowFlairCallback(row: any): string {
+    btGridRowFlairCallback(row: any): GridRowFlairEntry {
+        const flair = {icon: null, title: null};
         if (row.id() === 2) {
-            return 'priority_high';
+            flair.icon = 'priority_high';
+            flair.title = 'I Am ID 2';
         } else if (row.id() === 3) {
-            return 'not_interested';
+            flair.icon = 'not_interested';
         }
+        return flair;
     }
 
     // apply to all 'name' columns regardless of row