- saving;

src/pages/BandoFlowEdit/index.js

@@ -23,20 +23,24 @@ import { Toast } from 'primereact/toast';
 const BandoFlowEdit = () => {
     const { id } = useParams();
     const navigate = useNavigate();
-    const forms = useStore().main.flowForms();
+
-    const flowData = useStore().main.flowData();
+    const [flowStructure, setFlowStructure] = useState({
-    const flowEdges = useStore().main.flowEdges();
+        initialForm: 0,
+        finalForm: 0,
+        flowData: [],
+        flowWdges: [],
+        chosenField: ''
+    });
+
+    const [forms, setForms] = useState([]);
     const [formOptions, setFormOptions] = useState([]);
-    const [initialForm, setInitialForm] = useState(null);
     const [chosenMainFieldOptions, setChosenMainFieldOptions] = useState([]);
     const [chosenMainField, setChosenMainField] = useState('');
     const [mainFieldSuboptions, setMainFieldSubOptions] = useState([]);
     const [bandoStatus, setBandoStatus] = useState('');
     const [isFlowAllowed, setIsFlowAllowed] = useState(true);
-    const [finalForm, setFinalForm] = useState(null);
     const flowMsgs = useRef(null);
     const toast = useRef(null);
-    const [lines, setLines] = useState([]);
     const itemRefs = useRef({});
     const itemContainerRef = useRef(null);
 
@@ -68,59 +72,88 @@ const BandoFlowEdit = () => {
         if (flowMsgs.current) {
             flowMsgs.current.clear();
         }
-        storeSet.main.flowData([]);
+
-        storeSet.main.flowEdges([]);
+        setFlowStructure({
-        setInitialForm(null);
+            initialForm: 0,
-        setChosenMainFieldOptions([]);
+            finalForm: 0,
-        setChosenMainField('');
+            flowData: [],
+            flowWdges: [],
+            chosenField: ''
+        })
+
         setIsFlowAllowed(false);
-        setFinalForm(0);
+        setChosenMainFieldOptions([]);
-        lines.forEach(line => line.remove());
     }
 
     const updateInitialForm = (value) => {
-        if (value !== finalForm) {
+        const finalFormObj = head(forms.filter(o => o.id !== value));
-            console.log('setInitialForm1')
+
-            setInitialForm(value);
+        if (forms.length === 2 && finalFormObj) {
-            if (forms.length === 2) {
+            setFlowStructure({
-                const finalForm = head(forms.filter(o => o.id !== value));
+                ...flowStructure,
-                if (finalForm) {
+                initialForm: value,
-                    setFinalForm(finalForm.id);
+                finalForm: finalFormObj.id
-                }
+            });
-            }
+        } else {
+            setFlowStructure({
+                ...flowStructure,
+                initialForm: value
+            });
         }
     }
 
     const updateFinalForm = (value) => {
-        if (value !== initialForm) {
+        const filtered = flowStructure.flowData.filter(o => o.formId === flowStructure.initialForm);
-            setFinalForm(value);
+        const flowEdges = buildFlowEdges(flowStructure.initialForm, value);
-        }
+
+        setFlowStructure({
+            ...flowStructure,
+            flowEdges,
+            flowData: filtered,
+            finalForm: value
+        });
     }
 
+    const addFlowData = useCallback((data) => {
+        const initial = flowStructure.flowData;
+        const exists = initial ? initial.filter(o => parseInt(o.formId) === parseInt(data.formId)) : [];
+        let final = [];
+
+        if (exists.length) {
+            final = initial.map(o => parseInt(o.formId) === parseInt(data.formId) ? data : o);
+        } else {
+            final = [...initial, data];
+        }
+
+        setFlowStructure({
+            ...flowStructure,
+            flowData: final
+        });
+    }, [flowStructure]);
+
     const updateItermediateForm = (value, formId) => {
-        const isUsed = flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(value);
+        const isUsed = flowStructure.flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(value);
         if (!isUsed) {
             const data = {
                 formId: parseInt(formId),
                 chosenField: '',
                 chosenValue: value
             }
-            storeSet.main.addFlowData(data);
+            addFlowData(data);
         }
     }
 
     const displayChosenOptionValue = (id) => {
-        const suboptionId = pathOr('', ['chosenValue'], head(flowData.filter(f => parseInt(f.formId) === parseInt(id))));
+        const suboptionId = pathOr('', ['chosenValue'], head(flowStructure.flowData.filter(f => parseInt(f.formId) === parseInt(id))));
         return pathOr('', ['label'], head(mainFieldSuboptions.filter(o => o.name === suboptionId)));
     }
 
     const disabledOptionForIntermediateForm = (opt) => {
-        return flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(opt.name);
+        return flowStructure.flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(opt.name);
     }
 
     const shoudDisableSaving = useCallback(() => {
-        const flowForms = storeGet.main.flowForms();
+        const nonEmptyFlowItems = flowStructure.flowData.filter(o => isEmpty(o.chosenField)).filter(o => !isEmpty(o.chosenValue));
-        const nonEmptyFlowItems = flowData.filter(o => isEmpty(o.chosenField)).filter(o => !isEmpty(o.chosenValue));
 
         /*if (flowForms.length > 2) {
             console.log('disable BTN:', nonEmptyFlowItems.length !== flowForms.length - 2, isEmpty(flowEdges), 'PUBLISH' === bandoStatus,
@@ -130,27 +163,22 @@ const BandoFlowEdit = () => {
                 isEmpty(initialForm), isEmpty(finalForm));
         }*/
 
-        return flowForms.length > 2
+        return forms.length > 2
-            ? nonEmptyFlowItems.length !== flowForms.length - 2 || isEmpty(flowEdges) || 'PUBLISH' === bandoStatus
+            ? nonEmptyFlowItems.length !== forms.length - 2 || isEmpty(flowStructure.flowEdges) || 'PUBLISH' === bandoStatus
-            || isEmpty(initialForm) || isEmpty(finalForm)
+            || isEmpty(flowStructure.initialForm) || isEmpty(flowStructure.finalForm)
-            : nonEmptyFlowItems.length !== 1 || isEmpty(flowEdges) || 'PUBLISH' === bandoStatus
+            : nonEmptyFlowItems.length !== 1 || isEmpty(flowStructure.flowEdges) || 'PUBLISH' === bandoStatus
-            || isEmpty(initialForm) || isEmpty(finalForm);
+            || isEmpty(flowStructure.initialForm) || isEmpty(flowStructure.finalForm);
-    }, [flowData, flowEdges]);
+    }, [flowStructure, forms]);
 
     const doSave = () => {
         storeSet.main.setAsyncRequest();
         const bandoId = getBandoId();
-        const body = {
+
-            initialForm,
-            finalForm,
-            flowData,
-            flowEdges
-        };
         if (flowMsgs.current) {
             flowMsgs.current.clear();
         }
 
-        FlowService.createFlow(bandoId, body, getFlowCreateCallback, errGetFlowCreateCallback);
+        FlowService.createFlow(bandoId, flowStructure, getFlowCreateCallback, errGetFlowCreateCallback);
     }
 
     const getFlowCreateCallback = (data) => {
@@ -173,10 +201,11 @@ const BandoFlowEdit = () => {
 
     const getFormsCallback = (data) => {
         if (data.status === 'SUCCESS') {
+            setForms(data.data);
             const formOptions = data.data.map(o => ({ label: o.label, value: o.id }))
-            storeSet.main.flowForms(data.data);
             setFormOptions([{ label: '', value: '' }, ...formOptions]);
             const bandoId = getBandoId();
+
             storeSet.main.setAsyncRequest();
             FlowService.getFlow(bandoId, (resp) => getFlowCallback(resp, data.data), errGetFlowCallback);
         }
@@ -190,15 +219,17 @@ const BandoFlowEdit = () => {
 
     const getFlowCallback = (data, forms) => {
         if (data.status === 'SUCCESS' && data.data) {
-            storeSet.main.flowData(data.data.flowData);
-            storeSet.main.flowEdges(data.data.flowEdges);
-            console.log('setInitialForm2')
-            setInitialForm(data.data.initialForm);
-            setFinalForm(data.data.finalForm);
-            setBandoStatus(data.data.callStatus);
             const chosenFieldItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField)));
+            setBandoStatus(data.data.callStatus);
+
             if (chosenFieldItem) {
-                setChosenMainField(chosenFieldItem.chosenField);
+                setFlowStructure({
+                    initialForm: data.data.initialForm,
+                    finalForm: data.data.finalForm,
+                    flowData: data.data.flowData,
+                    flowWdges: data.data.flowWdges,
+                    chosenField: chosenFieldItem.chosenField
+                });
                 const form = head(forms.filter(o => o.id === data.data.initialForm));
                 const relevantFields = form
                     ? form.content
@@ -212,14 +243,16 @@ const BandoFlowEdit = () => {
                 const field = form ? head(form.content.filter(o => o.id === chosenFieldItem.chosenField)) : null;
                 if (field) {
                     const options = head(field.settings.filter(o => o.name === 'options'));
-                    console.log('suboptions1', options.value, data.data.initialForm)
                     setMainFieldSubOptions(options.value);
                 }
-            }
+            } else {
-            const flowDataItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField)));
+                setFlowStructure({
-
+                    initialForm: data.data.initialForm,
-            if (flowDataItem) {
+                    finalForm: data.data.finalForm,
-                setChosenMainField(flowDataItem.chosenField);
+                    flowData: data.data.flowData,
+                    flowWdges: data.data.flowWdges,
+                    chosenField: ''
+                });
             }
         }
         storeSet.main.unsetAsyncRequest();
