fasd

bookie/src/app/sales/modifiers/modifiers.component.html

@@ -1,6 +1,6 @@
 <mat-dialog-content>
   <mat-tab-group>
-    @for (item of list | async; track item.id) {
+    @for (item of list(); track item.id) {
       <mat-tab>
         <ng-template matTabLabel>
           <span>{{ item.name }}</span>
@@ -19,8 +19,8 @@
               class="flex-col square-button"
               matRipple
               (click)="select(m)"
-              [class.primary]="selectedIds.indexOf(m.id) === -1"
-              [class.strong-primary]="selectedIds.indexOf(m.id) !== -1"
+              [class.primary]="selectedIds().indexOf(m.id) === -1"
+              [class.strong-primary]="selectedIds().indexOf(m.id) !== -1"
             >
               <h3>{{ m.name }}</h3>
             </mat-card>
@@ -31,5 +31,5 @@
   </mat-tab-group>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-  <button mat-button [mat-dialog-close]="selected">Done</button>
+  <button mat-button [mat-dialog-close]="selected()">Done</button>
 </mat-dialog-actions>

bookie/src/app/sales/modifiers/modifiers.component.ts

@@ -1,6 +1,6 @@
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import { AsyncPipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { Component, inject, signal, computed } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -18,7 +18,6 @@ import { ModifierCategory } from '../../core/modifier-category';
   templateUrl: './modifiers.component.html',
   styleUrls: ['./modifiers.component.sass'],
   imports: [
-    AsyncPipe,
     CdkScrollable,
     MatBadgeModule,
     MatButtonModule,
@@ -35,25 +34,17 @@ export class ModifiersComponent {
     selected: Modifier[];
   }>(MAT_DIALOG_DATA);
 
-  list: Observable<ModifierCategory[]>;
-  selected: Modifier[];
-  selectedIds: (string | undefined)[];
-
-  constructor() {
-    const data = this.data;
-
-    this.list = data.list;
-    this.selected = data.selected;
-    this.selectedIds = this.selected.map((e) => e.id);
-  }
+  list = toSignal(this.data.list, { initialValue: [] });
+  selected = signal<Modifier[]>(this.data.selected ? [...this.data.selected] : []);
+  selectedIds = computed(() => this.selected().map((e) => e.id));
 
   select(m: Modifier) {
-    const index = this.selectedIds.indexOf(m.id);
-    if (index === -1) {
-      this.selected.push(m);
-    } else {
-      this.selected.splice(index, 1);
-    }
-    this.selectedIds = this.selected.map((e) => e.id);
+    this.selected.update((list) => {
+      const index = list.findIndex((e) => e.id === m.id);
+      if (index === -1) {
+        return [...list, m];
+      }
+      return list.filter((e) => e.id !== m.id);
+    });
   }
 }