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

add carousel & test submenu

Browse source
This commit is contained in:
pakintada@gmail.com 2024-01-15 11:48:25 +07:00
parent edcccaaab9
commit 7102f644d4
7 changed files with 242 additions and 314 deletions
Download patch file Download diff file Expand all files Collapse all files

47
client/src/app/core/services/recipe.service.ts
View file

@ -197,32 +197,47 @@ export class RecipeService {
)
.subscribe({
next(value) {
console.log( value);
console.log(value);
},
});
}
getSavedTmp(country: string, filename:string) {
console.log("loading saved .tmp* file", country, filename)
getSavedTmp(country: string, filename: string) {
console.log('loading saved .tmp* file', country, filename);
// do split filename
filename = filename.split('_')[1];
// this._user.getCurrentUser().subscribe((user) => {
// this.user = user.user;
// })
return this._httpClient
.get<string[]>(
environment.api + ("/recipes/saved/"+ country + "/" + filename),
{
withCredentials: true,
}
);
// .subscribe({
// next(value) {
// console.log( value);
// },
// });
return this._httpClient.get<string[]>(
environment.api + ('/recipes/saved/' + country + '/' + filename),
{
withCredentials: true,
}
);
// .subscribe({
// next(value) {
// console.log( value);
// },
// });
}
getSubMenus(country: string, filename: string, productCode: string) {
return this._httpClient.get<Recipe01[]>(
environment.api +
'/recipes/' +
country +
'/' +
filename +
'/' +
productCode +
'/submenus',
{
withCredentials: true,
responseType: 'json',
}
);
}
}

438
client/src/app/features/recipes/recipe-details/recipe-details.component.html
View file

@ -1,315 +1,163 @@
<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>
<form [formGroup]="recipeDetailForm">
<!-- carousel -->
<div class="carousel carousel-center space-x-8">
<div id="name" class="carousel-item w-1/2">
<div
class="block p-6 bg-white border border-gray-200 rounded-lg shadow w-full"
>
<div *ngIf="isLoaded; else indicator" [@inOutAnimation]>
<!-- productCode -->
<div>
<input
class="input text-lg text-gray-900 my-2"
type="text"
name="productCode"
[value]="productCode"
(keyup)="onProductCodeChange($event)"
[disabled]="!isEditable()"
/>
<!-- productCode -->
<div>
<input
class="input input-bordered input-xs text-lg text-gray-900 my-2"
type="text"
name="productCode"
[value]="productCode"
(keyup)="onProductCodeChange($event)"
[disabled]="!isEditable()"
/>
</div>
<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="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
class="block p-6 bg-white border border-gray-200 rounded-lg shadow min-h-[300px] w-full"
>
<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 *ngIf="hasSubmenu()">
<div *ngFor="let sub of listSubMenuProductcodes()">
<button class="btn btn-sm btn-primary m-2" (click)="selectSubmenu(sub)">{{sub}}</button>
</div>
</div>
</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"
<div id="recipeList" class="carousel-item w-full">
<div
class="overflow-auto h-[75vh] mb-4 rounded bg-white border border-gray-200 shadow w-1/2"
>
<app-recipe-list
[productCode]="productCode"
[isSubMenu]="false"
(recipeListFormChange)="onRecipeListFormChange($event)"
></app-recipe-list>
</div>
</div>
<div id="toppingSet" class="carousel-item w-full">
<div class="overflow-auto h-[75vh] mb-4 rounded bg-white border border-gray-200 shadow">
<app-recipe-toppingset
[productCode]="productCode"
(toppingSetChange)="onToppingListChange($event)"
></app-recipe-toppingset>
</div>
</div>
</div>
<!-- try pop up modal -->
<!-- TODO: do topping -->
<app-recipe-toppingset
[productCode]="productCode"
(toppingSetChange)="onToppingListChange($event)"
></app-recipe-toppingset>
<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"
class="sticky bottom-0 col-span-3 max-w-screen-lg flex justify-end bg-white rounded-full drop-shadow-2xl p-3"
>
<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 class="flex justify-center w-full start-0 py-2">
<a href="{{department}}/recipe/{{productCode}}#name" class="btn btn-xs">1</a>
<a href="{{department}}/recipe/{{productCode}}#recipeList" class="btn btn-xs">2</a>
<a href="{{department}}/recipe/{{productCode}}#toppingSet" class="btn btn-xs">3</a>
</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

25
client/src/app/features/recipes/recipe-details/recipe-details.component.ts
View file

@ -92,6 +92,7 @@ export class RecipeDetailsComponent implements OnInit {
tpl = []
toppingSet: ToppingSet[] | null = null;
submenus: Recipe01[] | null = null;
ngOnInit() {
this.productCode = this._route.snapshot.params['productCode'];
@ -101,13 +102,18 @@ export class RecipeDetailsComponent implements OnInit {
.pipe(first());
this.recipeDetail$.subscribe((detail) => {
console.log('Recipe Detail', detail);
// console.log('Recipe Detail', detail);
this.recipeDetailForm.patchValue(detail);
this.isLoaded = true;
this.recipeOriginalDetail = { ...this.recipeDetailForm.getRawValue() };
});
this._recipeService.getSubMenus(this._recipeService.getCurrentCountry(), this._recipeService.getCurrentFile(), this.productCode).subscribe((data) => {
console.log('Submenus', data);
this.submenus = data;
});
this.recipeDetailForm.valueChanges.subscribe(this.onRecipeDetailFormChange);
@ -243,4 +249,21 @@ export class RecipeDetailsComponent implements OnInit {
this.changedProductCode = event.target.value;
}
}
// Submenus
selectedSubProductCode: string | undefined = undefined;
hasSubmenu = () => this.submenus != null && this.submenus!.length > 0;
listSubMenuProductcodes = () => this.submenus!.map((recipe) => recipe.productCode);
selectSubmenu(productCode: string) {
if (this.selectedSubProductCode == productCode) {
this.selectedSubProductCode = undefined;
console.log('Unselected submenu', productCode);
return;
}
this.selectedSubProductCode = productCode;
console.log('Selected submenu', productCode);
}
}

5
client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html
View file

@ -54,8 +54,9 @@
<td
class="m-2 px-4 py-4 font-medium text-gray-900 whitespace-nowrap"
*ngIf="
displayByCond(i, 'syrupGram', 'not-zero', { compare: undefined })
"
displayByCond(i, 'syrupGram', 'not-zero', { compare: undefined }) &&
getTypeForRecipeListAtIndex(i)['category'] == 'syrup'
"
>
<div class="flex items-center space-x-2 bg-purple-300 rounded-md">
<p>Volume</p>

1
client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts
View file

@ -40,6 +40,7 @@ import {
})
export class RecipeListComponent implements OnInit {
@Input({ required: true }) productCode!: string;
@Input() isSubMenu: boolean = false;
@Output() recipeListFormChange = new EventEmitter<unknown[]>();
materialList: MaterialCode[] = [];