update recipe modal

client/angular.json

@@ -13,6 +13,9 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "allowedCommonJsDependencies": [
+              "lodash"
+            ],
             "outputPath": "dist/client",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -101,4 +104,4 @@
       }
     }
   }
-}
+}

client/package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "^16.2.0",
         "@angular/router": "^16.2.0",
         "jwt-decode": "^3.1.2",
+        "lodash": "^4.17.21",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.13.0"
@@ -27,6 +28,7 @@
         "@angular/compiler-cli": "^16.2.0",
         "@types/google.accounts": "^0.0.9",
         "@types/jasmine": "~4.3.0",
+        "@types/lodash": "^4.14.199",
         "autoprefixer": "^10.4.15",
         "daisyui": "^3.7.7",
         "jasmine-core": "~4.6.0",
@@ -3383,6 +3385,12 @@
       "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.199",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.199.tgz",
+      "integrity": "sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg==",
+      "dev": true
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -8026,8 +8034,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",

client/package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
     "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
@@ -29,6 +30,7 @@
     "@angular/compiler-cli": "^16.2.0",
     "@types/google.accounts": "^0.0.9",
     "@types/jasmine": "~4.3.0",
+    "@types/lodash": "^4.14.199",
     "autoprefixer": "^10.4.15",
     "daisyui": "^3.7.7",
     "jasmine-core": "~4.6.0",
@@ -41,4 +43,4 @@
     "tailwindcss": "^3.3.3",
     "typescript": "~5.1.3"
   }
-}
+}

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();
+    }
+  }
 }