fix show toppingset unmatch index

client/src/app/core/services/recipe.service.ts

@@ -274,4 +274,14 @@ export class RecipeService {
       }
     );
   }
+
+  async getRawRecipeOfProductCode(country: string, filename: string, productCode: string): Promise<Observable<{}>> {
+    return this._httpClient.get<{}>(
+      environment.api + '/recipes/' + country + '/' + filename + '/' + productCode + '/raw_full',
+      {
+        withCredentials: true,
+        responseType: 'json',
+      }
+    );
+  }
 }

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

@@ -2,7 +2,7 @@ import { CommonModule, DatePipe } from '@angular/common';
 import { Component, EventEmitter, OnInit } from '@angular/core';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import {Observable, first, map} from 'rxjs';
+import { Observable, first, map } from 'rxjs';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { ConfirmModal } from 'src/app/shared/modal/confirm/confirm-modal.component';
 import { animate, style, transition, trigger } from '@angular/animations';
@@ -20,28 +20,29 @@ import { UserPermissions } from 'src/app/core/auth/userPermissions';
 import { ToppingService } from 'src/app/core/services/topping.service';
 
 import { copy, transformToTSV } from 'src/app/shared/helpers/copy';
+import { isEqual } from 'lodash';
 
 @Component({
-    selector: 'app-recipe-details',
+  selector: 'app-recipe-details',
-    templateUrl: './recipe-details.component.html',
+  templateUrl: './recipe-details.component.html',
-    standalone: true,
+  standalone: true,
-    animations: [
+  animations: [
-        trigger('inOutAnimation', [
+    trigger('inOutAnimation', [
-            transition(':enter', [
+      transition(':enter', [
-                style({ opacity: 0 }),
+        style({ opacity: 0 }),
-                animate('1s ease-out', style({ opacity: 1 })),
+        animate('1s ease-out', style({ opacity: 1 })),
-            ]),
+      ]),
-        ]),
+    ]),
-    ],
+  ],
-    imports: [
+  imports: [
-        CommonModule,
+    CommonModule,
-        RouterLink,
+    RouterLink,
-        ReactiveFormsModule,
+    ReactiveFormsModule,
-        ConfirmModal,
+    ConfirmModal,
-        DatePipe,
+    DatePipe,
-        RecipeListComponent,
+    RecipeListComponent,
-        FormsModule
+    FormsModule,
-    ]
+  ],
 })
 export class RecipeDetailsComponent implements OnInit {
   title: string = 'Recipe Detail';
@@ -56,7 +57,7 @@ export class RecipeDetailsComponent implements OnInit {
 
   recipeOriginalDetail!: typeof this.recipeDetailForm.value;
 
-  commit_msg :string = "";
+  commit_msg: string = '';
 
   //
   department: string = this._route.parent!.snapshot.params['department'];
@@ -86,20 +87,21 @@ export class RecipeDetailsComponent implements OnInit {
     disable: false,
   });
 
-  repl = []
+  repl = [];
-  tpl = []
+  tpl = [];
 
   toppingSet: ToppingSet[] | null = null;
   submenus: Recipe01[] | null = null;
 
+  rawRecipe: {} | undefined | null = undefined;
+
   async ngOnInit() {
     this.productCode = this._route.snapshot.params['productCode'];
 
-    this.recipeDetail$ = (await this._recipeService
+    this.recipeDetail$ = (
-      .getRecipeDetail(this.productCode))
+      await this._recipeService.getRecipeDetail(this.productCode)
-      .pipe(first());
+    ).pipe(first());
     this.recipeDetail$.subscribe((detail) => {
-
       // console.log('Recipe Detail', detail);
 
       this.recipeDetailForm.patchValue(detail);
@@ -107,18 +109,41 @@ export class RecipeDetailsComponent implements OnInit {
       this.recipeOriginalDetail = { ...this.recipeDetailForm.getRawValue() };
     });
 
-    this._recipeService.getSubMenus(await this._recipeService.getCurrentCountry(), this._recipeService.getCurrentFile(), this.productCode).subscribe((data) => {
+    this._recipeService
-      console.log('Submenus', data);
+      .getSubMenus(
-      this.submenus = data;
+        await this._recipeService.getCurrentCountry(),
-    });
+        this._recipeService.getCurrentFile(),
+        this.productCode
+      )
+      .subscribe((data) => {
+        console.log('Submenus', data);
+        this.submenus = data;
+      });
 
     this.recipeDetailForm.valueChanges.subscribe(this.onRecipeDetailFormChange);
 
-
+    (
-    (await this._toppingService.getToppingsOfRecipe(this.department, this._recipeService.getCurrentFile(), this.productCode)).subscribe((data) => {
+      await this._toppingService.getToppingsOfRecipe(
+        this.department,
+        this._recipeService.getCurrentFile(),
+        this.productCode
+      )
+    ).subscribe((data) => {
       this.toppingSet = data;
       // console.log('Toppings', data);
-    })
+    });
+
+    // get full raw value of this recipe
+    (
+      await this._recipeService.getRawRecipeOfProductCode(
+        this.department,
+        this._recipeService.getCurrentFile(),
+        this.productCode
+      )
+    ).subscribe((data) => {
+      console.log('Raw Recipe', data);
+      this.rawRecipe = data;
+    });
 
     // snap recipe detail form value
 
@@ -145,32 +170,57 @@ export class RecipeDetailsComponent implements OnInit {
       console.log('confirm save');
 
       // get username
-      let username:string = ""
+      let username: string = '';
 
       username = this._userService.getCurrentUser()!.name;
 
 
+      // diff with rawValue, then send
+
       let to_send = {
         edit_by: username,
         commit_msg: this.commit_msg,
-        productCode: this.changedProductCode == undefined ? this.productCode : this.changedProductCode,
+        productCode:
-        name: this.recipeDetailForm.getRawValue().name != this.recipeOriginalDetail.name ? this.recipeDetailForm.getRawValue().name : this.recipeOriginalDetail.name,
+          this.changedProductCode == undefined
-        otherName: this.recipeDetailForm.getRawValue().otherName != this.recipeOriginalDetail.otherName ? this.recipeDetailForm.getRawValue().otherName : this.recipeOriginalDetail.otherName,
+            ? this.productCode
-        description: this.recipeDetailForm.getRawValue().description != this.recipeOriginalDetail.description ? this.recipeDetailForm.getRawValue().description : this.recipeOriginalDetail.description,
+            : this.changedProductCode,
-        otherDescription: this.recipeDetailForm.getRawValue().otherDescription != this.recipeOriginalDetail.otherDescription ? this.recipeDetailForm.getRawValue().otherDescription : this.recipeOriginalDetail.otherDescription,
+        name:
-        LastChange: this.recipeDetailForm.getRawValue().lastModified != this.recipeOriginalDetail.lastModified ? this.recipeDetailForm.getRawValue().lastModified : this.recipeOriginalDetail.lastModified,
+          this.recipeDetailForm.getRawValue().name !=
-        price: this.recipeDetailForm.getRawValue().price != this.recipeOriginalDetail.price ? this.recipeDetailForm.getRawValue().price : this.recipeOriginalDetail.price,
+          this.recipeOriginalDetail.name
-        // isUse: this,
+            ? this.recipeDetailForm.getRawValue().name
-        // isShow: null,
+            : this.recipeOriginalDetail.name,
-        // disable: null,
+        otherName:
-        recipes: [
+          this.recipeDetailForm.getRawValue().otherName !=
-          ...(this.repl.length <= 0 ? [] : this.repl)
+          this.recipeOriginalDetail.otherName
-        ],
+            ? this.recipeDetailForm.getRawValue().otherName
-        ToppingSet: [
+            : this.recipeOriginalDetail.otherName,
-          ...(this.tpl.length <= 0 ? [] : this.tpl)
+        description:
-        ]
+          this.recipeDetailForm.getRawValue().description !=
-      }
+          this.recipeOriginalDetail.description
-
+            ? this.recipeDetailForm.getRawValue().description
+            : this.recipeOriginalDetail.description,
+        otherDescription:
+          this.recipeDetailForm.getRawValue().otherDescription !=
+          this.recipeOriginalDetail.otherDescription
+            ? this.recipeDetailForm.getRawValue().otherDescription
+            : this.recipeOriginalDetail.otherDescription,
+        LastChange:
+          this.recipeDetailForm.getRawValue().lastModified !=
+          this.recipeOriginalDetail.lastModified
+            ? this.recipeDetailForm.getRawValue().lastModified
+            : this.recipeOriginalDetail.lastModified,
+        price:
+          this.recipeDetailForm.getRawValue().price !=
+          this.recipeOriginalDetail.price
+            ? this.recipeDetailForm.getRawValue().price
+            : this.recipeOriginalDetail.price,
+        isUse: (this.rawRecipe as any).isUse,
+        isShow: (this.rawRecipe as any).isShow,
+        disable: (this.rawRecipe as any).disable,
+        recipes: [...(this.repl.length <= 0 ? [] : this.repl)],
+        SubMenu: [...((this.rawRecipe! as any).SubMenu!)],
+        ToppingSet: [...((this.rawRecipe as any).ToppingSet)],
+      };
 
       // TODO: update value in targeted recipe
       console.log('to_send', to_send);
@@ -182,14 +232,11 @@ export class RecipeDetailsComponent implements OnInit {
         }
       );
       console.log('Sending changes');
-      void this._router.navigate(['/'+this.department+'/recipes']);
+      void this._router.navigate(['/' + this.department + '/recipes']);
-
-
-
     },
   };
 
