toSignal via Gemini

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

@@ -1,18 +1,15 @@
 import { CurrencyPipe } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, computed, signal } from '@angular/core';
 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 { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
+import { RouterLink } from '@angular/router';
 
-import { Modifier } from '../../core/modifier';
-import { ModifierCategory } from '../../core/modifier-category';
-import { ModifierListDataSource } from './modifier-list-datasource';
+import { ModifierCategoryService } from '../../modifier-categories/modifier-category.service';
+import { ModifierService } from '../modifier.service';
 
 @Component({
   selector: 'app-modifier-list',
@@ -21,52 +18,37 @@ import { ModifierListDataSource } from './modifier-list-datasource';
   imports: [
     CurrencyPipe,
     MatButtonModule,
-
     MatFormFieldModule,
     MatIconModule,
     MatOptionModule,
     MatSelectModule,
     MatTableModule,
-    ReactiveFormsModule,
     RouterLink,
   ],
 })
-export class ModifierListComponent implements OnInit {
-  private route = inject(ActivatedRoute);
-  private router = inject(Router);
+export class ModifierListComponent {
+  private modifierService = inject(ModifierService);
+  private modifierCategoryService = inject(ModifierCategoryService);
 
-  // @ViewChild('table', { static: true }) table?: MatTable<Modifier>;
-  filter = new BehaviorSubject<string>('');
-  data: BehaviorSubject<Modifier[]> = new BehaviorSubject<Modifier[]>([]);
-  dataSource: ModifierListDataSource = new ModifierListDataSource(this.filter, this.data);
-  form: FormGroup<{
-    modifierCategory: FormControl<string | null>;
-  }>;
+  modifierCategoriesResource = this.modifierCategoryService.list();
+  listResource = this.modifierService.list();
+
+  modifierCategories = computed(() => this.modifierCategoriesResource.value() ?? []);
+  filter = signal<string>('');
+
+  dataSource = computed(() => {
+    const items = this.listResource.value() ?? [];
+    const cat = this.filter();
+    if (cat) {
+      return items.filter((x) => x.modifierCategory?.id === cat);
+    }
+    return items;
+  });
 
-  list: Modifier[] = [];
-  modifierCategories: ModifierCategory[] = [];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[] = ['name', 'showInBill', 'price', 'isActive', 'modifierCategory'];
 
-  constructor() {
-    this.form = new FormGroup({
-      modifierCategory: new FormControl<string | null>(''),
-    });
-    this.data.subscribe((data: Modifier[]) => {
-      this.list = data;
-    });
-  }
-
-  filterOn(val: MatSelectChange) {
-    this.filter.next(val.value);
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: Modifier[]; modifierCategories: ModifierCategory[] };
-      this.data.next(data.list);
-      this.modifierCategories = data.modifierCategories;
-    });
-    this.dataSource = new ModifierListDataSource(this.filter, this.data);
+  filterOn(val: MatSelectChange): void {
+    this.filter.set(val.value);
   }
 }