Modifiers issues

bookie/src/app/sales/bill.service.ts

@@ -152,7 +152,7 @@ export class BillService {
       },
       data: {
         list: this.modifierCategoryService.listForProduct(item.product.id as string),
-        selected: item.modifiers,
+        selected: Object.assign([], item.modifiers),
       },
     });
 
@@ -160,8 +160,8 @@ export class BillService {
       if (result !== undefined) {
         item.modifiers = result;
       }
+      this.displayBill();
     });
-    this.displayBill();
   }
 
   addOne(item: BillViewItem): void {

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

@@ -66,7 +66,7 @@
             {{ row.info }}
           </span>
           <ul>
-            @for (m of row.modifiers; track m) {
+            @for (m of row.modifiers; track m.id) {
               <li>{{ m.name }}</li>
             }
           </ul>

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

@@ -1,26 +1,11 @@
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
-import { MatCard, MatCardHeader, MatCardTitle, MatCardContent } from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIcon } from '@angular/material/icon';
-import {
+import { MatTableModule } from '@angular/material/table';
-  MatTable,
-  MatColumnDef,
-  MatHeaderCellDef,
-  MatHeaderCell,
-  MatCellDef,
-  MatCell,
-  MatHeaderRowDef,
-  MatHeaderRow,
-  MatRowDef,
-  MatRow,
-  MatFooterRowDef,
-  MatFooterRow,
-  MatFooterCellDef,
-  MatFooterCell,
-} from '@angular/material/table';
 import { MatTooltip } from '@angular/material/tooltip';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { Observable } from 'rxjs';
@@ -51,29 +36,12 @@ import { VoucherType } from './voucher-type';
   templateUrl: './bills.component.html',
   styleUrls: ['./bills.component.sass'],
   imports: [
-    MatCard,
+    MatCardModule,
-    MatCardHeader,
+    MatTableModule,
-    MatCardTitle,
-    MatCardContent,
-    MatTable,
-    MatColumnDef,
-    MatHeaderCellDef,
-    MatHeaderCell,
     MatTooltip,
-    MatButton,
+    MatButtonModule,
-    MatCellDef,
-    MatCell,
     MatCheckbox,
-    MatIconButton,
     MatIcon,
-    MatHeaderRowDef,
-    MatHeaderRow,
-    MatRowDef,
-    MatRow,
-    MatFooterRowDef,
-    MatFooterRow,
-    MatFooterCellDef,
-    MatFooterCell,
     RouterOutlet,
     AsyncPipe,
     CurrencyPipe,

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

@@ -14,7 +14,7 @@
           </mat-chip-listbox>
         </ng-template>
         <div class="flex flex-row flex-wrap -mr-5 -mb-5">
-          @for (m of item.modifiers; track m) {
+          @for (m of item.modifiers; track m.id) {
             <mat-card
               class="flex flex-col square-button mr-5, mb-5"
               matRipple

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

@@ -3,10 +3,10 @@ import { Component, Inject } from '@angular/core';
 import { MatBadge } from '@angular/material/badge';
 import { MatButton } from '@angular/material/button';
 import { MatCard } from '@angular/material/card';
-import { MatChipListbox, MatChipOption } from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
 import { MatRipple } from '@angular/material/core';
-import { MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { MatTabGroup, MatTab, MatTabLabel } from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { Observable } from 'rxjs';
 
 import { Modifier } from '../../core/modifier';
@@ -16,21 +16,7 @@ import { ModifierCategory } from '../../core/modifier-category';
   selector: 'app-modifiers',
   templateUrl: './modifiers.component.html',
   styleUrls: ['./modifiers.component.css'],
-  imports: [
+  imports: [CdkScrollable, MatDialogModule, MatTabsModule, MatChipsModule, MatBadge, MatCard, MatRipple, MatButton],
-    CdkScrollable,
-    MatDialogContent,
-    MatTabGroup,
-    MatTab,
-    MatTabLabel,
-    MatChipListbox,
-    MatBadge,
-    MatChipOption,
-    MatCard,
-    MatRipple,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
-  ],
 })
 export class ModifiersComponent {
   list: ModifierCategory[] = [];