From 49e5e0dace8fc923ac1b2f808225891c8a3ac848 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 23 May 2019 12:54:21 -0400
Subject: [PATCH] LP1826584 Spacebar closes alert/cofirm dialogs (Angular)

Angular alert and confirm dialogs may now be closed with the space
bar in addition to the escape key.  Note for confirm dialogs, space
bar is the same as clicking the "OK/Continue" button.

Includes Alert and Confirm dialog examples in the sandbox page for
testing.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 Open-ILS/src/eg2/src/app/share/dialog/alert.component.html |  1 +
 Open-ILS/src/eg2/src/app/share/dialog/alert.component.ts   |  6 ++++++
 .../src/eg2/src/app/share/dialog/confirm.component.html    |  1 +
 Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts |  8 ++++++++
 .../src/eg2/src/app/staff/sandbox/sandbox.component.html   | 14 ++++++++++++++
 5 files changed, 30 insertions(+)

diff --git a/Open-ILS/src/eg2/src/app/share/dialog/alert.component.html b/Open-ILS/src/eg2/src/app/share/dialog/alert.component.html
index e81f697c6e..27d5b2966c 100644
--- a/Open-ILS/src/eg2/src/app/share/dialog/alert.component.html
+++ b/Open-ILS/src/eg2/src/app/share/dialog/alert.component.html
@@ -3,6 +3,7 @@
     <div class="alert alert-danger">{{dialogBody}}</div>
   </div>
   <div class="modal-footer">
+    <span tabindex="0" ngbAutoFocus (keyup)="handleKeyPress($event)"></span>
     <button type="button" class="btn btn-success" 
       (click)="close()" i18n>OK</button>
   </div>
diff --git a/Open-ILS/src/eg2/src/app/share/dialog/alert.component.ts b/Open-ILS/src/eg2/src/app/share/dialog/alert.component.ts
index a09e972541..356bb12830 100644
--- a/Open-ILS/src/eg2/src/app/share/dialog/alert.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/dialog/alert.component.ts
@@ -13,6 +13,12 @@ export class AlertDialogComponent extends DialogComponent {
 
     // What are we warning the user with?
     @Input() public dialogBody: string;
+
+    handleKeyPress(evt: KeyboardEvent) {
+        if (evt.key === ' ' || evt.key === 'Escape') {
+            this.close();
+        }
+    }
 }
 
 
diff --git a/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.html b/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.html
index 21766cac09..8c6aa051ca 100644
--- a/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.html
+++ b/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.html
@@ -9,6 +9,7 @@
   </div>
   <div class="modal-body"><p>{{dialogBody}}</p></div>
   <div class="modal-footer">
+    <span tabindex="0" ngbAutoFocus (keyup)="handleKeyPress($event)"></span>
     <button type="button" class="btn btn-success" 
       (click)="close('confirmed')" i18n>Confirm</button>
     <button type="button" class="btn btn-warning" 
diff --git a/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts b/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts
index efcbdeb54e..142c0dac69 100644
--- a/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/dialog/confirm.component.ts
@@ -12,6 +12,14 @@ import {DialogComponent} from '@eg/share/dialog/dialog.component';
 export class ConfirmDialogComponent extends DialogComponent {
     // What question are we asking?
     @Input() public dialogBody: string;
+
+    handleKeyPress(evt: KeyboardEvent) {
+        if (evt.key === ' ') {
+            this.close('confirmed');
+        } else if (evt.key === 'Escape') {
+            this.dismiss('canceled');
+        }
+    }
 }
 
 
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 54cd87d11e..750c74893e 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
@@ -109,6 +109,20 @@
   <div>HERE: {{testDate}}</div>
 </div>
 
+
+<div class="row mb-3">
+  <div class="col-lg-2">
+    <eg-alert-dialog #alertDialog dialogTitle="Alert Title" dialogBody="Alert Body">
+    </eg-alert-dialog>
+    <button (click)="alertDialog.open({})" class="btn btn-outline-dark">Alert Dialog</button>
+  </div>
+  <div class="col-lg-2">
+    <eg-confirm-dialog #confirmDialog dialogTitle="Confirm Title" dialogBody="Confirm Body">
+    </eg-confirm-dialog>
+    <button (click)="confirmDialog.open({})" class="btn btn-outline-dark">Confirm Dialog</button>
+  </div>
+</div>
+
 <!-- printing -->
 
 <button class="btn btn-secondary" (click)="doPrint()">Test Print</button>
-- 
2.11.0