Chore: Eslint v9

Chore: Angular Zoneless
Chore: Removed Angular-Hotkeys dependency
Fix: Localization works properly now
Chore: Using Material 3 theme now
Chore: Removed toaster service to use snackbar directly
Fix: F2 Date working on all components now

overlord/src/app/payment/payment.component.ts

@@ -1,6 +1,6 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, HostListener } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MatButton, MatIconButton } from '@angular/material/button';
@@ -34,7 +34,6 @@ import {
   MatRow,
 } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { round } from 'mathjs';
 import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
@@ -48,7 +47,7 @@ import { DbFile } from '../core/db-file';
 import { Journal } from '../core/journal';
 import { Tag } from '../core/tag';
 import { TagService } from '../core/tag.service';
-import { ToasterService } from '../core/toaster.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { User } from '../core/user';
 import { Voucher } from '../core/voucher';
 import { VoucherService } from '../core/voucher.service';
@@ -112,10 +111,34 @@ import { PaymentDialogComponent } from './payment-dialog.component';
     LocalTimePipe,
   ],
 })
-export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('accountElement', { static: true }) accountElement?: ElementRef;
-  @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
+export class PaymentComponent implements OnInit, AfterViewInit {
+  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
+  @ViewChild('dateElement', { static: true }) dateElement!: ElementRef<HTMLInputElement>;
   @ViewChild('tagInput') tagInput?: ElementRef<HTMLInputElement>;
+
+  @HostListener('window:keydown.f2', ['$event'])
+  focusDate(event: KeyboardEvent) {
+    event.preventDefault();
+    this.dateElement.nativeElement.focus();
+    this.dateElement.nativeElement.select();
+  }
+
+  @HostListener('window:keydown.control.s', ['$event'])
+  saveListner(event: KeyboardEvent) {
+    event.preventDefault();
+    if (this.canSave()) {
+      this.save();
+    }
+  }
+
+  @HostListener('window:keydown.control.p', ['$event'])
+  postListner(event: KeyboardEvent) {
+    event.preventDefault();
+    if (this.voucher.id && !this.voucher.posted && this.auth.allowed('post-vouchers')) {
+      this.post();
+    }
+  }
+
   separatorKeysCodes: number[] = [ENTER, COMMA];
   public journalObservable = new BehaviorSubject<Journal[]>([]);
   dataSource: PaymentDataSource = new PaymentDataSource(this.journalObservable);
@@ -146,8 +169,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private hotkeys: HotkeysService,
-    private toaster: ToasterService,
+    private snackBar: MatSnackBar,
     public auth: AuthService,
     private math: MathService,
     public image: ImageService,
@@ -197,54 +219,12 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
       this.paymentAccounts = data.paymentAccounts;
       this.loadVoucher(data.voucher);
     });
-    this.hotkeys.add(
-      new Hotkey(
-        'f2',
-        (): boolean => {
-          setTimeout(() => {
-            if (this.dateElement) {
-              this.dateElement.nativeElement.focus();
-            }
-          }, 0);
-          return false; // Prevent bubbling
-        },
-        ['INPUT', 'SELECT', 'TEXTAREA'],
-      ),
-    );
-    this.hotkeys.add(
-      new Hotkey(
-        'ctrl+s',
-        (): boolean => {
-          if (this.canSave()) {
-            this.save();
-          }
-          return false; // Prevent bubbling
-        },
-        ['INPUT', 'SELECT', 'TEXTAREA'],
-      ),
-    );
-    this.hotkeys.add(
-      new Hotkey(
-        'ctrl+p',
-        (): boolean => {
-          if (this.voucher.id && !this.voucher.posted && this.auth.allowed('post-vouchers')) {
-            this.post();
-          }
-          return false; // Prevent bubbling
-        },
-        ['INPUT', 'SELECT', 'TEXTAREA'],
-      ),
-    );
   }
 
   ngAfterViewInit() {
     this.focusAccount();
   }
 
-  ngOnDestroy() {
-    this.hotkeys.reset();
-  }
-
   loadVoucher(voucher: Voucher) {
     this.voucher = voucher;
     [this.paymentJournal] = this.voucher.journals.filter((x) => x.debit === -1);
@@ -265,9 +245,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
 
   focusAccount() {
     setTimeout(() => {
-      if (this.accountElement) {
-        this.accountElement.nativeElement.focus();
-      }
+      this.accountElement.nativeElement.focus();
     }, 0);
   }
 
@@ -303,9 +281,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     this.account = null;
     this.accBal = null;
     setTimeout(() => {
-      if (this.accountElement) {
-        this.accountElement.nativeElement.focus();
-      }
+      this.accountElement.nativeElement.focus();
     }, 0);
   }
 
@@ -360,10 +336,10 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     this.ser.post(this.voucher.id as string).subscribe({
       next: (result) => {
         this.loadVoucher(result);
-        this.toaster.show('Success', 'Voucher Posted');
+        this.snackBar.open('Voucher Posted', 'Success');
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }
@@ -372,7 +348,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
     const voucher: Voucher = this.getVoucher();
     this.ser.saveOrUpdate(voucher).subscribe({
       next: (result) => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         if (voucher.id === result.id) {
           this.loadVoucher(result);
         } else {
@@ -380,7 +356,7 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
         }
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }
@@ -396,11 +372,11 @@ export class PaymentComponent implements OnInit, AfterViewInit, OnDestroy {
   delete() {
     this.ser.delete(this.voucher.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigate(['/payment'], { replaceUrl: true });
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }