LP#1775466 Grid row/cell CSS handlers

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

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
index 5b488eb..55d6f2d 100644 (file)
--- 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
@@ -1,10 +1,12 @@
 
 <span *ngIf="!column.cellTemplate"
   ngbTooltip="{{context.getRowColumnValue(row, column)}}"
+  class="{{cellClassCallback(row, column)}}"
   triggers="mouseenter:mouseleave">
   {{context.getRowColumnValue(row, column)}}
 </span>
 <span *ngIf="column.cellTemplate" 
+  class="{{cellClassCallback(row, column)}}"
   [ngbTooltip]="column.cellTemplate"
   #tooltip="ngbTooltip" 
   (mouseenter)="tooltip.open(column.getCellContext(row))"

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
index ca31fe7..651aa8f 100644 (file)
--- 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
@@ -14,9 +14,14 @@ export class GridBodyCellComponent implements OnInit {
     @Input() context: GridContext;
     @Input() row: any;
     @Input() column: GridColumn;
+    @Input() cellClassCallback: (row: any, col: GridColumn) => string;
 
     constructor() {}
 
-    ngOnInit() {}
+    ngOnInit() {
+        if (!this.cellClassCallback) {
+            this.cellClassCallback = (row: any, col: GridColumn) => '';
+        }
+    }
 }
 

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 dd326c6..9b6dfa0 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
@@ -2,7 +2,7 @@
   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"
+  <div class="eg-grid-row eg-grid-body-row {{rowClassCallback(row)}}"
     [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
     *ngFor="let row of context.dataSource.getPageOfRows(context.pager); let idx = index">
 
@@ -17,7 +17,8 @@
       (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 [context]="context" [row]="row" [column]="col"
+        [cellClassCallback]="cellClassCallback">
       </eg-grid-body-cell>
     </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
index 7bbe727..f029ccf 100644 (file)
--- 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
@@ -11,11 +11,17 @@ import {GridComponent} from './grid.component';
 export class GridBodyComponent implements OnInit {
 
     @Input() context: GridContext;
+    @Input() rowClassCallback: (row: any) => string;
+    @Input() cellClassCallback: (row: any, col: GridColumn) => string;
 
     constructor(@Host() private grid: GridComponent) {
     }
 
-    ngOnInit() {}
+    ngOnInit() {
+        if (!this.rowClassCallback) {
+            this.rowClassCallback = (row: any) => '';
+        }
+    }
 
     // Not using @HostListener because it only works globally.
     onGridKeyDown(evt: KeyboardEvent) {

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 4e54f8a..6ce2831 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.html
@@ -22,6 +22,9 @@
     </div>
   </div>
 
-  <eg-grid-body [context]="context"></eg-grid-body>
+  <eg-grid-body [context]="context"
+    [rowClassCallback]="rowClassCallback" 
+    [cellClassCallback]="cellClassCallback">
+  </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 65f1ea5..af29a64 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
@@ -7,11 +7,17 @@ import {StoreService} from '@eg/core/store.service';
 import {FormatService} from '@eg/share/util/format.service';
 import {GridContext, GridColumn, GridDataSource} from './grid';
 
+/**
+ * Main grid entry point.
+ */
+
 @Component({
   selector: 'eg-grid',
   templateUrl: './grid.component.html',
   styleUrls: ['grid.component.css'],
-  // share grid css globally once imported.
+  // share grid css globally once imported so all grid component CSS 
+  // can live in grid.component.css and to avoid multiple copies of 
+  // the CSS when multiple grids are displayed.
   encapsulation: ViewEncapsulation.None
 })
 
@@ -24,6 +30,8 @@ export class GridComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input() multiSortable: boolean;
     @Input() persistKey: string;
     @Input() disableMultiSelect: boolean;
+    @Input() rowClassCallback: (row: any) => string;
+    @Input() cellClassCallback: (row: any, col: GridColumn) => string;
 
     context: GridContext;
 

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index dbea15a..fdbc0c8 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -79,7 +79,11 @@
   HELLO {{userContext.hello}}
   <button>{{row.id()}}</button>
 </ng-template>
-<eg-grid #cbtGrid idlClass="cbt" [dataSource]="btSource" [sortable]="true">
+<eg-grid #cbtGrid idlClass="cbt" 
+  [dataSource]="btSource" 
+  [rowClassCallback]="btGridRowClassCallback"
+  [cellClassCallback]="btGridCellClassCallback"
+  [sortable]="true">
   <eg-grid-column name="test" [cellTemplate]="cellTmpl" 
     [cellContext]="btGridTestContext" [sortable]="false">
   </eg-grid-column>

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 7aaec92..f90fa3f 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} from '@eg/share/grid/grid';
+import {GridDataSource, GridColumn} 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';
@@ -83,6 +83,19 @@ export class SandboxComponent implements OnInit {
         };
     }
 
+    btGridRowClassCallback(row: any): string {
+        if (row.id() === 1) {
+            return 'text-uppercase font-weight-bold text-danger';
+        }
+    }
+
+    // apply to all 'name' columns regardless of row
+    btGridCellClassCallback(row: any, col: GridColumn): string {
+        if (col.name === 'name') {
+            return 'text-uppercase font-weight-bold text-success';
+        }
+    }
+
     doPrint() {
         this.printer.print({
             template: this.printTemplate,