want to extract recipe list from recipe detail. But still have no idea about link formControl between 2 component
This commit is contained in:
Kenta420
parent
72f27f198d
commit
bb29e7de5a
7 changed files with 257 additions and 130 deletions
|
|
@ -6,11 +6,11 @@
|
|||
<div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
|
||||
<div class="flex flex-wrap">
|
||||
<h5 class="mb-2 text-xl font-bold text-gray-900">
|
||||
{{ originalRecipeDetail.name }}
|
||||
{{ originalRecipeDetail.recipe.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">
|
||||
{{ originalRecipeDetail.productCode }}
|
||||
{{ originalRecipeDetail.recipe.productCode }}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
|
|
@ -18,7 +18,8 @@
|
|||
<p class="text-sm text-gray-500">Last Modify</p>
|
||||
<p class="ml-2 text-sm text-gray-900">
|
||||
{{
|
||||
originalRecipeDetail.lastModified | date : "dd/MM/yyyy HH:mm:ss"
|
||||
originalRecipeDetail.recipe.lastModified
|
||||
| date : "dd/MM/yyyy HH:mm:ss"
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -30,11 +31,6 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -43,10 +39,10 @@
|
|||
<div
|
||||
*ngIf="isLoaded; else indicator"
|
||||
[@inOutAnimation]
|
||||
class="grid grid-cols-2 gap-4 w-full"
|
||||
class="grid-cols-2 w-full flex flex-col gap-2"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<label class="label"
|
||||
<label class="label text-base mr-3 w-max"
|
||||
><span class="label-text text-base mr-3 w-max">Name:</span></label
|
||||
>
|
||||
<input
|
||||
|
|
@ -56,7 +52,11 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="text-base mr-3 w-max">Other Name:</label>
|
||||
<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"
|
||||
|
|
@ -64,7 +64,11 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="text-base mr-3 w-max">Description:</label>
|
||||
<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"
|
||||
|
|
@ -72,72 +76,45 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="text-base mr-3 w-max">Other Description:</label>
|
||||
<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 class="flex flex-row col-span-2 gap-5">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer label">
|
||||
<label class="flex justify-start gap-2 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">
|
||||
<label class="flex justify-start gap-2 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">
|
||||
<label class="flex justify-start gap-2 cursor-pointer label">
|
||||
<span class="label-text">Is Disable?</span>
|
||||
<input type="checkbox" class="toggle" formControlName="disable" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-span-3 max-h-[300px] overflow-auto mb-4 rounded">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr class="bg-gray-200">
|
||||
<th class="px-6 py-3">Enable</th>
|
||||
<th class="px-6 py-3">Material ID</th>
|
||||
<th class="px-6 py-3">Material Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody *ngIf="isMatLoaded; else indicator">
|
||||
<tr
|
||||
*ngFor="let mat of originalRecipeDetail?.matData"
|
||||
class="bg-white la border-b hover:bg-secondary"
|
||||
>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-sm"
|
||||
[checked]="mat.enable"
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
{{ mat.id }}
|
||||
</td>
|
||||
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
|
||||
{{ mat.name }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div
|
||||
class="col-span-3 min-h-[500px] max-h-[500px] overflow-auto mb-4 rounded bg-white border border-gray-200 shadow"
|
||||
>
|
||||
<app-recipe-list
|
||||
[recipeListData]="originalRecipeDetail.recipe.recipes"
|
||||
></app-recipe-list>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div
|
||||
|
|
@ -350,6 +327,11 @@
|
|||
</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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue