From 86cd5eaf717a562f3b63811eff049b8e56d75eb5 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Mon, 9 Jul 2018 17:49:06 -0400
Subject: [PATCH] LP#1775466 Grid toolbar checkboxes; more combobox

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../src/app/share/combobox/combobox.component.ts   |  9 +++++-
 .../share/grid/grid-toolbar-checkbox.component.ts  | 37 ++++++++++++++++++++++
 .../src/app/share/grid/grid-toolbar.component.html | 18 +++++++++--
 .../src/eg2/src/app/share/grid/grid.component.css  | 10 ++++++
 Open-ILS/src/eg2/src/app/share/grid/grid.module.ts |  3 ++
 Open-ILS/src/eg2/src/app/share/grid/grid.ts        |  7 ++++
 6 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-checkbox.component.ts

diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
index 875ce33a86..9e5dce78db 100644
--- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
@@ -65,8 +65,10 @@ export class ComboboxComponent implements OnInit {
     }
 
     // Entry ID of the default entry to select (optional)
-    // onChange() is NOT fired when applying the default value
+    // onChange() is NOT fired when applying the default value,
+    // unless startIdFiresOnChange is set to true.
     @Input() startId: any;
+    @Input() startIdFiresOnChange: boolean;
 
     @Input() asyncDataSource: (term: string) => Observable<ComboboxEntry>;
 
@@ -122,9 +124,14 @@ export class ComboboxComponent implements OnInit {
 
             const entry = 
                 this.entrylist.filter(e => e.id === this.startId)[0];
+
             if (entry) {
                 this.selected = entry;
                 this.defaultSelectionApplied = true;
+                if (this.startIdFiresOnChange) {
+                    this.selectorChanged(
+                        {item: this.selected, preventDefault: () => true});
+                }
             }
         }
     }
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-checkbox.component.ts b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-checkbox.component.ts
new file mode 100644
index 0000000000..f078797525
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar-checkbox.component.ts
@@ -0,0 +1,37 @@
+import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core';
+import {GridToolbarCheckbox} from './grid';
+import {GridComponent} from './grid.component';
+
+@Component({
+  selector: 'eg-grid-toolbar-checkbox',
+  template: '<ng-template></ng-template>'
+})
+
+export class GridToolbarCheckboxComponent implements OnInit {
+
+    // Note most input fields should match class fields for GridColumn
+    @Input() label: string;
+
+    // This is an input instead of an Output because the handler is
+    // passed off to the grid context for maintenance -- events
+    // are not fired directly from this component.
+    @Input() onChange: (checked: boolean) => void;
+
+    // get a reference to our container grid.
+    constructor(@Host() private grid: GridComponent) {}
+
+    ngOnInit() {
+
+        if (!this.grid) {
+            console.warn('GridToolbarCheckboxComponent needs a [grid]');
+            return;
+        }
+
+        const cb = new GridToolbarCheckbox();
+        cb.label = this.label;
+        cb.onChange = this.onChange;
+
+        this.grid.context.toolbarCheckboxes.push(cb);
+    }
+}
+
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
index 5f9a34aa1d..d148b20a5e 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-toolbar.component.html
@@ -1,13 +1,27 @@
 
 <div class="eg-grid-toolbar mb-2">
 
-  <div class="btn-toolbar" *ngIf="gridContext.toolbarButtons.length">
-    <div class="btn-grp">
+  <div class="btn-toolbar">
+
+    <!-- buttons -->
+    <div class="btn-grp" *ngIf="gridContext.toolbarButtons.length">
       <button *ngFor="let btn of gridContext.toolbarButtons" 
         class="btn btn-outline-dark" (click)="btn.action()">
         {{btn.label}}
       </button>
     </div>
+
+    <!-- checkboxes -->
+    <div class="form-check form-check-inline" 
+      *ngIf="gridContext.toolbarCheckboxes.length">
+      <ng-container *ngFor="let cb of gridContext.toolbarCheckboxes">
+        <label class="form-check-label">
+          <input class="form-check-input" type="checkbox" 
+            (click)="cb.onChange($event.target.checked)"/>
+            {{cb.label}}
+        </label>
+      </ng-container>
+    </div>
   </div>
 
   <!-- push everything else to the right -->
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
index 87d2aafd28..391df80406 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -68,6 +68,16 @@
   font-size: 20px;
 }
 
+.eg-grid-toolbar .form-check-label:nth-child(even) {
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-left: 3px;
+  margin-right: 3px;
+  border-radius: 5px;
+  background-color: rgba(0,0,0,.03);
+  border: 1px solid rgba(0,0,0,.125);
+}
+
 /* Kind of hacky -- only way to get a toolbar button with no 
  * mat icon to line up horizontally with mat icon buttons */
 .eg-grid-toolbar .text-button {
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 4a5bc1be6a..0773a7e56f 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
@@ -7,6 +7,7 @@ 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 {GridToolbarCheckboxComponent} from './grid-toolbar-checkbox.component';
 import {GridToolbarActionComponent} from './grid-toolbar-action.component';
 import {GridColumnConfigComponent} from './grid-column-config.component';
 import {GridColumnWidthComponent} from './grid-column-width.component';
@@ -23,6 +24,7 @@ import {GridPrintComponent} from './grid-print.component';
         GridBodyCellComponent,
         GridToolbarComponent,
         GridToolbarButtonComponent,
+        GridToolbarCheckboxComponent,
         GridToolbarActionComponent,
         GridColumnConfigComponent,
         GridColumnWidthComponent,
@@ -36,6 +38,7 @@ import {GridPrintComponent} from './grid-print.component';
         GridComponent,
         GridColumnComponent,
         GridToolbarButtonComponent,
+        GridToolbarCheckboxComponent,
         GridToolbarActionComponent
     ],
     providers: [
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 33d720325d..feaa3747f1 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -341,6 +341,7 @@ export class GridContext {
     columnSet: GridColumnSet;
     rowSelector: GridRowSelector;
     toolbarButtons: GridToolbarButton[];
+    toolbarCheckboxes: GridToolbarCheckbox[];
     toolbarActions: GridToolbarAction[];
     lastSelectedIndex: any;
     pageChanges: Subscription;
@@ -368,6 +369,7 @@ export class GridContext {
         this.pager.limit = 10;
         this.rowSelector = new GridRowSelector();
         this.toolbarButtons = [];
+        this.toolbarCheckboxes = [];
         this.toolbarActions = [];
     }
 
@@ -736,6 +738,11 @@ export class GridToolbarButton {
     action: () => any;
 }
 
+export class GridToolbarCheckbox {
+    label: string;
+    onChange: (checked: boolean) => void;
+}
+
 export class GridDataSource {
 
     data: any[];
-- 
2.11.0