addable & removable recipelist | savable topping & material WIP

client/src/app/core/models/recipe.model.ts

@@ -166,26 +166,31 @@ export interface ToppingSet {
 }
 
 export interface MaterialSetting {
-  StringParam: string,
+  materialName: string;
+  materialId: number;
+  materialOtherName: string;
+  RawMaterialUnit: string;
+  IceScreamBingsuChannel: boolean;
+  StringParam: string;
   AlarmIDWhenOffline: string;
-  BeanChannel: string;
+  BeanChannel: boolean;
   CanisterType: string;
   DrainTimer: string;
-  IsEquipment: string;
+  IsEquipment: boolean;
-  LeavesChannel: string;
+  LeavesChannel: boolean;
   LowToOffline: string;
   MaterialStatus: string;
-  PowderChannel: string;
+  PowderChannel: boolean;
   RefillUnitGram: string;
   RefillUnitMilliliters: string;
   RefillUnitPCS: string;
   ScheduleDrainType: string;
   SodaChannel: string;
   StockAdjust: string;
-  SyrupChannel: string;
+  SyrupChannel: boolean;
-  id: string;
+  id: number;
-  idAlternate: string;
+  idAlternate: number;
-  isUse: string;
+  isUse: boolean;
   pay_rettry_max_count: string;
   feed_mode: string;
   MaterialParameter: string;

client/src/app/features/material-settings/material-settings.component.html

@@ -1,9 +1,20 @@
-<div class="overflow-auto h-[90vh] w-[85vw]">
+<div class="flex sticky top-10 p-2 space-x-2 items-center">
+  <p class="m-4 font-bold text-lg">Material Settings</p>
+  <button class="btn m-4">New Category</button>
+</div>
+
+<div class="overflow-auto h-[80vh] w-[85vw]">
   <div class="m-4 w-[90%]" *ngFor="let cat of getCategories()">
     <details class="bg-stone-300 p-4 collapse collapse-arrow">
-      <summary class="font-bold text-lg collapse-title">{{ cat }}</summary>
+      <summary class="font-bold text-lg collapse-title">
+        {{ cat }}
+      </summary>
 
       <div class="collapse-content">
+        <button class="btn">New {{ cat }} material</button>
+
+        <div class="divider"></div>
+
         <div class="grid grid-flow-row grid-cols-7 gap-4">
           <div
             class="m-1"
@@ -11,10 +22,151 @@
           >
             <button
               class="bg-slate-100 p-2 rounded-md w-44"
-              (click)="getMaterialSettingsById(material.id)"
+              (click)="openMaterialSettingModal(material.id)"
             >
               <p>{{ material.name }} ({{ material.id }})</p>
             </button>
+            <dialog
+              id="material_settings_modal_{{ material.id }}"
+              class="modal"
+            >
+              <div class="modal-box max-w-5xl">
+
+                <div *ngIf="currentMaterialSettings != null" [formGroup]="materialSettingForm">
+                  <p>Material Settings</p>
+
+                  <!-- TODO: add form -->
+
+                  <div class="divider"></div>
+                  <div formArrayName="materialSetting" *ngFor="let material of materialSetting.controls; let i = index">
+                    <!-- only show the current form matched by index -->
+                    <div formGroupName="{{i}}">
+                      <div class="" *ngIf="i == currentFormIndex">
+
+                        <!-- <p>Form at {{i}}</p> -->
+
+                        <table class="table">
+                          <thead>
+                            <tr>
+                              <th>Is Use</th>
+                              <th>ID</th>
+                              <th>ID Alternate</th>
+                              <th>Name</th>
+                              <th>Other Name</th>
+
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr>
+
+                              <td>
+                                <input class="toggle" type="checkbox" formControlName="isUse" />
+                              </td>
+
+                              <td>
+                                <input class="input input-sm input-bordered" formControlName="id" />
+                              </td>
+
+                              <td>
+                                <input class="input input-sm input-bordered" formControlName="idAlternate" />
+                              </td>
+
+
+                              <td>
+                                <input class="input input-sm input-bordered" formControlName="materialName" />
+                              </td>
+
+                              <td>
+                                <input class="input input-sm input-bordered" formControlName="materialOtherName" />
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+
+
+                        <!-- <input class="input input-sm input-bordered" formControlName="RawMaterialUnit" />
+                        <input class="input input-sm input-bordered" formControlName="MaterialParameter" />
+                        <input class="input input-sm input-bordered" formControlName="id" />
+                        <input class="input input-sm input-bordered" formControlName="idAlternate" />
+                        <input class="input input-sm input-bordered" formControlName="pay_rettry_max_count" />
+                        <input class="input input-sm input-bordered" formControlName="feed_mode" />
+                        <input class="input input-sm input-bordered" formControlName="MaterialStatus" /> -->
+
+                        <div class="divider"></div>
+
+                        <!-- channels -->
+
+                        <div class="bg-stone-500 p-2 rounded-md text-white">
+
+                          <div class="flex space-x-2 justify-evenly">
+                            <div class="justify-center">
+                              <p class="font-bold">Powder</p>
+                              <input class="checkbox checkbox-info" type="checkbox" formControlName="PowderChannel" />
+                            </div>
+
+                            <div class="justify-center">
+                              <p class="font-bold">Syrup</p>
+                              <input class="checkbox checkbox-info" type="checkbox" formControlName="SyrupChannel" />
+                            </div>
+
+                            <div class="justify-center">
+                              <p class="font-bold">Bean</p>
+                              <input class="checkbox checkbox-info" type="checkbox" formControlName="BeanChannel" />
+                            </div>
+
+                            <div class="justify-center">
+                              <p class="font-bold">Soda</p>
+                              <input class="checkbox checkbox-info" type="checkbox" formControlName="SodaChannel" />
+                            </div>
+
+                            <div class="justify-center">
+                              <p class="font-bold">Equipment</p>
+                              <input class="checkbox checkbox-info" type="checkbox" formControlName="IsEquipment" />
+                            </div>
+
+                            <div class="justify-center">
+                              <p class="font-bold">Leaves</p>
+                              <input class="checkbox checkbox-info" type="checkbox" formControlName="LeavesChannel" />
+                            </div>
+
+                            <div class="justify-center">
+                              <p class="font-bold">Ice Cream</p>
+                              <input class="checkbox checkbox-info" type="checkbox" formControlName="IceScreamBingsuChannel" />
+                            </div>
+                          </div>
+
+                        </div>
+
+
+
+
+
+
+                        <!-- <input class="input input-sm input-bordered" formControlName="StringParam" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="AlarmIDWhenOffline" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="CanisterType" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="DrainTimer" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="LowToOffline" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="MaterialStatus" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="RefillUnitGram" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="RefillUnitMilliliters" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="RefillUnitPCS" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="ScheduleDrainType" /> -->
+                        <!-- <input class="input input-sm input-bordered" formControlName="StockAdjust" /> -->
+
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+
+                <div class="modal-action sticky bottom-0 right-0">
+                  <form method="dialog">
+                    <button class="btn btn-warning">Close</button>
+                  </form>
+                </div>
+              </div>
+            </dialog>
           </div>
         </div>
       </div>
@@ -22,66 +174,4 @@
   </div>
 </div>
 
-
 <!-- 0: "StringParam"1: "AlarmIDWhenOffline"2: "BeanChannel"3: "CanisterType"4: "DrainTimer"5: "IceScreamBingsuChannel"6: "IsEquipment"7: "LeavesChannel"8: "LowToOffline"9: "MaterialStatus"10: "PowderChannel"11: "RefillUnitGram"12: "RefillUnitMilliliters"13: "RefillUnitPCS"14: "ScheduleDrainType"15: "SodaChannel"16: "StockAdjust"17: "SyrupChannel"18: "id"19: "idAlternate"20: "isUse"21: "pay_rettry_max_count"22: "feed_mode"23: "MaterialParameter"24: "materialName"25: "materialOtherName"26: "RawMaterialUnit" -->
-
-<!-- open material settings modal -->
-<div *ngIf="currentMaterialSettings != null">
-  <input
-    type="checkbox"
-    id="material_settings_modal"
-    class="modal-toggle"
-    #checkBox="ngModel"
-    [(ngModel)]="showMaterialSettingModal"
-    (close)="currentMaterialSettings = null"
-  />
-  <label for="material_settings_modal" class="modal">
-    <div class="modal-box max-w-5xl">
-      <p>Material Settings</p>
-
-      <input type="checkbox" value="{{currentMaterialSettings.isUse == 'true' ? true : false}}">
-
-
-      <p>{{ currentMaterialSettings.materialName }}</p>
-      <p>{{ currentMaterialSettings.materialId }}</p>
-      <p>{{ currentMaterialSettings.materialOtherName }}</p>
-
-      <p>Status {{ currentMaterialSettings.MaterialStatus }}</p>
-      <p>CanisterType {{ currentMaterialSettings.CanisterType }}</p>
-      <p>AlarmIDWhenOffline {{ currentMaterialSettings.AlarmIDWhenOffline }}</p>
-      <p>ScheduleDrainType {{ currentMaterialSettings.ScheduleDrainType }}</p>
-      <p>LowToOffline {{ currentMaterialSettings.LowToOffline }}</p>
-
-      <p>StockAdjust {{ currentMaterialSettings.StockAdjust }}</p>
-
-      <p>pay_rettry_max_count {{ currentMaterialSettings.pay_rettry_max_count }}</p>
-      <!-- Material Param -->
-      <div
-        class="bg-green-200 rounded-md p-4"
-      >
-        <p>StringParam {{ currentMaterialSettings.StringParam }}</p>
-        <p>Parameter {{ currentMaterialSettings.MaterialParameter }}</p>
-        <p>RawMaterialUnit {{ currentMaterialSettings.RawMaterialUnit }}</p>
-
-      </div>
-
-      <!-- Types -->
-      <div class="bg-amber-300 rounded-md p-4">
-        <p>IsEquipment? {{ currentMaterialSettings.IsEquipment }}</p>
-        <p>Bean? {{ currentMaterialSettings.BeanChannel }}</p>
-        <p>Powder? {{ currentMaterialSettings.PowderChannel }}</p>
-        <p>Syrup? {{ currentMaterialSettings.SyrupChannel }}</p>
-        <p>Soda? {{ currentMaterialSettings.SodaChannel }}</p>
-        <p>Leaves? {{ currentMaterialSettings.LeavesChannel }}</p>
-        <p>IceScreamBingsu? {{ currentMaterialSettings.IceScreamBingsuChannel }}</p>
-      </div>
-
-      <!-- Refill -->
-      <div class="bg-blue-200 rounded-md p-4">
-        <p>RefillUnitGram? {{ currentMaterialSettings.RefillUnitGram }}</p>
-        <p>RefillUnitMilliliters? {{ currentMaterialSettings.RefillUnitMilliliters }}</p>
-        <p>RefillUnitPCS? {{ currentMaterialSettings.RefillUnitPCS }}</p>
-      </div>
-    </div>
-  </label>
-</div>

client/src/app/features/material-settings/material-settings.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule, NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormArray, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MaterialSetting } from 'src/app/core/models/recipe.model';
 import { MaterialService } from 'src/app/core/services/material.service';
 import { getCategories, getMaterialType } from 'src/app/shared/helpers/recipe';
 
@@ -21,23 +22,36 @@ export class MaterialSettingsComponent implements OnInit {
       }[]
     | null = [];
   allMaterialsGroupedByTypes: { [key: string]: any[] } = {};
-  currentMaterialSettings: any = null;
+  currentMaterialSettings: MaterialSetting | undefined = undefined;
   showMaterialSettingModal: boolean = false;
 
-  constructor(private _materialService: MaterialService) {}
+  // current form index
+  currentFormIndex: number | undefined = undefined;
+
+  // mandatory form
+  materialSettingForm = this.formBuilder.group({
+    materialSetting: this.formBuilder.array([]),
+  }, { updateOn: 'blur' });
+
+  // getter
+  get materialSetting() {
+    return this.materialSettingForm.get('materialSetting') as FormArray;
+  }
+
+  constructor(private _materialService: MaterialService, private formBuilder: FormBuilder) {}
 
   async ngOnInit(): Promise<void> {
     // do fetch material settings
     (await this._materialService.getFullMaterialDetail()).subscribe((data) => {
       this.allMaterials = data;
-      this.allMaterialsGroupedByTypes = this.ListCategory();
+      this.allMaterialsGroupedByTypes = this.listCategory();
     });
   }
 
   // ------------------ Functions ---------------------
 
   // filter material by type
-  ListCategory = () => {
+  listCategory = () => {
     let catMap: { [key: string]: any[] } = {
       others: [],
     };
@@ -82,16 +96,93 @@ export class MaterialSettingsComponent implements OnInit {
     return catList;
   };
 
-  // get material settings by id
+
-  async getMaterialSettingsById(id: number) {
+  createMaterialSettingFormGroup(mat_set: MaterialSetting){
-    // Implementation goes here
+    return this.formBuilder.group({
-    (await this._materialService.getMaterialSettingById(id)).subscribe(
+      materialName: mat_set.materialName,
+      materialId: mat_set.materialId,
+      materialOtherName: mat_set.materialOtherName,
+      RawMaterialUnit: mat_set.RawMaterialUnit,
+      IceScreamBingsuChannel: mat_set.IceScreamBingsuChannel,
+      StringParam: mat_set.StringParam,
+      AlarmIDWhenOffline: mat_set.AlarmIDWhenOffline,
+      BeanChannel: mat_set.BeanChannel,
+      CanisterType: mat_set.CanisterType,
+      DrainTimer: mat_set.DrainTimer,
+      IsEquipment: mat_set.IsEquipment,
+      LeavesChannel: mat_set.LeavesChannel,
+      LowToOffline: mat_set.LowToOffline,
+      MaterialStatus: mat_set.MaterialStatus,
+      PowderChannel: mat_set.PowderChannel,
+      RefillUnitGram: mat_set.RefillUnitGram,
+      RefillUnitMilliliters: mat_set.RefillUnitMilliliters,
+      RefillUnitPCS: mat_set.RefillUnitPCS,
+      ScheduleDrainType: mat_set.ScheduleDrainType,
+      SodaChannel: mat_set.SodaChannel,
+      StockAdjust: mat_set.StockAdjust,
+      SyrupChannel: mat_set.SyrupChannel,
+      id: mat_set.id,
+      idAlternate: mat_set.idAlternate,
+      isUse: mat_set.isUse,
+      pay_rettry_max_count: mat_set.pay_rettry_max_count,
+      feed_mode: mat_set.feed_mode,
+      MaterialParameter: mat_set.MaterialParameter
+    });
+  }
+
+  // open material id modal
+  async openMaterialSettingModal(id: string){
+    // set current material
+    (await this._materialService.getMaterialSettingById(parseInt(id))).subscribe(
       (data) => {
         this.currentMaterialSettings = data;
-        this.showMaterialSettingModal = true;
+
-        console.log('material setting', data);
+        // do create form, if not exist
+        //   - find matching form
+        //   - if not exist, create new form
+        let pushableFlag = false;
+        let foundFlag = false;
+        // this.materialSetting.controls.forEach((control, index) => {
+        //   console.log("different id", "checkon value", control.value,control.value.id, id);
+
+        //   if(foundFlag){
+        //     continue;
+        //   }
+
+        //   if (control == undefined ||(control.value as any).id == id) {
+        //     pushableFlag = false;
+        //     foundFormIndex = index;
+        //   } else {
+        //     // set to last index, if not found. Meaning this is new form
+        //     foundFormIndex = this.materialSetting.length;
+        //   }
+        // });
+
+        // filter find index
+        let foundFormIndex = this.materialSetting.controls.findIndex((control) => {
+          return (control.value as any).id == id
+        });
+
+        console.log("found form index", foundFormIndex);
+
+        if(foundFormIndex < 0){
+          foundFormIndex = this.materialSetting.length - 1 < 0 ? 0 : this.materialSetting.length;
+
+          pushableFlag = true;
+        }
+
+        if(pushableFlag){
+          this.materialSetting.push(this.createMaterialSettingFormGroup(data));
+          console.log('push new form', this.materialSetting);
+        }
+
+        // export index
+        this.currentFormIndex = foundFormIndex;
+
+        console.log('material setting', data, "at index", foundFormIndex, "current form index", this.currentFormIndex);
         // console.log("keys of material settings", Object.keys(data));
         console.log('material setting', data.isUse, typeof data.isUse);
+        (document.getElementById("material_settings_modal_"+id) as any)!.showModal();
       }
     );
   }

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

@@ -133,7 +133,7 @@
         >
           <app-recipe-list
             [productCode]="productCode"
-            [isSubMenu]="false"
+            [noFetch]="false"
             (recipeListFormChange)="onRecipeListFormChange($event)"
           ></app-recipe-list>
         </div>

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

@@ -13,8 +13,13 @@
     *ngFor="let mat of recipeListData.controls; let i = index"
   >
     <tr
-      class="bg-white border-b hover:bg-secondary max-h-4"
+      class="bg-white border-b  max-h-4"
+      [ngClass]="{
+        'bg-red-400': selectedRecipeList.includes(i)
+      }"
+
       formGroupName="{{ i }}"
+      (click)="addToSelection(i)"
       (mousedown)="initHoldEvent()"
       (mouseup)="openRecipeListEditor(i)"
     >
@@ -189,6 +194,10 @@
     </tr>
   </tbody>
 </table>
+<div class="justify-center w-full flex flex-row sticky bottom-0">
+  <button class="btn w-1/2" (click)="addRow()">Add</button>
+  <button class="btn w-1/2" (click)="removeRow()">Remove</button>
+</div>
 
 <!-- show string param modal -->
 
@@ -396,7 +405,7 @@
   [(ngModel)]="showMaterialSelector"
 />
 <label for="material_selector" class="modal">
-  <div class="modal-box max-h-[400px] overflow-scroll">
+  <div class="modal-box max-h-[75vh] overflow-scroll">
     <div class="flex flex-row m-2 modal">
       <p class="font-bold text-lg m-2">Materials</p>
     </div>

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

@@ -1,4 +1,4 @@
-import { NgFor, NgIf } from '@angular/common';
+import { CommonModule, NgFor, NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, OnInit, Output, ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR } from '@angular/core';
 import {
   FormArray,
@@ -8,7 +8,7 @@ import {
   NgModel,
   ReactiveFormsModule,
 } from '@angular/forms';
-import { forEach, isBoolean, isEqual, sortBy } from 'lodash';
+import { forEach, isBoolean, isEqual, sortBy, xorWith } from 'lodash';
 import { first } from 'rxjs';
 import { UserPermissions } from 'src/app/core/auth/userPermissions';
 import {
@@ -40,11 +40,11 @@ import Lang from 'src/app/shared/helpers/lang';
     selector: 'app-recipe-list',
     templateUrl: './recipe-list.component.html',
     standalone: true,
-    imports: [NgIf, NgFor, ReactiveFormsModule, FormsModule, RecipeToppingComponent]
+    imports: [CommonModule,NgIf, NgFor, ReactiveFormsModule, FormsModule, RecipeToppingComponent]
 })
 export class RecipeListComponent implements OnInit {
   @Input({ required: true }) productCode!: string;
-  @Input() isSubMenu: boolean = false;
+  @Input() noFetch: boolean = false;
   @Output() recipeListFormChange = new EventEmitter<unknown[]>();
 
   materialList: MaterialCode[] = [];
@@ -85,6 +85,9 @@ export class RecipeListComponent implements OnInit {
   // topping list
   public toppingList: any[] = [];
 
+  // selected recipelist
+  public selectedRecipeList: number[] = [];
+
   constructor(
     private _recipeService: RecipeService,
     private _materialService: MaterialService,
@@ -102,181 +105,153 @@ export class RecipeListComponent implements OnInit {
   private _recipeListOriginalArray!: RecipeDetailMat[];
 
   async ngOnInit(): Promise<void> {
-    (await this._recipeService
+
-      .getRecipeDetailMat(this.productCode))
+    // fetch material
-      .pipe(first())
+
-      .subscribe(({ result }) => {
+    (await
-        this._recipeListOriginalArray = result;
+      this._materialService.getMaterialCodes()).subscribe((materials) => {
-        result.forEach((recipeDetailMat: RecipeDetailMat, index: number) => {
+      this.materialList = materials;
+      // console.log("[MatService] get materials", materials.length);
+    });
+
+    (await this._materialService.getFullMaterialDetail()).subscribe((materials) => {
+      this.fullMaterialList = materials;
+      this.categoriedMaterial = this.ListCategory();
+      // console.log(this.categoriedMaterial);
+    });
 
 
-          console.log(this.recipeListData);
+    if(!this.noFetch){
+      (await this._recipeService
+        .getRecipeDetailMat(this.productCode))
+        .pipe(first())
+        .subscribe(({ result }) => {
+          this._recipeListOriginalArray = result;
+          result.forEach((recipeDetailMat: RecipeDetailMat, index: number) => {
+            // console.log(this.recipeListData);
 
-          // StringParam
+            // StringParam
-          if (
+            if (
-            recipeDetailMat.StringParam != '' ||
+              recipeDetailMat.StringParam != '' ||
-            recipeDetailMat.StringParam != null
+              recipeDetailMat.StringParam != null
-          ) {
+            ) {
-            let currStringParam = new StringParam(recipeDetailMat.StringParam);
+              let currStringParam = new StringParam(recipeDetailMat.StringParam);
-            let stringParamList = currStringParam.extract().as_list();
+              let stringParamList = currStringParam.extract().as_list();
 
-            let stringParamListTransform = [];
+              let stringParamListTransform = [];
-            for (let param of stringParamList) {
+              for (let param of stringParamList) {
-              // boolean transform
+                // boolean transform
-              if (param.pvalue == 'true') {
+                if (param.pvalue == 'true') {
-                param.pvalue = true;
+                  param.pvalue = true;
-              } else if (param.pvalue == 'false') {
+                } else if (param.pvalue == 'false') {
-                param.pvalue = false;
+                  param.pvalue = false;
+                }
+
+                stringParamListTransform.push(
+                  this._formBuilder.group({
+                    pkey: [{ value: param.pkey, disabled: !this.isEditable() }],
+                    pvalue: [
+                      { value: param.pvalue, disabled: !this.isEditable() },
+                    ],
+                  })
+                );
               }
 
-              stringParamListTransform.push(
+              this.stringParamData.push(
-                this._formBuilder.group({
+                this._formBuilder.array(stringParamListTransform)
-                  pkey: [{ value: param.pkey, disabled: !this.isEditable() }],
-                  pvalue: [
-                    { value: param.pvalue, disabled: !this.isEditable() },
-                  ],
-                })
               );
+
+              this.stringParams[index] = stringParamList;
+
+              // console.log("string param at index", index, this.stringParams[index]);
             }
 
-            this.stringParamData.push(
+            this.recipeListData.push(
-              this._formBuilder.array(stringParamListTransform)
+              this._formBuilder.group({
+                StringParam: [
+                  {
+                    value: recipeDetailMat.StringParam,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                isUse: [
+                  { value: recipeDetailMat.isUse, disabled: !this.isEditable() },
+                ],
+                materialPathId: [
+                  {
+                    value: recipeDetailMat.materialPathId,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                name: [{ value: recipeDetailMat.name, disabled: true }],
+                mixOrder: [
+                  {
+                    value: recipeDetailMat.mixOrder,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                stirTime: [
+                  {
+                    value: recipeDetailMat.stirTime / 10,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                powderGram: [
+                  {
+                    value: recipeDetailMat.powderGram,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                powderTime: [
+                  {
+                    value: recipeDetailMat.powderTime,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                syrupGram: [
+                  {
+                    value: recipeDetailMat.syrupGram,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                syrupTime: [
+                  {
+                    value: recipeDetailMat.syrupTime,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                waterCold: [
+                  {
+                    value: recipeDetailMat.waterCold,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                waterYield: [
+                  {
+                    value: recipeDetailMat.waterYield,
+                    disabled: !this.isEditable(),
+                  },
+                ],
+                feedPattern: [
+                  {
+                    value: recipeDetailMat.feedPattern,
+                    disabled: !this.isEditable(),
+                  }
+                ],
+                feedParameter: [
+                  {
+                    value: recipeDetailMat.feedParameter,
+                    disabled: !this.isEditable(),
+                  }
+                ]
+              })
             );
-
+          });
-            this.stringParams[index] = stringParamList;
+          this.isMatLoaded = true;
-
-            // console.log("string param at index", index, this.stringParams[index]);
-          }
-
-          this.recipeListData.push(
-            this._formBuilder.group({
-              StringParam: [
-                {
-                  value: recipeDetailMat.StringParam,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              isUse: [
-                { value: recipeDetailMat.isUse, disabled: !this.isEditable() },
-              ],
-              materialPathId: [
-                {
-                  value: recipeDetailMat.materialPathId,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              name: [{ value: recipeDetailMat.name, disabled: true }],
-              mixOrder: [
-                {
-                  value: recipeDetailMat.mixOrder,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              stirTime: [
-                {
-                  value: recipeDetailMat.stirTime / 10,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              powderGram: [
-                {
-                  value: recipeDetailMat.powderGram,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              powderTime: [
-                {
-                  value: recipeDetailMat.powderTime,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              syrupGram: [
-                {
-                  value: recipeDetailMat.syrupGram,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              syrupTime: [
-                {
-                  value: recipeDetailMat.syrupTime,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              waterCold: [
-                {
-                  value: recipeDetailMat.waterCold,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              waterYield: [
-                {
-                  value: recipeDetailMat.waterYield,
-                  disabled: !this.isEditable(),
-                },
-              ],
-              feedPattern: [
-                {
-                  value: recipeDetailMat.feedPattern,
-                  disabled: !this.isEditable(),
-                }
-              ],
-              feedParameter: [
-                {
-                  value: recipeDetailMat.feedParameter,
-                  disabled: !this.isEditable(),
-                }
-              ]
-            })
-          );
         });
-        this.isMatLoaded = true;
+    }
-      });
 
-    this.stringParamForm.valueChanges.subscribe((value) => {
+    // event listener
-      // value.stringParamData: Array
-      // where this.stringParams: {[key: number] : {pkey: string, pvalue: any}}
-
-      // transform value to map
-      let mapValue: { [key: number]: { pkey: string; pvalue: any }[] } = {};
-      forEach(value.stringParamData, (param: any, index: number) => {
-        mapValue[index] = param;
-      });
-
-      let checkLen =
-        Object.keys(mapValue).length ==
-        Object.keys(this.stringParams as any).length;
-      let baseLen =
-        Object.keys(this.stringParams as any).length >=
-        Object.keys(mapValue).length
-          ? Object.keys(this.stringParams as any).length
-          : Object.keys(mapValue).length;
-
-      if (checkLen) {
-        for (let i = 0; i < baseLen; i++) {
-          if (!isEqual(this.stringParams[i], mapValue[i])) {
-            console.log('check', (this.stringParams as any)[i], mapValue[i]);
-
-            // transform back to string
-            let initString = ',';
-            for (let key of Object.keys(mapValue[i])) {
-              initString += `${mapValue[i][parseInt(key)].pkey}=${
-                mapValue[i][parseInt(key)].pvalue
-              },`;
-            }
-
-            if (initString.length > 1) {
-              (this.recipeListData.at(i) as any).controls.StringParam.setValue(
-                initString
-              );
-              console.log('set', initString);
-            }
-
-            // do last
-            this.stringParams[i] = mapValue[i];
-          }
-        }
-      }
-    });
 
     this.recipeListForm.valueChanges.subscribe((value) => {
       // console.log(value.recipeListData);
@@ -307,21 +282,101 @@ export class RecipeListComponent implements OnInit {
       }
     });
 
-    // TODO: embed this to recipelist
+    this.stringParamForm.valueChanges.subscribe((value) => {
-    (await
+      // value.stringParamData: Array
-      // TODO: embed this to recipelist
+      // where this.stringParams: {[key: number] : {pkey: string, pvalue: any}}
-      this._materialService.getMaterialCodes()).subscribe((materials) => {
-      this.materialList = materials;
-      console.log("[MatService] get materials", materials.length);
-    });
 
-    (await this._materialService.getFullMaterialDetail()).subscribe((materials) => {
+      // transform value to map
-      this.fullMaterialList = materials;
+      let mapValue: { [key: number]: { pkey: string; pvalue: any }[] } = {};
-      this.categoriedMaterial = this.ListCategory();
+      forEach(value.stringParamData, (param: any, index: number) => {
-      console.log(this.categoriedMaterial);
+        mapValue[index] = param;
+      });
+
+      let checkLen =
+        Object.keys(mapValue).length ==
+        Object.keys(this.stringParams as any).length;
+      let baseLen =
+        Object.keys(this.stringParams as any).length >=
+        Object.keys(mapValue).length
+          ? Object.keys(this.stringParams as any).length
+          : Object.keys(mapValue).length;
+
+      if (checkLen) {
+        for (let i = 0; i < baseLen; i++) {
+          if (!isEqual(this.stringParams[i], mapValue[i])) {
+            // console.log('check', (this.stringParams as any)[i], mapValue[i]);
+
+            // transform back to string
+            let initString = ',';
+            for (let key of Object.keys(mapValue[i])) {
+              initString += `${mapValue[i][parseInt(key)].pkey}=${
+                mapValue[i][parseInt(key)].pvalue
+              },`;
+            }
+
+            if (initString.length > 1) {
+              (this.recipeListData.at(i) as any).controls.StringParam.setValue(
+                initString
+              );
+              // console.log('set', initString);
+            }
+
+            // do last
+            this.stringParams[i] = mapValue[i];
+          }
+        }
+      }
     });
   }
 
+
+  // add new row
+  addRow() {
+    this.recipeListData.push(
+      this._formBuilder.group({
+        isUse: [{ value: false, disabled: !this.isEditable() }],
+        materialPathId: [{ value: 0, disabled: !this.isEditable() }],
+        name: [{ value: "", disabled: true }],
+        mixOrder: [{ value: "", disabled: !this.isEditable() }],
+        stirTime: [{ value: 0 / 10, disabled: !this.isEditable() }],
+        powderGram: [{ value: 0, disabled: !this.isEditable() }],
+        powderTime: [{ value: 0, disabled: !this.isEditable() }],
+        syrupGram: [{ value: 0, disabled: !this.isEditable() }],
+        syrupTime: [{ value: 0, disabled: !this.isEditable() }],
+        waterCold: [{ value: 0, disabled: !this.isEditable() }],
+        waterYield: [{ value: 0, disabled: !this.isEditable() }],
+        feedPattern: [{ value: "", disabled: !this.isEditable() }],
+        feedParameter: [{ value: "", disabled: !this.isEditable() }],
+        StringParam: [{ value: "", disabled: !this.isEditable() }],
+      })
+    );
+  }
+
+  // remove from selection
+  removeRow() {
+
+    let i = this.selectedRecipeList;
+
+    i.forEach((idx) => {
+      this.recipeListData.removeAt(idx);
+    });
+
+    this.selectedRecipeList = [];
+  }
+
+  addToSelection(i: number){
+
+    if(this.selectedRecipeList.includes(i)){
+      let index = this.selectedRecipeList.indexOf(i);
+      this.selectedRecipeList.splice(index, 1);
+      return;
+    }
+    this.selectedRecipeList.push(i);
+    // console.log("selected recipe list", this.selectedRecipeList);
+  }
+
+
+
   get recipeListData(): FormArray {
     return this.recipeListForm.get('recipeListData') as FormArray;
   }
@@ -341,7 +396,7 @@ export class RecipeListComponent implements OnInit {
   }
 
   openMaterialList(i: any) {
-    console.log('open material list for ', i);
+    // console.log('open material list for ', i);
     this.showMaterialSelector = true;
     this.currentSelectRecipeList = i;
   }
@@ -360,7 +415,7 @@ export class RecipeListComponent implements OnInit {
       materialName
     );
 
-    console.log('set mat ', material, materialName,'to slot', i);
+    // console.log('set mat ', material, materialName,'to slot', i);
   }
 
   getTypeForRecipeListAtIndex(i: any) {
@@ -391,7 +446,7 @@ export class RecipeListComponent implements OnInit {
     };
   }
 
-  // TODO: Filter from full detail by type
+  // Filter from full detail by type
   ListCategory = () => {
     let catMap: { [key: string]: any[] } = {
       others: [],
@@ -402,7 +457,7 @@ export class RecipeListComponent implements OnInit {
       catMap[category] = [];
     });
 
-    console.log('generated category', catMap);
+    // console.log('generated category', catMap);
 
     this.fullMaterialList!.forEach((mat) => {
       let category = getMaterialType(mat.materialId);
@@ -497,7 +552,7 @@ export class RecipeListComponent implements OnInit {
   };
 
   openStringParamEditor(i: any) {
-    console.log('open param list for ', i);
+    // console.log('open param list for ', i);
     this.showStringParamSelector = true;
     this.currentSelectStringParam = i;
   }
@@ -531,7 +586,7 @@ export class RecipeListComponent implements OnInit {
 
     await Promise.resolve();
     if (this.timeoutHandler) {
-      console.log("timeout get", this.timeout);
+      // console.log("timeout get", this.timeout);
       if (this.timeout >= 20) {
         // alert("Opening Recipe List Editor in detail")
         if (confirm("Are you sure you want to open Recipe List Editor in detail?")) {
@@ -592,6 +647,7 @@ export class RecipeListComponent implements OnInit {
 
 
 
+
   // language handler
   async displayLang(material: any){
     let currLang = await Lang.getCurrentLanguage();

client/src/app/features/toppings/toppings.component.html

@@ -1,8 +1,112 @@
 <main class="relative overflow-auto max-h-[80%] h-[88vh] bg-stone-100">
   <div class="w-full m-4 space-x-4 sticky top-0 bg-stone-100 z-10">
-    <button class="btn" (click)="showToppingBuilder = true">
+    <!-- topping builder -->
-      <p>New Topping</p>
+    <button class="btn" onclick="topping_builder_modal.showModal()">
+      Create Topping
     </button>
+    <dialog id="topping_builder_modal" class="modal">
+      <div class="modal-box max-w-screen-2xl">
+        <div class="sticky top-0 z-10 bg-stone-200 rounded-md">
+          <div class="flex items-center justify-start space-x-4">
+            <h3 class="text-xl font-bold">Topping Builder</h3>
+
+            <div class="">
+
+            </div>
+
+
+            <div class="modal-action">
+              <form method="dialog">
+                <button class="btn btn-warning">Close</button>
+              </form>
+            </div>
+          </div>
+
+          <div class="divider"></div>
+        </div>
+
+        <!-- body -->
+
+        <div class="flex space-x-2 items-center justify-evenly">
+          <!-- id -->
+          <div class="flex space-x-3">
+            <p class="text-lg font-bold">ID</p>
+            <input
+              type="text"
+              class="input input-sm input-bordered input-ghost w-full"
+            />
+          </div>
+
+          <!-- name -->
+          <div class="flex space-x-3">
+            <p class="text-lg font-bold">Name</p>
+            <input
+              type="text"
+              class="input input-sm input-bordered input-ghost w-full"
+            />
+          </div>
+
+          <!-- productCode -->
+          <div class="flex space-x-3">
+            <p class=" font-bold">Product Code</p>
+            <input
+              type="text"
+              class="input input-sm input-bordered input-ghost w-full"
+            />
+          </div>
+        </div>
+
+        <div class="w-full h-screen">
+          <app-recipe-list
+            [productCode]="productCode!"
+            [noFetch]="true"
+            (recipeListFormChange)="onRecipeListFormChange($event)"
+          ></app-recipe-list>
+        </div>
+
+        <!-- other config -->
+        <!-- [
+    "ExtendID",
+    "OnTOP",
+    "MenuStatus",
+    "cashPrice",
+    "disable",
+    "disable_by_cup",
+    "disable_by_ice",
+    "EncoderCount",
+    "id", ✅
+    "isUse",
+    "isShow",
+    "StringParam",
+    "name", ✅
+    "nonCashPrice",
+    "otherName",
+    "productCode",
+    "recipes",
+    "total_time",
+    "total_weight",
+    "useGram",
+    "weight_float"
+] -->
+      </div>
+    </dialog>
+
+    <!-- group builder -->
+    <button class="btn" onclick="group_editor_modal.showModal()">
+      Group Editor
+    </button>
+    <dialog id="group_editor_modal" class="modal">
+      <div class="modal-box max-w-screen-2xl">
+        <div class="w-full h-screen"></div>
+        <div class="modal-action sticky bottom-0 right-0">
+          <form method="dialog">
+            <button class="btn btn-warning">Close</button>
+          </form>
+        </div>
+      </div>
+    </dialog>
+
+    <!-- TODO: save all changes and send to server -->
     <button class="btn">
       <p>Save Changes</p>
     </button>
@@ -74,19 +178,3 @@
     </tbody>
   </table>
 </main>
-
-<!-- modal -->
-<input
-  type="checkbox"
-  id="topping_builder_modal"
-  class="modal-toggle"
-  #checkbox="ngModel"
-  [(ngModel)]="showToppingBuilder"
-/>
-<label for="topping_builder_modal" class="modal">
-  <div class="modal-box max-w-5xl">
-    <h3 class="text-xl font-bold">Topping Builder</h3>
-    <!-- body -->
-
-  </div>
-</label>

client/src/app/features/toppings/toppings.component.ts

@@ -12,14 +12,25 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { forEach } from 'lodash';
+import { RecipeListComponent } from '../recipes/recipe-details/recipe-list/recipe-list.component';
 
 @Component({
   selector: 'app-toppings',
   standalone: true,
-  imports: [CommonModule, NgSelectModule, FormsModule, ReactiveFormsModule],
   templateUrl: './toppings.component.html',
+  imports: [
+    CommonModule,
+    NgSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RecipeListComponent,
+  ],
 })
 export class ToppingsComponent implements OnInit {
+  onRecipeListFormChange($event: unknown[]) {
+    console.log("recipe list form change",$event);
+  }
   // topping group
   toppingGroupList: ToppingGroup[] = [];
   toppingLists: ToppingList[] = [];
@@ -28,6 +39,9 @@ export class ToppingsComponent implements OnInit {
     '0': { members: [] },
   };
 
+  // topping list keys
+  toppingListKeys: string[] = [];
+
   showToppingBuilder: boolean = false;
 
   // forms
@@ -38,6 +52,8 @@ export class ToppingsComponent implements OnInit {
     },
     { updateOn: 'blur' }
   );
+  productCode: string | undefined;
+  addingNewRecipeList: boolean = false;
 
   get toppingGroup(): FormArray {
     return this.toppingGroupForm.get('toppingGroup') as FormArray;
@@ -101,14 +117,25 @@ export class ToppingsComponent implements OnInit {
       this.toppingLists = data;
       this.mapNameToMember();
 
-      console.log(
+      // push keys to list
-        'get topping list',
+      for (let tpl of this.toppingLists) {
-        this.toppingLists,
+        let currentKeys = Object.keys(tpl);
-        'mapper:',
+        // console.log(tpl);
-        this.groupMembersMap
+        if (this.toppingListKeys.length == 0) {
-      );
+          this.toppingListKeys = currentKeys;
+        }
 
-      console.log('undefined name of topping list', this.findUndefinedName());
+        if (currentKeys.length > this.toppingListKeys.length) {
+          this.toppingListKeys = currentKeys;
+        }
+      }
+
+      console.log(
+        'topping lists: ',
+        this.toppingLists,
+        'keys: ',
+        this.toppingListKeys
+      );
     });
   }
 
@@ -145,9 +172,9 @@ export class ToppingsComponent implements OnInit {
 
   // get member data from group
   getMemberData = (group: string, member_id: string) => {
-    // if (this.groupMembersMap[group][member_id] == undefined) {
+    if (this.groupMembersMap[group][member_id] == undefined) {
-    //   return {};
+      return { name: '' };
-    // }
+    }
     return this.groupMembersMap[group][member_id];
   };
 
@@ -184,4 +211,5 @@ export class ToppingsComponent implements OnInit {
 
     targetDefault?.setValue(member);
   };
+
 }