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

@@ -9,8 +9,8 @@
           <mat-label>Start Date</mat-label>
           <input
             matInput
+            #startDateElement
             [matDatepicker]="startDate"
-            (focus)="startDate.open()"
             formControlName="startDate"
             autocomplete="off"
           />
@@ -19,13 +19,7 @@
         </mat-form-field>
         <mat-form-field class="flex-auto">
           <mat-label>Finish Date</mat-label>
-          <input
-            matInput
-            [matDatepicker]="finishDate"
-            (focus)="finishDate.open()"
-            formControlName="finishDate"
-            autocomplete="off"
-          />
+          <input matInput [matDatepicker]="finishDate" formControlName="finishDate" autocomplete="off" />
           <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
           <mat-datepicker #finishDate></mat-datepicker>
         </mat-form-field>

overlord/src/app/employee-attendance/employee-attendance.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MatButton } from '@angular/material/button';
@@ -31,7 +31,7 @@ import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 
 import { AttendanceType } from '../attendance/attendance-type';
 import { AuthService } from '../auth/auth.service';
-import { ToasterService } from '../core/toaster.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Employee } from '../employee/employee';
 import { EmployeeService } from '../employee/employee.service';
 
@@ -81,7 +81,8 @@ import { EmployeeAttendanceService } from './employee-attendance.service';
   ],
 })
 export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
-  @ViewChild('employeeElement', { static: true }) employeeElement?: ElementRef;
+  @ViewChild('employeeElement', { static: true }) employeeElement!: ElementRef<HTMLInputElement>;
+  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
   public employeeAttendanceObservable = new BehaviorSubject<EmployeeAttendanceItem[]>([]);
   dataSource: EmployeeAttendanceDataSource = new EmployeeAttendanceDataSource(this.employeeAttendanceObservable);
 
@@ -103,11 +104,18 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
 
   employees: Observable<Employee[]>;
 
+  @HostListener('window:keydown.f2', ['$event'])
+  focusDate(event: KeyboardEvent) {
+    event.preventDefault();
+    this.startDate.nativeElement.focus();
+    this.startDate.nativeElement.select();
+  }
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private toaster: ToasterService,
+    private snackBar: MatSnackBar,
     private auth: AuthService,
     private ser: EmployeeAttendanceService,
     private employeeSer: EmployeeService,
@@ -150,9 +158,7 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     setTimeout(() => {
-      if (this.employeeElement) {
-        this.employeeElement.nativeElement.focus();
-      }
+      this.employeeElement.nativeElement.focus();
     }, 0);
   }
 
@@ -188,10 +194,10 @@ export class EmployeeAttendanceComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.save(this.getEmployeeAttendance()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }