120 lines
4.2 KiB
HTML
120 lines
4.2 KiB
HTML
<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 max-w-[1200px]">
|
|
<div>
|
|
<h3 class="font-bold text-lg mb-3">{{ title }}</h3>
|
|
</div>
|
|
<div class="modal-scroll">
|
|
<form class="flex flex-col gap-2" [formGroup]="recipeDetail">
|
|
<div class="flex gap-5">
|
|
<div class="bg-gray-500 w-[300px] h-[300px]">Picture</div>
|
|
<div class="grid grid-cols-2 gap-4 w-full">
|
|
<div class="flex items-center">
|
|
<label class="label"
|
|
><span class="label-text text-base mr-3 w-max"
|
|
>Name:</span
|
|
></label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="input input-sm input-bordered input-ghost w-full"
|
|
formControlName="name"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<label class="text-base mr-3 w-max">Other Name:</label>
|
|
<input
|
|
type="text"
|
|
class="input input-sm input-bordered input-ghost w-full"
|
|
formControlName="otherName"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<label class="text-base mr-3 w-max">Description:</label>
|
|
<input
|
|
type="text"
|
|
class="input input-sm input-bordered input-ghost w-full"
|
|
formControlName="description"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<label class="text-base mr-3 w-max">Other Description:</label>
|
|
<input
|
|
type="text"
|
|
class="input input-sm input-bordered input-ghost w-full"
|
|
formControlName="otherDescription"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-row col-span-2 gap-5">
|
|
<div class="form-control">
|
|
<label class="cursor-pointer label">
|
|
<span class="label-text">Is Use?</span>
|
|
<input
|
|
type="checkbox"
|
|
class="toggle"
|
|
formControlName="isUse"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="cursor-pointer label">
|
|
<span class="label-text">Is Show?</span>
|
|
<input
|
|
type="checkbox"
|
|
class="toggle"
|
|
formControlName="isShow"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="cursor-pointer label">
|
|
<span class="label-text">Is Disable?</span>
|
|
<input
|
|
type="checkbox"
|
|
class="toggle"
|
|
formControlName="disable"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-action">
|
|
<a class="btn px-10" (click)="save()">Save</a>
|
|
<a class="btn" (click)="close()">Close</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</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>
|