Add material code and settings

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

@@ -1,15 +1,18 @@
-import { NgIf } from '@angular/common';
+import { DatePipe, NgFor, NgIf } from '@angular/common';
 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 { delay } from 'rxjs';
+import { delay, finalize } from 'rxjs';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { ConfirmModal } from 'src/app/shared/modal/confirm/confirm-modal.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { animate, style, transition, trigger } from '@angular/animations';
+import { MatRecipe } from 'src/app/core/models/recipe.model';
+import { MaterialService } from 'src/app/core/services/material.service';
 
 interface RecipeDetail {
+  lastModified: Date;
   productCode: string;
   name: string;
   otherName: string;
@@ -19,6 +22,14 @@ interface RecipeDetail {
   isUse: boolean;
   isShow: boolean;
   disable: boolean;
+  recipes: MatRecipe[];
+  matData?: MaterialData[];
+}
+
+interface MaterialData {
+  id: number;
+  name: string;
+  enable: boolean;
 }
 
 interface RecipeMetaData {
@@ -34,7 +45,14 @@ interface RecipeMetaData {
   selector: 'app-recipe-details',
   templateUrl: './recipe-details.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, ReactiveFormsModule, ConfirmModal],
+  imports: [
+    NgIf,
+    NgFor,
+    RouterLink,
+    ReactiveFormsModule,
+    ConfirmModal,
+    DatePipe,
+  ],
   animations: [
     trigger('inOutAnimation', [
       transition(':enter', [
@@ -48,14 +66,16 @@ export class RecipeDetailsComponent implements OnInit {
   title: string = 'Recipe Detail';
   recipeMetaData: RecipeMetaData | null = null;
 
-  originalRecipeDetail: RecipeDetail | null = null;
+  originalRecipeDetail!: RecipeDetail;
 
   isLoaded: boolean = false;
+  isMatLoaded: boolean = false;
 
   constructor(
     private _route: ActivatedRoute,
     private _router: Router,
-    private _recipeService: RecipeService
+    private _recipeService: RecipeService,
+    private _materialService: MaterialService
   ) {}
 
   recipeDetail = new FormGroup({
@@ -73,6 +93,7 @@ export class RecipeDetailsComponent implements OnInit {
   ngOnInit() {
     this._recipeService
       .getRecipesById(this._route.snapshot.params['productCode'])
+      .pipe(finalize(() => {}))
       .subscribe(({ recipe, recipeMetaData }) => {
         this.title = recipe.name + ' | ' + recipe.productCode;
         this.recipeDetail.patchValue({
@@ -87,6 +108,7 @@ export class RecipeDetailsComponent implements OnInit {
           disable: recipe.disable,
         });
         this.originalRecipeDetail = {
+          lastModified: recipe.LastChange,
           productCode: recipe.productCode,
           name: recipe.name,
           otherName: recipe.otherName,
@@ -96,9 +118,27 @@ export class RecipeDetailsComponent implements OnInit {
           isUse: recipe.isUse,
           isShow: recipe.isShow,
           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.matData = data
+            .map((item) => {
+              return {
+                id: item.materialID,
+                name: item.PackageDescription,
+                enable: false,
+              };
+            })
+            .sort((a, b) => (a.id > b.id ? -1 : -1));
+          this.isMatLoaded = true;
+        });
       });
   }