add edited param back to StringParam

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

@@ -194,16 +194,14 @@
             <input
               type="checkbox"
               formControlName="pvalue"
-              *ngIf="param.value.pkey == 'notail'"
+              *ngIf="param.value.pvalue == true || param.value.pvalue == false"
-              (click)="setStringParam(isdx, 'notail', param.value.pvalue)"
+              (click)="setStringParam(isdx, param.value.pkey, !param.value.pvalue)"
             />
             <input
               type="text"
               class="input bg-slate-400"
               formControlName="pvalue"
-              *ngIf="
+              *ngIf="param.value.pvalue != true && param.value.pvalue != false
-                param.value.pkey != 'notail' &&
-                param.value.pkey != 'encoder_cnt'
               "
               (change)="setStringParam(isdx, param.value.pkey, $event)"
             />

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 stringVal = event.target == undefined ? undefined : event.target.value;
-
-    // let value = event.target.value;
-
-    let stringVal = event.target.value;
 
     if (event != undefined) {
-      // get param at index
+      event = stringVal == undefined ? event : stringVal;
-      // this.stringParams[i].find((param) => {
+      let targetControl = (this.stringParamData.controls[i] as FormArray)
-      //   if (param.pkey == key) {
+        .controls;
-      //     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;
       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;