feat: add keyboard shortcuts (#1191)

- implement keyboard shortcuts
- designed user interface to view them

Fixes: #257

src/app/core/shell/sidenav/sidenav.component.html

@@ -97,6 +97,12 @@
           </mat-icon>
           <a matLine>Chart of Accounts</a>
         </mat-list-item>
+        <mat-list-item>
+          <mat-icon matListIcon (click)="help()">
+            <fa-icon icon="question-circle" size="sm"></fa-icon>
+          </mat-icon>
+          <a matLine>Help</a>
+        </mat-list-item>
       </mat-nav-list>
 
     </div>

src/app/core/shell/sidenav/sidenav.component.ts

@@ -43,4 +43,8 @@ export class SidenavComponent implements OnInit {
       .subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
   }
 
+  help() {
+    window.open('https://mifosforge.jira.com/wiki/spaces/docs/pages/52035622/User+Manual', '_blank');
+  }
+
 }

src/app/core/shell/toolbar/toolbar.component.html

@@ -49,6 +49,10 @@
 
   <mifosx-notifications-tray fxHide.lt-md></mifosx-notifications-tray>
 
+  <button mat-icon-button class="ml-1 img-button" matTooltip="Keyboard Shortcuts" (click)="showKeyboardShortcuts()">
+    <img src="assets/images/keyboard_placeholder.png">
+  </button>
+
   <button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu">
     <img src="assets/images/user_placeholder.png">
   </button>
@@ -100,7 +104,7 @@
     </mat-icon>
     <span>Settings</span>
   </button>
-  <button mat-menu-item (click)="logout()">
+  <button mat-menu-item (click)="logout()" id="logout">
     <mat-icon>
         <fa-icon icon="sign-out-alt" size="sm"></fa-icon>
     </mat-icon>

src/app/core/shell/toolbar/toolbar.component.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav, MatDialog } from '@angular/material';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Router } from '@angular/router';
 
@@ -10,6 +10,7 @@ import { map } from 'rxjs/operators';
 
 /** Custom Services */
 import { AuthenticationService } from '../../authentication/authentication.service';
+import { KeyboardShortcutsDialogComponent } from 'app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
 
 /**
  * Toolbar component.
@@ -42,7 +43,8 @@ export class ToolbarComponent implements OnInit {
    */
   constructor(private breakpointObserver: BreakpointObserver,
               private router: Router,
-              private authenticationService: AuthenticationService) { }
+              private authenticationService: AuthenticationService,
+              private dialog: MatDialog) { }
 
   /**
    * Subscribes to breakpoint for handset.
@@ -78,4 +80,9 @@ export class ToolbarComponent implements OnInit {
       .subscribe(() => this.router.navigate(['/login'], { replaceUrl: true }));
   }
 
+  showKeyboardShortcuts() {
+    const dialogRef = this.dialog.open(KeyboardShortcutsDialogComponent);
+    dialogRef.afterClosed().subscribe((response: any) => {});
+  }
+
 }