-  onKeyUpCommitMsg(e: any){
+  onKeyUpCommitMsg(e: any) {
     this.commit_msg = e.target.value;
   }
 
@@ -198,7 +245,7 @@ export class RecipeDetailsComponent implements OnInit {
     message: 'Do you want to close without saving?',
     confirmCallBack: () => {
       console.log('confirm close');
-      this._router.navigate(['/'+this.department+'/recipes']);
+      this._router.navigate(['/' + this.department + '/recipes']);
     },
   };
 
@@ -206,7 +253,7 @@ export class RecipeDetailsComponent implements OnInit {
     if (this.isValueChanged) {
       this.showConfirmSaveModal.emit(true);
     } else {
-      this._router.navigate(['/'+this.department+'/recipes']);
+      this._router.navigate(['/' + this.department + '/recipes']);
     }
   }
 
@@ -214,7 +261,7 @@ export class RecipeDetailsComponent implements OnInit {
     if (this.isValueChanged) {
       this.showConfirmCloseModal.emit(true);
     } else {
-      this._router.navigate(['/'+this.department+'/recipes']);
+      this._router.navigate(['/' + this.department + '/recipes']);
     }
   }
 
@@ -225,9 +272,21 @@ export class RecipeDetailsComponent implements OnInit {
   }
 
   onRecipeListFormChange(repl: unknown[]) {
-    console.log('Recipe List Form Changed', repl);
+    // console.log('Recipe List Form Changed', repl);
     this.repl = repl[1] as never[];
     this.tpl = repl[0] as never[];
+
+    // check length of toppinglist
+    console.log("tpl length", this.tpl.length, "original length", (this.rawRecipe! as any).ToppingSet.length);
+
+    for(let ti = 0; ti < this.tpl.length; ti++){
+      // check at the same index
+      if(!isEqual(this.tpl[ti][0], (this.rawRecipe as any).ToppingSet[ti])){
+        console.log('topping list changed', ti, this.tpl[ti][0], (this.rawRecipe as any).ToppingSet[ti]);
+      }
+    }
+
+    // console.log('Recipe List Form Changed', this.repl, this.tpl);
     this.isValueChanged ||= repl != undefined;
   }
 
@@ -235,16 +294,16 @@ export class RecipeDetailsComponent implements OnInit {
     // console.log('Topping List Form Changed', tpl);
     this.tpl = tpl as never[];
     this.isValueChanged ||= tpl != undefined;
-
   }
 
-  isEditable(){
+  isEditable() {
-    return this._userService.getCurrentUser()!.permissions.includes(UserPermissions.EDITOR);
+    return this._userService
+      .getCurrentUser()!
+      .permissions.includes(UserPermissions.EDITOR);
   }
 
-
   onProductCodeChange(event: any) {
-    if(event.target.value != ""){
+    if (event.target.value != '') {
       this.changedProductCode = event.target.value;
     }
   }
@@ -252,10 +311,10 @@ export class RecipeDetailsComponent implements OnInit {
   // Submenus
   selectedSubProductCode: string | undefined = undefined;
   hasSubmenu = () => this.submenus != null && this.submenus!.length > 0;
-  listSubMenuProductcodes = () => this.submenus!.map((recipe) => recipe.productCode);
+  listSubMenuProductcodes = () =>
+    this.submenus!.map((recipe) => recipe.productCode);
 
   selectSubmenu(productCode: string) {
-
     if (this.selectedSubProductCode == productCode) {
       this.selectedSubProductCode = undefined;
       console.log('Unselected submenu', productCode);
@@ -265,4 +324,6 @@ export class RecipeDetailsComponent implements OnInit {
     this.selectedSubProductCode = productCode;
     console.log('Selected submenu', productCode);
   }
+
+
 }

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

@@ -423,7 +423,7 @@ export class RecipeListComponent implements OnInit {
     return inRange(8111, 8130, convertFromInterProductCode(materialId));
   };
 
-  getToppingSlotNumber = (mat: number) => convertFromInterProductCode(mat) - 8110;
+  getToppingSlotNumber = (mat: number) => convertFromInterProductCode(mat) - 8110 - 1 ;
 
   isStringParamExist = (i: number) => {
     let rawStringParam = this.recipeListData.at(i).get('StringParam')?.value;

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

@@ -74,10 +74,10 @@ export class RecipeToppingComponent implements OnInit {
       )
     ).subscribe((data) => {
       this._toppingSetOriginalArray = data;
-      // console.log('ToppingSet', data);
+      console.log('ToppingSet', data, this.index, data.length >= this.index!, data[0]);
 
       // check length of toppingList if in range with given index
-      if (this.index && data.length >= this.index!) {
+      if (data.length >= this.index!) {
         this.toppingList.push(
           this._formBuilder.group({
             isUse: data[this.index!].isUse,
@@ -87,6 +87,8 @@ export class RecipeToppingComponent implements OnInit {
           })
         );
       }
+
+      console.log('ToppingSet', this.toppingList);
     });
 
     // get all topping
@@ -119,8 +121,25 @@ export class RecipeToppingComponent implements OnInit {
 
     // emit value changes
     this.toppingForm.valueChanges.subscribe((value) => {
-      console.log('emit value', value, 'for index: ', this.index! - 1);
+      console.log('emit value', value, 'for index: ', this.index! );
-      this.toppingSetChange.emit([this.index! - 1, this.toppingList.value]);
+
+      // transform data
+      this.toppingList.value.forEach((value: any) => {
+        value = this.transformToppingsetStructure(value);
+      });
+
+      // extend lifetime of data
+      let newMapping = this.toppingList.value.map((value: {
+        isUse: boolean;
+        groupID: string;
+        defaultIDSelect: string;
+        ListGroupID: string[];
+      }) => this.transformToppingsetStructure(value));
+
+      // add debug here!
+      console.log('newMapping', newMapping);
+
+      this.toppingSetChange.emit([this.index! , newMapping]);
     });
   }
 
@@ -156,4 +175,28 @@ export class RecipeToppingComponent implements OnInit {
       }
     });
   }
+
+  transformToppingsetStructure = (value: any) => {
+
+    if(value.defaultIDSelect == null){
+      value.defaultIDSelect = 0;
+    } else {
+      value.defaultIDSelect = parseInt(value.defaultIDSelect);
+    }
+
+    if(!Array.isArray(value.ListGroupID)){
+      value.ListGroupID = [parseInt(value.groupID), 0, 0, 0];
+    }
+
+    if(value.groupID == null){
+      value.groupID = '0';
+    }
+
+    return {
+      isUse: value.isUse,
+      groupID: value.groupID,
+      defaultIDSelect: value.defaultIDSelect,
+      ListGroupID: value.ListGroupID,
+    };
+  };
 }

server/data/data.go

@@ -365,7 +365,7 @@ func (d *Data) SetValuesToRecipe(base_recipe []models.Recipe01, recipe models.Re
 
 			for k, v := range recipe01_Map {
 				if !reflect.DeepEqual(base_recipe01_Map[k], v) {
-					d.taoLogger.Log.Debug("SetValuesToRecipe", zap.Any("key", k))
+					d.taoLogger.Log.Debug("SetValuesToRecipe", zap.Any("key", k), zap.Any("old", base_recipe01_Map[k]), zap.Any("new", v))
 					base_recipe01_Map[k] = v
 				}
 			}

server/routers/recipe.go

@@ -61,6 +61,9 @@ func (rr *RecipeRouter) Route(r chi.Router) {
 
 		r.Get("/{country}/{filename}/{product_code}/submenus", rr.getSubmenusOfRecipe)
 
+		// fetch raw recipe json
+		r.Get("/{country}/{filename}/{product_code}/raw_full", rr.getRawRecipeOfProductCode)
+
 		r.Get("/{country}/{filename}/json", rr.getRecipeJson)
 
 		r.Post("/edit/{country}/{filename}", rr.updateRecipe)
@@ -546,6 +549,31 @@ func (rr *RecipeRouter) getSubmenusOfRecipe(w http.ResponseWriter, r *http.Reque
 	json.NewEncoder(w).Encode(submenus)
 }
 
+// get raw recipe
+func (rr *RecipeRouter) getRawRecipeOfProductCode(w http.ResponseWriter, r *http.Request) {
+
+	countryID := chi.URLParam(r, "country")
+	filename := chi.URLParam(r, "filename")
+	productCode := chi.URLParam(r, "product_code")
+
+	// debug
+	rr.taoLogger.Log.Debug("RecipeRouter.getRawRecipeOfProductCode", zap.Any("countryID", countryID), zap.Any("filename", filename), zap.Any("productCode", productCode))
+
+	w.Header().Add("Content-Type", "application/json")
+
+	recipe, err := rr.data.GetRecipe01ByProductCode(filename, countryID, productCode)
+
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusNotFound)
+		return
+	}
+
+	// return recipe
+	rr.taoLogger.Log.Debug("RecipeRouter.getRawRecipeOfProductCode", zap.Any("recipe", recipe))
+
+	json.NewEncoder(w).Encode(recipe)
+}
+
 func (rr *RecipeRouter) doMergeJson(w http.ResponseWriter, r *http.Request) {
 	// TODO: v2, change to binary instead
 	if !APIhandler(w, r) {