update recipe detail

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

@@ -29,12 +29,12 @@ export type RecipeDetail = {
 };
 
 export type RecipeDetailMat = {
+  isUse: boolean;
   materialID: number;
   name: string;
   mixOrder: number;
   feedParameter: number;
   feedPattern: number;
-  isUse: boolean;
   materialPathId: number;
   powderGram: number;
   powderTime: number;

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

@@ -87,36 +87,14 @@
             formControlName="otherDescription"
           />
         </div>
-        <div class="flex flex-col gap-2">
-          <div class="form-control w-44">
-            <label class="flex gap-2 cursor-pointer label">
-              <span class="label-text">Is Use?</span>
-              <input type="checkbox" class="toggle" formControlName="isUse" />
-            </label>
-          </div>
-          <div class="form-control w-44">
-            <label class="flex gap-2 cursor-pointer label">
-              <span class="label-text">Is Show?</span>
-              <input type="checkbox" class="toggle" formControlName="isShow" />
-            </label>
-          </div>
-          <div class="form-control w-44">
-            <label class="flex gap-2 cursor-pointer label">
-              <span class="label-text">Is Disable?</span>
-              <input type="checkbox" class="toggle" formControlName="disable" />
-            </label>
-          </div>
-        </div>
       </div>
     </div>
     <div
       class="col-span-3 overflow-auto mb-4 rounded bg-white border border-gray-200 shadow"
     >
       <app-recipe-list
-        [parentForm]="recipeDetailForm"
         [productCode]="productCode"
-        [actionRecord]="actionRecord"
-        [recipeDetailOriginal]="recipeOriginalDetail"
+        (recipeListFormChange)="onRecipeListFormChange($event)"
       ></app-recipe-list>
     </div>
     <div class="grid grid-cols-2 gap-4 mb-4">

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

@@ -68,7 +68,6 @@ export class RecipeDetailsComponent implements OnInit {
     isUse: false,
     isShow: false,
     disable: false,
-    recipeListData: this._formBuilder.array([]),
   });
 
   ngOnInit() {
@@ -83,6 +82,8 @@ export class RecipeDetailsComponent implements OnInit {
       this.recipeOriginalDetail = { ...this.recipeDetailForm.getRawValue() };
     });
 
