feat: add keyboard shortcuts (#1191)

- implement keyboard shortcuts
- designed user interface to view them

Fixes: #257

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html

@@ -0,0 +1,18 @@
+<h1 mat-dialog-title>Keyboard Shortcuts</h1>
+
+<div mat-dialog-content>
+  <div fxLayout="column" fxLayoutGap="2%">
+    <ng-container *ngFor="let item of buttonConfig.buttonCombinations">
+      <div fxFlexFill fxFlex="50%">
+        <span fxFlex="50%">
+          <span *ngIf="item.ctrlKey"> <span class="modifierKey">Ctrl</span> + </span>
+          <span *ngIf="item.shiftKey"> <span class="modifierKey">Shift</span> + </span>
+          <span *ngIf="item.altKey"> <span class="modifierKey">Alt</span> + </span>
+          <span *ngIf="item.key"> <span class="modifierKey">{{ item.key }}</span></span>
+        </span>
+        <span fxFlex="50%">{{ item.title }}</span>
+      </div>
+      <mat-divider [inset]="true"></mat-divider>
+    </ng-container>
+  </div>
+</div>

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.scss

@@ -0,0 +1,11 @@
+.modifierKey {
+    border: 1px solid #0000004d;
+    padding: 0.3rem;
+    background: #f8f8f8;
+    font-weight: bold;
+    border-radius: 0.3rem;
+}
+
+.mat-divider.mat-divider-inset {
+    margin-left: 0px;
+}

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeyboardShortcutsDialogComponent } from './keyboard-shortcuts-dialog.component';
+
+describe('KeyboardShortcutsDialogComponent', () => {
+  let component: KeyboardShortcutsDialogComponent;
+  let fixture: ComponentFixture<KeyboardShortcutsDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KeyboardShortcutsDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KeyboardShortcutsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.ts

@@ -0,0 +1,28 @@
+/** Angular Imports */
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { KeyboardShortcutsConfiguration } from '../../keyboards-shortcut-config';
+/**
+ * Delete dialog component.
+ */
+@Component({
+  selector: 'mifosx-keyboard-shortcuts-dialog',
+  templateUrl: './keyboard-shortcuts-dialog.component.html',
+  styleUrls: ['./keyboard-shortcuts-dialog.component.scss']
+})
+export class KeyboardShortcutsDialogComponent implements OnInit {
+
+  buttonConfig: KeyboardShortcutsConfiguration;
+
+  /**
+   * @param {MatDialogRef} dialogRef Component reference to dialog.
+   * @param {any} data Provides a deleteContext.
+   */
+  constructor(public dialogRef: MatDialogRef<KeyboardShortcutsDialogComponent>) { }
+
+  ngOnInit() {
+    this.dialogRef.updateSize(`800px`);
+    this.buttonConfig = new KeyboardShortcutsConfiguration();
+  }
+
+}

src/app/shared/shared.module.ts

@@ -15,6 +15,7 @@ import { ChangePasswordDialogComponent } from './change-password-dialog/change-p
 import { EnableDialogComponent } from './enable-dialog/enable-dialog.component';
 import { DisableDialogComponent } from './disable-dialog/disable-dialog.component';
 import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
+import { KeyboardShortcutsDialogComponent } from './keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component';
 
 /** Custom Modules */
 import { IconsModule } from './icons.module';
@@ -43,7 +44,8 @@ import { MaterialModule } from './material.module';
     ChangePasswordDialogComponent,
     EnableDialogComponent,
     DisableDialogComponent,
-    ConfirmationDialogComponent
+    ConfirmationDialogComponent,
+    KeyboardShortcutsDialogComponent
   ],
   exports: [
     FileUploadComponent,
@@ -62,7 +64,8 @@ import { MaterialModule } from './material.module';
     ChangePasswordDialogComponent,
     EnableDialogComponent,
     DisableDialogComponent,
-    ConfirmationDialogComponent
+    ConfirmationDialogComponent,
+    KeyboardShortcutsDialogComponent
   ]
 })
 export class SharedModule { }