123 lines
4.2 KiB
HTML
123 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">
|
|
<img
|
|
src="{{ recipeMetaData?.picture }}.png"
|
|
width="300"
|
|
height="400"
|
|
/>
|
|
<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)="onConfirmSave()">Save</a>
|
|
<a class="btn" (click)="onConfirmClose()">Close</a>
|
|
</div>
|
|
<confirm-modal
|
|
[title]="confirmSave.title"
|
|
[message]="confirmSave.message"
|
|
[confirmCallBack]="confirmSave.confirmCallBack"
|
|
[show]="showConfirmSaveModal"
|
|
></confirm-modal>
|
|
|
|
<confirm-modal
|
|
[title]="confirmClose.title"
|
|
[message]="confirmClose.message"
|
|
[confirmCallBack]="confirmClose.confirmCallBack"
|
|
[show]="showConfirmCloseModal"
|
|
></confirm-modal>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</dialog>
|