@@ -234,12 +267,12 @@ const BandoFlowEdit = () => {
         itemRefs.current[id] = element;
     };
 
-   const buildFlowEdges = () => {
+    const buildFlowEdges = (initialForm, finalForm) => {
-        if (!isEmpty(initialForm) && !isEmpty(finalForm)) {
-            const flowForms = storeGet.main.flowForms();
         let edges = [];
+
+        if (!isEmpty(initialForm) && !isEmpty(finalForm)) {
             // eslint-disable-next-line
-            flowForms.map(o => {
+            forms.map(o => {
                 const formId = String(o.id);
 
                 if (formId !== String(initialForm) && formId !== String(finalForm)) {
@@ -260,7 +293,7 @@ const BandoFlowEdit = () => {
                 }
             });
 
-            if (flowForms.length === 2 && initialForm && finalForm) {
+            if (forms.length === 2 && initialForm && finalForm) {
                 edges.push({
                     id: `${initialForm}->${finalForm}`,
                     source: String(initialForm),
@@ -268,18 +301,123 @@ const BandoFlowEdit = () => {
                     type: 'smoothstep'
                 });
             }
+        }
 
-            //console.log('edges', edges);
+        return edges;
-            storeSet.main.flowEdges(edges);
+    };
-        }
-    }
 
     useEffect(() => {
+        const bandoId = getBandoId();
+        storeSet.main.setAsyncRequest();
+        FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
+    }, [id]);
+
+    useEffect(() => {
+        if (flowMsgs.current && forms.length < 2) {
+            flowMsgs.current.clear();
+            flowMsgs.current.show([
+                {
+                    id: '1',
+                    sticky: true, severity: 'info', summary: '',
+                    detail: __('Devi creare almeno 2 form.', 'gepafin'),
+                    closable: false
+                }
+            ]);
+        } else {
+            flowMsgs.current.clear();
+            if (itemContainerRef.current) {
+                itemContainerRef.current.dispatchEvent(new Event('scroll'));
+            }
+        }
+    }, [forms]);
+
+    useEffect(() => {
+        console.log('updated flowStructure:', flowStructure);
+        const { initialForm = 0, finalForm = 0, chosenField = '' } = flowStructure;
+
+        if (!isEmpty(initialForm) && !isEmpty(finalForm)) {
+            const form = head(forms.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 (forms.length === 2) {
+                setIsFlowAllowed(true)
+            }
+
+            const flowEdges = buildFlowEdges(initialForm, finalForm);
+
+            if (!isEmpty(chosenField)) {
+                const field = form ? head(form.content.filter(o => o.id === chosenField)) : null;
+                let options = [];
+
+                if (field) {
+                    options = head(field.settings.filter(o => o.name === 'options'));
+                }
+
+                if (field && options.value && options.value.length === forms.length - 2) {
+                    setIsFlowAllowed(true);
+                    const suboptions = [
+                        { label: __('Nessun scelta', 'gepafin'), name: '' },
+                        ...options.value
+                    ]
+
+                    setMainFieldSubOptions(suboptions);
+
+                    const data = {
+                        formId: parseInt(initialForm),
+                        chosenField: chosenField,
+                        chosenValue: ''
+                    }
+
+                    addFlowData(data);
+
+                    if (flowMsgs.current && !isEmpty(chosenField)) {
+                        flowMsgs.current.clear();
+                    }
+                } else {
+                    setIsFlowAllowed(false);
+
+                    let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.';
+
+                    if (forms.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'),
+                                    forms.length - 2
+                                ),
+                                closable: false
+                            }
+                        ]);
+                    }
+                }
+            }
+        }
+    }, [flowStructure]);
+
+    /*useEffect(() => {
         const isAsyncRequest = storeGet.main.isAsyncRequest();
         if ('PUBLISH' === bandoStatus || isAsyncRequest || isNil(initialForm)) {
             return;
         }
-        storeSet.main.flowData([]);
+        //storeSet.main.flowData([]);
         setChosenMainField('');
         console.log('suboptions3', [], initialForm)
         setMainFieldSubOptions([]);
@@ -380,32 +518,6 @@ const BandoFlowEdit = () => {
         }
     }, [finalForm]);
 
-    useEffect(() => {
-        const bandoId = getBandoId();
-        storeSet.main.setAsyncRequest();
-        FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
-    }, [id]);
-
-    useEffect(() => {
-        console.log(forms)
-        if (flowMsgs.current && forms.length < 2) {
-            flowMsgs.current.clear();
-            flowMsgs.current.show([
-                {
-                    id: '1',
-                    sticky: true, severity: 'info', summary: '',
-                    detail: __('Devi creare almeno 2 form.', 'gepafin'),
-                    closable: false
-                }
-            ]);
-        } else {
-            flowMsgs.current.clear();
-            if (itemContainerRef.current) {
-                itemContainerRef.current.dispatchEvent(new Event('scroll'));
-            }
-        }
-    }, [forms]);
-
     useEffect(() => {
         const isAsyncRequest = storeGet.main.isAsyncRequest();
         if (isAsyncRequest) {
@@ -415,21 +527,14 @@ const BandoFlowEdit = () => {
         if (chosenFieldItem) {
             setChosenMainField(chosenFieldItem.chosenField);
         }
-    }, [flowData])
+    }, [flowData]);*/
-
-    useEffect(() => {
-        return () => {
-            storeSet.main.flowForms([]);
-            storeSet.main.flowData([]);
-            storeSet.main.flowEdges([]);
-        }
-    }, []);
 
+    const { initialForm = 0, finalForm = 0, flowData = [] } = 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);
+    console.log('mainFieldSuboptions', mainFieldSuboptions, flowStructure);
     return (
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -545,8 +650,10 @@ const BandoFlowEdit = () => {
                                         </div>
                                     </div>)}
                                     {levelForms.length > 1
-                                    ? <><div className="flowContainer__levelMaskEnd"></div>
+                                        ? <>
-                                        <div className="flowContainer__levelMaskStart"></div></> : null}
+                                            <div className="flowContainer__levelMaskEnd"></div>
+                                            <div className="flowContainer__levelMaskStart"></div>
+                                        </> : null}
                                 </div> : null}
 
                             {forms.length >= 2 && initialForm && finalForm