make modal confirm to standalone

client/src/app/features/dashboard/dashboard.component.ts

@@ -5,7 +5,7 @@ import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { environment } from 'src/environments/environment';
-import { RecipeModalComponent } from 'src/app/shared/modal/recipe-modal.component';
+import { RecipeModalComponent } from 'src/app/shared/modal/recipe-details/recipe-modal.component';
 import { BehaviorSubject } from 'rxjs';
 import * as lodash from 'lodash';
 

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

@@ -0,0 +1,57 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+@Component({
+  selector: 'confirm-modal',
+  template: `<dialog class="modal" #confirmModal>
+    <div class="modal-box w-3/4">
+      <h3 class="font-bold text-2xl mb-3">{{ title }}</h3>
+      <p class="text-md">{{ message }}</p>
+      <div class="modal-action">
+        <div class="modal-action">
+          <a class="btn px-10" (click)="confirmCallBack(); close()">Yes</a>
+          <a class="btn" (click)="close()">No</a>
+        </div>
+      </div>
+    </div>
+  </dialog>`,
+  standalone: true,
+})
+export class ConfirmModal implements OnInit {
+  @Input() show: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Input() title: string = 'Confirm Dialog';
+  @Input() message: string =
+    'This is Confirm Modal. You can change message by using message input';
+  @Input() confirmCallBack: () => void = () => {};
+
+  private confirmModal: ElementRef<HTMLDialogElement> | null = null;
+
+  @ViewChild('confirmModal', { static: false }) set setConfirmModal(
+    modal: ElementRef
+  ) {
+    this.confirmModal = modal;
+  }
+
+  constructor() {}
+
+  ngOnInit() {
+    this.show.subscribe((show) => {
+      if (show) {
+        this.confirmModal?.nativeElement.showModal();
+      } else {
+        this.confirmModal?.nativeElement.close();
+      }
+    });
+  }
+
+  close() {
+    this.confirmModal?.nativeElement.close();
+  }
+}

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

@@ -97,23 +97,22 @@
           </div>
         </div>
         <div class="modal-action">
-          <a class="btn px-10" (click)="save()">Save</a>
-          <a class="btn" (click)="close()">Close</a>
+          <a class="btn px-10" (click)="onConfirmSave()">Save</a>
+          <a class="btn" (click)="onConfirmClose()">Close</a>
         </div>
-      </form>
-    </div>
-  </div>
-</dialog>
+        <confirm-modal
+          [title]="confirmSave.title"
+          [message]="confirmSave.message"
+          [confirmCallBack]="confirmSave.confirmCallBack"
+          [show]="showConfirmSaveModal"
+        ></confirm-modal>
 
-<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>
+        <confirm-modal
+          [title]="confirmClose.title"
+          [message]="confirmClose.message"
+          [confirmCallBack]="confirmClose.confirmCallBack"
+          [show]="showConfirmCloseModal"
+        ></confirm-modal>
       </form>
     </div>
   </div>

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

@@ -1,7 +1,14 @@
-import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  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';
+import { ConfirmModal } from '../confirm/confirm-modal.component';
 
 interface RecipeDetail {
   productCode: string;
@@ -18,7 +25,7 @@ interface RecipeDetail {
 @Component({
   selector: 'recipe-modal',
   templateUrl: './recipe-modal.component.html',
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, ConfirmModal],
   standalone: true,
 })
 export class RecipeModalComponent {
@@ -48,14 +55,6 @@ 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() {
@@ -93,14 +92,38 @@ export class RecipeModalComponent {
     }
   }
 
-  save() {
-    console.log(this.recipeDetail.value);
-    this.detailModal?.nativeElement.close();
+  showConfirmSaveModal: EventEmitter<boolean> = new EventEmitter<boolean>();
+  showConfirmCloseModal: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  confirmSave = {
+    title: 'The changes detected!',
+    message: 'Do you want to save changes?',
+    confirmCallBack: () => {
+      console.log('confirm save');
+      this.detailModal?.nativeElement.close();
+    },
+  };
+
+  confirmClose = {
+    title: 'The changes will be lost!',
+    message: 'Do you want to close without saving?',
+    confirmCallBack: () => {
+      console.log('confirm close');
+      this.detailModal?.nativeElement.close();
+    },
+  };
+
+  onConfirmSave() {
+    if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
+      this.showConfirmSaveModal.emit(true);
+    } else {
+      this.detailModal?.nativeElement.close();
+    }
   }
 
-  close() {
+  onConfirmClose() {
     if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
-      this.confirmModal?.nativeElement.showModal();
+      this.showConfirmCloseModal.emit(true);
     } else {
       this.detailModal?.nativeElement.close();
     }