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>

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 e81f697..27d5b29 100644 (file)
--- 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 a09e972..356bb12 100644 (file)
--- 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 21766ca..8c6aa05 100644 (file)
--- 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 efcbdeb..142c0da 100644 (file)
--- 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 54cd87d..750c748 100644 (file)
--- 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>