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/purchase/purchase.component.ts

@@ -1,6 +1,6 @@
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { AsyncPipe, DecimalPipe, PercentPipe, 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';
@@ -33,7 +33,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';
@@ -50,7 +49,7 @@ import { Product } from '../core/product';
 import { ProductSku } from '../core/product-sku';
 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';
@@ -116,11 +115,35 @@ import { PurchaseDialogComponent } from './purchase-dialog.component';
     LocalTimePipe,
   ],
 })
-export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('accountElement', { static: true }) accountElement?: ElementRef;
-  @ViewChild('productElement', { static: true }) productElement?: ElementRef;
-  @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
+export class PurchaseComponent implements OnInit, AfterViewInit {
+  @ViewChild('accountElement', { static: true }) accountElement!: ElementRef<HTMLInputElement>;
+  @ViewChild('productElement', { static: true }) productElement!: 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 inventoryObservable = new BehaviorSubject<Inventory[]>([]);
   dataSource: PurchaseDataSource = new PurchaseDataSource(this.inventoryObservable);
@@ -153,8 +176,7 @@ export class PurchaseComponent 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,
@@ -214,54 +236,12 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
 
       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.form.setValue({
@@ -284,9 +264,7 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
 
   focusAccount() {
     setTimeout(() => {
-      if (this.accountElement) {
-        this.accountElement.nativeElement.focus();
-      }
+      this.accountElement.nativeElement.focus();
     }, 0);
   }
 
@@ -309,7 +287,7 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
     }
     const oldFiltered = this.voucher.inventories.filter((x) => x.batch?.sku.id === (this.product as ProductSku).id);
     if (oldFiltered.length) {
-      this.toaster.show('Danger', 'Product already added');
+      this.snackBar.open('Product already added', 'Danger');
       return;
     }
     this.voucher.inventories.push(
@@ -333,9 +311,7 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
     this.form.controls.addRow.controls.tax.enable();
     this.form.controls.addRow.controls.discount.enable();
     setTimeout(() => {
-      if (this.productElement) {
-        this.productElement.nativeElement.focus();
-      }
+      this.productElement.nativeElement.focus();
     }, 0);
   }
 
@@ -387,10 +363,10 @@ export class PurchaseComponent 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');
       },
     });
   }
@@ -399,7 +375,7 @@ export class PurchaseComponent 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 {
@@ -407,7 +383,7 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
         }
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }
@@ -425,11 +401,11 @@ export class PurchaseComponent 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(['/purchase'], { replaceUrl: true });
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }