add topping recipe display & fix bugs

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

@@ -154,22 +154,6 @@ export class MaterialSettingsComponent implements OnInit {
         //   - 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) => {

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

@@ -1,3 +1,7 @@
+<div class="justify-center w-full flex flex-row sticky top-0 z-10">
+  <button class="btn w-1/2" (click)="addRow()">Add</button>
+  <button class="btn w-1/2" (click)="removeRow()">Remove</button>
+</div>
 <table class="table" [formGroup]="recipeListForm">
   <thead>
     <tr class="bg-gray-200">
@@ -13,11 +17,10 @@
     *ngFor="let mat of recipeListData.controls; let i = index"
   >
     <tr
-      class="bg-white border-b  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()"
@@ -194,10 +197,7 @@
     </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 -->
 

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

@@ -45,6 +45,7 @@ import Lang from 'src/app/shared/helpers/lang';
 export class RecipeListComponent implements OnInit {
   @Input({ required: true }) productCode!: string;
   @Input() noFetch: boolean = false;
+  @Input() recipeList: any | undefined = undefined;
   @Output() recipeListFormChange = new EventEmitter<unknown[]>();
 
   materialList: MaterialCode[] = [];
@@ -117,10 +118,24 @@ export class RecipeListComponent implements OnInit {
     (await this._materialService.getFullMaterialDetail()).subscribe((materials) => {
       this.fullMaterialList = materials;
       this.categoriedMaterial = this.ListCategory();
-      // console.log(this.categoriedMaterial);
+      console.log(this.categoriedMaterial);
-    });
 
 
+      // remapping missing material attr to recipeListData
+      this.recipeListData.controls.forEach((recipeList: any, index: number) => {
+        // console.log("recipeList", recipeList);
+        // do map name
+        let materialName = this.fullMaterialList!.find(
+          (mat) => mat.materialId.toString() == recipeList.get('materialPathId').value.toString()
+        );
+
+        if(materialName){
+          recipeList.get('name').setValue(materialName.name);
+        }
+      })
+
+    });
+
     // this do not fetch recipe list when initialized
     // use when doing `topping`
     if(!this.noFetch){
@@ -251,6 +266,120 @@ export class RecipeListComponent implements OnInit {
           });
           this.isMatLoaded = true;
         });
+    } else if(this.recipeList != undefined){
+      this.recipeList.forEach( (recipeDetailMat: RecipeDetailMat, index: number) => {
+
+        // StringParam
+        if (
+          recipeDetailMat.StringParam != '' ||
+          recipeDetailMat.StringParam != null
+        ) {
+          let currStringParam = new StringParam(recipeDetailMat.StringParam);
+          let stringParamList = currStringParam.extract().as_list();
+
+          let stringParamListTransform: any[] = [];
+          for (let param of stringParamList) {
+            // boolean transform
+            if (param.pvalue == 'true') {
+              param.pvalue = true;
+            } else if (param.pvalue == 'false') {
+              param.pvalue = false;
+            }
+          }
+
+          this.stringParamData.push(
+            this._formBuilder.array(stringParamListTransform)
+          )
+
+          this.stringParams[index] = stringParamList;
+        }
+
+        // --------------- mapping missing data ---------------
+
+        // map name
+        console.log("use recipeList input; ", recipeDetailMat);
+
+        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(),
+              }
+            ]
+          })
+        );
+      });
     }
 
     // event listener
@@ -374,7 +503,7 @@ export class RecipeListComponent implements OnInit {
       return;
     }
     this.selectedRecipeList.push(i);
-    // console.log("selected recipe list", this.selectedRecipeList);
+    console.log("selected recipe list", this.selectedRecipeList);
   }
 
 

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

@@ -1,4 +1,4 @@
-<main class="relative overflow-auto max-h-[80%] h-[88vh] bg-stone-100">
+<main class="relative overflow-auto max-h-[80%] h-[88vh] w-[84vw] bg-stone-100">
   <div class="w-full m-4 space-x-4 sticky top-0 bg-stone-100 z-10">
     <!-- topping builder -->
     <button class="btn" onclick="topping_builder_modal.showModal()">
@@ -123,7 +123,7 @@
         <th>Other Name</th>
         <th>Desciption</th>
         <!-- <th>Default</th> -->
-        <th>Default</th>
+        <!-- <th>Default</th> -->
       </tr>
     </thead>
 
@@ -131,7 +131,7 @@
       formArrayName="toppingGroup"
       *ngFor="let tpg of toppingGroup.controls; let i = index"
     >
-      <tr formGroupName="{{ i }}">
+      <tr class="hover:bg-gray-300" formGroupName="{{ i }}" (click)="showToppingList(tpg.value.groupID)">
         <td>
           <input class="toggle" type="checkbox" formControlName="inUse" />
         </td>
@@ -154,10 +154,10 @@
           <input class="input input-sm input-bordered" formControlName="Desc" />
         </td>
         <!-- <td>{{tpg.idDefault}}</td> -->
-        <div class="tooltip tooltip-warning" data-tip="Default select id not in group or does not set" *ngIf="!isDefaultInMember(getAttrFromForm(i, 'groupID'), getAttrFromForm(i, 'idDefault'))">
+        <!-- <div class="tooltip tooltip-warning" data-tip="Default select id not in group or does not set" *ngIf="!isDefaultInMember(getAttrFromForm(i, 'groupID'), getAttrFromForm(i, 'idDefault'))">
           <p class="text-red-500 text-5xl">⚠️</p>
-        </div>
+        </div> -->
-        <td class="grid grid-flow-row grid-cols-3 rounded-md gap-2">
+        <!-- <td class="grid grid-flow-row grid-cols-3 rounded-md gap-2">
 
 
 
@@ -179,10 +179,64 @@
               }}
               ({{ m }})
             </button>
-            <!-- <button>Edit</button> -->
           </div>
-        </td>
+        </td> -->
       </tr>
     </tbody>
   </table>
+
+
+  <dialog id="topping_list_modal" class="modal">
+    <div class="modal-box max-w-screen-2xl">
+
+      <!-- topping list data here -->
+      <div *ngIf="currentMembersData != undefined">
+        <div [formGroup]="currentMemberDataForm">
+          <div formArrayName="currentMembersOfToppingGroup" *ngFor="let m of currentMembersOfToppingGroup.controls; let i = index">
+
+            <div formGroupName="{{i}}">
+
+              <details class="collapse collapse-arrow space-y-4 p-2">
+                <summary class="collapse-title">{{currentMembersData[i]['name']}}</summary>
+
+                <div class="flex space-x-4">
+
+                  <div class="flex items-center space-x-2 p-2">
+                    <p>ID</p>
+                    <input class="input input-bordered" type="text" formControlName="id">
+                  </div>
+
+                  <div class="flex items-center space-x-2 p-2">
+                    <p>Name</p>
+                    <input class="input input-bordered" type="text" formControlName="name">
+                  </div>
+
+                </div>
+
+                <app-recipe-list
+                  [productCode]="productCode!"
+                  [noFetch]="true"
+                  [recipeList]="currentMembersData[i]['recipes']"
+                  (recipeListFormChange)="onRecipeListFormChange($event)"
+                >
+                </app-recipe-list>
+              </details>
+
+
+
+            </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>
 </main>

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

@@ -42,6 +42,7 @@ export class ToppingsComponent implements OnInit {
   // topping list keys
   toppingListKeys: string[] = [];
 
+  // modals controller
   showToppingBuilder: boolean = false;
 
   // forms
@@ -55,10 +56,20 @@ export class ToppingsComponent implements OnInit {
   productCode: string | undefined;
   addingNewRecipeList: boolean = false;
 
+  // current data variables
+  currentMembersData: { [key: string]: any }[] | undefined = undefined;
+  currentMemberDataForm: FormGroup = this._formBuilder.group({
+    currentMembersOfToppingGroup: this._formBuilder.array([]),
+  });
+
   get toppingGroup(): FormArray {
     return this.toppingGroupForm.get('toppingGroup') as FormArray;
   }
 
+  get currentMembersOfToppingGroup(): FormArray {
+    return this.currentMemberDataForm.get('currentMembersOfToppingGroup') as FormArray;
+  }
+
   // ----------------------------------------------------------------------------
 
   constructor(
@@ -219,4 +230,68 @@ export class ToppingsComponent implements OnInit {
     return this.getMemberByGroupId(group).includes(member.toString());
   };
 
+  // topping list form structure
+  createToppingListForm = (data: ToppingList) => {
+    return this._formBuilder.group({
+      ExtendID: data.ExtendID,
+      OnTOP: data.OnTOP,
+      MenuStatus: data.MenuStatus,
+      cashPrice: data.cashPrice,
+      disable: data.disable,
+      disable_by_cup: data.disable_by_cup,
+      disable_by_ice: data.disable_by_ice,
+      EncoderCount: data.EncoderCount,
+      id: data.id,
+      isUse: data.isUse,
+      isShow: data.isShow,
+      StringParam: data.StringParam,
+      name: data.name,
+      nonCashPrice: data.nonCashPrice,
+      otherName: data.otherName,
+      productCode: data.productCode,
+      recipes: data.recipes,
+      total_time: data.total_time,
+      total_weight: data.total_weight,
+      useGram: data.useGram,
+      weight_float: data.weight_float,
+    })
+  }
+
+
+
+
+  // use when selected a group, show its member data
+  showToppingList = (groupID: string) => {
+
+    // check empty
+    console.log("toppingList.empty", this.toppingLists, "groupMembersMap.empty", this.groupMembersMap);
+
+    // do another mapping, just to make sure data is included
+    this.mapNameToMember();
+
+    if(this.currentMembersData != undefined){
+      this.currentMembersData = undefined;
+      this.currentMembersOfToppingGroup.clear();
+    }
+
+
+    let members = this.groupMembersMap[groupID]['members'];
+    members.forEach((member_id: string) => {
+      // get each member data from group
+      let member_data = this.getMemberData(groupID, member_id);
+      if(this.currentMembersData == undefined){
+        this.currentMembersData = [];
+      }
+      this.currentMembersData!.push(member_data);
+      this.currentMembersOfToppingGroup.push(this.createToppingListForm(member_data));
+    });
+    // this.isShowToppingList = true;
+
+    // query selector
+    let toppingListModal = document.getElementById('topping_list_modal') as any;
+    toppingListModal?.showModal();
+
+    console.log('current members data', this.currentMembersData);
+    console.log("current members of topping group", this.currentMembersOfToppingGroup);
+  }
 }

server/data/data.go

@@ -499,6 +499,85 @@ func (d *Data) SetValuesToRecipe(base_recipe []models.Recipe01, recipe models.Re
 	}
 }
 
+func (d *Data) SetValuesToMaterialSetting(base_mat_setting []models.MaterialSetting, updated_mat_setting models.MaterialSetting) {
+	not_found := false
+	global_idx := 0
+
+	for index, v := range base_mat_setting {
+		// find matched id
+		if v.ID == updated_mat_setting.ID {
+			// change only changed values
+			for k, v := range updated_mat_setting.ToMap() {
+				if !reflect.DeepEqual(base_mat_setting[index].ToMap()[k], v) {
+					d.taoLogger.Log.Debug("SetValuesToMaterialSetting", zap.Any("key", k), zap.Any("old", base_mat_setting[index].ToMap()[k]), zap.Any("new", v))
+					base_mat_setting[index].ToMap()[k] = v
+				}
+			}
+		} else {
+			not_found = true
+			global_idx = index
+		}
+	}
+
+	// is new value
+	if not_found {
+		base_mat_setting[global_idx+1] = updated_mat_setting
+	}
+}
+
+func (d *Data) SetValuesToToppingList(base_topping_list []models.ToppingList, updated_topping_list models.ToppingList) {
+	not_found := false
+	global_idx := 0
+
+	for index, v := range base_topping_list {
+		// find matched id
+		if v.ID == updated_topping_list.ID {
+			// change only changed values
+			for k, v := range updated_topping_list.ToMap() {
+				if !reflect.DeepEqual(base_topping_list[index].ToMap()[k], v) {
+					d.taoLogger.Log.Debug("SetValuesToToppingList", zap.Any("key", k), zap.Any("old", base_topping_list[index].ToMap()[k]), zap.Any("new", v))
+					base_topping_list[index].ToMap()[k] = v
+				}
+			}
+		} else {
+			not_found = true
+			global_idx = index
+		}
+	}
+
+	// is new value
+	if not_found {
+		base_topping_list[global_idx+1] = updated_topping_list
+	}
+}
+
+func (d *Data) SetValuesToToppingGroupList(base_topping_group_list []models.ToppingGroup, updated_topping_group_list models.ToppingGroup) {
+	not_found := false
+	global_idx := 0
+
+	for index, v := range base_topping_group_list {
+
+		// find matched id
+		if v.GroupID == updated_topping_group_list.GroupID {
+			// change only changed values
+			for k, v := range updated_topping_group_list.ToMap() {
+				if !reflect.DeepEqual(base_topping_group_list[index].ToMap()[k], v) {
+					d.taoLogger.Log.Debug("SetValuesToToppingGroup", zap.Any("key", k), zap.Any("old", base_topping_group_list[index].ToMap()[k]), zap.Any("new", v))
+					base_topping_group_list[index].ToMap()[k] = v
+				}
+			}
+		} else {
+			not_found = true
+			global_idx = index
+		}
+	}
+
+	// is new value
+	if not_found {
+		base_topping_group_list[global_idx+1] = updated_topping_group_list
+	}
+}
+
 func (d *Data) GetMaterialSetting(countryID, filename string) []models.MaterialSetting {
 	result := make([]models.MaterialSetting, 0)
 

server/models/recipe.go

@@ -57,6 +57,19 @@ type MaterialSetting struct {
 	RawMaterialUnit        string `json:"RawMaterialUnit"`
 }
 
+func (r *MaterialSetting) ToMap() map[string]interface{} {
+	var m map[string]interface{}
+	recipeRecord, _ := json.Marshal(r)
+	json.Unmarshal(recipeRecord, &m)
+	return m
+}
+
+func (r *MaterialSetting) FromMap(m MaterialSetting) MaterialSetting {
+	recipeRecord, _ := json.Marshal(m)
+	json.Unmarshal(recipeRecord, &r)
+	return *r
+}
+
 type Recipe01 struct {
 	Description             string       `json:"Description"`
 	ExtendID                int          `json:"ExtendID"`
@@ -140,6 +153,19 @@ type ToppingGroup struct {
 	OtherName string `json:"otherName"`
 }
 
+func (r *ToppingGroup) ToMap() map[string]interface{} {
+	var m map[string]interface{}
+	recipeRecord, _ := json.Marshal(r)
+	json.Unmarshal(recipeRecord, &m)
+	return m
+}
+
+func (r *ToppingGroup) FromMap(m map[string]interface{}) ToppingGroup {
+	recipeRecord, _ := json.Marshal(m)
+	json.Unmarshal(recipeRecord, &r)
+	return *r
+}
+
 type ToppingList struct {
 	ExtendID       int         `json:"ExtendID"`
 	OnTOP          bool        `json:"OnTOP"`
@@ -163,3 +189,16 @@ type ToppingList struct {
 	UseGram        bool        `json:"useGram"`
 	Weight_float   int         `json:"weight_float"`
 }
+
+func (r *ToppingList) ToMap() map[string]interface{} {
+	var m map[string]interface{}
+	recipeRecord, _ := json.Marshal(r)
+	json.Unmarshal(recipeRecord, &m)
+	return m
+}
+
+func (r *ToppingList) FromMap(m map[string]interface{}) ToppingList {
+	recipeRecord, _ := json.Marshal(m)
+	json.Unmarshal(recipeRecord, &r)
+	return *r
+}

server/routers/recipe.go

@@ -504,6 +504,34 @@ func (rr *RecipeRouter) updateRecipe(w http.ResponseWriter, r *http.Request) {
 	})
 }
 
+func (rr *RecipeRouter) updateMaterialSetting(w http.ResponseWriter, r *http.Request) {
+	w.Header().Add("Content-Type", "application/json")
+
+	country := r.URL.Query().Get("country")
+	filename := r.URL.Query().Get("filename")
+
+	rr.taoLogger.Log.Debug("RecipeRouter.updateMaterialSetting", zap.Any("country", country), zap.Any("filename", filename))
+
+	countryID, err := rr.data.GetCountryIDByName(country)
+	if err != nil {
+		http.Error(w, fmt.Sprintf("Country Name: %s not found!!!", country), http.StatusNotFound)
+		return
+	}
+
+	updateMutex.Lock()
+	defer updateMutex.Unlock()
+	// get material setting
+	materialSetting := rr.data.GetMaterialSetting(countryID, filename)
+
+	if len(materialSetting) == 0 {
+		http.Error(w, fmt.Sprintf("Recipe country: %s file: %s found empty settings.", country, filename), http.StatusNotFound)
+		return
+	}
+
+	// TODO: create commit and set change
+
+}
+
 func (rr *RecipeRouter) getSavedRecipes(w http.ResponseWriter, r *http.Request) {
 
 	file_version := chi.URLParam(r, "filename_version_only")