pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make modal confirm to standalone

Browse source
This commit is contained in:
Kenta420 2023-10-04 14:05:20 +07:00
parent 682118ef45
commit f2005dcb58
4 changed files with 110 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

120
client/src/app/shared/modal/recipe-modal.component.html
View file

@ -1,120 +0,0 @@
<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>