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

add topping recipe display & fix bugs

Browse source
This commit is contained in:
pakintada@gmail.com 2024-02-07 15:39:19 +07:00
parent 7d6988f581
commit ece4cef205
8 changed files with 421 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/src/app/features/material-settings/material-settings.component.ts
View file

@ -154,22 +154,6 @@ export class MaterialSettingsComponent implements OnInit {
// - find matching form
// - if not exist, create new form
let pushableFlag = false;
let foundFlag = false;
// this.materialSetting.controls.forEach((control, index) => {
// console.log("different id", "checkon value", control.value,control.value.id, id);
// if(foundFlag){
// continue;
// }
// if (control == undefined ||(control.value as any).id == id) {
// pushableFlag = false;
// foundFormIndex = index;
// } else {
// // set to last index, if not found. Meaning this is new form
// foundFormIndex = this.materialSetting.length;
// }
// });
// filter find index
let foundFormIndex = this.materialSetting.controls.findIndex((control) => {

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

@ -1,3 +1,7 @@
<div class="justify-center w-full flex flex-row sticky top-0 z-10">
<button class="btn w-1/2" (click)="addRow()">Add</button>
<button class="btn w-1/2" (click)="removeRow()">Remove</button>
</div>
<table class="table" [formGroup]="recipeListForm">
<thead>
<tr class="bg-gray-200">
@ -13,11 +17,10 @@
*ngFor="let mat of recipeListData.controls; let i = index"
>
<tr
class="bg-white border-b max-h-4"
class="bg-white border-b max-h-4"
[ngClass]="{
'bg-red-400': selectedRecipeList.includes(i)
}"
formGroupName="{{ i }}"
(click)="addToSelection(i)"
(mousedown)="initHoldEvent()"
@ -194,10 +197,7 @@
</tr>
</tbody>
</table>
<div class="justify-center w-full flex flex-row sticky bottom-0">
<button class="btn w-1/2" (click)="addRow()">Add</button>
<button class="btn w-1/2" (click)="removeRow()">Remove</button>
</div>
<!-- show string param modal -->

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

@ -45,6 +45,7 @@ import Lang from 'src/app/shared/helpers/lang';
export class RecipeListComponent implements OnInit {
@Input({ required: true }) productCode!: string;
@Input() noFetch: boolean = false;
@Input() recipeList: any | undefined = undefined;
@Output() recipeListFormChange = new EventEmitter<unknown[]>();
materialList: MaterialCode[] = [];
@ -117,10 +118,24 @@ export class RecipeListComponent implements OnInit {
(await this._materialService.getFullMaterialDetail()).subscribe((materials) => {
this.fullMaterialList = materials;
this.categoriedMaterial = this.ListCategory();
// console.log(this.categoriedMaterial);
});
console.log(this.categoriedMaterial);
// remapping missing material attr to recipeListData
this.recipeListData.controls.forEach((recipeList: any, index: number) => {
// console.log("recipeList", recipeList);
// do map name
let materialName = this.fullMaterialList!.find(
(mat) => mat.materialId.toString() == recipeList.get('materialPathId').value.toString()
);
if(materialName){
recipeList.get('name').setValue(materialName.name);
}
})
});
// this do not fetch recipe list when initialized
// use when doing `topping`
if(!this.noFetch){
@ -251,6 +266,120 @@ export class RecipeListComponent implements OnInit {
});
this.isMatLoaded = true;
});
} else if(this.recipeList != undefined){
this.recipeList.forEach( (recipeDetailMat: RecipeDetailMat, index: number) => {
// StringParam
if (
recipeDetailMat.StringParam != '' ||
recipeDetailMat.StringParam != null
) {
let currStringParam = new StringParam(recipeDetailMat.StringParam);
let stringParamList = currStringParam.extract().as_list();
let stringParamListTransform: any[] = [];
for (let param of stringParamList) {
// boolean transform
if (param.pvalue == 'true') {
param.pvalue = true;
} else if (param.pvalue == 'false') {
param.pvalue = false;
}
}
this.stringParamData.push(
this._formBuilder.array(stringParamListTransform)
)
this.stringParams[index] = stringParamList;
}
// --------------- mapping missing data ---------------
// map name
console.log("use recipeList input; ", recipeDetailMat);
this.recipeListData.push(
this._formBuilder.group({
StringParam: [
{
value: recipeDetailMat.StringParam,
disabled: !this.isEditable(),
},
],
isUse: [
{ value: recipeDetailMat.isUse, disabled: !this.isEditable() },
],
materialPathId: [
{
value: recipeDetailMat.materialPathId,
disabled: !this.isEditable(),
},
],
name: [{ value: recipeDetailMat.name, disabled: true }],
mixOrder: [
{
value: recipeDetailMat.mixOrder,
disabled: !this.isEditable(),
},
],
stirTime: [
{
value: recipeDetailMat.stirTime / 10,
disabled: !this.isEditable(),
},
],
powderGram: [
{
value: recipeDetailMat.powderGram,
disabled: !this.isEditable(),
},
],
powderTime: [
{
value: recipeDetailMat.powderTime,
disabled: !this.isEditable(),
},
],
syrupGram: [
{
value: recipeDetailMat.syrupGram,
disabled: !this.isEditable(),
},
],
syrupTime: [
{
value: recipeDetailMat.syrupTime,
disabled: !this.isEditable(),
},
],
waterCold: [
{
value: recipeDetailMat.waterCold,
disabled: !this.isEditable(),
},
],
waterYield: [
{
value: recipeDetailMat.waterYield,
disabled: !this.isEditable(),
},
],
feedPattern: [
{
value: recipeDetailMat.feedPattern,
disabled: !this.isEditable(),
}
],
feedParameter: [
{
value: recipeDetailMat.feedParameter,
disabled: !this.isEditable(),
}
]
})
);
});
}
// event listener
@ -374,7 +503,7 @@ export class RecipeListComponent implements OnInit {
return;
}
this.selectedRecipeList.push(i);
// console.log("selected recipe list", this.selectedRecipeList);
console.log("selected recipe list", this.selectedRecipeList);
}

70
client/src/app/features/toppings/toppings.component.html
View file

@ -1,4 +1,4 @@
<main class="relative overflow-auto max-h-[80%] h-[88vh] bg-stone-100">
<main class="relative overflow-auto max-h-[80%] h-[88vh] w-[84vw] bg-stone-100">
<div class="w-full m-4 space-x-4 sticky top-0 bg-stone-100 z-10">
<!-- topping builder -->
<button class="btn" onclick="topping_builder_modal.showModal()">
@ -123,7 +123,7 @@
<th>Other Name</th>
<th>Desciption</th>
<!-- <th>Default</th> -->
<th>Default</th>
<!-- <th>Default</th> -->
</tr>
</thead>
@ -131,7 +131,7 @@
formArrayName="toppingGroup"
*ngFor="let tpg of toppingGroup.controls; let i = index"
>
<tr formGroupName="{{ i }}">
<tr class="hover:bg-gray-300" formGroupName="{{ i }}" (click)="showToppingList(tpg.value.groupID)">
<td>
<input class="toggle" type="checkbox" formControlName="inUse" />
</td>
@ -154,10 +154,10 @@
<input class="input input-sm input-bordered" formControlName="Desc" />
</td>
<!-- <td>{{tpg.idDefault}}</td> -->
<div class="tooltip tooltip-warning" data-tip="Default select id not in group or does not set" *ngIf="!isDefaultInMember(getAttrFromForm(i, 'groupID'), getAttrFromForm(i, 'idDefault'))">
<!-- <div class="tooltip tooltip-warning" data-tip="Default select id not in group or does not set" *ngIf="!isDefaultInMember(getAttrFromForm(i, 'groupID'), getAttrFromForm(i, 'idDefault'))">
<p class="text-red-500 text-5xl">⚠️</p>
</div>
<td class="grid grid-flow-row grid-cols-3 rounded-md gap-2">
</div> -->
<!-- <td class="grid grid-flow-row grid-cols-3 rounded-md gap-2">
@ -179,10 +179,64 @@
}}
({{ m }})
</button>
<!-- <button>Edit</button> -->
</div>
</td>
</td> -->
</tr>
</tbody>
</table>
<dialog id="topping_list_modal" class="modal">
<div class="modal-box max-w-screen-2xl">
<!-- topping list data here -->
<div *ngIf="currentMembersData != undefined">
<div [formGroup]="currentMemberDataForm">
<div formArrayName="currentMembersOfToppingGroup" *ngFor="let m of currentMembersOfToppingGroup.controls; let i = index">
<div formGroupName="{{i}}">
<details class="collapse collapse-arrow space-y-4 p-2">
<summary class="collapse-title">{{currentMembersData[i]['name']}}</summary>
<div class="flex space-x-4">
<div class="flex items-center space-x-2 p-2">
<p>ID</p>
<input class="input input-bordered" type="text" formControlName="id">
</div>
<div class="flex items-center space-x-2 p-2">
<p>Name</p>
<input class="input input-bordered" type="text" formControlName="name">
</div>
</div>
<app-recipe-list
[productCode]="productCode!"
[noFetch]="true"
[recipeList]="currentMembersData[i]['recipes']"
(recipeListFormChange)="onRecipeListFormChange($event)"
>
</app-recipe-list>
</details>
</div>
</div>
</div>
</div>
<div class="modal-action sticky bottom-0 right-0">
<form method="dialog">
<button class="btn btn-warning">Close</button>
</form>
</div>
</div>
</dialog>
</main>

75
client/src/app/features/toppings/toppings.component.ts
View file

@ -42,6 +42,7 @@ export class ToppingsComponent implements OnInit {
// topping list keys
toppingListKeys: string[] = [];
// modals controller
showToppingBuilder: boolean = false;
// forms
@ -55,10 +56,20 @@ export class ToppingsComponent implements OnInit {
productCode: string | undefined;
addingNewRecipeList: boolean = false;
// current data variables
currentMembersData: { [key: string]: any }[] | undefined = undefined;
currentMemberDataForm: FormGroup = this._formBuilder.group({
currentMembersOfToppingGroup: this._formBuilder.array([]),
});
get toppingGroup(): FormArray {
return this.toppingGroupForm.get('toppingGroup') as FormArray;
}
get currentMembersOfToppingGroup(): FormArray {
return this.currentMemberDataForm.get('currentMembersOfToppingGroup') as FormArray;
}
// ----------------------------------------------------------------------------
constructor(
@ -219,4 +230,68 @@ export class ToppingsComponent implements OnInit {
return this.getMemberByGroupId(group).includes(member.toString());
};
// topping list form structure
createToppingListForm = (data: ToppingList) => {
return this._formBuilder.group({
ExtendID: data.ExtendID,
OnTOP: data.OnTOP,
MenuStatus: data.MenuStatus,
cashPrice: data.cashPrice,
disable: data.disable,
disable_by_cup: data.disable_by_cup,
disable_by_ice: data.disable_by_ice,
EncoderCount: data.EncoderCount,
id: data.id,
isUse: data.isUse,
isShow: data.isShow,
StringParam: data.StringParam,
name: data.name,
nonCashPrice: data.nonCashPrice,
otherName: data.otherName,
productCode: data.productCode,
recipes: data.recipes,
total_time: data.total_time,
total_weight: data.total_weight,
useGram: data.useGram,
weight_float: data.weight_float,
})
}
// use when selected a group, show its member data
showToppingList = (groupID: string) => {
// check empty
console.log("toppingList.empty", this.toppingLists, "groupMembersMap.empty", this.groupMembersMap);
// do another mapping, just to make sure data is included
this.mapNameToMember();
if(this.currentMembersData != undefined){
this.currentMembersData = undefined;
this.currentMembersOfToppingGroup.clear();
}
let members = this.groupMembersMap[groupID]['members'];
members.forEach((member_id: string) => {
// get each member data from group
let member_data = this.getMemberData(groupID, member_id);
if(this.currentMembersData == undefined){
this.currentMembersData = [];
}
this.currentMembersData!.push(member_data);
this.currentMembersOfToppingGroup.push(this.createToppingListForm(member_data));
});
// this.isShowToppingList = true;
// query selector
let toppingListModal = document.getElementById('topping_list_modal') as any;
toppingListModal?.showModal();
console.log('current members data', this.currentMembersData);
console.log("current members of topping group", this.currentMembersOfToppingGroup);
}
}