From 372e43a9a018acd9063a76dca96b1c6470f36f09 Mon Sep 17 00:00:00 2001 From: "pakintada@gmail.com" Date: Fri, 12 Jan 2024 09:19:28 +0700 Subject: [PATCH] add edited param back to StringParam --- .../recipe-list/recipe-list.component.html | 8 +- .../recipe-list/recipe-list.component.ts | 91 ++++++++++++------- 2 files changed, 62 insertions(+), 37 deletions(-) diff --git a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html index 8a92b61..9fb6c8a 100644 --- a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html +++ b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html @@ -194,16 +194,14 @@ diff --git a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts index 11e1037..9386bcd 100644 --- a/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts +++ b/client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts @@ -8,7 +8,7 @@ import { NgModel, ReactiveFormsModule, } from '@angular/forms'; -import { forEach, isEqual, sortBy } from 'lodash'; +import { forEach, isBoolean, isEqual, sortBy } from 'lodash'; import { first } from 'rxjs'; import { UserPermissions } from 'src/app/core/auth/userPermissions'; import { @@ -105,6 +105,13 @@ export class RecipeListComponent implements OnInit { let stringParamListTransform = []; for (let param of stringParamList) { + // boolean transform + if (param.pvalue == 'true') { + param.pvalue = true; + } else if (param.pvalue == 'false') { + param.pvalue = false; + } + stringParamListTransform.push( this._formBuilder.group({ pkey: [{ value: param.pkey, disabled: !this.isEditable() }], @@ -121,7 +128,7 @@ export class RecipeListComponent implements OnInit { this.stringParams[index] = stringParamList; - // console.log("string param", this.stringParamData.at(6)); + // console.log("string param at index", index, this.stringParams[index]); } this.recipeListData.push( @@ -196,7 +203,51 @@ export class RecipeListComponent implements OnInit { this.isMatLoaded = true; }); - console.log('string param form', this.stringParamForm); + this.stringParamForm.valueChanges.subscribe((value) => { + // value.stringParamData: Array + // where this.stringParams: {[key: number] : {pkey: string, pvalue: any}} + + // transform value to map + let mapValue: { [key: number]: { pkey: string; pvalue: any }[] } = {}; + forEach(value.stringParamData, (param: any, index: number) => { + mapValue[index] = param; + }); + + let checkLen = + Object.keys(mapValue).length == + Object.keys(this.stringParams as any).length; + let baseLen = + Object.keys(this.stringParams as any).length >= + Object.keys(mapValue).length + ? Object.keys(this.stringParams as any).length + : Object.keys(mapValue).length; + + if (checkLen) { + for (let i = 0; i < baseLen; i++) { + if (!isEqual(this.stringParams[i], mapValue[i])) { + console.log('check', (this.stringParams as any)[i], mapValue[i]); + + // transform back to string + let initString = ','; + for (let key of Object.keys(mapValue[i])) { + initString += `${mapValue[i][parseInt(key)].pkey}=${ + mapValue[i][parseInt(key)].pvalue + },`; + } + + if (initString.length > 1) { + (this.recipeListData.at(i) as any).controls.StringParam.setValue( + initString + ); + console.log('set', initString); + } + + // do last + this.stringParams[i] = mapValue[i]; + } + } + } + }); this.recipeListForm.valueChanges.subscribe((value) => { // console.log(value.recipeListData); @@ -365,33 +416,13 @@ export class RecipeListComponent implements OnInit { }; setStringParam = (i: number, key: string, event: any) => { - console.log('check on string param', this.stringParams, i, key, event); - - // let value = event.target.value; - - let stringVal = event.target.value; + let stringVal = event.target == undefined ? undefined : event.target.value; if (event != undefined) { - // get param at index - // this.stringParams[i].find((param) => { - // if (param.pkey == key) { - // param.pvalue = event; - // } - // }); - - event = stringVal == undefined ? event: stringVal; - - this.stringParams[i].find((param) => param.pkey == key)!.pvalue = event.toString(); - - console.log("finder", this.stringParams[i].find((param) => param.pkey == key)); - - // update string param form - // console.log(this.stringParamData.controls[i].get(key)); - - - let targetControl = ((this.stringParamData.controls[i]) as FormArray).controls; + event = stringVal == undefined ? event : stringVal; + let targetControl = (this.stringParamData.controls[i] as FormArray) + .controls; let pindex = 0; - targetControl.forEach((control: any, index: number) => { if (control.get('pkey')!.value == key) { pindex = index; @@ -400,10 +431,6 @@ export class RecipeListComponent implements OnInit { // set value targetControl[pindex].get('pvalue')!.setValue(event); - - console.log("set value", targetControl[pindex].get('pvalue')!.value); - - // console.log('set string param', this.stringParams, i, key, event); } }; @@ -413,7 +440,7 @@ export class RecipeListComponent implements OnInit { this.currentSelectStringParam = i; } - alterStringParamDisplayName = (name: string) =>{ + alterStringParamDisplayName = (name: string) => { // console.log("alterStringParamDisplayName", name, stringParamsDefinition[name]); return stringParamsDefinition[name] || name;