From bb744216e59a8fd7a0b7afdca8daf1ecb431eece Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Mon, 4 Mar 2019 11:11:24 -0500
Subject: [PATCH] LP1818288 Grid checkboxes emit events

Modify the grid toolbar checkbox onClick handler to emit events instead
of requesting a reference to a function.  This is more consistent with
other event-handling code.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Dan Wells <dbw2@calvin.edu>
---
 .../grid/grid-toolbar-checkbox.component.ts   |  8 +--
 .../share/grid/grid-toolbar.component.html    | 50 +++++++++----------
 Open-ILS/src/eg2/src/app/share/grid/grid.ts   |  2 +-
 .../cat/vandelay/queue-items.component.html   |  4 +-
 .../cat/vandelay/queue-items.component.ts     | 10 ++--
 .../staff/cat/vandelay/queue.component.html   | 27 +++++-----
 .../app/staff/cat/vandelay/queue.component.ts | 31 ++++++------
 7 files changed, 65 insertions(+), 67 deletions(-)

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
index f078797525..8765917ceb 100644
--- 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
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, Host, TemplateRef} from '@angular/core';
+import {Component, Input, OnInit, Host, Output, EventEmitter} from '@angular/core';
 import {GridToolbarCheckbox} from './grid';
 import {GridComponent} from './grid.component';
 
