add selectable topping defaultId

client/src/app/features/recipes/recipe-details/recipe-details.component.ts

@@ -159,6 +159,9 @@ export class RecipeDetailsComponent implements OnInit {
         recipes: [
           ...(this.repl.length <= 0 ? [] : this.repl)
         ],
+        ToppingSet: [
+          ...(this.tpl.length <= 0 ? [] : this.tpl)
+        ]
       }
 
 
@@ -221,7 +224,7 @@ export class RecipeDetailsComponent implements OnInit {
   }
 
   onToppingListChange(tpl: unknown[]) {
-    // console.log('Topping List Form Changed', tpl);
+    console.log('Topping List Form Changed', tpl);
     this.tpl = tpl as never[];
     this.isValueChanged ||= tpl != undefined;
 

client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.html

@@ -1,5 +1,4 @@
 <table class="table" [formGroup]="toppingForm">
-
   <thead>
     <tr>
       <th>Slot (Material Id)</th>
@@ -13,22 +12,40 @@
     formArrayName="toppingList"
     *ngFor="let topping of toppingList.controls; let i = index"
   >
-  <tr class="bg-white la border-b hover:bg-secondary" formGroupName="{{ i }}">
+    <tr class="bg-white la border-b hover:bg-secondary" formGroupName="{{ i }}">
-      <td class="px-6 py-4"> {{i+1}} ({{8110+i+1}}) </td>
+      <td class="px-6 py-4">{{ i + 1 }} ({{ 8110 + i + 1 }})</td>
-      <td class="px-6 py-4"> <input type="checkbox" class="toggle" formControlName="isUse" /> </td>
       <td class="px-6 py-4">
-      <ng-select [compareWith]="this.compareFunc" formControlName="groupID">
+        <input type="checkbox" class="toggle" formControlName="isUse" />
-        <ng-option *ngFor="let item of allToppingsDefinitions" [value]="item.groupId.toString()">{{ item.name }}</ng-option>
-      </ng-select>
       </td>
       <td class="px-6 py-4">
-        <input type="text" class="input" formControlName="defaultIDSelect" />
+        <ng-select
-        <!-- link with groupId -->
+          [clearable]="false"
-      </td>
+          [compareWith]="this.compareFunc"
+          formControlName="groupID"
+        >
+          <ng-option
+            *ngFor="let item of allToppingsDefinitions"
+            [value]="item.groupId.toString()"
+            >{{ item.name }} ({{ item.groupId }})</ng-option
+          >
+        </ng-select>
 
+
+      </td>
+      <td class="px-6 py-4">
+        <ng-select
+          [clearable]="false"
+          [compareWith]="this.compareFunc"
+          formControlName="defaultIDSelect"
+        >
+          <ng-option
+            *ngFor="let item of getMembersByGroupId(getGroupIdByIndex(i))"
+            [value]="item.id.toString()"
+            >{{ item.name }} ({{ item.id }})</ng-option
+          >
+        </ng-select>
+      </td>
       <!-- ListGroupID -->
-
+    </tr>
-      </tr>
   </tbody>
-
 </table>

client/src/app/features/recipes/recipe-details/recipe-toppingset/recipe-toppingset.component.ts

@@ -1,8 +1,18 @@
 import { NgFor } from '@angular/common';
 import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
-import { FormArray, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+  FormArray,
+  FormBuilder,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
 import { forEach, isEqual } from 'lodash';
-import { Topping, ToppingGroup, ToppingSet } from 'src/app/core/models/recipe.model';
+import {
+  Topping,
+  ToppingGroup,
+  ToppingList,
+  ToppingSet,
+} from 'src/app/core/models/recipe.model';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { ToppingService } from 'src/app/core/services/topping.service';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -12,7 +22,13 @@ import { CommonModule } from '@angular/common';
   selector: 'app-recipe-toppingset',
   templateUrl: './recipe-toppingset.component.html',
   standalone: true,
-  imports: [ NgFor, FormsModule, ReactiveFormsModule, CommonModule, NgSelectModule ],
+  imports: [
+    NgFor,
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+    NgSelectModule,
+  ],
 })
 export class RecipeToppingsetComponent implements OnInit {
   @Input() productCode!: string;
@@ -21,22 +37,26 @@ export class RecipeToppingsetComponent implements OnInit {
   toppingSetList: ToppingSet[] = [];
   allToppings: Topping | undefined = undefined;
 
-  allToppingsDefinitions: { groupId: string; name: string }[] | null = [];
+  allToppingsDefinitions:
+    | { groupId: string; name: string; members: string; default: string }[]
+    | null = [{ groupId: '0', name: 'none', members: '0', default: '0' }];
+
+  allToppingMembersByGroup: { id: string; members: {id:string, name:string}[] }[] = [];
 
   private _toppingSetOriginalArray!: ToppingSet[];
 
   constructor(
     private _recipeService: RecipeService,
     private _toppingService: ToppingService,
-    private _formBuilder: FormBuilder,
+    private _formBuilder: FormBuilder
   ) {}
 
-    toppingForm = this._formBuilder.group(
+  toppingForm = this._formBuilder.group(
-      {
+    {
       toppingList: this._formBuilder.array([]),
-      },
+    },
-      { updateOn: 'blur' }
+    { updateOn: 'blur' }
-    );
+  );
 
   get toppingList(): FormArray {
     return this.toppingForm.get('toppingList') as FormArray;
@@ -50,34 +70,32 @@ export class RecipeToppingsetComponent implements OnInit {
         this.productCode
       )
       .subscribe((data) => {
-        console.log("getToppingset",data);
+        console.log('getToppingset', data);
         this.toppingSetList = data;
         // this.toppingForm.patchValue({toppingList: data});
         this._toppingSetOriginalArray = data;
 
-
         data.forEach((toppingSet: ToppingSet) => {
           // console.log("getToppingset",toppingSet);
 
           // toppingSet.ListGroupID = toppingSet.ListGroupID.map((id) => id.toString());
 
           this.toppingList.push(
-              this._formBuilder.group({
+            this._formBuilder.group({
-                isUse: toppingSet.isUse,
+              isUse: toppingSet.isUse,
-                groupID: toppingSet.groupID,
+              groupID: toppingSet.groupID,
-                defaultIDSelect: toppingSet.defaultIDSelect,
+              defaultIDSelect: toppingSet.defaultIDSelect,
-                ListGroupID: toppingSet.ListGroupID,
+              ListGroupID: toppingSet.ListGroupID,
-              })
+            })
-            );
+          );
-        })
+        });
 
-        console.log("controls",this.toppingList.controls);
+        console.log('controls', this.toppingList.controls);
 
         // this.toppingSetChange.emit(this.toppingSetList);
       });
 
-
+    // fetch all toppings : group and list
-      // fetch all toppings : group and list
     this._toppingService
       .getToppings(
         this._recipeService.getCurrentCountry(),
@@ -85,79 +103,113 @@ export class RecipeToppingsetComponent implements OnInit {
       )
       .subscribe((data) => {
         this.allToppings = data;
-        console.log("allToppings",data);
+        console.log('allToppings', data);
 
         data.ToppingGroup.forEach((group: ToppingGroup) => {
-          if(this.allToppingsDefinitions != null) {
+          if (this.allToppingsDefinitions != null) {
             // this.allToppingsDefinitions = {};
-            this.allToppingsDefinitions.push({ groupId: group.groupID, name: group.name });
+            this.allToppingsDefinitions.push({
+              groupId: group.groupID,
+              name: group.name,
+              members: group.idInGroup,
+              default: group.idDefault
+            });
+
+            this.allToppingMembersByGroup.push({
+              id: group.groupID,
+              members: this.mapToppingListToMember(group.idInGroup.split(','))
+            });
           }
-        })
+        });
 
         console.log(this.allToppingsDefinitions);
+        console.log('allToppingMembersByGroup', this.allToppingMembersByGroup);
       });
 
-      this.toppingForm.valueChanges.subscribe((value) => {
+    this.toppingForm.valueChanges.subscribe((value) => {
+      //validator
+      for (let i = 0; i < value.toppingList!.length; i++) {
+        let toppingSet = value.toppingList![i] as any;
 
-        // check if list group id is not list
+        // handle null case
-        //transform
+        if (toppingSet.defaultIDSelect == null) {
-        for(let i = 0; i < value.toppingList!.length; i++) {
+          toppingSet.defaultIDSelect = 0;
-          let toppingSet = value.toppingList![i] as any;
-
-          if(!Array.isArray(toppingSet.ListGroupID)) {
-            toppingSet.ListGroupID = [
-              parseInt(toppingSet.groupID),
-              0,
-              0,
-              0
-            ];
-          }
-
-        }
-        let isDiff = !isEqual(this._toppingSetOriginalArray, value.toppingList!);
-
-        if(isDiff) {
-
-          let newToppingSetList: any[] = [];
-
-          forEach(value.toppingList!, (toppingSet:any) => {
-            toppingSet.defaultIDSelect = parseInt(toppingSet.defaultIDSelect);
-            newToppingSetList.push(toppingSet);
-          })
-
-          console.log("newToppingList", newToppingSetList);
-          this.toppingSetChange.emit(newToppingSetList as unknown[] );
-
-        } else {
-
-          console.log("newToppingListNoChange", value.toppingList);
-          this.toppingSetChange.emit([]);
         }
 
+        // handle null case
+        if (toppingSet.groupID == null) {
+          toppingSet.groupID = '0';
+        }
+
+        // handle null case
+        if (!Array.isArray(toppingSet.ListGroupID)) {
+          toppingSet.ListGroupID = [parseInt(toppingSet.groupID), 0, 0, 0];
+        }
+      }
+      let isDiff = !isEqual(this._toppingSetOriginalArray, value.toppingList!);
+
+      if (isDiff) {
+        let newToppingSetList: any[] = [];
+
+        forEach(value.toppingList!, (toppingSet: any) => {
+          // transform value
+          toppingSet.defaultIDSelect = parseInt(toppingSet.defaultIDSelect);
+
+          newToppingSetList.push(toppingSet);
+        });
+
+        console.log('newToppingList', newToppingSetList);
+        this.toppingSetChange.emit(newToppingSetList as unknown[]);
+      } else {
+        console.log('newToppingListNoChange', value.toppingList);
+        this.toppingSetChange.emit([]);
+      }
+    });
 
-      })
   }
 
   // match group id to its name
   getGroupName(groupID: string) {
-
     // check if array
-    if(Array.isArray(this.allToppings!.ToppingGroup)) {
+    if (Array.isArray(this.allToppings!.ToppingGroup)) {
-      return (this.allToppings!.ToppingGroup as ToppingGroup[]).find((group) => group.groupID == groupID)?.name;
+      return (this.allToppings!.ToppingGroup as ToppingGroup[]).find(
+        (group) => group.groupID == groupID
+      )?.name;
     } else {
       return undefined;
     }
   }
 
-  openToppingList(i: any){
+  openToppingList(i: any) {
-    console.log("select", i)
+    console.log('select', i);
   }
 
-  currentGroupId(i: any){
+  currentGroupId(i: any) {
-    console.log("currentGroupId", i);
+    console.log('currentGroupId', i);
     return (this.toppingForm.value.toppingList![i] as any).groupID as string;
   }
 
+  getMembersByGroupId(groupID: string) {
+    return this.allToppingMembersByGroup
+      .find((x) => x.id == groupID)
+      ?.members;
+  }
 
-  compareFunc = (a: any,b: any) => a.toString() === b.toString();
+  getGroupIdByIndex(i: number) {
+    return (this.toppingForm.value.toppingList![i] as any).groupID as string;
+  }
+
+  mapToppingListToMember = (mm: string[]) =>
+    mm.map((m) => {
+      // find actual topping from toppingList
+      let actualTopping = this.allToppings!.ToppingList.find((t) => t.id == m);
+
+      return {
+        id: actualTopping!.id,
+        name: actualTopping?.name == null ? m : actualTopping!.name,
+      };
+    });
+
+
+  compareFunc = (a: any, b: any) => a.toString() === b.toString();
 }