From 2fa3fdf82f16ac3941ad2925f036d3909fdf61f2 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Wed, 27 Jun 2018 15:02:00 -0400 Subject: [PATCH] LP#1775466 Grid row/cell CSS handlers Signed-off-by: Bill Erickson --- .../eg2/src/app/share/grid/grid-body-cell.component.html | 2 ++ .../eg2/src/app/share/grid/grid-body-cell.component.ts | 7 ++++++- .../src/eg2/src/app/share/grid/grid-body.component.html | 5 +++-- .../src/eg2/src/app/share/grid/grid-body.component.ts | 8 +++++++- Open-ILS/src/eg2/src/app/share/grid/grid.component.html | 5 ++++- Open-ILS/src/eg2/src/app/share/grid/grid.component.ts | 10 +++++++++- .../src/eg2/src/app/staff/sandbox/sandbox.component.html | 6 +++++- .../src/eg2/src/app/staff/sandbox/sandbox.component.ts | 15 ++++++++++++++- 8 files changed, 50 insertions(+), 8 deletions(-) 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 5b488ebf1f..55d6f2df6e 100644 --- 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 @@ {{context.getRowColumnValue(row, column)}} 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 dd326c6263..9b6dfa0aee 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 @@ -2,7 +2,7 @@ tabindex=1 so the grid body can capture keyboard events. -->
-
@@ -17,7 +17,8 @@ (click)="onRowClick($event, row, idx)" *ngFor="let col of context.columnSet.displayColumns()"> - +
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 7bbe727d79..f029ccfcf1 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 @@ -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 4e54f8a4fe..6ce2831ee9 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 @@ -22,6 +22,9 @@ - + + 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 65f1ea5fef..af29a64e78 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 @@ -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 dbea15aad7..fdbc0c8e4a 100644 --- 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}} - + 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 7aaec92e1b..f90fa3fdb3 100644 --- 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, -- 2.11.0