fasd

bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts

@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Modifier } from '../../core/modifier';
 import { ModifierCategory } from '../../core/modifier-category';
@@ -40,7 +40,6 @@ export interface ModifierDetailFormData {
 })
 export class ModifierDetailComponent {
   private modifierCategoryService = inject(ModifierCategoryService);
-  private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);

bookie/src/app/modifiers/modifier-list/modifier-list.component.html

@@ -9,7 +9,7 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Modifier Category</mat-label>
-      <mat-select (selectionChange)="filterOn($event)">
+      <mat-select [formField]="form.menuCategory">
         <mat-option>-- All Categories --</mat-option>
         @for (mc of modifierCategories(); track mc.id) {
           <mat-option [value]="mc.id">

bookie/src/app/modifiers/modifier-list/modifier-list.component.ts

@@ -1,16 +1,21 @@
 import { CurrencyPipe } from '@angular/common';
 import { Component, inject, computed, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSelectChange, MatSelectModule } from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { RouterLink } from '@angular/router';
 
 import { ModifierCategoryService } from '../../modifier-categories/modifier-category.service';
 import { ModifierService } from '../modifier.service';
 
+export interface ModifierListFormData {
+  menuCategory: string | null;
+}
+
 @Component({
   selector: 'app-modifier-list',
   templateUrl: './modifier-list.component.html',
@@ -23,6 +28,7 @@ import { ModifierService } from '../modifier.service';
     MatOptionModule,
     MatSelectModule,
     MatTableModule,
+    FormField,
     RouterLink,
   ],
 })
@@ -34,11 +40,18 @@ export class ModifierListComponent {
   listResource = this.modifierService.list();
 
   modifierCategories = computed(() => this.modifierCategoriesResource.value() ?? []);
-  filter = signal<string>('');
+
+  formModel = signal<ModifierListFormData>({
+    menuCategory: '',
+  });
+
+  form = form(this.formModel);
+
+  menuCategoryFilter = computed(() => this.formModel().menuCategory);
 
   dataSource = computed(() => {
     const items = this.listResource.value() ?? [];
-    const cat = this.filter();
+    const cat = this.menuCategoryFilter();
     if (cat) {
       return items.filter((x) => x.modifierCategory?.id === cat);
     }
@@ -47,8 +60,4 @@ export class ModifierListComponent {
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[] = ['name', 'showInBill', 'price', 'isActive', 'modifierCategory'];
-
-  filterOn(val: MatSelectChange): void {
-    this.filter.set(val.value);
-  }
 }