- saving progress;

src/assets/scss/components/flowBuilder.scss

@@ -39,6 +39,7 @@
   flex-direction: column;
   gap: 60px;
   width: 100%;
+  margin-top: 30px;
   overflow-x: auto;
 }
 
@@ -47,7 +48,7 @@
   justify-content: center;
   gap: 20px;
   padding: 10px 0;
-  min-height: 240px;
+  /*min-height: 240px;*/
   margin: 0 auto;
 }
 
@@ -85,11 +86,12 @@
   > label {
     display: flex;
     justify-content: center;
-    padding: 10px 0;
+    padding: 10px;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
+    text-align: center;
   }
 }
 

src/pages/BandoFlowEdit/index.js

@@ -179,6 +179,72 @@ const BandoFlowEdit = () => {
         const field = form ? head(form.content.filter(o => o.id === mainField)) : 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 data = {
+                formId: String(initialForm),
+                chosenField: mainField,
+                chosenValue: ''
+            }
+            storeSet.main.addFlowData(data);
+        } else {
+            setIsFlowAllowed(false);
+            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 opzione.';
+            }
+
+            if (flowMsgs.current && !isEmpty(mainField)) {
+                flowMsgs.current.clear();
+                flowMsgs.current.show([
+                    {
+                        id: '1',
+                        sticky: true, severity: 'error', summary: '',
+                        detail: sprintf(
+                            __(msg, 'gepafin'),
+                            flowForms.length - 2
+                        ),
+                        closable: false
+                    }
+                ]);
+            }
+        }
+    }, [mainField]);
+
+    useEffect(() => {
+        setMainField('');
+        setMainFieldOptions([]);
+        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 };
+                })
+            : [];
+        setMainFieldOptions([
+            {label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: ''},
+            ...relevantFields]
+        );
+
+        if (flowForms.length === 2) {
+            setIsFlowAllowed(true)
+        }
+    }, [initialForm]);
+
+    /*useEffect(() => {
+        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 === mainField)) : null;
+        let options = [];
+
         if (initialForm === 0) {
             return;
         }
@@ -278,7 +344,7 @@ const BandoFlowEdit = () => {
             storeSet.main.flowEdges([edge]);
         }
 
-        /*lines.forEach(line => line.remove());
+        /!*lines.forEach(line => line.remove());
 
         // Create new lines between consecutive items
         const newLines = [];
@@ -300,7 +366,7 @@ const BandoFlowEdit = () => {
             }
         }
 
-        setLines(newLines);*/
+        setLines(newLines);*!/
     }, [initialForm]);
 
     useEffect(() => {
@@ -343,7 +409,7 @@ const BandoFlowEdit = () => {
         return () => {
             lines.forEach(line => line.remove());
         };
-    }, [lines]);
+    }, [lines]);*/
 
     useEffect(() => {
         const bandoId = getBandoId();
@@ -382,9 +448,12 @@ const BandoFlowEdit = () => {
         }
     }, []);
 
+    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('isFlowAllowed', isFlowAllowed, flowData, flowEdges)
+    console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges);
+    console.log('mainField', mainField)
     return (
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -396,7 +465,7 @@ const BandoFlowEdit = () => {
 
             <div className="appPage__spacer"></div>
 
-            {/*<div className="appPageSection">
+            <div className="appPageSection">
                 <div className="appForm__cols">
                     <div className="appForm__field">
                         <label htmlFor="initialForm">{__('Scegli form iniziale', 'gepafin')}</label>
@@ -442,7 +511,7 @@ const BandoFlowEdit = () => {
                                 placeholder={__('Scegli il form', 'gepafin')}/>
                         </div> : null}
                 </div>
-            </div>*/}
+            </div>
 
             {/*<div className="appPageSection">
                 <div className="appPageSection__actions">
@@ -460,14 +529,17 @@ const BandoFlowEdit = () => {
             <div className="appPageSection">
                 <Messages ref={flowMsgs}/>
 
-                {forms.length >= 2
+                {forms.length >= 2 && initialForm && finalForm
                     ? <div className="flowContainer">
                         <div className="flowContainer__level">
                             <div className="flowContainer__flowItem initialForm initialForm"
                                  ref={(el) => initialForm ? setItemRef(initialForm, el) : null}>
                                 <div className="flowContainer__flowItemInner">
-                                    <label htmlFor="mainField">{__('Scegli form iniziale', 'gepafin')}</label>
+                                    <label htmlFor="mainField">
-                                    <div className="flowContainer__flowItemContent">
+                                        {/*{__('Scegli form iniziale', 'gepafin')}*/}
+                                        {initialFormData.label}
+                                    </label>
+                                    {/*<div className="flowContainer__flowItemContent">
                                         <Dropdown
                                             id="initialForm"
                                             disabled={'PUBLISH' === bandoStatus}
@@ -493,12 +565,12 @@ const BandoFlowEdit = () => {
                                                     optionValue="value"
                                                     placeholder={__('Scegli il campo', 'gepafin')}/>
                                             </div> : null}
-                                    </div>
+                                    </div>*/}
                                 </div>
                             </div>
                         </div>
 
-                        {initialForm && finalForm && levelForms.length
+                        {levelForms.length && initialForm && finalForm
                             ? <div className="flowContainer__level">
                                 {levelForms.map(o => <div key={o.id}
                                                           ref={(el) => setItemRef(o.id, el)}
@@ -511,13 +583,16 @@ const BandoFlowEdit = () => {
                                 </div>)}
                             </div> : null}
 
-                        {forms.length >= 2 && initialForm
+                        {forms.length >= 2 && initialForm && finalForm
                             ? <div className="flowContainer__level">
                                 <div className="flowContainer__flowItem finalForm"
                                      ref={(el) => finalForm ? setItemRef(finalForm, el) : null}>
                                     <div className="flowContainer__flowItemInner">
-                                        <label htmlFor="mainField">{__('Scegli form finale', 'gepafin')}</label>
+                                        <label htmlFor="mainField">
-                                        <div className="flowContainer__flowItemContent">
+                                            {/*{__('Scegli form finale', 'gepafin')}*/}
+                                            {finalFormData.label}
+                                        </label>
+                                        {/*<div className="flowContainer__flowItemContent">
                                             <Dropdown
                                                 id="finalForm"
                                                 disabled={'PUBLISH' === bandoStatus}
@@ -528,7 +603,7 @@ const BandoFlowEdit = () => {
                                                 optionLabel="label"
                                                 optionValue="value"
                                                 placeholder={__('Scegli il form', 'gepafin')}/>
-                                        </div>
+                                        </div>*/}
                                     </div>
                                 </div>
                             </div>