@@ -15,10 +15,12 @@ export class GridToolbarCheckboxComponent implements OnInit {
     // 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;
+    @Output() onChange: EventEmitter<boolean>;
 
     // get a reference to our container grid.
-    constructor(@Host() private grid: GridComponent) {}
+    constructor(@Host() private grid: GridComponent) {
+        this.onChange = new EventEmitter<boolean>();
+    }
 
     ngOnInit() {
 
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 c5afb48796..52c3ae1099 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
@@ -5,7 +5,7 @@
 
     <!-- buttons -->
     <div class="btn-grp" *ngIf="gridContext.toolbarButtons.length">
-      <button *ngFor="let btn of gridContext.toolbarButtons" 
+      <button *ngFor="let btn of gridContext.toolbarButtons"
         [disabled]="btn.disabled"
         class="btn btn-outline-dark mr-1" (click)="performButtonAction(btn)">
         {{btn.label}}
@@ -13,12 +13,12 @@
     </div>
 
     <!-- checkboxes -->
-    <div class="form-check form-check-inline" 
+    <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)"/>
+          <input class="form-check-input" type="checkbox"
+            (click)="cb.onChange.emit($event.target.checked)"/>
             {{cb.label}}
         </label>
       </ng-container>
@@ -31,7 +31,7 @@
   <div ngbDropdown class="mr-1" placement="bottom-right">
     <button ngbDropdownToggle [disabled]="!gridContext.toolbarActions.length"
         class="btn btn-outline-dark no-dropdown-caret">
-      <span title="Actions For Selected Rows" i18n-title 
+      <span title="Actions For Selected Rows" i18n-title
         class="material-icons mat-icon-in-button">playlist_add_check</span>
     </button>
     <div class="dropdown-menu" ngbDropdownMenu>
@@ -52,28 +52,28 @@
     </div>
   </div>
 
-  <button [disabled]="gridContext.pager.isFirstPage()" type="button" 
+  <button [disabled]="gridContext.pager.isFirstPage()" type="button"
     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toFirst()">
-    <span title="First Page" i18n-title 
+    <span title="First Page" i18n-title
         class="material-icons mat-icon-in-button">first_page</span>
   </button>
-  <button [disabled]="gridContext.pager.isFirstPage()" type="button" 
+  <button [disabled]="gridContext.pager.isFirstPage()" type="button"
     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.decrement()">
-    <span title="Previous Page" i18n-title 
+    <span title="Previous Page" i18n-title
         class="material-icons mat-icon-in-button">keyboard_arrow_left</span>
   </button>
-  <button [disabled]="gridContext.pager.isLastPage()" type="button" 
+  <button [disabled]="gridContext.pager.isLastPage()" type="button"
     class="btn btn-outline-dark mr-1" (click)="gridContext.pager.increment()">
-    <span title="Next Page" i18n-title 
+    <span title="Next Page" i18n-title
         class="material-icons mat-icon-in-button">keyboard_arrow_right</span>
   </button>
 
   <!--
   Hiding jump-to-last since there's no analog in the angularjs grid and
   it has limited value since the size of the data set is often unknown.
-  <button [disabled]="!gridContext.pager.resultCount || gridContext.pager.isLastPage()" 
+  <button [disabled]="!gridContext.pager.resultCount || gridContext.pager.isLastPage()"
     type="button" class="btn btn-outline-dark mr-1" (click)="gridContext.pager.toLast()">
-    <span title="First Page" i18n-title 
+    <span title="First Page" i18n-title
         class="material-icons mat-icon-in-button">last_page</span>
   </button>
   -->
@@ -85,7 +85,7 @@
       </span>
     </button>
     <div class="dropdown-menu" ngbDropdownMenu>
-      <a class="dropdown-item" 
+      <a class="dropdown-item"
         *ngFor="let count of [5, 10, 25, 50, 100]"
         (click)="gridContext.pager.setLimit(count)">
         <span class="ml-2">{{count}}</span>
@@ -93,14 +93,14 @@
     </div>
   </div>
 
-  <button type="button" 
-    class="btn btn-outline-dark mr-1" 
+  <button type="button"
+    class="btn btn-outline-dark mr-1"
     (click)="gridContext.overflowCells=!gridContext.overflowCells">
     <span *ngIf="!gridContext.overflowCells"
-      title="Expand Cells Vertically" i18n-title 
+      title="Expand Cells Vertically" i18n-title
       class="material-icons mat-icon-in-button">expand_more</span>
     <span *ngIf="gridContext.overflowCells"
-      title="Collaps Cells Vertically" i18n-title 
+      title="Collaps Cells Vertically" i18n-title
       class="material-icons mat-icon-in-button">expand_less</span>
   </button>
 
@@ -108,31 +108,31 @@
   </eg-grid-column-config>
   <div ngbDropdown placement="bottom-right">
     <button ngbDropdownToggle class="btn btn-outline-dark no-dropdown-caret">
-      <span title="Show Grid Options" i18n-title 
+      <span title="Show Grid Options" i18n-title
         class="material-icons mat-icon-in-button">settings</span>
     </button>
     <div class="dropdown-menu" ngbDropdownMenu>
-      <a class="dropdown-item label-with-material-icon" 
+      <a class="dropdown-item label-with-material-icon"
         (click)="columnConfDialog.open({size:'lg'})">
         <span class="material-icons">build</span>
         <span class="ml-2" i18n>Manage Columns</span>
       </a>
-      <a class="dropdown-item label-with-material-icon" 
+      <a class="dropdown-item label-with-material-icon"
         (click)="colWidthConfig.isVisible = !colWidthConfig.isVisible">
         <span class="material-icons">compare_arrows</span>
         <span class="ml-2" i18n>Manage Column Widths</span>
       </a>
-      <a class="dropdown-item label-with-material-icon" 
+      <a class="dropdown-item label-with-material-icon"
         (click)="saveGridConfig()">
         <span class="material-icons">save</span>
         <span class="ml-2" i18n>Save Grid Settings</span>
       </a>
-      <a class="dropdown-item label-with-material-icon" 
+      <a class="dropdown-item label-with-material-icon"
         (click)="gridContext.columnSet.reset()">
         <span class="material-icons">restore</span>
         <span class="ml-2" i18n>Reset Columns</span>
       </a>
-      <a class="dropdown-item label-with-material-icon" 
+      <a class="dropdown-item label-with-material-icon"
         (click)="generateCsvExportUrl($event)"
         [download]="csvExportFileName"
         [href]="csvExportUrl">
@@ -146,7 +146,7 @@
 
       <div class="dropdown-divider"></div>
 
-      <a class="dropdown-item label-with-material-icon" 
+      <a class="dropdown-item label-with-material-icon"
         (click)="col.visible=!col.visible" *ngFor="let col of gridContext.columnSet.columns">
         <span *ngIf="col.visible" class="badge badge-success">&#x2713;</span>
         <span *ngIf="!col.visible" class="badge badge-warning">&#x2717;</span>
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 92591a76e3..f7e681dfcb 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.ts
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.ts
@@ -927,7 +927,7 @@ export class GridToolbarButton {
 
 export class GridToolbarCheckbox {
     label: string;
-    onChange: (checked: boolean) => void;
+    onChange: EventEmitter<boolean>;
 }
 
 export class GridDataSource {
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-items.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-items.component.html
index 8bc896f5b6..3185a38697 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-items.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-items.component.html
@@ -8,11 +8,11 @@
   </div>
 </div>
 
-<eg-grid #itemsGrid 
+<eg-grid #itemsGrid
   showFields="record,import_error,imported_as,import_time,owning_lib,call_number,barcode"
   persistKey="cat.vandelay.queue.items"
   idlClass="vii" [dataSource]="gridSource">
-  <eg-grid-toolbar-checkbox [onChange]="limitToImportErrors"
+  <eg-grid-toolbar-checkbox (onChange)="limitToImportErrors($event)"
     i18n-label label="Limit to Import Failures"></eg-grid-toolbar-checkbox>
 
 </eg-grid>
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-items.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-items.component.ts
index 7340e3d719..cae7c54a8e 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-items.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue-items.component.ts
@@ -18,7 +18,6 @@ export class QueueItemsComponent {
     queueType: string;
     queueId: number;
     filterImportErrors: boolean;
-    limitToImportErrors: (checked: boolean) => void;
 
     gridSource: GridDataSource;
     @ViewChild('itemsGrid') itemsGrid: GridComponent;
@@ -49,11 +48,12 @@ export class QueueItemsComponent {
                 }
             );
         };
+    }
 
-        this.limitToImportErrors = (checked: boolean) => {
-            this.filterImportErrors = checked;
-            this.itemsGrid.reload();
-        };
+    limitToImportErrors(checked: boolean) {
+        this.filterImportErrors = checked;
+        this.itemsGrid.reload();
     }
+
 }
 
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue.component.html b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue.component.html
index 5584700eed..e4ef84565b 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue.component.html
@@ -4,7 +4,7 @@
 
 <ng-container *ngIf="queueSummary && queueSummary.queue">
 
-  <eg-confirm-dialog 
+  <eg-confirm-dialog
     #confirmDelDlg
     i18n-dialogTitle i18n-dialogBody
     dialogTitle="Confirm Delete"
@@ -51,7 +51,7 @@
           <li class="list-group-item">
             <div class="d-flex">
               <div class="flex-1">
-                <a [routerLink]="" (click)="importSelected()" 
+                <a [routerLink]="" (click)="importSelected()"
                   i18n>Import Selected Records</a>
               </div>
               <div class="flex-1">
@@ -68,7 +68,7 @@
                 </a>
               </div>
               <div class="flex-1">
-                <a [routerLink]="" (click)="exportNonImported()" 
+                <a [routerLink]="" (click)="exportNonImported()"
                   i18n>Export Non-Imported Records</a>
               </div>
             </div>
@@ -117,11 +117,11 @@
   <a *ngIf="queueType=='auth'" href="/eg/staff/cat/catalog/authority/{{row.imported_as}}/marc_edit">
     {{row.imported_as}}
   </a>
-  
+
 </ng-template>
 
 
-<!-- 
+<!--
 Most columns are generated programmatically from queued record attribute
 definitions.  Hide a number of stock record attributes by default
 because there are a lot of them.
@@ -134,23 +134,22 @@ because there are a lot of them.
   hideFields="language,pagination,price,rec_identifier,eg_tcn_source,eg_identifier,item_barcode,zsource">
 
   <eg-grid-toolbar-checkbox i18n-label label="Records With Matches"
-    [onChange]="limitToMatches"></eg-grid-toolbar-checkbox>
+    (onChange)="limitToMatches($event)"></eg-grid-toolbar-checkbox>
 
   <eg-grid-toolbar-checkbox i18n-label label="Non-Imported Records"
-    [onChange]="limitToNonImported"></eg-grid-toolbar-checkbox>
+    (onChange)="limitToNonImported($event)"></eg-grid-toolbar-checkbox>
 
   <eg-grid-toolbar-checkbox i18n-label label="Records with Import Errors"
-    [onChange]="limitToImportErrors"></eg-grid-toolbar-checkbox>
+    (onChange)="limitToImportErrors($event)"></eg-grid-toolbar-checkbox>
 
-  <eg-grid-column name="id" [index]="true" 
-    [hidden]="true"></eg-grid-column>
-  <eg-grid-column i18n-label label="Matches" 
+  <eg-grid-column name="id" [index]="true" [hidden]="true"></eg-grid-column>
+  <eg-grid-column i18n-label label="Matches"
     name="+matches" [cellTemplate]="matchesTmpl"></eg-grid-column>
-  <eg-grid-column name="import_error" i18n-label 
+  <eg-grid-column name="import_error" i18n-label
     label="Import Errors" [cellTemplate]="errorsTmpl"></eg-grid-column>
-  <eg-grid-column name="import_time" i18n-label 
+  <eg-grid-column name="import_time" i18n-label
     label="Import Date" datatype="timestamp"></eg-grid-column>
-  <eg-grid-column name="imported_as" i18n-label 
+  <eg-grid-column name="imported_as" i18n-label
     label="Imported As" [cellTemplate]="importedAsTmpl"></eg-grid-column>
 </eg-grid>
 
diff --git a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue.component.ts b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue.component.ts
index fbc62ba783..9055f21cd4 100644
--- a/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/cat/vandelay/queue.component.ts
@@ -31,10 +31,6 @@ export class QueueComponent implements OnInit, AfterViewInit {
         withErrors: false
     };
 
-    limitToMatches: (checked: boolean) => void;
-    limitToNonImported: (checked: boolean) => void;
-    limitToImportErrors: (checked: boolean) => void;
-
     // keep a local copy for convenience
     attrDefs: IdlObject[];
 
@@ -61,23 +57,24 @@ export class QueueComponent implements OnInit, AfterViewInit {
             return this.loadQueueRecords(pager);
         };
 
-        this.limitToMatches = (checked: boolean) => {
-            this.filters.matches = checked;
-            this.queueGrid.reload();
-        };
+    }
 
-        this.limitToNonImported = (checked: boolean) => {
-            this.filters.nonImported = checked;
-            this.queueGrid.reload();
-        };
+    ngOnInit() {
+    }
 
-        this.limitToImportErrors = (checked: boolean) => {
-            this.filters.withErrors = checked;
-            this.queueGrid.reload();
-        };
+    limitToMatches(checked: boolean) {
+        this.filters.matches = checked;
+        this.queueGrid.reload();
     }
 
-    ngOnInit() {
+    limitToNonImported(checked: boolean) {
+        this.filters.nonImported = checked;
+        this.queueGrid.reload();
+    }
+
+    limitToImportErrors(checked: boolean) {
+        this.filters.withErrors = checked;
+        this.queueGrid.reload();
     }
 
     queuePageOffset(): number {
-- 
2.43.2