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

@@ -7,14 +7,7 @@
       <div class="flex flex-row justify-around content-start items-start">
         <mat-form-field class="flex-auto 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/recipe/recipe-detail/recipe-detail.component.ts

@@ -31,7 +31,7 @@ import { Period } from 'src/app/period/period';
 
 import { Product } from '../../core/product';
 import { ProductSku } from '../../core/product-sku';
-import { ToasterService } from '../../core/toaster.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ProductService } from '../../product/product.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { MathService } from '../../shared/math.service';
@@ -82,8 +82,8 @@ import { RecipeDetailDatasource } from './recipe-detail-datasource';
   ],
 })
 export class RecipeDetailComponent implements OnInit, AfterViewInit {
-  @ViewChild('productElement', { static: true }) productElement?: ElementRef;
-  @ViewChild('ingredientElement', { static: true }) ingredientElement?: ElementRef;
+  @ViewChild('productElement', { static: true }) productElement!: ElementRef<HTMLInputElement>;
+  @ViewChild('ingredientElement', { static: true }) ingredientElement!: ElementRef<HTMLInputElement>;
   public itemsObservable = new BehaviorSubject<RecipeItem[]>([]);
   dataSource: RecipeDetailDatasource = new RecipeDetailDatasource(this.itemsObservable);
   form: FormGroup<{
@@ -114,7 +114,7 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
-    private toaster: ToasterService,
+    private snackBar: MatSnackBar,
     private math: MathService,
     private ser: RecipeService,
     private productSer: ProductService,
@@ -182,9 +182,7 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     setTimeout(() => {
-      if (this.productElement) {
-        this.productElement.nativeElement.focus();
-      }
+      this.productElement.nativeElement.focus();
     }, 0);
   }
 
@@ -218,7 +216,7 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
     }
     const oldFiltered = this.item.items.filter((x) => x.product.id === (this.ingredient as ProductSku).id);
     if (oldFiltered.length) {
-      this.toaster.show('Danger', 'Product already added');
+      this.snackBar.open('Product already added', 'Danger');
       return;
     }
     this.item.items.push(
@@ -236,9 +234,7 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
     this.form.controls.addRow.reset();
     this.ingredient = null;
     setTimeout(() => {
-      if (this.ingredientElement) {
-        this.ingredientElement.nativeElement.focus();
-      }
+      this.ingredientElement.nativeElement.focus();
     }, 0);
   }
 
@@ -254,11 +250,11 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/recipes');
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }
@@ -266,11 +262,11 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigate(['/recipes']);
       },
       error: (error) => {
-        this.toaster.show('Danger', error);
+        this.snackBar.open(error, 'Danger');
       },
     });
   }

overlord/src/app/recipe/recipe-list/recipe-list.component.ts

@@ -65,8 +65,8 @@ import { RecipeListDatasource } from './recipe-list-datasource';
   ],
 })
 export class RecipeListComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort?: MatSort;
+  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort!: MatSort;
   form: FormGroup<{
     period: FormControl<Period>;
     productGroup: FormControl<ProductGroup | string | null>;
@@ -75,10 +75,16 @@ export class RecipeListComponent implements OnInit {
   productGroups: ProductGroup[] = [];
   periods: Period[] = [];
   periodFilter: BehaviorSubject<Period> = new BehaviorSubject<Period>(new Period());
-  productGroupFilter: BehaviorSubject<string> = new BehaviorSubject('');
+  productGroupFilter = new BehaviorSubject<string>('');
   list: Recipe[] = [];
   data: BehaviorSubject<Recipe[]> = new BehaviorSubject<Recipe[]>([]);
-  dataSource: RecipeListDatasource = new RecipeListDatasource(this.productGroupFilter, this.data);
+  dataSource: RecipeListDatasource = new RecipeListDatasource(
+    this.productGroupFilter,
+    this.data,
+    this.paginator,
+    this.sort,
+  );
+
   period: Period = new Period();
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */