342 lines
10 KiB
HTML
342 lines
10 KiB
HTML
<div class="p-4 overflow-auto h-[90vh]">
|
|
<form class="grid grid-cols-3 gap-4 mb-4" [formGroup]="recipeDetailForm">
|
|
<div
|
|
class="block col-span-1 p-6 bg-white border border-gray-200 rounded-lg shadow"
|
|
>
|
|
<div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
|
|
<div class="flex flex-wrap">
|
|
<h5 class="mb-2 text-xl font-bold text-gray-900">
|
|
{{ recipeDetailForm.getRawValue().name }}
|
|
</h5>
|
|
<h5 class="mb-2 px-3 text-xl font-bold text-gray-900">|</h5>
|
|
<h5 class="mb-2 text-xl font-bold text-gray-900">
|
|
{{ recipeDetailForm.getRawValue().otherName }}
|
|
</h5>
|
|
</div>
|
|
<div class="flex items-center mb-2">
|
|
<div class="flex items-center">
|
|
<p class="text-sm text-gray-500">Last Modify</p>
|
|
<p class="ml-2 text-sm text-gray-900">
|
|
{{
|
|
recipeDetailForm.getRawValue().lastModified
|
|
| date : "dd/MM/yyyy HH:mm:ss"
|
|
}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex p-3 items-center justify-center w-full">
|
|
<img
|
|
class="rounded-lg shadow"
|
|
src="/assets/{{ 'bn_hot_america_no' }}.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="block col-span-2 p-6 bg-white border border-gray-200 rounded-lg shadow min-h-[300px]"
|
|
>
|
|
<div
|
|
*ngIf="isLoaded; else indicator"
|
|
[@inOutAnimation]
|
|
class="grid-cols-2 w-full flex flex-col gap-2"
|
|
>
|
|
<div class="flex items-center">
|
|
<label class="label text-base mr-3 w-max"
|
|
><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="label">
|
|
<span class="label-text text-base mr-3 w-max"
|
|
>Other Name:</span
|
|
></label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="input input-sm input-bordered input-ghost w-full"
|
|
formControlName="otherName"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<label class="label"
|
|
><span class="lable-text text-base mr-3 w-max"
|
|
>Description:</span
|
|
></label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="input input-sm input-bordered input-ghost w-full"
|
|
formControlName="description"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<label class="label"
|
|
><span class="label-text text-base mr-3 w-max"
|
|
>Other Description:</span
|
|
></label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="input input-sm input-bordered input-ghost w-full"
|
|
formControlName="otherDescription"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-span-3 overflow-auto h-[75vh] mb-4 rounded bg-white border border-gray-200 shadow"
|
|
>
|
|
<app-recipe-list
|
|
[productCode]="productCode"
|
|
(recipeListFormChange)="onRecipeListFormChange($event)"
|
|
></app-recipe-list>
|
|
<div *ngFor=""></div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 mb-4">
|
|
<div
|
|
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
|
>
|
|
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
class="w-3.5 h-3.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 1v16M1 9h16"
|
|
/>
|
|
</svg>
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
|
>
|
|
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
class="w-3.5 h-3.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 1v16M1 9h16"
|
|
/>
|
|
</svg>
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
|
>
|
|
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
class="w-3.5 h-3.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 1v16M1 9h16"
|
|
/>
|
|
</svg>
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
|
>
|
|
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
class="w-3.5 h-3.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 1v16M1 9h16"
|
|
/>
|
|
</svg>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex items-center justify-center h-48 mb-4 rounded bg-gray-50 dark:bg-gray-800"
|
|
>
|
|
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
class="w-3.5 h-3.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 1v16M1 9h16"
|
|
/>
|
|
</svg>
|
|
</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div
|
|
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
|
>
|
|
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
class="w-3.5 h-3.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 1v16M1 9h16"
|
|
/>
|
|
</svg>
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
|
>
|
|
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
class="w-3.5 h-3.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 1v16M1 9h16"
|
|
/>
|
|
</svg>
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
|
>
|
|
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
class="w-3.5 h-3.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 1v16M1 9h16"
|
|
/>
|
|
</svg>
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="flex items-center justify-center rounded bg-gray-50 h-28 dark:bg-gray-800"
|
|
>
|
|
<p class="text-2xl text-gray-400 dark:text-gray-500">
|
|
<svg
|
|
class="w-3.5 h-3.5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 1v16M1 9h16"
|
|
/>
|
|
</svg>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="sticky bottom-0 col-span-3 flex justify-end bg-white rounded-full drop-shadow-2xl p-3"
|
|
>
|
|
<!-- <div> Commit Message </div> -->
|
|
<!-- <p class="text-2xl mr-8 text-gray-400 dark:text-gray-500">Commit Message</p> -->
|
|
<input
|
|
type="text"
|
|
name="commit-message"
|
|
id="commit-message"
|
|
placeholder="Commit Message"
|
|
class="input input-bordered mr-8 w-full max-w-xs"
|
|
[value]="productCode"
|
|
(keyup)="onKeyUpCommitMsg($event)"
|
|
[disabled]="!isEditable()"
|
|
/>
|
|
<button
|
|
(click)="onPressConfirmClose()"
|
|
class="btn btn-error w-36 text-white mr-2"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
(click)="onPressConfirmSave()"
|
|
class="btn btn-success w-36 text-white"
|
|
[disabled]="!isValueChanged || !isEditable()"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<ng-template #indicator>
|
|
<div class="flex w-full h-full justify-center items-center">
|
|
<span class="loading loading-spinner w-20"></span>
|
|
</div>
|
|
</ng-template>
|
|
<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>
|
|
</div>
|