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

fix(topping): 🐛 fix missing topping after saved

Browse source 
Ensure topping data in slots with padding if only use in some slots.

Topping saving
This commit is contained in:
pakintada@gmail.com 2024-03-02 13:22:23 +07:00
parent 517e051f2d
commit 292c7697a4
4 changed files with 466 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/app/core/layout/layout.component.html
View file

@ -41,7 +41,8 @@
</div> </div>
<!-- File Change Status --> <!-- File Change Status -->
<button onclick="patch_merge_modal.showModal()" *ngIf="isCommitLoaded | async"> <div *ngIf="isCommitLoaded | async">
<button onclick="patch_merge_modal.showModal()" >
<h1 class="text-center font-extrabold text-2xl text-red-500 animate-pulse">Detect Changes! Click</h1> <h1 class="text-center font-extrabold text-2xl text-red-500 animate-pulse">Detect Changes! Click</h1>
@ -61,6 +62,7 @@
</dialog> </dialog>
</div>
<div class="flex items-center"> <div class="flex items-center">
<div class="flex items-center ml-3"> <div class="flex items-center ml-3">

74
client/src/app/core/layout/layout.component.ts
View file

@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core';
import { ActivatedRoute, RouterModule } from '@angular/router'; import { ActivatedRoute, RouterModule } from '@angular/router';
import { CommonModule, DatePipe, NgFor, NgIf, NgOptimizedImage } from '@angular/common'; import { CommonModule, DatePipe, NgFor, NgIf, NgOptimizedImage } from '@angular/common';
import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component'; import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
@ -32,7 +32,7 @@ interface MenuItem {
MergeComponent MergeComponent
] ]
}) })
export class LayoutComponent implements OnInit, OnDestroy { export class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
current_department = this._router.snapshot.paramMap.get('department')!; current_department = this._router.snapshot.paramMap.get('department')!;
menuItems: MenuItem[] = [ menuItems: MenuItem[] = [
@ -70,24 +70,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
private _recipeService: RecipeService private _recipeService: RecipeService
) {} ) {}
async ngOnInit(): Promise<void> { // acticvate after ngOnInit
this._userService.currentUser async ngAfterViewInit(): Promise<void> {
.pipe(takeUntil(this.exit$))
.subscribe((user) => (this.user = user));
this.clockSubscription = timer(0, 1000)
.pipe(
map(() => new Date()),
share()
)
.subscribe((time) => {
this.date = time;
});
this._httpClient.get(environment.api + "/health/redis").subscribe((status) => {
this.redisStatus = (status as any)["status"];
});
// check if saves existed // check if saves existed
this._recipeService.getSavedTmp( this._recipeService.getSavedTmp(
await this._recipeService.getCurrentCountry(), await this._recipeService.getCurrentCountry(),
@ -120,6 +104,56 @@ export class LayoutComponent implements OnInit, OnDestroy {
}); });
} }
async ngOnInit(): Promise<void> {
this._userService.currentUser
.pipe(takeUntil(this.exit$))
.subscribe((user) => (this.user = user));
this.clockSubscription = timer(0, 1000)
.pipe(
map(() => new Date()),
share()
)
.subscribe((time) => {
this.date = time;
});
this._httpClient.get(environment.api + "/health/redis").subscribe((status) => {
this.redisStatus = (status as any)["status"];
});
// check if saves existed
// this._recipeService.getSavedTmp(
// await this._recipeService.getCurrentCountry(),
// this._recipeService.getCurrentFile()
// ).subscribe({
// next: async (data: any) => {
// console.log("get saved tmp", data);
// if(data != null && data != undefined){
// this.isCommitLoaded = Promise.resolve(true);
// }
// // TODO: optimize
// if(data != undefined && typeof data === 'object'){
// // check if attr exists
// if(data.files != null && data.files != undefined){
// this.showDetectChanges = true;
// await AsyncStorage.setItem("detectChanges", "true");
// this.changesCommit = data.files;
// console.log("get commits", this.changesCommit);
// } else {
// this.showDetectChanges = false;
// await AsyncStorage.setItem("detectChanges", "false");
// }
// } else {
// this.showDetectChanges = false;
// await AsyncStorage.setItem("detectChanges", "false");
// }
// }
// });
}
ngOnDestroy() { ngOnDestroy() {
this.exit$.next(); this.exit$.next();
this.exit$.complete(); this.exit$.complete();

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

@ -1,5 +1,13 @@
import { CommonModule, NgFor, NgIf } from '@angular/common'; import { CommonModule, NgFor, NgIf } from '@angular/common';
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ɵNOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR } from '@angular/core'; import {
Component,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
} from '@angular/core';
import { import {
FormArray, FormArray,
FormBuilder, FormBuilder,
@ -30,7 +38,7 @@ import {
stringParamsDefinition, stringParamsDefinition,
conditionTests, conditionTests,
inRange, inRange,
convertFromInterProductCode convertFromInterProductCode,
} from 'src/app/shared/helpers/recipe'; } from 'src/app/shared/helpers/recipe';
import { RecipeToppingComponent } from '../recipe-topping/recipe-topping.component'; import { RecipeToppingComponent } from '../recipe-topping/recipe-topping.component';
@ -40,24 +48,33 @@ import Lang from 'src/app/shared/helpers/lang';
selector: 'app-recipe-list', selector: 'app-recipe-list',
templateUrl: './recipe-list.component.html', templateUrl: './recipe-list.component.html',
standalone: true, standalone: true,
imports: [CommonModule,NgIf, NgFor, ReactiveFormsModule, FormsModule, RecipeToppingComponent] imports: [
CommonModule,
NgIf,
NgFor,
ReactiveFormsModule,
FormsModule,
RecipeToppingComponent,
],
}) })
export class RecipeListComponent implements OnInit, OnChanges { export class RecipeListComponent implements OnInit, OnChanges {
@Input({ required: true }) productCode!: string; @Input({ required: true }) productCode!: string;
@Input() noFetch: boolean = false; @Input() noFetch: boolean = false;
@Input() recipeList: any | undefined = undefined; @Input() recipeList: any | undefined = undefined;
@Input() displayOnly: boolean = false; @Input() displayOnly: boolean = false;
@Input() diffChangeContext: { @Input() diffChangeContext:
| {
changeContext: any; changeContext: any;
skipZeroes: boolean; skipZeroes: boolean;
toppingData: any; toppingData: any;
} | undefined = undefined; }
| undefined = undefined;
@Output() recipeListFormChange = new EventEmitter<unknown[]>(); @Output() recipeListFormChange = new EventEmitter<unknown[]>();
materialList: MaterialCode[] = []; materialList: MaterialCode[] = [];
fullMaterialList: fullMaterialList:
| { materialId: number; name: string; nameEN: string;type: string }[] | { materialId: number; name: string; nameEN: string; type: string }[]
| null = []; | null = [];
showMaterialSelector: boolean = false; showMaterialSelector: boolean = false;
@ -65,7 +82,9 @@ export class RecipeListComponent implements OnInit, OnChanges {
isMatLoaded: boolean = false; isMatLoaded: boolean = false;
categoriedMaterial: { [key: string]: { id: number; name: string; nameEN: string }[] } = {}; categoriedMaterial: {
[key: string]: { id: number; name: string; nameEN: string }[];
} = {};
// ------------------------------------------------------------------------ // ------------------------------------------------------------------------
// string params // string params
@ -112,41 +131,42 @@ export class RecipeListComponent implements OnInit, OnChanges {
private _recipeListOriginalArray!: RecipeDetailMat[]; private _recipeListOriginalArray!: RecipeDetailMat[];
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
// fetch material // fetch material
(await (await this._materialService.getMaterialCodes()).subscribe((materials) => {
this._materialService.getMaterialCodes()).subscribe((materials) => {
this.materialList = materials; this.materialList = materials;
// console.log("[MatService] get materials", materials.length); // console.log("[MatService] get materials", materials.length);
}); });
(await this._materialService.getFullMaterialDetail()).subscribe((materials) => { (await this._materialService.getFullMaterialDetail()).subscribe(
(materials) => {
this.fullMaterialList = materials; this.fullMaterialList = materials;
this.categoriedMaterial = this.listCategory(); this.categoriedMaterial = this.listCategory();
console.log(this.categoriedMaterial); console.log(this.categoriedMaterial);
// remapping missing material attr to recipeListData // remapping missing material attr to recipeListData
this.recipeListData.controls.forEach((recipeList: any, index: number) => { this.recipeListData.controls.forEach(
(recipeList: any, index: number) => {
// console.log("recipeList", recipeList); // console.log("recipeList", recipeList);
// do map name // do map name
let materialName = this.fullMaterialList!.find( let materialName = this.fullMaterialList!.find(
(mat) => mat.materialId.toString() == recipeList.get('materialPathId').value.toString() (mat) =>
mat.materialId.toString() ==
recipeList.get('materialPathId').value.toString()
); );
if(materialName){ if (materialName) {
recipeList.get('name').setValue(materialName.name); recipeList.get('name').setValue(materialName.name);
} }
}) }
);
}); }
);
// this do not fetch recipe list when initialized // this do not fetch recipe list when initialized
// use when doing `topping` // use when doing `topping`
if(!this.noFetch){ if (!this.noFetch) {
(await this._recipeService (await this._recipeService.getRecipeDetailMat(this.productCode))
.getRecipeDetailMat(this.productCode))
.pipe(first()) .pipe(first())
.subscribe(({ result }) => { .subscribe(({ result }) => {
this._recipeListOriginalArray = result; this._recipeListOriginalArray = result;
@ -158,7 +178,9 @@ export class RecipeListComponent implements OnInit, OnChanges {
recipeDetailMat.StringParam != '' || recipeDetailMat.StringParam != '' ||
recipeDetailMat.StringParam != null recipeDetailMat.StringParam != null
) { ) {
let currStringParam = new StringParam(recipeDetailMat.StringParam); let currStringParam = new StringParam(
recipeDetailMat.StringParam
);
let stringParamList = currStringParam.extract().as_list(); let stringParamList = currStringParam.extract().as_list();
let stringParamListTransform = []; let stringParamListTransform = [];
@ -198,7 +220,10 @@ export class RecipeListComponent implements OnInit, OnChanges {
}, },
], ],
isUse: [ isUse: [
{ value: recipeDetailMat.isUse, disabled: !this.isEditable() }, {
value: recipeDetailMat.isUse,
disabled: !this.isEditable(),
},
], ],
materialPathId: [ materialPathId: [
{ {
@ -259,23 +284,23 @@ export class RecipeListComponent implements OnInit, OnChanges {
{ {
value: recipeDetailMat.feedPattern, value: recipeDetailMat.feedPattern,
disabled: !this.isEditable(), disabled: !this.isEditable(),
} },
], ],
feedParameter: [ feedParameter: [
{ {
value: recipeDetailMat.feedParameter, value: recipeDetailMat.feedParameter,
disabled: !this.isEditable(), disabled: !this.isEditable(),
} },
] ],
}) })
); );
}); });
this.isMatLoaded = true; this.isMatLoaded = true;
}); });
} else if(this.recipeList != undefined){ } else if (this.recipeList != undefined) {
console.log("test recipelist", this.recipeList); console.log('test recipelist', this.recipeList);
this.recipeList.forEach( (recipeDetailMat: RecipeDetailMat, index: number) => { this.recipeList.forEach(
(recipeDetailMat: RecipeDetailMat, index: number) => {
// StringParam // StringParam
if ( if (
recipeDetailMat.StringParam != '' || recipeDetailMat.StringParam != '' ||
@ -284,7 +309,7 @@ export class RecipeListComponent implements OnInit, OnChanges {
let currStringParam = new StringParam(recipeDetailMat.StringParam); let currStringParam = new StringParam(recipeDetailMat.StringParam);
let stringParamList = currStringParam.extract().as_list(); let stringParamList = currStringParam.extract().as_list();
console.log("string param list", stringParamList); console.log('string param list', stringParamList);
let stringParamListTransform: any[] = []; let stringParamListTransform: any[] = [];
for (let param of stringParamList) { for (let param of stringParamList) {
@ -298,7 +323,7 @@ export class RecipeListComponent implements OnInit, OnChanges {
this.stringParamData.push( this.stringParamData.push(
this._formBuilder.array(stringParamListTransform) this._formBuilder.array(stringParamListTransform)
) );
this.stringParams[index] = stringParamList; this.stringParams[index] = stringParamList;
} }
@ -379,17 +404,18 @@ export class RecipeListComponent implements OnInit, OnChanges {
{ {
value: recipeDetailMat.feedPattern, value: recipeDetailMat.feedPattern,
disabled: !this.isEditable(), disabled: !this.isEditable(),
} },
], ],
feedParameter: [ feedParameter: [
{ {
value: recipeDetailMat.feedParameter, value: recipeDetailMat.feedParameter,
disabled: !this.isEditable(), disabled: !this.isEditable(),
} },
] ],
}) })
); );
}); }
);
} }
// event listener // event listener
@ -417,7 +443,10 @@ export class RecipeListComponent implements OnInit, OnChanges {
emitted_res.push(recipeDetailMat); emitted_res.push(recipeDetailMat);
}); });
this.recipeListFormChange.emit([this.toppingList, emitted_res] as unknown[]); this.recipeListFormChange.emit([
this.toppingList,
emitted_res,
] as unknown[]);
} else { } else {
this.recipeListFormChange.emit([]); this.recipeListFormChange.emit([]);
} }
@ -471,31 +500,32 @@ export class RecipeListComponent implements OnInit, OnChanges {
} }
async ngOnChanges(changes: SimpleChanges): Promise<void> { async ngOnChanges(changes: SimpleChanges): Promise<void> {
if (changes['recipeList']) {
if(changes['recipeList']){
let previousRecipeList = changes['recipeList'].previousValue; let previousRecipeList = changes['recipeList'].previousValue;
let newUpdatedRecipeList = changes['recipeList'].currentValue; let newUpdatedRecipeList = changes['recipeList'].currentValue;
let firstTime = changes['recipeList'].isFirstChange(); let firstTime = changes['recipeList'].isFirstChange();
console.log("test on changes", changes); console.log('test on changes', changes);
if(newUpdatedRecipeList != undefined && !firstTime){ if (newUpdatedRecipeList != undefined && !firstTime) {
console.log("test updated input recipelist", newUpdatedRecipeList); console.log('test updated input recipelist', newUpdatedRecipeList);
// reset // reset
this.stringParamData.clear(); this.stringParamData.clear();
this.recipeListData.clear(); this.recipeListData.clear();
newUpdatedRecipeList.forEach( (recipeDetailMat: RecipeDetailMat, index: number) => { newUpdatedRecipeList.forEach(
(recipeDetailMat: RecipeDetailMat, index: number) => {
// StringParam // StringParam
if ( if (
recipeDetailMat.StringParam != '' || recipeDetailMat.StringParam != '' ||
recipeDetailMat.StringParam != null recipeDetailMat.StringParam != null
) { ) {
let currStringParam = new StringParam(recipeDetailMat.StringParam); let currStringParam = new StringParam(
recipeDetailMat.StringParam
);
let stringParamList = currStringParam.extract().as_list(); let stringParamList = currStringParam.extract().as_list();
console.log('string param list',stringParamList); console.log('string param list', stringParamList);
let stringParamListTransform: any[] = []; let stringParamListTransform: any[] = [];
for (let param of stringParamList) { for (let param of stringParamList) {
@ -509,12 +539,12 @@ export class RecipeListComponent implements OnInit, OnChanges {
this.stringParamData.push( this.stringParamData.push(
this._formBuilder.array(stringParamListTransform) this._formBuilder.array(stringParamListTransform)
) );
this.stringParams[index] = stringParamList; this.stringParams[index] = stringParamList;
} }
console.log("string param debug change", this.stringParamData); console.log('string param debug change', this.stringParamData);
// --------------- mapping missing data --------------- // --------------- mapping missing data ---------------
@ -530,7 +560,10 @@ export class RecipeListComponent implements OnInit, OnChanges {
}, },
], ],
isUse: [ isUse: [
{ value: recipeDetailMat.isUse, disabled: !this.isEditable() }, {
value: recipeDetailMat.isUse,
disabled: !this.isEditable(),
},
], ],
materialPathId: [ materialPathId: [
{ {
@ -591,21 +624,22 @@ export class RecipeListComponent implements OnInit, OnChanges {
{ {
value: recipeDetailMat.feedPattern, value: recipeDetailMat.feedPattern,
disabled: !this.isEditable(), disabled: !this.isEditable(),
} },
], ],
feedParameter: [ feedParameter: [
{ {
value: recipeDetailMat.feedParameter, value: recipeDetailMat.feedParameter,
disabled: !this.isEditable(), disabled: !this.isEditable(),
} },
] ],
}) })
); );
// map material // map material
// fullMaterialList // fullMaterialList
this.setNameToRecipeList(); this.setNameToRecipeList();
}); }
);
// resub listener // resub listener
@ -671,9 +705,9 @@ export class RecipeListComponent implements OnInit, OnChanges {
} }
if (initString.length > 1) { if (initString.length > 1) {
(this.recipeListData.at(i) as any).controls.StringParam.setValue( (
initString this.recipeListData.at(i) as any
); ).controls.StringParam.setValue(initString);
// console.log('set', initString); // console.log('set', initString);
} }
@ -683,21 +717,18 @@ export class RecipeListComponent implements OnInit, OnChanges {
} }
} }
}); });
} }
} }
} }
// add new row // add new row
addRow() { addRow() {
this.recipeListData.push( this.recipeListData.push(
this._formBuilder.group({ this._formBuilder.group({
isUse: [{ value: false, disabled: !this.isEditable() }], isUse: [{ value: false, disabled: !this.isEditable() }],
materialPathId: [{ value: 0, disabled: !this.isEditable() }], materialPathId: [{ value: 0, disabled: !this.isEditable() }],
name: [{ value: "", disabled: true }], name: [{ value: '', disabled: true }],
MixOrder: [{ value: "", disabled: !this.isEditable() }], MixOrder: [{ value: '', disabled: !this.isEditable() }],
stirTime: [{ value: 1, disabled: !this.isEditable() }], stirTime: [{ value: 1, disabled: !this.isEditable() }],
powderGram: [{ value: 1, disabled: !this.isEditable() }], powderGram: [{ value: 1, disabled: !this.isEditable() }],
powderTime: [{ value: 0, disabled: !this.isEditable() }], powderTime: [{ value: 0, disabled: !this.isEditable() }],
@ -705,16 +736,15 @@ export class RecipeListComponent implements OnInit, OnChanges {
syrupTime: [{ value: 0, disabled: !this.isEditable() }], syrupTime: [{ value: 0, disabled: !this.isEditable() }],
waterCold: [{ value: 1, disabled: !this.isEditable() }], waterCold: [{ value: 1, disabled: !this.isEditable() }],
waterYield: [{ value: 1, disabled: !this.isEditable() }], waterYield: [{ value: 1, disabled: !this.isEditable() }],
feedPattern: [{ value: "", disabled: !this.isEditable() }], feedPattern: [{ value: '', disabled: !this.isEditable() }],
feedParameter: [{ value: "", disabled: !this.isEditable() }], feedParameter: [{ value: '', disabled: !this.isEditable() }],
StringParam: [{ value: "", disabled: !this.isEditable() }], StringParam: [{ value: '', disabled: !this.isEditable() }],
}) })
); );
} }
// remove from selection // remove from selection
removeRow() { removeRow() {
let i = this.selectedRecipeList; let i = this.selectedRecipeList;
i.forEach((idx) => { i.forEach((idx) => {
@ -724,19 +754,16 @@ export class RecipeListComponent implements OnInit, OnChanges {
this.selectedRecipeList = []; this.selectedRecipeList = [];
} }
addToSelection(i: number){ addToSelection(i: number) {
if (this.selectedRecipeList.includes(i)) {
if(this.selectedRecipeList.includes(i)){
let index = this.selectedRecipeList.indexOf(i); let index = this.selectedRecipeList.indexOf(i);
this.selectedRecipeList.splice(index, 1); this.selectedRecipeList.splice(index, 1);
return; return;
} }
this.selectedRecipeList.push(i); this.selectedRecipeList.push(i);
console.log("selected recipe list", this.selectedRecipeList); console.log('selected recipe list', this.selectedRecipeList);
} }
get recipeListData(): FormArray { get recipeListData(): FormArray {
return this.recipeListForm.get('recipeListData') as FormArray; return this.recipeListForm.get('recipeListData') as FormArray;
} }
@ -750,8 +777,7 @@ export class RecipeListComponent implements OnInit, OnChanges {
} }
isEditable() { isEditable() {
if (this.displayOnly) {
if(this.displayOnly){
return !this.displayOnly; return !this.displayOnly;
} }
@ -776,9 +802,7 @@ export class RecipeListComponent implements OnInit, OnChanges {
(mat) => mat.materialId == material (mat) => mat.materialId == material
)!.name; )!.name;
this.recipeListData.at(i).get('name')?.setValue( this.recipeListData.at(i).get('name')?.setValue(materialName);
materialName
);
// console.log('set mat ', material, materialName,'to slot', i); // console.log('set mat ', material, materialName,'to slot', i);
} }
@ -827,11 +851,11 @@ export class RecipeListComponent implements OnInit, OnChanges {
this.fullMaterialList!.forEach((mat) => { this.fullMaterialList!.forEach((mat) => {
let category = getMaterialType(mat.materialId); let category = getMaterialType(mat.materialId);
// try again // try again
if(category == 'others'){ if (category == 'others') {
// find min // find min
// console.log(Math.floor(mat.materialId / 1000) ); // console.log(Math.floor(mat.materialId / 1000) );
let interCode = Math.floor(mat.materialId / 10000) * 10000; let interCode = Math.floor(mat.materialId / 10000) * 10000;
let originalCode = mat.materialId - (interCode); let originalCode = mat.materialId - interCode;
// console.log("from",mat.materialId,"interCode", interCode, "originalCode", originalCode); // console.log("from",mat.materialId,"interCode", interCode, "originalCode", originalCode);
category = getMaterialType(originalCode); category = getMaterialType(originalCode);
@ -861,7 +885,8 @@ export class RecipeListComponent implements OnInit, OnChanges {
return inRange(8111, 8130, convertFromInterProductCode(materialId)); return inRange(8111, 8130, convertFromInterProductCode(materialId));
}; };
getToppingSlotNumber = (mat: number) => convertFromInterProductCode(mat) - 8110 - 1 ; getToppingSlotNumber = (mat: number) =>
convertFromInterProductCode(mat) - 8110 - 1;
// get value at index, if 'MixOrder' exist and is 1, return true // get value at index, if 'MixOrder' exist and is 1, return true
isMixOrder = (index: number) => { isMixOrder = (index: number) => {
@ -875,9 +900,8 @@ export class RecipeListComponent implements OnInit, OnChanges {
// } // }
// console.log("get::MixOrder", mixOrder, "test get::mixOrder", this.recipeListData.at(index).get('mixOrder')); // console.log("get::MixOrder", mixOrder, "test get::mixOrder", this.recipeListData.at(index).get('mixOrder'));
return mixOrder.toString() == "1" ? true : false; return mixOrder.toString() == '1' ? true : false;
} };
// ------------------ String Param ------------------ // ------------------ String Param ------------------
@ -946,17 +970,20 @@ export class RecipeListComponent implements OnInit, OnChanges {
return stringParamsDefinition[name] || name; return stringParamsDefinition[name] || name;
}; };
// ------------------ Filter ------------------ // ------------------ Filter ------------------
displayByCond = (index: number, key: string, condition: any, compare?: any) =>{ displayByCond = (
if(typeof condition == 'function'){ index: number,
key: string,
condition: any,
compare?: any
) => {
if (typeof condition == 'function') {
return condition(this.recipeListData.value[index][key], compare); return condition(this.recipeListData.value[index][key], compare);
} }
return conditionTests[condition](this.recipeListData.value[index][key]) return conditionTests[condition](this.recipeListData.value[index][key]);
}; };
// timeout // timeout
timeoutHandler: any; timeoutHandler: any;
timeout: number = 0; timeout: number = 0;
@ -967,18 +994,17 @@ export class RecipeListComponent implements OnInit, OnChanges {
} }
async openRecipeListEditor(i: number) { async openRecipeListEditor(i: number) {
await Promise.resolve(); await Promise.resolve();
if (this.timeoutHandler) { if (this.timeoutHandler) {
if (this.timeout >= 20 && !this.displayOnly) { if (this.timeout >= 20 && !this.displayOnly) {
// alert("Opening Recipe List Editor in detail") // alert("Opening Recipe List Editor in detail")
if (confirm("Are you sure you want to open Recipe List Editor in detail?")) { if (
confirm('Are you sure you want to open Recipe List Editor in detail?')
) {
this.showDetailRecipeList = true; this.showDetailRecipeList = true;
} else { } else {
this.showDetailRecipeList = false; this.showDetailRecipeList = false;
} }
} }
clearInterval(this.timeoutHandler); clearInterval(this.timeoutHandler);
@ -986,7 +1012,6 @@ export class RecipeListComponent implements OnInit, OnChanges {
this.currentSelectRecipeList = i; this.currentSelectRecipeList = i;
this.timeout = 0; this.timeout = 0;
} }
} }
// this does update, not save // this does update, not save
@ -998,19 +1023,14 @@ export class RecipeListComponent implements OnInit, OnChanges {
); );
} }
getTooltipForStirTime = (cat: { getTooltipForStirTime = (cat: { category: string; name: any; id: any }) => {
category: string;
name: any;
id: any;
}) => {
switch (cat.category) { switch (cat.category) {
case 'whipper': case 'whipper':
return 'Mix'; return 'Mix';
case 'bean': case 'bean':
return 'Grinder'; return 'Grinder';
case 'others': case 'others':
if (inRange(8001, 8002, cat.id)) {
if(inRange(8001, 8002, cat.id)){
return 'Clean'; return 'Clean';
} }
@ -1023,88 +1043,119 @@ export class RecipeListComponent implements OnInit, OnChanges {
}; };
onToppingSetChange = (event: any, index: number) => { onToppingSetChange = (event: any, index: number) => {
let emptyToppingTemplate = [
{
isUse: false,
groupID: '0',
defaultIDSelect: 0,
ListGroupID: [0, 0, 0, 0],
},
];
// where index is the actual index of slot opened for topping // where index is the actual index of slot opened for topping
this.toppingList[event[0]] = event[1]; this.toppingList[event[0]] = event[1];
// trigger emitter
this.recipeListFormChange.emit([this.toppingList, this.recipeListData.value]); // check if topping list has empty allocation
for (
let toppingIndex = 0;
toppingIndex < this.toppingList.length;
toppingIndex++
) {
if (this.toppingList[toppingIndex] == undefined) {
// console.log("must add padding", toppingIndex);
this.toppingList[toppingIndex] = emptyToppingTemplate;
}
} }
// trigger emitter
this.recipeListFormChange.emit([
this.toppingList,
this.recipeListData.value,
]);
};
// language handler // language handler
async displayLang(material: any){ async displayLang(material: any) {
let currLang = await Lang.getCurrentLanguage(); let currLang = await Lang.getCurrentLanguage();
if(currLang == 'th'){ if (currLang == 'th') {
return material.name; return material.name;
} else { } else {
return material.nameEN; return material.nameEN;
} }
} }
// ----------------------------- Change/Diff ------------------------------- // ----------------------------- Change/Diff -------------------------------
invokeZeroMaterialChecker = (index: number) => { invokeZeroMaterialChecker = (index: number) => {
if(this.diffChangeContext?.skipZeroes == true){ if (this.diffChangeContext?.skipZeroes == true) {
// check if current index's material is 0 // check if current index's material is 0
let isZeroMaterial = this.recipeListData.at(index).get('materialPathId')?.value == "0"; let isZeroMaterial =
if(isZeroMaterial){ this.recipeListData.at(index).get('materialPathId')?.value == '0';
if (isZeroMaterial) {
return false; return false;
} }
} }
return true; return true;
} };
// reinit // reinit
buildToppingContext(index: number){ buildToppingContext(index: number) {
if (
if(this.diffChangeContext != undefined && this.diffChangeContext.toppingData != undefined){ this.diffChangeContext != undefined &&
this.diffChangeContext.toppingData != undefined
) {
// console.log('building context of topping',index, this.diffChangeContext.toppingData[index]) // console.log('building context of topping',index, this.diffChangeContext.toppingData[index])
let emptyToppingTemplate = { let emptyToppingTemplate = {
isUse: false, isUse: false,
groupID: 0, groupID: 0,
defaultIDSelect: 0, defaultIDSelect: 0,
ListGroupID: ["0", "0", "0", "0"], ListGroupID: ['0', '0', '0', '0'],
}; };
// check on data length // check on data length
if(index > this.diffChangeContext.toppingData.length - 1){ if (index > this.diffChangeContext.toppingData.length - 1) {
// padding // padding
} }
let fetchedData = this.diffChangeContext.toppingData[index]; let fetchedData = this.diffChangeContext.toppingData[index];
let raisedIndexException = "Index error! require ["+(index + 1).toString()+"] but data not found!"; let raisedIndexException =
'Index error! require [' +
(index + 1).toString() +
'] but data not found!';
if(fetchedData == undefined || fetchedData == null){ if (fetchedData == undefined || fetchedData == null) {
fetchedData = emptyToppingTemplate; fetchedData = emptyToppingTemplate;
} }
let context = { let context = {
errorInIndex: { errorInIndex: {
causedBy: "[ERROR?] has slot but topping data not found.", causedBy: '[ERROR?] has slot but topping data not found.',
fullExplanation: raisedIndexException + " Reached upper limit or not yet implemented. ", fullExplanation:
raisedIndexException +
' Reached upper limit or not yet implemented. ',
}, },
enableEditInDiffMode: false, enableEditInDiffMode: false,
preFetchedData: [fetchedData] preFetchedData: [fetchedData],
} };
if(this.diffChangeContext.toppingData[index] != undefined || this.diffChangeContext.toppingData[index] != null || index > this.diffChangeContext.toppingData.length - 1){ if (
context.errorInIndex.causedBy = ""; this.diffChangeContext.toppingData[index] != undefined ||
this.diffChangeContext.toppingData[index] != null ||
index > this.diffChangeContext.toppingData.length - 1
) {
context.errorInIndex.causedBy = '';
} }
return context; return context;
} }
return undefined; return undefined;
} }
// name mapping // name mapping
setNameToRecipeList(){ setNameToRecipeList() {
this.recipeListData.value.forEach((recipe: any, index: number) => { this.recipeListData.value.forEach((recipe: any, index: number) => {
// get name from full material list // get name from full material list
let mat_name = this.fullMaterialList!.find( let mat_name = this.fullMaterialList!.find(

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

@ -142,15 +142,18 @@ export class RecipeToppingComponent implements OnInit, OnChanges {
}) })
); );
} }
} else {
// padding // padding
// TODO: move padding to recipelist then insert padding between original last index and this index
if (this.index! > data.length) { if (this.index! > data.length) {
for ( // for (
let init = this.toppingList.length - 1; // let init = this.toppingList.length - 1;
this.toppingList.at(this.index!) == undefined && // this.toppingList.at(this.index!) == undefined &&
init < this.index!; // init < this.index!;
init++ // init++
) { // ) {
// }
this.toppingList.push( this.toppingList.push(
this._formBuilder.group({ this._formBuilder.group({
isUse: false, isUse: false,
@ -160,7 +163,6 @@ export class RecipeToppingComponent implements OnInit, OnChanges {
}) })
); );
} }
}
console.log( console.log(
'SubscribeToppingSet', 'SubscribeToppingSet',
@ -208,7 +210,7 @@ export class RecipeToppingComponent implements OnInit, OnChanges {
// apply on read mode // apply on read mode
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
console.log('changes on topping', changes); // console.log('changes on topping', changes);
if (changes['preFetchedData']) { if (changes['preFetchedData']) {
let toppingSet = changes['preFetchedData'].currentValue as Array<any>; let toppingSet = changes['preFetchedData'].currentValue as Array<any>;