improving array and dialog-form-node

Author: devhelpr

libs/visual-programming-system/src/forms/form-fields/array.ts

@@ -42,7 +42,7 @@ export class ArrayFieldChildComponent extends FormFieldComponent<ArrayFieldProps
   constructor(parent: BaseComponent | null, props: ArrayFieldProps) {
     super(parent, props);
     this.fieldName = props.fieldName;
-    this.values = props.values.map((value) => {
+    this.values = (props.values ?? []).map((value) => {
       return { id: crypto.randomUUID(), arrayItems: value };
     });
     this.template = createTemplate(

libs/visual-programming-system/src/utils/create-rect-node.tsx

@@ -439,6 +439,7 @@ export const visualNodeFactory = <T extends BaseNodeInfo>(
     additionalClassNames?: string;
     additionalInnerNodeClassNames?: string;
     hasFormInPopup?: boolean;
+    hasSettingsPopup?: boolean;
     hasStaticWidthHeight?: boolean;
     decoratorTitle?: string;
     category?: string;
@@ -545,8 +546,7 @@ export const visualNodeFactory = <T extends BaseNodeInfo>(
       const nodeInstance = createRectNode<T>(
         nodeTypeName,
         title,
-
-        formElements,
+        settings?.hasSettingsPopup ? [] : formElements,
         x,
         y,
         width,

libs/web-flow-executor/src/nodes/dialog-form.ts

@@ -209,11 +209,17 @@ export const dialogFormNode = (updated: () => void): NodeTask<NodeInfo> => {
         maxConnections: 1,
       },
     ],
-    (values?: InitialValues) => {
+    (_idvalues?: InitialValues) => {
+      return [];
+    },
+    (nodeInstance) => {
+      node = nodeInstance.node as IRectNodeComponent<NodeInfo>;
+      const values = node?.nodeInfo?.formValues;
       const formElements = [
         {
           fieldType: FormFieldType.Text,
           fieldName: fieldName,
+          label: 'Message test',
           value: values?.[fieldName] ?? '',
           settings: {
             showLabel: true,
@@ -234,12 +240,15 @@ export const dialogFormNode = (updated: () => void): NodeTask<NodeInfo> => {
         },
         {
           fieldType: FormFieldType.Array,
-          fieldName: fieldName,
-          value: values?.[fieldName] ?? '',
-          values: (values?.[formControlsfieldName] ?? []) as Record<
+          fieldName: formControlsfieldName,
+          value: (values?.[formControlsfieldName] ?? []) as Record<
             string,
             string
           >[],
+          // values: (values?.[formControlsfieldName] ?? []) as Record<
+          //   string,
+          //   string
+          // >[],
           settings: {
             showLabel: true,
           },
@@ -270,18 +279,25 @@ export const dialogFormNode = (updated: () => void): NodeTask<NodeInfo> => {
           },
         },
       ];
-      return formElements;
-    },
-    (nodeInstance) => {
-      node = nodeInstance.node as IRectNodeComponent<NodeInfo>;
+
       canvasAppInstance = nodeInstance.contextInstance;
+      if (node.nodeInfo) {
+        node.nodeInfo.formElements = formElements;
+        node.nodeInfo.formValues = {
+          ...node.nodeInfo.formValues,
+          [fieldName]: values?.[fieldName] ?? '',
+          [formControlsfieldName]: values?.[formControlsfieldName] ?? [],
+        };
+        node.nodeInfo.isSettingsPopup = true;
+      }
     },
     {
       hasTitlebar: false,
       hasFormInPopup: true,
       childNodeWrapperClass: 'flex w-full h-full p-[16px]',
       additionalClassNames: 'text-center',
       hasStaticWidthHeight: true,
+      hasSettingsPopup: true,
     },
     dialogNodeElement,
     true