update env

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

@@ -6,21 +6,18 @@
       <div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
         <div class="flex flex-wrap">
           <h5 class="mb-2 text-xl font-bold text-gray-900">
-            {{ originalRecipeDetail.recipe.name }}
+            {{ recipeMetaData!.name }}
           </h5>
           <h5 class="mb-2 px-3 text-xl font-bold text-gray-900">|</h5>
           <h5 class="mb-2 text-xl font-bold text-gray-900">
-            {{ originalRecipeDetail.recipe.productCode }}
+            {{ recipeMetaData!.productCode }}
           </h5>
         </div>
         <div class="flex items-center mb-2">
           <div class="flex items-center">
             <p class="text-sm text-gray-500">Last Modify</p>
             <p class="ml-2 text-sm text-gray-900">
-              {{
+              {{ recipeMetaData!.lastModified | date : "dd/MM/yyyy HH:mm:ss" }}
-                originalRecipeDetail.recipe.lastModified
-                  | date : "dd/MM/yyyy HH:mm:ss"
-              }}
             </p>
           </div>
         </div>
@@ -112,9 +109,7 @@
     <div
       class="col-span-3 min-h-[500px] max-h-[500px] overflow-auto mb-4 rounded bg-white border border-gray-200 shadow"
     >
-      <app-recipe-list
+      <app-recipe-list [recipeListData]="matForRecipeList"></app-recipe-list>
-        [recipeListData]="originalRecipeDetail.recipe.recipes"
-      ></app-recipe-list>
     </div>
     <div class="grid grid-cols-2 gap-4 mb-4">
       <div

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

@@ -3,7 +3,7 @@ import { Component, EventEmitter, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { isEqual } from 'lodash';
-import { finalize } from 'rxjs';
+import { BehaviorSubject, finalize, 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';
@@ -37,7 +37,12 @@ export class RecipeDetailsComponent implements OnInit {
   title: string = 'Recipe Detail';
   recipeMetaData: RecipeMetaData | null = null;
 
-  originalRecipeDetail!: RecipeDetail;
+  originalRecipeDetail: BehaviorSubject<RecipeDetail | null> =
+    new BehaviorSubject<RecipeDetail | null>(null);
+
+  matForRecipeList = this.originalRecipeDetail.pipe(
+    map((x) => x?.recipe.recipes)
+  );
 
   isLoaded: boolean = false;
   isMatLoaded: boolean = false;
@@ -78,7 +83,7 @@ export class RecipeDetailsComponent implements OnInit {
           isShow: recipe.isShow,
           disable: recipe.disable,
         });
-        this.originalRecipeDetail = {
+        this.originalRecipeDetail.next({
           recipe: {
             lastModified: recipe.LastChange,
             productCode: recipe.productCode,
@@ -92,71 +97,81 @@ export class RecipeDetailsComponent implements OnInit {
             disable: recipe.disable,
           },
           recipes: recipe.recipes,
-        };
+        });
         this.recipeMetaData = recipeMetaData;
         this.isLoaded = true;
-
-        const ids = this.originalRecipeDetail.recipes?.map(
-          (recipe) => recipe.materialPathId
-        );
-
-        this._materialService.getMaterialCodes(ids).subscribe((data) => {
-          this.originalRecipeDetail.recipe.recipes = recipe.recipes
-            .map((item) => {
-              for (let i = 0; i < data.length; i++) {
-                if (item.materialPathId === 0) {
-                  return {
-                    id: 0,
-                    name: '',
-                    enable: item.isUse,
-                    mixOrder: item.MixOrder,
-                    stirTime: item.stirTime,
-                    powderGram: item.powderGram,
-                    powderTime: item.powderTime,
-                    syrupGram: item.syrupGram,
-                    syrupTime: item.syrupTime,
-                    waterCold: item.waterCold,
-                    waterHot: item.waterYield,
-                  };
-                }
-
-                if (item.materialPathId === data[i].materialID) {
-                  return {
-                    id: data[i].materialID,
-                    name: data[i].PackageDescription,
-                    enable: item.isUse,
-                    mixOrder: item.MixOrder,
-                    stirTime: item.stirTime,
-                    powderGram: item.powderGram,
-                    powderTime: item.powderTime,
-                    syrupGram: item.syrupGram,
-                    syrupTime: item.syrupTime,
-                    waterCold: item.waterCold,
-                    waterHot: item.waterYield,
-                  };
-                }
-              }
-
-              return {
-                id: item.materialPathId,
-                name: '',
-                enable: item.isUse,
-                mixOrder: item.MixOrder,
-                stirTime: item.stirTime,
-                powderGram: item.powderGram,
-                powderTime: item.powderTime,
-                syrupGram: item.syrupGram,
-                syrupTime: item.syrupTime,
-                waterCold: item.waterCold,
-                waterHot: item.waterYield,
-              };
-            })
-            .sort((a, b) => {
-              return a.id === 0 ? 1 : a.id > b.id ? 1 : -1;
-            });
-          this.isMatLoaded = true;
-        });
       });
+
+    this.originalRecipeDetail.subscribe((originalRecipeDetail) => {
+      if (originalRecipeDetail == null) return;
+
+      const ids = originalRecipeDetail.recipes?.map(
+        (recipe) => recipe.materialPathId
+      );
+
+      this._materialService.getMaterialCodes(ids).subscribe((data) => {
+        this.originalRecipeDetail.next({
+          ...originalRecipeDetail,
+          recipe: {
+            ...originalRecipeDetail.recipe,
+            recipes: originalRecipeDetail
+              .recipes!.map((item) => {
+                for (let i = 0; i < data.length; i++) {
+                  if (item.materialPathId === 0) {
+                    return {
+                      id: 0,
+                      name: '',
+                      enable: item.isUse,
+                      mixOrder: item.MixOrder,
+                      stirTime: item.stirTime,
+                      powderGram: item.powderGram,
+                      powderTime: item.powderTime,
+                      syrupGram: item.syrupGram,
+                      syrupTime: item.syrupTime,
+                      waterCold: item.waterCold,
+                      waterHot: item.waterYield,
+                    };
+                  }
+
+                  if (item.materialPathId === data[i].materialID) {
+                    return {
+                      id: data[i].materialID,
+                      name: data[i].PackageDescription,
+                      enable: item.isUse,
+                      mixOrder: item.MixOrder,
+                      stirTime: item.stirTime,
+                      powderGram: item.powderGram,
+                      powderTime: item.powderTime,
+                      syrupGram: item.syrupGram,
+                      syrupTime: item.syrupTime,
+                      waterCold: item.waterCold,
+                      waterHot: item.waterYield,
+                    };
+                  }
+                }
+
+                return {
+                  id: item.materialPathId,
+                  name: '',
+                  enable: item.isUse,
+                  mixOrder: item.MixOrder,
+                  stirTime: item.stirTime,
+                  powderGram: item.powderGram,
+                  powderTime: item.powderTime,
+                  syrupGram: item.syrupGram,
+                  syrupTime: item.syrupTime,
+                  waterCold: item.waterCold,
+                  waterHot: item.waterYield,
+                };
+              })
+              .sort((a, b) => {
+                return a.id === 0 ? 1 : a.id > b.id ? 1 : -1;
+              }),
+          },
+        });
+        this.isMatLoaded = true;
+      });
+    });
   }
 
   showConfirmSaveModal: EventEmitter<boolean> = new EventEmitter<boolean>();
