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

@@ -7,7 +7,13 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto">
           <mat-label>Valid From</mat-label>
-          <input matInput [matDatepicker]="validFrom" formControlName="validFrom" autocomplete="off" />
+          <input
+            matInput
+            #validFromElement
+            [matDatepicker]="validFrom"
+            formControlName="validFrom"
+            autocomplete="off"
+          />
           <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
           <mat-datepicker #validFrom></mat-datepicker>
         </mat-form-field>

overlord/src/app/period/period-detail/period-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardActions } from '@angular/material/card';
@@ -9,7 +9,7 @@ import { MatInput } from '@angular/material/input';
 import { ActivatedRoute, Router } from '@angular/router';
 import moment from 'moment';
 
-import { ToasterService } from '../../core/toaster.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { Period } from '../period';
 import { PeriodService } from '../period.service';
@@ -37,6 +37,7 @@ import { PeriodService } from '../period.service';
   ],
 })
 export class PeriodDetailComponent implements OnInit {
+  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
   form: FormGroup<{
     validFrom: FormControl<Date>;
     validTill: FormControl<Date>;
@@ -44,11 +45,18 @@ export class PeriodDetailComponent implements OnInit {
 
   item: Period = new Period();
 
+  @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 ser: PeriodService,
   ) {
     this.form = new FormGroup({
@@ -76,11 +84,11 @@ export class PeriodDetailComponent implements OnInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/periods');
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }
@@ -88,11 +96,11 @@ export class PeriodDetailComponent implements OnInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/periods');
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }