- added registartion page;

- implemented validation helper-functions; - fixed form fields datepicker and datepicker range; - updated routes logic; - fixed FAQ items editing/submission;
2024-09-23 10:05:43 +02:00
parent cf149485e0
commit bbf117eb9b
58 changed files with 1238 additions and 392 deletions
--- a/src/components/FlowBuilder/components/NodeInitialForm/index.js
+++ b/src/components/FlowBuilder/components/NodeInitialForm/index.js
@@ -4,12 +4,14 @@ import { isEmpty, head } from 'ramda';

 // store
 import { storeGet, storeSet } from '../../../../store';
+import { __ } from '@wordpress/i18n';

 const NodeInitialForm = ({ data: { id, label = '' } }) => {
-    const [options, setOptions] = useState([]);
+    const flowData = storeGet.main.flowData();
+    //const [options, setOptions] = useState([]);
    const [value, setValue] = useState('');

-    const onChangeFn = (e) => {
+    /*const onChangeFn = (e) => {
        const { value } = e.target;
        const data = {
            formId: String(id),
@@ -18,12 +20,14 @@ const NodeInitialForm = ({ data: { id, label = '' } }) => {
        }
        setValue(value);
        storeSet.main.addFlowData(data);
-    }
+    }*/

-    useEffect(() => {
-        const forms = storeGet.main.flowForms();
-        if (forms.length > 2) {
-            const form = head(forms.filter(o => String(o.id) === String(id)))
+    /*useEffect(() => {
+        const flowForms = storeGet.main.flowForms();
+        const flowData = storeGet.main.flowData();
+
+        if (flowForms.length > 2) {
+            const form = head(flowForms.filter(o => String(o.id) === String(id)))
            const relevantFields = form
                ? form.content
                    .filter(o => ['radio', 'select'].includes(o.name))
@@ -31,20 +35,42 @@ const NodeInitialForm = ({ data: { id, label = '' } }) => {
                : [];
            setOptions(relevantFields);
        }
-    }, [id]);
+
+        const flowDataForm = head(flowData.filter(o => String(o.formId) === String(id)));
+
+        if (flowDataForm) {
+            setValue(flowDataForm.chosenField);
+        }
+    }, [id]);*/
+
+    useEffect(() => {
+        const flowForms = storeGet.main.flowForms();
+        const form = head(flowForms.filter(o => String(o.id) === String(id)));
+        const flowDataItem = head(flowData.filter(o => String(o.formId) === String(id)));
+
+        if (form && flowDataItem) {
+            const field = head(form.content.filter(o => o.id === flowDataItem.chosenField));
+
+            if (field) {
+                const label = head(field.settings.filter(o => o.name === 'label'));
+                setValue(label ? label.value : field.label);
+            }
+        }
+    }, [flowData]);

    return (
        <div className="nodeInitialForm">
            <label>
                {label}
            </label>
-            {options && !isEmpty(options)
+            <span>{value}</span>
+            {/*{options && !isEmpty(options)
                ? <select onChange={onChangeFn} value={value}>
-                    <option value="">Choose form</option>
+                    <option value="">{__('Scegli il campo', 'gepafin')}</option>
                    {options.map(o => <option key={o.name} value={o.name}>
                        {o.label}
                    </option>)}
-                </select> : null}
+                </select> : null}*/}
            <Handle
                type="source"
                position={Position.Bottom}
--- a/src/components/FlowBuilder/components/NodeIntermediateForm/index.js
+++ b/src/components/FlowBuilder/components/NodeIntermediateForm/index.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Handle, Position } from '@xyflow/react';
 import { head, isEmpty } from 'ramda';
+import { __ } from '@wordpress/i18n';

 import { useStore, storeSet, storeGet } from '../../../../store';

@@ -25,9 +26,10 @@ const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
        const edge = head(flowEdges.filter(o => o.target === String(id)));
        if (edge) {
            const sourceForm = edge.source;
-            const sourceFormData = head(flowData.filter(o => o.formId === sourceForm));
+            const sourceFormData = head(flowData.filter(o => String(o.formId) === sourceForm));
            const flowForms = storeGet.main.flowForms();
            const form = head(flowForms.filter(o => String(o.id) === String(sourceForm)));
+
            if (form && sourceFormData) {
                const { chosenField } = sourceFormData;
                const field = head(form.content.filter(o => o.id === chosenField));
@@ -38,7 +40,12 @@ const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
                    }
                }
            }
+        }

+        const flowDataForm = head(flowData.filter(o => String(o.formId) === String(id)));
+
+        if (flowDataForm) {
+            setValue(flowDataForm.chosenValue);
        }
    }, [flowEdges, flowData]);

@@ -54,7 +61,7 @@ const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
            </label>
            {options && !isEmpty(options)
                ? <select onChange={onChangeFn} value={value}>
-                    <option value="">Choose form</option>
+                    <option value="">{__('Scegli il valore', 'gepafin')}</option>
                    {options.map(o => <option key={o.name} value={o.name}>
                        {o.label}
                    </option>)}
--- a/src/components/FlowBuilder/index.js
+++ b/src/components/FlowBuilder/index.js
@@ -19,8 +19,8 @@ const nodeTypes = {
    intermediateForm: NodeIntermediateForm
 };

-const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
-    const forms = useStore().main.flowForms();
+const FlowBuilder = ({ initialForm = 0, finalForm = 0, mainField = '' }) => {
+    const flowForms = useStore().main.flowForms();
    const [nodes, setNodes] = useState([]);
    const [edges, setEdges] = useState([]);

@@ -33,13 +33,13 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {

    useEffect(() => {
        if (
-            (forms.length === 2 && initialForm) ||
-            (forms.length > 2 && initialForm && finalForm)
+            (flowForms.length === 2 && initialForm) ||
+            (flowForms.length > 2 && initialForm && finalForm)
        ) {
-            const total = (forms.length - 2) * (200 - 90);
+            const total = (flowForms.length - 2) * (200 - 90);
            let coordinates = range(total * -1, total, 200);

-            const initialNodes = forms.map(o => {
+            const initialNodes = flowForms.map(o => {
                const formId = String(o.id);
                let obj;

@@ -55,7 +55,7 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
                        id: formId,
                        type: 'output',
                        data: { label: o.label, id: formId },
-                        position: { x: 0, y: forms.length === 2 ? 150 : 300 },
+                        position: { x: 0, y: flowForms.length === 2 ? 150 : 300 },
                    }
                } else {
                    const x = coordinates.splice(0, 1);
@@ -71,29 +71,53 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {

            let edges = [];
            // eslint-disable-next-line
-            forms.map(o => {
+            flowForms.map(o => {
                const formId = String(o.id);

                if (formId !== String(initialForm) && formId !== String(finalForm)) {
-                    edges.push({ id: `${initialForm}->${formId}`, source: String(initialForm), target: formId, type: 'smoothstep' });
+                    edges.push({
+                        id: `${initialForm}->${formId}`,
+                        source: String(initialForm),
+                        target: formId,
+                        type: 'smoothstep'
+                    });
                }
                if (formId !== String(initialForm) && formId !== String(finalForm) && String(finalForm) !== '0') {
-                    edges.push({ id: `${formId}->${finalForm}`, source: formId, target: String(finalForm), type: 'smoothstep' });
+                    edges.push({
+                        id: `${formId}->${finalForm}`,
+                        source: formId,
+                        target: String(finalForm),
+                        type: 'smoothstep'
+                    });
                }
            });

-            if (forms.length === 2 && initialForm && finalForm) {
-                edges.push({ id: `${initialForm}->${finalForm}`, source: String(initialForm), target: String(finalForm), type: 'smoothstep' });
+            if (flowForms.length === 2 && initialForm && finalForm) {
+                edges.push({
+                    id: `${initialForm}->${finalForm}`,
+                    source: String(initialForm),
+                    target: String(finalForm),
+                    type: 'smoothstep'
+                });
            }

            setNodes(initialNodes);
            setEdges(edges);
            storeSet.main.flowEdges(edges);
+
+            if (!isEmpty(mainField)) {
+                const data = {
+                    formId: String(initialForm),
+                    chosenField: mainField,
+                    chosenValue: ''
+                }
+                storeSet.main.addFlowData(data);
+            }
        } else {
            setNodes([]);
            setEdges([]);
        }
-    }, [initialForm, finalForm, forms]);
+    }, [initialForm, finalForm, flowForms, mainField]);

    return (
        !isEmpty(nodes) && !isEmpty(edges)