update recipe modal

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

@@ -19,11 +19,7 @@
 <dialog class="modal" #detailModal>
   <div class="modal-box w-11/12 max-w-5xl">
     <h3 class="font-bold text-lg mb-3">{{ title }}</h3>
-    <form
-      class="flex flex-col gap-2"
-      [formGroup]="recipeDetail"
-      (ngSubmit)="save()"
-    >
+    <form class="flex flex-col gap-2" [formGroup]="recipeDetail">
       <div class="flex flex-col gap-1">
         <label>
           <span class="text-base label-text">Product Code: </span>
@@ -59,12 +55,23 @@
         />
       </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>
+        <a class="btn px-10" (click)="save()">Save</a>
+        <a class="btn" (click)="close()">Close</a>
       </div>
     </form>
   </div>
 </dialog>
+
+<dialog class="modal" #confirmModal>
+  <div class="modal-box w-11/12 max-w-5xl">
+    <h3 class="font-bold text-lg mb-3">Confirm Dialog</h3>
+    <p>Are you sure you want to delete this recipe?</p>
+    <div class="modal-action">
+      <button type="submit" class="btn btn-success">Confirm</button>
+      <form method="dialog">
+        <!-- if there is a button, it will close the modal -->
+        <button class="btn btn-error">Close</button>
+      </form>
+    </div>
+  </div>
+</dialog>

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

@@ -1,5 +1,6 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { isEqual } from 'lodash';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 
 interface RecipeDetail {
@@ -21,12 +22,14 @@ export class RecipeModalComponent {
   title: string = 'Recipe Detail';
 
   recipeDetail = new FormGroup({
-    productCode: new FormControl(''),
-    name: new FormControl(''),
-    otherName: new FormControl(''),
-    description: new FormControl(''),
+    productCode: new FormControl<string>(''),
+    name: new FormControl<string>(''),
+    otherName: new FormControl<string>(''),
+    description: new FormControl<string>(''),
   });
 
+  originalRecipeDetail: RecipeDetail | null = null;
+
   private detailModal: ElementRef<HTMLDialogElement> | null = null;
 
   @ViewChild('detailModal', { static: false }) set setDetailModal(
@@ -35,6 +38,14 @@ export class RecipeModalComponent {
     this.detailModal = modal;
   }
 
+  private confirmModal: ElementRef<HTMLDialogElement> | null = null;
+
+  @ViewChild('confirmModal', { static: false }) set setConfirmModal(
+    modal: ElementRef
+  ) {
+    this.confirmModal = modal;
+  }
+
   constructor(private recipeService: RecipeService) {}
 
   openModal() {
@@ -43,12 +54,21 @@ export class RecipeModalComponent {
     if (this.detailModal?.nativeElement.open) {
       this.recipeService.getRecipesById(this.id).subscribe((recipe) => {
         this.title = recipe.name + ' | ' + recipe.productCode;
-        this.recipeDetail.setValue({
+        this.recipeDetail.patchValue(
+          {
+            productCode: recipe.productCode,
+            name: recipe.name,
+            otherName: recipe.otherName,
+            description: recipe.Description,
+          },
+          { emitEvent: false }
+        );
+        this.originalRecipeDetail = {
           productCode: recipe.productCode,
           name: recipe.name,
           otherName: recipe.otherName,
           description: recipe.Description,
-        });
+        };
       });
     }
   }
@@ -57,4 +77,12 @@ export class RecipeModalComponent {
     console.log(this.recipeDetail.value);
     this.detailModal?.nativeElement.close();
   }
+
+  close() {
+    if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
+      this.confirmModal?.nativeElement.showModal();
+    } else {
+      this.detailModal?.nativeElement.close();
+    }
+  }
 }