add modal detail

client/src/app/core/layout/layout.component.html

@@ -144,7 +144,7 @@
 </aside>
 
 <div class="pt-10 sm:ml-64">
-  <div class="p-4 sm:mt-5 md:mt-12">
+  <div class="p-2 sm:mt-5 md:mt-12">
     <div class="grid grid-cols-1 gap-2 mb-2">
       <router-outlet></router-outlet>
     </div>

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

@@ -1,5 +1,5 @@
 <main
-  class="relative overflow-auto max-h-[700px] shadow-md sm:rounded-lg"
+  class="relative overflow-auto max-h-[610px] shadow-md sm:rounded-lg"
   #table
 >
   <table *ngIf="isLoaded" class="table">
@@ -118,23 +118,7 @@
           {{ recipe.LastChange | date : "dd-MMM-yyyy hh:mm:ss" }}
         </td>
         <td class="px-4 py-4 flex">
-          <div class="cursor-pointer">
-            <svg
-              class="w-6 h-6 text-gray-800 dark:text-white"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 20 20"
-            >
-              <path
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1"
-                d="M7.75 4H19M7.75 4a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 4h2.25m13.5 6H19m-2.25 0a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 10h11.25m-4.5 6H19M7.75 16a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 16h2.25"
-              />
-            </svg>
-          </div>
+          <recipe-modal id="{{ recipe.id }}"></recipe-modal>
         </td>
       </tr>
     </tbody>

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

@@ -1,25 +1,16 @@
-import {
-  AfterContentChecked,
-  AfterRenderRef,
-  AfterViewChecked,
-  AfterViewInit,
-  Component,
-  ElementRef,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { UserService } from 'src/app/core/services/user.service';
 import { User } from 'src/app/core/models/user.model';
 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 { BehaviorSubject } from 'rxjs';
 import { environment } from 'src/environments/environment';
+import { RecipeModalComponent } from 'src/app/shared/modal/recipe-modal.component';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [NgIf, NgFor, DatePipe],
+  imports: [NgIf, NgFor, DatePipe, RecipeModalComponent],
   templateUrl: './dashboard.component.html',
 })
 export class DashboardComponent implements OnInit {

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

@@ -0,0 +1,30 @@
+<button class="btn btn-sm btn-circle btn-ghost" (click)="openModal()">
+  <svg
+    class="w-6 h-6 text-gray-800 dark:text-white"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 20"
+  >
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1"
+      d="M7.75 4H19M7.75 4a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 4h2.25m13.5 6H19m-2.25 0a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 10h11.25m-4.5 6H19M7.75 16a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 16h2.25"
+    />
+  </svg>
+</button>
+
+<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>
+  </div>
+</dialog>

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

@@ -0,0 +1,28 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'recipe-modal',
+  templateUrl: './recipe-modal.component.html',
+  standalone: true,
+})
+export class RecipeModalComponent {
+  @Input({ required: true }) id!: string;
+
+  private detailModal: ElementRef<HTMLDialogElement> | null = null;
+
+  @ViewChild('detailModal', { static: false }) set setDetailModal(
+    modal: ElementRef
+  ) {
+    this.detailModal = modal;
+  }
+
+  openModal() {
+    this.detailModal?.nativeElement.showModal();
+
+    if (this.detailModal?.nativeElement.open) {
+      console.log('open');
+    } else {
+      console.log('close');
+    }
+  }
+}