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

update modal

Browse source
This commit is contained in:
Kenta420 2023-10-04 11:41:20 +07:00
parent fabc7fa7fb
commit 682118ef45
3 changed files with 83 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/app/core/models/recipe.model.ts
View file

@ -32,13 +32,13 @@ export interface Recipe01 {
TextForWarningBeforePay: string[]; TextForWarningBeforePay: string[];
cashPrice: number; cashPrice: number;
changerecipe: string; changerecipe: string;
disable: string; disable: boolean;
disable_by_cup: string; disable_by_cup: string;
disable_by_ice: string; disable_by_ice: string;
EncoderCount: string; EncoderCount: string;
id: string; id: string;
isUse: string; isUse: boolean;
isShow: string; isShow: boolean;
name: string; name: string;
nonCashPrice: string; nonCashPrice: string;
otherDescription: string; otherDescription: string;

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

@ -17,50 +17,83 @@
</button> </button>
<dialog class="modal" #detailModal> <dialog class="modal" #detailModal>
<div class="modal-box w-11/12 max-w-5xl"> <div class="modal-box max-w-[1200px]">
<div> <div>
<h3 class="font-bold text-lg mb-3">{{ title }}</h3> <h3 class="font-bold text-lg mb-3">{{ title }}</h3>
</div> </div>
<div class="modal-scroll"> <div class="modal-scroll">
<form class="flex flex-col gap-2" [formGroup]="recipeDetail"> <form class="flex flex-col gap-2" [formGroup]="recipeDetail">
<div class="flex flex-wrap"> <div class="flex gap-5">
<div class="flex flex-col gap-1"> <div class="bg-gray-500 w-[300px] h-[300px]">Picture</div>
<label><span class="text-base label-text">Name: </span> </label> <div class="grid grid-cols-2 gap-4 w-full">
<input <div class="flex items-center">
type="text" <label class="label"
class="w-full input input-sm input-bordered input-ghost" ><span class="label-text text-base mr-3 w-max"
formControlName="name" >Name:</span
/> ></label
</div> >
<div class="flex flex-col gap-1">
<label
><span class="text-base label-text"> Other Name:</span>
</label>
<input
type="text"
class="w-full input input-sm input-bordered input-ghost"
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>
<input <input
type="text" 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 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" formControlName="description"
/> />
</div> </div>
<div class="flex flex-col gap-1 w-1/2"> <div class="flex items-center">
<label><span class="text-baase label-text">Price:</span></label> <label class="text-base mr-3 w-max">Other Description:</label>
<input <input
type="number" type="text"
class="w-full input input-sm input-bordered input-ghost" class="input input-sm input-bordered input-ghost w-full"
formControlName="price" formControlName="otherDescription"
/> />
</div> </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> </div>
<div class="modal-action"> <div class="modal-action">

16
client/src/app/shared/modal/recipe-modal.component.ts
View file

@ -8,7 +8,11 @@ interface RecipeDetail {
name: string; name: string;
otherName: string; otherName: string;
description: string; description: string;
otherDescription: string;
price: number; price: number;
isUse: boolean;
isShow: boolean;
disable: boolean;
} }
@Component({ @Component({
@ -27,7 +31,11 @@ export class RecipeModalComponent {
name: new FormControl<string>(''), name: new FormControl<string>(''),
otherName: new FormControl<string>(''), otherName: new FormControl<string>(''),
description: new FormControl<string>(''), description: new FormControl<string>(''),
otherDescription: new FormControl<string>(''),
price: new FormControl<number>(0), price: new FormControl<number>(0),
isUse: new FormControl<boolean>(false),
isShow: new FormControl<boolean>(false),
disable: new FormControl<boolean>(false),
}); });
originalRecipeDetail: RecipeDetail | null = null; originalRecipeDetail: RecipeDetail | null = null;
@ -62,7 +70,11 @@ export class RecipeModalComponent {
name: recipe.name, name: recipe.name,
otherName: recipe.otherName, otherName: recipe.otherName,
description: recipe.Description, description: recipe.Description,
otherDescription: recipe.otherDescription,
price: recipe.cashPrice, price: recipe.cashPrice,
isUse: recipe.isUse,
isShow: recipe.isShow,
disable: recipe.disable,
}, },
{ emitEvent: false } { emitEvent: false }
); );
@ -71,7 +83,11 @@ export class RecipeModalComponent {
name: recipe.name, name: recipe.name,
otherName: recipe.otherName, otherName: recipe.otherName,
description: recipe.Description, description: recipe.Description,
otherDescription: recipe.otherDescription,
price: recipe.cashPrice, price: recipe.cashPrice,
isUse: recipe.isUse,
isShow: recipe.isShow,
disable: recipe.disable,
}; };
}); });
} }