Merge branch 'main' of https://github.com/Poomipat-Ch/taobin_recipe_manager
This commit is contained in:
commit
eab6fe1880
3 changed files with 83 additions and 34 deletions
|
|
@ -32,13 +32,13 @@ export interface Recipe01 {
|
|||
TextForWarningBeforePay: string[];
|
||||
cashPrice: number;
|
||||
changerecipe: string;
|
||||
disable: string;
|
||||
disable: boolean;
|
||||
disable_by_cup: string;
|
||||
disable_by_ice: string;
|
||||
EncoderCount: string;
|
||||
id: string;
|
||||
isUse: string;
|
||||
isShow: string;
|
||||
isUse: boolean;
|
||||
isShow: boolean;
|
||||
name: string;
|
||||
nonCashPrice: string;
|
||||
otherDescription: string;
|
||||
|
|
|
|||
|
|
@ -17,50 +17,83 @@
|
|||
</button>
|
||||
|
||||
<dialog class="modal" #detailModal>
|
||||
<div class="modal-box w-11/12 max-w-5xl">
|
||||
<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 flex-wrap">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label><span class="text-base label-text">Name: </span> </label>
|
||||
<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="w-full input input-sm input-bordered input-ghost"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
formControlName="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label
|
||||
><span class="text-base label-text"> Other Name:</span>
|
||||
</label>
|
||||
<div class="flex items-center">
|
||||
<label class="text-base mr-3 w-max">Other Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full input input-sm input-bordered input-ghost"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
formControlName="otherName"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-between gap-2">
|
||||
<div class="flex flex-col gap-1 w-1/2">
|
||||
<label
|
||||
><span class="text-base label-text"> Description:</span>
|
||||
</label>
|
||||
<div class="flex items-center">
|
||||
<label class="text-base mr-3 w-max">Description:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="w-full input input-sm input-bordered input-ghost"
|
||||
class="input input-sm input-bordered input-ghost w-full"
|
||||
formControlName="description"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 w-1/2">
|
||||
<label><span class="text-baase label-text">Price:</span></label>
|
||||
<div class="flex items-center">
|
||||
<label class="text-base mr-3 w-max">Other Description:</label>
|
||||
<input
|
||||
type="number"
|
||||
class="w-full input input-sm input-bordered input-ghost"
|
||||
formControlName="price"
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@ interface RecipeDetail {
|
|||
name: string;
|
||||
otherName: string;
|
||||
description: string;
|
||||
otherDescription: string;
|
||||
price: number;
|
||||
isUse: boolean;
|
||||
isShow: boolean;
|
||||
disable: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
|
|
@ -27,7 +31,11 @@ export class RecipeModalComponent {
|
|||
name: new FormControl<string>(''),
|
||||
otherName: new FormControl<string>(''),
|
||||
description: new FormControl<string>(''),
|
||||
otherDescription: new FormControl<string>(''),
|
||||
price: new FormControl<number>(0),
|
||||
isUse: new FormControl<boolean>(false),
|
||||
isShow: new FormControl<boolean>(false),
|
||||
disable: new FormControl<boolean>(false),
|
||||
});
|
||||
|
||||
originalRecipeDetail: RecipeDetail | null = null;
|
||||
|
|
@ -62,7 +70,11 @@ export class RecipeModalComponent {
|
|||
name: recipe.name,
|
||||
otherName: recipe.otherName,
|
||||
description: recipe.Description,
|
||||
otherDescription: recipe.otherDescription,
|
||||
price: recipe.cashPrice,
|
||||
isUse: recipe.isUse,
|
||||
isShow: recipe.isShow,
|
||||
disable: recipe.disable,
|
||||
},
|
||||
{ emitEvent: false }
|
||||
);
|
||||
|
|
@ -71,7 +83,11 @@ export class RecipeModalComponent {
|
|||
name: recipe.name,
|
||||
otherName: recipe.otherName,
|
||||
description: recipe.Description,
|
||||
otherDescription: recipe.otherDescription,
|
||||
price: recipe.cashPrice,
|
||||
isUse: recipe.isUse,
|
||||
isShow: recipe.isShow,
|
||||
disable: recipe.disable,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue