update recipe modal

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

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
-import { Recipe } from '../models/recipe.model';
+import { Recipe, Recipe01 } from '../models/recipe.model';
 import { environment } from 'src/environments/environment';
 
 interface RecipeParams {
@@ -33,4 +33,11 @@ export class RecipeService {
       responseType: 'json',
     });
   }
+
+  getRecipesById(id: string): Observable<Recipe01> {
+    return this._httpClient.get<Recipe01>(environment.api + '/recipes/' + id, {
+      withCredentials: true,
+      responseType: 'json',
+    });
+  }
 }

client/src/app/shared/modal/recipe-modal.component.html

@@ -18,13 +18,53 @@
 
 <dialog class="modal" #detailModal>
   <div class="modal-box w-11/12 max-w-5xl">
-    <h3 class="font-bold text-lg">Hello! {{ id }}</h3>
-    <p class="py-4">Click the button below to close</p>
-    <div class="modal-action">
-      <form method="dialog">
-        <!-- if there is a button, it will close the modal -->
-        <button class="btn">Close</button>
-      </form>
-    </div>
+    <h3 class="font-bold text-lg mb-3">{{ title }}</h3>
+    <form
+      class="flex flex-col gap-2"
+      [formGroup]="recipeDetail"
+      (ngSubmit)="save()"
+    >
+      <div class="flex flex-col gap-1">
+        <label>
+          <span class="text-base label-text">Product Code: </span>
+        </label>
+        <input
+          type="text"
+          class="w-full input input-sm input-bordered input-ghost"
+          formControlName="productCode"
+        />
+      </div>
+      <div class="flex flex-col gap-1">
+        <label><span class="text-base label-text">Name: </span> </label>
+        <input
+          type="text"
+          class="w-full input input-sm input-bordered input-ghost"
+          formControlName="name"
+        />
+      </div>
+      <div class="flex flex-col gap-1">
+        <label><span class="text-base label-text"> Other Name:</span> </label>
+        <input
+          type="text"
+          class="w-full input input-sm input-bordered input-ghost"
+          formControlName="otherName"
+        />
+      </div>
+      <div class="flex flex-col gap-1">
+        <label><span class="text-base label-text"> Description:</span> </label>
+        <input
+          type="text"
+          class="w-full input input-sm input-bordered input-ghost"
+          formControlName="description"
+        />
+      </div>
+      <div class="modal-action">
+        <button type="submit" class="btn">Save</button>
+        <form method="dialog">
+          <!-- if there is a button, it will close the modal -->
+          <button class="btn">Close</button>
+        </form>
+      </div>
+    </form>
   </div>
 </dialog>

client/src/app/shared/modal/recipe-modal.component.ts

@@ -1,13 +1,32 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { RecipeService } from 'src/app/core/services/recipe.service';
+
+interface RecipeDetail {
+  productCode: string;
+  name: string;
+  otherName: string;
+  description: string;
+}
 
 @Component({
   selector: 'recipe-modal',
   templateUrl: './recipe-modal.component.html',
+  imports: [ReactiveFormsModule],
   standalone: true,
 })
 export class RecipeModalComponent {
   @Input({ required: true }) id!: string;
 
+  title: string = 'Recipe Detail';
+
+  recipeDetail = new FormGroup({
+    productCode: new FormControl(''),
+    name: new FormControl(''),
+    otherName: new FormControl(''),
+    description: new FormControl(''),
+  });
+
   private detailModal: ElementRef<HTMLDialogElement> | null = null;
 
   @ViewChild('detailModal', { static: false }) set setDetailModal(
@@ -16,13 +35,26 @@ export class RecipeModalComponent {
     this.detailModal = modal;
   }
 
+  constructor(private recipeService: RecipeService) {}
+
   openModal() {
     this.detailModal?.nativeElement.showModal();
 
     if (this.detailModal?.nativeElement.open) {
-      console.log('open');
-    } else {
-      console.log('close');
+      this.recipeService.getRecipesById(this.id).subscribe((recipe) => {
+        this.title = recipe.name + ' | ' + recipe.productCode;
+        this.recipeDetail.setValue({
+          productCode: recipe.productCode,
+          name: recipe.name,
+          otherName: recipe.otherName,
+          description: recipe.Description,
+        });
+      });
     }
   }
+
+  save() {
+    console.log(this.recipeDetail.value);
+    this.detailModal?.nativeElement.close();
+  }
 }