Feature: Added hotkeys in vouchers for selecting date (f2), save (ctrl+s) and post (ctrl+p)

overlord/src/app/receipt/receipt.component.html

@@ -11,8 +11,8 @@
       <div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
            fxLayoutGap.lt-md="0px">
         <mat-form-field fxFlex="40">
-          <input matInput [matDatepicker]="date" (focus)="date.open()" placeholder="Date" formControlName="date"
-                 autocomplete="off">
+          <input matInput [matDatepicker]="date" placeholder="Date" formControlName="date" autocomplete="off"
+                 #dateElement (focus)="dateElement.select()">
           <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>

overlord/src/app/receipt/receipt.component.ts

@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, OnDestroy, ViewChild} from '@angular/core';
 import {FormBuilder, FormGroup} from '@angular/forms';
 import {MatAutocompleteSelectedEvent, MatDialog} from '@angular/material';
 import {ActivatedRoute, Router} from '@angular/router';
@@ -16,14 +16,16 @@ import {ToasterService} from '../core/toaster.service';
 import {debounceTime, distinctUntilChanged, map, startWith, switchMap} from 'rxjs/operators';
 import {ReceiptDialogComponent} from './receipt-dialog.component';
 import {ImageDialogComponent} from '../shared/image-dialog/image-dialog.component';
+import {Hotkey, HotkeysService} from "angular2-hotkeys";
 
 @Component({
   selector: 'app-receipt',
   templateUrl: './receipt.component.html',
   styleUrls: ['./receipt.component.css']
 })
-export class ReceiptComponent implements OnInit, AfterViewInit {
+export class ReceiptComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('accountElement') accountElement: ElementRef;
+  @ViewChild('dateElement') dateElement: ElementRef;
   public journalObservable = new BehaviorSubject<Journal[]>([]);
   dataSource: ReceiptDataSource;
   form: FormGroup;
@@ -42,6 +44,7 @@ export class ReceiptComponent implements OnInit, AfterViewInit {
     private router: Router,
     private fb: FormBuilder,
     private dialog: MatDialog,
+    private hotkeys: HotkeysService,
     private toaster: ToasterService,
     private auth: AuthService,
     private ser: VoucherService,
@@ -59,12 +62,32 @@ export class ReceiptComponent implements OnInit, AfterViewInit {
         this.receiptAccounts = data.receiptAccounts;
         this.loadVoucher(data.voucher);
       });
+    this.hotkeys.add(new Hotkey('f2', (event: KeyboardEvent): boolean => {
+      setTimeout(() => {
+        this.dateElement.nativeElement.focus();
+      }, 0);
+      return false; // Prevent bubbling
+    }, ['INPUT', 'SELECT', 'TEXTAREA']));
+    this.hotkeys.add(new Hotkey('ctrl+s', (event: KeyboardEvent): boolean => {
+      if (this.canSave())
+        this.save();
+      return false; // Prevent bubbling
+    }, ['INPUT', 'SELECT', 'TEXTAREA']));
+    this.hotkeys.add(new Hotkey('ctrl+p', (event: KeyboardEvent): boolean => {
+      if (this.voucher.id && !this.voucher.posted && this.auth.user.perms.indexOf('Post Vouchers') !== -1)
+        this.post();
+      return false; // Prevent bubbling
+    }, ['INPUT', 'SELECT', 'TEXTAREA']));
   }
 
   ngAfterViewInit() {
     this.focusAccount();
   }
 
+  ngOnDestroy() {
+    this.hotkeys.reset();
+  }
+
   loadVoucher(voucher: Voucher) {
     this.voucher = voucher;
     this.receiptJournal = this.voucher.journals.filter(x => x.debit === 1)[0];

overlord/src/app/receipt/receipt.module.ts

@@ -29,6 +29,7 @@ import {MomentDateAdapter} from '@angular/material-moment-adapter';
 import {A11yModule} from '@angular/cdk/a11y';
 import {ReceiptDialogComponent} from './receipt-dialog.component';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {HotkeyModule} from "angular2-hotkeys";
 
 export const MY_FORMATS = {
   parse: {
@@ -48,6 +49,7 @@ export const MY_FORMATS = {
     CommonModule,
     CdkTableModule,
     FlexLayoutModule,
+    HotkeyModule,
     MatAutocompleteModule,
     MatButtonModule,
     MatCardModule,