+    this.recipeDetailForm.valueChanges.subscribe(this.onRecipeDetailFormChange);
+
     // snap recipe detail form value
 
     this.actionRecord.registerOnAddAction((currAction, allAction) => {
@@ -144,10 +145,14 @@ export class RecipeDetailsComponent implements OnInit {
     }
   }
 
-  get isValueChanged() {
-    return !isEqual(
-      this.recipeOriginalDetail,
-      this.recipeDetailForm.getRawValue()
-    );
+  isValueChanged: boolean = false;
+
+  onRecipeDetailFormChange(recipeDetail: typeof this.recipeDetailForm.value) {
+    console.log('Recipe Detail Form Changed', recipeDetail);
+  }
+
+  onRecipeListFormChange(isValueChanged: boolean) {
+    console.log('Recipe List Form Changed', isValueChanged);
+    this.isValueChanged ||= isValueChanged;
   }
 }

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

@@ -1,7 +1,7 @@
-<table class="table" [formGroup]="parentForm">
+<table class="table" [formGroup]="recipeListForm">
   <thead>
     <tr class="bg-gray-200">
-      <th class="px-6 py-3">Action</th>
+      <th class="px-6 py-3">Is Use</th>
       <th class="px-6 py-3">Material ID</th>
       <th class="px-6 py-3">Material Name</th>
       <th class="px-6 py-3">MixOrder</th>
@@ -20,17 +20,7 @@
   >
     <tr class="bg-white la border-b hover:bg-secondary" formGroupName="{{ i }}">
       <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-        <button
-          class="btn btn-primary"
-          (click)="deleteRecipeData(i)"
-          type="button"
-        >
-          Delete
-        </button>
-
-        <button class="btn btn-primary" (click)="addRecipeData()" type="button">
-          Add
-        </button>
+        <input type="checkbox" class="toggle" formControlName="isUse" />
       </td>
       <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
         <input type="text" class="input" formControlName="materialID" />

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

@@ -1,5 +1,5 @@
 import { NgFor, NgIf } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import {
   FormArray,
   FormBuilder,
@@ -7,6 +7,7 @@ import {
   FormGroup,
   ReactiveFormsModule,
 } from '@angular/forms';
+import { isEqual, sortBy } from 'lodash';
 import { first } from 'rxjs';
 import {
   RecipeDetail,
@@ -15,20 +16,6 @@ import {
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { Action, ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
 
-export interface RecipeListDataFormGroup {
-  id: FormControl<number | null>;
-  name: FormControl<string | null>;
-  enable: FormControl<boolean | null>;
-  mixOrder: FormControl<number | null>;
-  stirTime: FormControl<number | null>;
-  powderGram: FormControl<number | null>;
-  powderTime: FormControl<number | null>;
-  syrupGram: FormControl<number | null>;
-  syrupTime: FormControl<number | null>;
-  waterCold: FormControl<number | null>;
-  waterHot: FormControl<number | null>;
-}
-
 @Component({
   selector: 'app-recipe-list',
   templateUrl: './recipe-list.component.html',
@@ -36,14 +23,8 @@ export interface RecipeListDataFormGroup {
   imports: [NgIf, NgFor, ReactiveFormsModule],
 })
 export class RecipeListComponent implements OnInit {
-  @Input({ required: true }) parentForm!: FormGroup;
-  @Input({ required: true }) actionRecord!: ActionRecord<
-    RecipeDetail | RecipeDetailMat
-  >;
-
-  @Input({ required: true }) recipeDetailOriginal!: any;
-
   @Input({ required: true }) productCode!: string;
+  @Output() recipeListFormChange = new EventEmitter<boolean>();
 
   isMatLoaded: boolean = false;
 
@@ -52,20 +33,27 @@ export class RecipeListComponent implements OnInit {
     private _formBuilder: FormBuilder
   ) {}
 
+  recipeListForm = this._formBuilder.group(
+    {
+      recipeListData: this._formBuilder.array([]),
+    },
+    { updateOn: 'blur' }
+  );
+
+  private _recipeListOriginalArray!: RecipeDetailMat[];
+
   ngOnInit(): void {
     this._recipeService
       .getRecipeDetailMat(this.productCode)
       .pipe(first())
       .subscribe(({ result }) => {
-        if (this.recipeDetailOriginal)
-          this.recipeDetailOriginal.recipeListData = result;
-        else this.recipeDetailOriginal = { recipeListData: result };
+        this._recipeListOriginalArray = result;
         result.forEach((recipeDetailMat: RecipeDetailMat) => {
           this.recipeListData.push(
             this._formBuilder.group({
+              isUse: recipeDetailMat.isUse,
               materialID: recipeDetailMat.materialID,
-              name: recipeDetailMat.name,
-              enable: recipeDetailMat.isUse,
+              name: [{ value: recipeDetailMat.name, disabled: true }],
               mixOrder: recipeDetailMat.mixOrder,
               stirTime: recipeDetailMat.stirTime,
               powderGram: recipeDetailMat.powderGram,
@@ -79,43 +67,24 @@ export class RecipeListComponent implements OnInit {
         });
         this.isMatLoaded = true;
       });
+
+    this.recipeListForm.valueChanges.subscribe((value) => {
+      console.log(value.recipeListData);
+      console.log(this._recipeListOriginalArray);
+      if (
+        !isEqual(
+          sortBy(value, 'materialID'),
+          sortBy(this._recipeListOriginalArray, 'materialID')
+        )
+      ) {
+        this.recipeListFormChange.emit(true);
+      } else {
+        this.recipeListFormChange.emit(false);
+      }
+    });
   }
 
   get recipeListData(): FormArray {
-    return this.parentForm.get('recipeListData') as FormArray;
-  }
-
-  addRecipeData(): void {
-    const newRecipeDetailMat: RecipeDetailMat = {
-      materialID: 0,
-      name: '',
-      mixOrder: 0,
-      feedParameter: 0,
-      feedPattern: 0,
-      isUse: false,
-      materialPathId: 0,
-      powderGram: 0,
-      powderTime: 0,
-      stirTime: 0,
-      syrupGram: 0,
-      syrupTime: 0,
-      waterCold: 0,
-      waterYield: 0,
-    };
-    this.recipeListData.push(this._formBuilder.group(newRecipeDetailMat));
-    this.actionRecord.addAction(
-      new Action('add', newRecipeDetailMat, 'recipeListData')
-    );
-  }
-
-  deleteRecipeData(index: number): void {
-    const recipeDetailMat: RecipeDetailMat =
-      this.recipeListData.at(index).value;
-
-    this.recipeListData.removeAt(index);
-
-    this.actionRecord.addAction(
-      new Action('delete', recipeDetailMat, 'recipeListData')
-    );
+    return this.recipeListForm.get('recipeListData') as FormArray;
   }
 }

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

@@ -1,5 +1,5 @@
 <main
-  class="relative overflow-auto max-h-[900px] shadow-md sm:rounded-lg"
+  class="relative overflow-auto max-h-[80%] h-[88vh] shadow-md sm:rounded-lg"
   #table
 >
   <table class="table">

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

@@ -313,13 +313,15 @@ export class RecipesComponent implements OnInit, OnDestroy {
 
   openJsonTab() {
     window.open(
-      environment.api + `/recipes/${this._recipeService.getCurrentFile()}/json`,
+      environment.api +
+        `/recipes/${this._recipeService.getCurrentCountry()}/${this._recipeService.getCurrentFile()}/json`,
       '_blank'
     );
   }
 
   scrollToTop() {
-    this.tableCtx!.nativeElement.scroll;
+    const table = this.tableCtx!.nativeElement;
+    table.scrollTo({ top: 0, behavior: 'smooth' });
   }
 
   ngOnDestroy(): void {

server/contracts/recipe.go

@@ -55,12 +55,12 @@ type RecipeDetailResponse struct {
 }
 
 type RecipeDetailMat struct {
+	IsUse          bool   `json:"isUse"`
 	MaterialID     uint64 `json:"materialID"`
 	Name           string `json:"name"`
 	MixOrder       int    `json:"mixOrder"`
 	FeedParameter  int    `json:"feedParameter"`
 	FeedPattern    int    `json:"feedPattern"`
-	IsUse          bool   `json:"isUse"`
 	MaterialPathId int    `json:"materialPathId"`
 	PowderGram     int    `json:"powderGram"`
 	PowderTime     int    `json:"powderTime"`

server/data/data.go

@@ -33,7 +33,7 @@ type Data struct {
 func NewData() *Data {
 
 	countries := []helpers.CountryName{{
-		CountryID:   "thai",
+		CountryID:   "tha",
 		CountryName: "Thailand",
 	}, {
 		CountryID:   "mys",
@@ -46,8 +46,8 @@ func NewData() *Data {
 
 	allRecipeFiles := helpers.ScanRecipeFiles(countries)
 
-	defaultFile := "coffeethai02_580.json"
-	defaultCountry := "thai"
+	defaultFile := "coffeethai02_600.json"
+	defaultCountry := "tha"
 	defaultRecipe, err := helpers.ReadRecipeFile(defaultCountry, defaultFile)
 
 	if err != nil {

server/helpers/filereader.go

@@ -32,10 +32,6 @@ func ReadFile(filePath string) (string, error) {
 
 func ReadRecipeFile(countryID, filePath string) (*models.Recipe, error) {
 
-	if countryID == "thai" {
-		countryID = ""
-	}
-
 	file, err := os.Open(path.Join("cofffeemachineConfig", countryID, filePath))
 
 	if err != nil {
@@ -69,12 +65,7 @@ func ScanRecipeFiles(countries []CountryName) map[string][]RecipePath {
 	recipeFiles := map[string][]RecipePath{}
 
 	for _, country := range countries {
-		var files []string
-		if country.CountryID == "thai" {
-			files = ListFile("cofffeemachineConfig/coffeethai02_*.json")
-		} else {
-			files = ListFile("cofffeemachineConfig/" + country.CountryID + "/coffeethai02_*.json")
-		}
+		files := ListFile("cofffeemachineConfig/" + country.CountryID + "/coffeethai02_*.json")
 		sort.Slice(files, func(i, j int) bool {
 			file1, err := os.Stat(files[i])
 

server/services/recipe/recipe.go

@@ -73,12 +73,12 @@ func (rs *recipeService) GetRecipeDetailMat(request *contracts.RecipeDetailReque
 		for _, mat := range matsCode {
 			if v.MaterialPathId == int(mat.MaterialID) {
 				result.Result = append(result.Result, contracts.RecipeDetailMat{
+					IsUse:          v.IsUse,
 					MaterialID:     mat.MaterialID,
 					Name:           mat.PackageDescription,
 					MixOrder:       v.MixOrder,
 					FeedParameter:  v.FeedParameter,
 					FeedPattern:    v.FeedPattern,
-					IsUse:          v.IsUse,
 					MaterialPathId: v.MaterialPathId,
 					PowderGram:     v.PowderGram,
 					PowderTime:     v.PowderTime,