fasd

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);
-  }
 }