@@ -197,6 +212,9 @@ export class RecipeDetailsComponent implements OnInit {
   }
 
   get isValueChanged() {
-    return !isEqual(this.recipeDetail.value, this.originalRecipeDetail?.recipe);
+    return !isEqual(
+      this.recipeDetail.value,
+      this.originalRecipeDetail.getValue()?.recipe
+    );
   }
 }

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

@@ -16,16 +16,16 @@
   </thead>
   <tbody formArrayName="recipes">
     <tr
-      *ngFor="let mat of recipeListData"
+      *ngFor="let mat of recipeListDataForm.controls; let i = index"
       class="bg-white la border-b hover:bg-secondary"
     >
-      <div>
+      <div formGroupName="i">
         <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
           <label>
             <input
               type="checkbox"
               class="toggle toggle-sm"
-              [disabled]="mat.enable"
+              formControlName="enable"
             />
           </label>
         </td>

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

@@ -1,18 +1,65 @@
 import { NgFor, NgIf } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
+import {
+  FormArray,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+} from '@angular/forms';
 import { BehaviorSubject, Observable, map } from 'rxjs';
 import { MaterialData } from 'src/app/shared/types/recipe';
 
+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',
   standalone: true,
-  imports: [NgIf, NgFor],
+  imports: [NgIf, NgFor, ReactiveFormsModule],
 })
 export class RecipeListComponent implements OnInit {
-  @Input({ required: true }) recipeListData: MaterialData[] | undefined;
+  @Input({ required: true }) recipeListData: Observable<
+    MaterialData[] | undefined
+  > = new Observable<MaterialData[] | undefined>(undefined);
 
-  $isLoaded: Observable<boolean> = new BehaviorSubject<boolean>(false);
+  $isLoaded: Observable<boolean> = this.recipeListData.pipe(map((x) => !!x));
 
-  ngOnInit(): void {}
+  recipeListDataForm = new FormArray<FormGroup<RecipeListDataFormGroup>>([]);
+
+  ngOnInit(): void {
+    this.recipeListData.subscribe((x) => {
+      if (x) {
+        for (let recipe of x) {
+          const x = new FormControl<number>(0);
+          this.recipeListDataForm.push(
+            new FormGroup<RecipeListDataFormGroup>({
+              id: new FormControl<number>(recipe.id),
+              name: new FormControl<string>(recipe.name),
+              enable: new FormControl<boolean>(recipe.enable),
+              mixOrder: new FormControl<number>(recipe.mixOrder),
+              stirTime: new FormControl<number>(recipe.stirTime),
+              powderGram: new FormControl<number>(recipe.powderGram),
+              powderTime: new FormControl<number>(recipe.powderTime),
+              syrupGram: new FormControl<number>(recipe.syrupGram),
+              syrupTime: new FormControl<number>(recipe.syrupTime),
+              waterCold: new FormControl<number>(recipe.waterCold),
+              waterHot: new FormControl<number>(recipe.waterHot),
+            })
+          );
+        }
+      }
+    });
+  }
 }

client/src/environments/environment.ts

@@ -1,4 +1,4 @@
 export const environment = {
   production: true,
-  api: 'https://recipe.taobin.io:8090/api/',
+  api: 'https://recipe.taobin.io:8090/api',
 };