LP1812414 Keyboard shortcut to log out (WIP)

Allows the user to log out by pressing Alt + Shift + Q.

Also adds an optional confirmation dialog to keyboard shortcuts. If a
confirmation message is given as an input, a confirmation dialog will be
shown using that message, and the user must confirm before the action is
performed.

Logging out is currently the only keyboard shortcut that requires a
confirmation.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>

diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey.directive.ts b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey.directive.ts
index dfc835d..3f7b753 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey.directive.ts
+++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey.directive.ts
@@ -11,7 +11,8 @@
  *     keyDesc="My Description" 18n-keyDesc
  *   >
  */
-import {Directive, ElementRef, Input, OnInit} from '@angular/core';
+import {Directive, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {ConfirmDialogComponent} from '@eg/share/dialog/confirm.component';
 import {AccessKeyService} from '@eg/share/accesskey/accesskey.service';
 
 @Directive({
@@ -30,6 +31,12 @@ export class AccessKeyDirective implements OnInit {
     // E.g. "navbar"
     @Input() keyCtx: string;
 
+    // Optional; if set, a confirmation dialog will be shown
+    // and the click() action will be performed on confirmation
+    @Input() confirm?: string;
+
+    @ViewChild('confirmDialog', { static: true }) confirmDialog: ConfirmDialogComponent;
+
     constructor(
         private elm: ElementRef,
         private keyService: AccessKeyService
@@ -47,7 +54,20 @@ export class AccessKeyDirective implements OnInit {
                 key: keySpec,
                 desc: this.keyDesc,
                 ctx: this.keyCtx,
-                action: () => this.elm.nativeElement.click()
+                action: () => {
+                    // if a confirmation message was specified, show the dialog
+                    if (this.confirm && this.confirm.length > 0) {
+                        this.confirmDialog.open().subscribe(confirmed => {
+                            if (!confirmed) { return; }
+
+                            // confirmed? now we do the click()
+                            this.elm.nativeElement.click();
+                        });
+                    }
+                    // if no confirmation message was given, just do the click()
+                    else
+                        this.elm.nativeElement.click();
+                }
             });
         });
     }

diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey.service.ts b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey.service.ts
index 3b73234..dcb4736 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey.service.ts
+++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey.service.ts
@@ -6,6 +6,7 @@ export interface AccessKeyAssignment {
     ctx: string;      // template context
     action: Function; // handler function
     shadowed?: boolean; // Has this assignemnt been shadowed by another.
+    confirm?: string;   // If present, a confirm dialog is required before the click() action runs.
 }
 
 @Injectable()

diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.html b/Open-ILS/src/eg2/src/app/staff/nav.component.html
index facd33c..d7ad618 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/nav.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/nav.component.html
@@ -526,7 +526,9 @@
             <span class="material-icons" aria-hidden="true">transform</span>
             <span i18n>Restore Operator</span>
           </a>
-          <a class="dropdown-item" (click)="logout()">
+          <a class="dropdown-item" (click)="logout()"
+              egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc i18n-confirm
+              keySpec="alt+shift+q" keyDesc="Logout (Quit)" confirm="Log out now?">
             <span class="material-icons" aria-hidden="true">lock_outline</span>
             <span i18n>Logout</span>
           </a>