From 3c3d0678b67425f3f9dcdca760cdbb6b33752203 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Wed, 20 Mar 2019 12:06:20 -0400
Subject: [PATCH] LP1821382 Angular boolean yes/no display component
Simple component that accepts a boolean value and displays a yes/no
badge. Added as the default handler for boolean columsn in the grid.
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Dan Wells <dbw2@calvin.edu>
---
Open-ILS/src/eg2/src/app/common.module.ts | 3 ++
Open-ILS/src/eg2/src/app/core/format.service.ts | 3 +-
.../app/share/grid/grid-body-cell.component.html | 9 ++++-
.../src/app/share/grid/grid-column.component.ts | 4 +++
Open-ILS/src/eg2/src/app/share/grid/grid.ts | 7 ++++
.../src/eg2/src/app/share/util/bool.component.ts | 39 ++++++++++++++++++++++
6 files changed, 63 insertions(+), 2 deletions(-)
create mode 100644 Open-ILS/src/eg2/src/app/share/util/bool.component.ts
diff --git a/Open-ILS/src/eg2/src/app/common.module.ts b/Open-ILS/src/eg2/src/app/common.module.ts
index f1d4467830..a4e402680d 100644
--- a/Open-ILS/src/eg2/src/app/common.module.ts
+++ b/Open-ILS/src/eg2/src/app/common.module.ts
@@ -25,6 +25,7 @@ import {ConfirmDialogComponent} from '@eg/share/dialog/confirm.component';
import {PromptDialogComponent} from '@eg/share/dialog/prompt.component';
import {ProgressInlineComponent} from '@eg/share/dialog/progress-inline.component';
import {ProgressDialogComponent} from '@eg/share/dialog/progress.component';
+import {BoolDisplayComponent} from '@eg/share/util/bool.component';
@NgModule({
declarations: [
@@ -35,6 +36,7 @@ import {ProgressDialogComponent} from '@eg/share/dialog/progress.component';
PromptDialogComponent,
ProgressInlineComponent,
ProgressDialogComponent,
+ BoolDisplayComponent,
FormatValuePipe
],
imports: [
@@ -55,6 +57,7 @@ import {ProgressDialogComponent} from '@eg/share/dialog/progress.component';
PromptDialogComponent,
ProgressInlineComponent,
ProgressDialogComponent,
+ BoolDisplayComponent,
FormatValuePipe
]
})
diff --git a/Open-ILS/src/eg2/src/app/core/format.service.ts b/Open-ILS/src/eg2/src/app/core/format.service.ts
index 8108eec91b..d2b2ce51e2 100644
--- a/Open-ILS/src/eg2/src/app/core/format.service.ts
+++ b/Open-ILS/src/eg2/src/app/core/format.service.ts
@@ -119,7 +119,8 @@ export class FormatService {
case 'bool':
// Slightly better than a bare 't' or 'f'.
- // Should probably add a global true/false string.
+ // Note the caller is better off using an <eg-bool/> for
+ // boolean display.
return Boolean(
value === 't' || value === 1 ||
value === '1' || value === true
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 6dc4a99b56..921fafc459 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
@@ -4,7 +4,14 @@
placement="top-left"
class="{{context.cellClassCallback(row, column)}}"
triggers="mouseenter:mouseleave">
- {{context.getRowColumnValue(row, column)}}
+ <ng-container *ngIf="column.datatype == 'bool'">
+ <eg-bool [value]="context.getRowColumnValue(row, column)"
+ [ternary]="column.ternaryBool">
+ </eg-bool>
+ </ng-container>
+ <ng-container *ngIf="column.datatype != 'bool'">
+ {{context.getRowColumnValue(row, column)}}
+ </ng-container>
</span>
<span *ngIf="column.cellTemplate"
class="{{context.cellClassCallback(row, column)}}"
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
index 76a89f61bf..fc18fc7258 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-column.component.ts
@@ -24,6 +24,9 @@ export class GridColumnComponent implements OnInit {
@Input() datatype: string;
@Input() multiSortable: boolean;
+ // If true, boolean fields support 3 values: true, false, null (unset)
+ @Input() ternaryBool: boolean;
+
// Display date and time when datatype = timestamp
@Input() datePlusTime: boolean;
@@ -57,6 +60,7 @@ export class GridColumnComponent implements OnInit {
col.isMultiSortable = this.multiSortable;
col.datatype = this.datatype;
col.datePlusTime = this.datePlusTime;
+ col.ternaryBool = this.ternaryBool;
col.isAuto = false;
this.grid.context.columnSet.add(col);
}
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 64f3321fa7..7cf5f53487 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -26,6 +26,7 @@ export class GridColumn {
idlFieldDef: any;
datatype: string;
datePlusTime: boolean;
+ ternaryBool: boolean;
cellTemplate: TemplateRef<any>;
cellContext: any;
isIndex: boolean;
@@ -658,6 +659,12 @@ export class GridContext {
val = this.getObjectFieldValue(row, col.name);
}
+ if (col.datatype === 'bool') {
+ // Avoid string-ifying bools so we can use an <eg-bool/>
+ // in the grid template.
+ return val;
+ }
+
return this.format.transform({
value: val,
idlClass: col.idlClass,
diff --git a/Open-ILS/src/eg2/src/app/share/util/bool.component.ts b/Open-ILS/src/eg2/src/app/share/util/bool.component.ts
new file mode 100644
index 0000000000..37d2e8d7d7
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/util/bool.component.ts
@@ -0,0 +1,39 @@
+import {Component, Input} from '@angular/core';
+
+/* Simple component to render a boolean value as human-friendly text */
+
+@Component({
+ selector: 'eg-bool',
+ template: `
+ <ng-container>
+ <span *ngIf="value" class="badge badge-success" i18n>Yes</span>
+ <span *ngIf="value == false" class="badge badge-secondary" i18n>No</span>
+ <ng-container *ngIf="value === null">
+ <span *ngIf="ternary" class="badge badge-light" i18n>Unset</span>
+ <span *ngIf="!ternary"> </span>
+ </ng-container>`
+})
+export class BoolDisplayComponent {
+
+ _value: boolean;
+ @Input() set value(v: boolean) {
+ this._value = v;
+ }
+ get value(): boolean {
+ return this._value;
+ }
+
+ // If true, a null value displays as unset.
+ // If false, a null value displays as an empty string.
+ _ternary: boolean;
+ @Input() set ternary(t: boolean) {
+ this._ternary = t;
+ }
+ get ternary(): boolean {
+ return this._ternary;
+ }
+
+ constructor() {
+ this.value = null;
+ }
+}
\ No newline at end of file
--
2.11.0