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/issue/issue.component.html

@@ -7,14 +7,7 @@
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto basis-[28%] mr-5">
           <mat-label>Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="date"
-            formControlName="date"
-            autocomplete="off"
-            #dateElement
-            (focus)="dateElement.select()"
-          />
+          <input matInput [matDatepicker]="date" formControlName="date" autocomplete="off" #dateElement />
           <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
           <mat-datepicker #date></mat-datepicker>
         </mat-form-field>

overlord/src/app/issue/issue.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe, DecimalPipe, 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';
@@ -32,7 +32,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';
@@ -44,7 +43,7 @@ import { BatchService } from '../core/batch.service';
 import { CostCentre } from '../core/cost-centre';
 import { Inventory } from '../core/inventory';
 import { IssueGridItem } from '../core/issue-grid-item';
-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';
@@ -102,9 +101,25 @@ import { IssueGridService } from './issue-grid.service';
     LocalTimePipe,
   ],
 })
-export class IssueComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('batchElement', { static: true }) batchElement?: ElementRef;
-  @ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
+export class IssueComponent implements OnInit, AfterViewInit {
+  @ViewChild('batchElement', { static: true }) batchElement!: ElementRef<HTMLInputElement>;
+  @ViewChild('dateElement', { static: true }) dateElement!: 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();
+    }
+  }
+
   public inventoryObservable = new BehaviorSubject<Inventory[]>([]);
   public gridObservable = new BehaviorSubject<IssueGridItem[]>([]);
   dataSource: IssueDataSource = new IssueDataSource(this.inventoryObservable);
@@ -134,8 +149,7 @@ export class IssueComponent implements OnInit, AfterViewInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private hotkeys: HotkeysService,
-    private toaster: ToasterService,
+    private snackBar: MatSnackBar,
     private auth: AuthService,
     private math: MathService,
     private ser: VoucherService,
@@ -177,42 +191,12 @@ export class IssueComponent implements OnInit, AfterViewInit, OnDestroy {
       this.costCentres = data.costCentres;
       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'],
-      ),
-    );
   }
 
   ngAfterViewInit() {
     this.focusBatch();
   }
 
-  ngOnDestroy() {
-    this.hotkeys.reset();
-  }
-
   loadVoucher(voucher: Voucher) {
     this.voucher = voucher;
     this.form.setValue({
@@ -232,9 +216,7 @@ export class IssueComponent implements OnInit, AfterViewInit, OnDestroy {
 
   focusBatch() {
     setTimeout(() => {
-      if (this.batchElement) {
-        this.batchElement.nativeElement.focus();
-      }
+      this.batchElement.nativeElement.focus();
     }, 0);
   }
 
@@ -251,13 +233,13 @@ export class IssueComponent implements OnInit, AfterViewInit, OnDestroy {
     const old = this.voucher.inventories.find((x) => x.batch.id === (this.batch as Batch).id);
     if (old !== undefined) {
       if (isConsumption && old.quantity + quantity > this.batch.quantityRemaining) {
-        this.toaster.show('Danger', 'Quantity issued cannot be more than quantity available');
+        this.snackBar.open('Quantity issued cannot be more than quantity available', 'Danger');
         return;
       }
       old.quantity += quantity;
     } else {
       if (isConsumption && quantity > this.batch.quantityRemaining) {
-        this.toaster.show('Danger', 'Quantity issued cannot be more than quantity available');
+        this.snackBar.open('Quantity issued cannot be more than quantity available', 'Danger');
         return;
       }
       this.voucher.inventories.push(
@@ -279,9 +261,7 @@ export class IssueComponent implements OnInit, AfterViewInit, OnDestroy {
     this.form.controls.addRow.reset();
     this.batch = null;
     setTimeout(() => {
-      if (this.batchElement) {
-        this.batchElement.nativeElement.focus();
-      }
+      this.batchElement.nativeElement.focus();
     }, 0);
   }
 
@@ -335,7 +315,7 @@ export class IssueComponent 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 {
@@ -343,7 +323,7 @@ export class IssueComponent implements OnInit, AfterViewInit, OnDestroy {
         }
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }
@@ -364,11 +344,11 @@ export class IssueComponent 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(['/issue'], { replaceUrl: true });
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }