- finished new flow builder UI;

- fixed reset pass functionality;

src/pages/BandoFlowEdit/index.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-import { isEmpty, head, pathOr, isNil } from 'ramda';
+import { isEmpty, head, pathOr } from 'ramda';
 
 // store
-import { storeGet, storeSet, useStore } from '../../store';
+import { storeSet } from '../../store';
 
 // api
 import FormsService from '../../service/forms-service';
@@ -28,14 +28,14 @@ const BandoFlowEdit = () => {
         initialForm: 0,
         finalForm: 0,
         flowData: [],
-        flowWdges: [],
+        flowEdges: [],
         chosenField: ''
     });
 
     const [forms, setForms] = useState([]);
     const [formOptions, setFormOptions] = useState([]);
     const [chosenMainFieldOptions, setChosenMainFieldOptions] = useState([]);
-    const [chosenMainField, setChosenMainField] = useState('');
+    //const [chosenMainField, setChosenMainField] = useState('');
     const [mainFieldSuboptions, setMainFieldSubOptions] = useState([]);
     const [bandoStatus, setBandoStatus] = useState('');
     const [isFlowAllowed, setIsFlowAllowed] = useState(true);
@@ -77,7 +77,7 @@ const BandoFlowEdit = () => {
             initialForm: 0,
             finalForm: 0,
             flowData: [],
-            flowWdges: [],
+            flowEdges: [],
             chosenField: ''
         })
 
@@ -85,7 +85,7 @@ const BandoFlowEdit = () => {
         setChosenMainFieldOptions([]);
     }
 
-    const updateInitialForm = (value) => {
+    const updateInitialForm = useCallback((value) => {
         const finalFormObj = head(forms.filter(o => o.id !== value));
 
         if (forms.length === 2 && finalFormObj) {
@@ -100,9 +100,9 @@ const BandoFlowEdit = () => {
                 initialForm: value
             });
         }
-    }
+    }, [flowStructure])
 
-    const updateFinalForm = (value) => {
+    const updateFinalForm = useCallback((value) => {
         const filtered = flowStructure.flowData.filter(o => o.formId === flowStructure.initialForm);
         const flowEdges = buildFlowEdges(flowStructure.initialForm, value);
 
@@ -112,7 +112,14 @@ const BandoFlowEdit = () => {
             flowData: filtered,
             finalForm: value
         });
-    }
+    }, [flowStructure]);
+
+    const updateChosenField = useCallback((value) => {
+        setFlowStructure({
+            ...flowStructure,
+            chosenField: value
+        });
+    }, [flowStructure]);
 
     const addFlowData = useCallback((data) => {
         const initial = flowStructure.flowData;
@@ -227,7 +234,7 @@ const BandoFlowEdit = () => {
                     initialForm: data.data.initialForm,
                     finalForm: data.data.finalForm,
                     flowData: data.data.flowData,
-                    flowWdges: data.data.flowWdges,
+                    flowEdges: data.data.flowEdges,
                     chosenField: chosenFieldItem.chosenField
                 });
                 const form = head(forms.filter(o => o.id === data.data.initialForm));
@@ -250,7 +257,7 @@ const BandoFlowEdit = () => {
                     initialForm: data.data.initialForm,
                     finalForm: data.data.finalForm,
                     flowData: data.data.flowData,
-                    flowWdges: data.data.flowWdges,
+                    flowEdges: data.data.flowEdges,
                     chosenField: ''
                 });
             }
@@ -332,8 +339,9 @@ const BandoFlowEdit = () => {
     }, [forms]);
 
     useEffect(() => {
-        console.log('updated flowStructure:', flowStructure);
-        const { initialForm = 0, finalForm = 0, chosenField = '' } = flowStructure;
+        const initialForm = flowStructure.initialForm;
+        const finalForm = flowStructure.finalForm;
+        const chosenField = flowStructure.chosenField;
 
         if (!isEmpty(initialForm) && !isEmpty(finalForm)) {
             const form = head(forms.filter(o => String(o.id) === String(initialForm)))
@@ -351,10 +359,10 @@ const BandoFlowEdit = () => {
             );
 
             if (forms.length === 2) {
-                setIsFlowAllowed(true)
+                setIsFlowAllowed(true);
             }
 
-            const flowEdges = buildFlowEdges(initialForm, finalForm);
+            //const flowEdges = buildFlowEdges(initialForm, finalForm);
 
             if (!isEmpty(chosenField)) {
                 const field = form ? head(form.content.filter(o => o.id === chosenField)) : null;
@@ -393,7 +401,7 @@ const BandoFlowEdit = () => {
                         msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.';
                     }
 
-                    if (flowMsgs.current && !isEmpty(chosenMainField)) {
+                    if (flowMsgs.current && !isEmpty(chosenField)) {
                         flowMsgs.current.clear();
                         flowMsgs.current.show([
                             {
@@ -410,131 +418,13 @@ const BandoFlowEdit = () => {
                 }
             }
         }
-    }, [flowStructure]);
+    }, [flowStructure.initialForm, flowStructure.finalForm, flowStructure.chosenField]);
 
-    /*useEffect(() => {
-        const isAsyncRequest = storeGet.main.isAsyncRequest();
-        if ('PUBLISH' === bandoStatus || isAsyncRequest || isNil(initialForm)) {
-            return;
-        }
-        //storeSet.main.flowData([]);
-        setChosenMainField('');
-        console.log('suboptions3', [], initialForm)
-        setMainFieldSubOptions([]);
-        setChosenMainFieldOptions([]);
-        const flowForms = storeGet.main.flowForms();
-        const form = head(flowForms.filter(o => String(o.id) === String(initialForm)))
-        const relevantFields = form
-            ? form.content
-                .filter(o => ['radio', 'select'].includes(o.name))
-                .map(o => {
-                    const label = head(o.settings.filter(o => o.name === 'label'));
-                    return { value: o.id, label: label ? label.value : o.label };
-                })
-            : [];
-        setChosenMainFieldOptions([
-            { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' },
-            ...relevantFields]
-        );
-
-        if (flowForms.length === 2) {
-            setIsFlowAllowed(true)
-        }
-
-        buildFlowEdges();
-    }, [initialForm]);
-
-    useEffect(() => {
-        const isAsyncRequest = storeGet.main.isAsyncRequest();
-        if (isAsyncRequest) {
-            return;
-        }
-        if ('PUBLISH' === bandoStatus) {
-            return;
-        }
-        storeSet.main.flowData([]);
-        const flowForms = storeGet.main.flowForms();
-        const form = head(flowForms.filter(o => String(o.id) === String(initialForm)))
-        const field = form ? head(form.content.filter(o => o.id === chosenMainField)) : null;
-        let options = [];
-
-        if (field) {
-            options = head(field.settings.filter(o => o.name === 'options'));
-        }
-
-        if (field && options.value && options.value.length === flowForms.length - 2) {
-            setIsFlowAllowed(true);
-            const suboptions = [
-                { label: __('Nessun scelta', 'gepafin'), name: '' },
-                ...options.value
-            ]
-            console.log('suboptions2', suboptions, initialForm)
-            setMainFieldSubOptions(suboptions);
-            const data = {
-                formId: parseInt(initialForm),
-                chosenField: chosenMainField,
-                chosenValue: ''
-            }
-            storeSet.main.addFlowData(data);
-            if (flowMsgs.current && !isEmpty(chosenMainField)) {
-                flowMsgs.current.clear();
-            }
-        } else {
-            setIsFlowAllowed(false);
-            setFinalForm('');
-            let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.';
-
-            if (flowForms.length - 2 === 1) {
-                msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.';
-            }
-
-            if (flowMsgs.current && !isEmpty(chosenMainField)) {
-                flowMsgs.current.clear();
-                flowMsgs.current.show([
-                    {
-                        id: '1',
-                        sticky: true, severity: 'error', summary: '',
-                        detail: sprintf(
-                            __(msg, 'gepafin'),
-                            flowForms.length - 2
-                        ),
-                        closable: false
-                    }
-                ]);
-            }
-        }
-    }, [chosenMainField]);
-
-    useEffect(() => {
-        const isAsyncRequest = storeGet.main.isAsyncRequest();
-        if (isAsyncRequest || isNil(finalForm)) {
-            return;
-        }
-        if ('PUBLISH' === bandoStatus) {
-        } else {
-            const filtered = flowData.filter(o => o.formId === initialForm);
-            storeSet.main.flowData(filtered);
-            buildFlowEdges();
-        }
-    }, [finalForm]);
-
-    useEffect(() => {
-        const isAsyncRequest = storeGet.main.isAsyncRequest();
-        if (isAsyncRequest) {
-            return;
-        }
-        const chosenFieldItem = head(flowData.filter(o => !isEmpty(o.chosenField)));
-        if (chosenFieldItem) {
-            setChosenMainField(chosenFieldItem.chosenField);
-        }
-    }, [flowData]);*/
-
-    const { initialForm = 0, finalForm = 0, flowData = [] } = flowStructure;
+    const { initialForm = 0, finalForm = 0, flowData = [], chosenField = '' } = flowStructure;
     const initialFormData = head(forms.filter(o => o.id === initialForm));
     const finalFormData = head(forms.filter(o => o.id === finalForm));
     const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm);
 
-    console.log('mainFieldSuboptions', mainFieldSuboptions, flowStructure);
     return (
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -568,8 +458,8 @@ const BandoFlowEdit = () => {
                             <Dropdown
                                 id="chosenMainField"
                                 disabled={'PUBLISH' === bandoStatus}
-                                value={chosenMainField}
-                                onChange={(e) => setChosenMainField(e.value)}
+                                value={chosenField}
+                                onChange={(e) => updateChosenField(e.value)}
                                 optionDisabled={(opt) => isEmpty(opt.value)}
                                 options={chosenMainFieldOptions}
                                 optionLabel="label"
@@ -577,7 +467,7 @@ const BandoFlowEdit = () => {
                                 placeholder={__('Scegli il campo', 'gepafin')}/>
                         </div> : null}
 
-                    {(forms.length > 2 && chosenMainField && isFlowAllowed) || (forms.length === 2 && isFlowAllowed)
+                    {(forms.length > 2 && chosenField && isFlowAllowed) || (forms.length === 2 && isFlowAllowed)
                         ? <div className="appForm__field">
                             <label htmlFor="finalForm">{__('Scegli form finale', 'gepafin')}</label>
                             <Dropdown
@@ -610,7 +500,7 @@ const BandoFlowEdit = () => {
             <div className="appPageSection">
                 <Messages ref={flowMsgs}/>
 
-                {forms.length >= 2 && initialForm && finalForm
+                {forms.length >= 2 && initialForm && finalForm && isFlowAllowed
                     ? <div className="flowContainer" ref={itemContainerRef}>
                         <div className="flowContainerInner">
                             <div className="flowContainer__level initialLevel">