- saving progress;

package.json

@@ -20,6 +20,7 @@
     "html-react-parser": "5.1.16",
     "jwt-decode": "4.0.0",
     "klona": "2.0.6",
+    "leader-line": "^1.0.7",
     "luxon": "3.5.0",
     "object-path-immutable": "4.1.2",
     "primeicons": "7.0.0",

src/assets/scss/components/flowBuilder.scss

@@ -36,5 +36,24 @@
 
 .flowContainer {
   display: flex;
-
+  flex-direction: column;
+  gap: 60px;
+  width: 100%;
+}
+
+.flowContainer__level {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  width: 100%;
+}
+
+.flowContainer__flowItem {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  max-width: 250px;
+  padding: 7px;
+  border: 1px solid var(--table-border-color);
 }

src/pages/BandoFlowEdit/index.js

@@ -32,7 +32,7 @@ const BandoFlowEdit = () => {
     const [mainFieldOptions, setMainFieldOptions] = useState([]);
     const [mainField, setMainField] = useState('');
     const [bandoStatus, setBandoStatus] = useState('');
-    const [isFlowAllowed, setIsFlowAllowed] = useState(false);
+    const [isFlowAllowed, setIsFlowAllowed] = useState(true);
     const [finalForm, setFinalForm] = useState(0);
     const flowMsgs = useRef(null);
     const toast = useRef(null);
@@ -56,7 +56,8 @@ const BandoFlowEdit = () => {
             defaultFocus: 'reject',
             acceptClassName: 'p-button-danger',
             accept: doDelete,
-            reject: () => {}
+            reject: () => {
+            }
         });
     };
 
@@ -86,7 +87,7 @@ const BandoFlowEdit = () => {
     const shoudDisableSaving = useCallback(() => {
         return forms.length > 2
             ? isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm)
-                || flowData.length < forms.length - 1 || 'PUBLISH' === bandoStatus
+            || flowData.length < forms.length - 1 || 'PUBLISH' === bandoStatus
             : isEmpty(flowEdges) || isEmpty(initialForm) || 'PUBLISH' === bandoStatus;
     }, [flowData, flowEdges]);
 
@@ -128,7 +129,7 @@ const BandoFlowEdit = () => {
         if (data.status === 'SUCCESS') {
             const formOptions = data.data.map(o => ({ label: o.label, value: o.id }))
             storeSet.main.flowForms(data.data);
-            setFormOptions([{label: '', value: ''}, ...formOptions]);
+            setFormOptions([{ label: '', value: '' }, ...formOptions]);
             const bandoId = getBandoId();
             storeSet.main.setAsyncRequest();
             FlowService.getFlow(bandoId, getFlowCallback, errGetFlowCallback);
@@ -172,11 +173,15 @@ const BandoFlowEdit = () => {
         const field = form ? head(form.content.filter(o => o.id === mainField)) : null;
         let options = [];
 
+        if (initialForm === 0) {
+            return;
+        }
+
         if (field) {
             options = head(field.settings.filter(o => o.name === 'options'));
         }
-
+        console.log('isFlowAllowed', initialForm, mainField, field)
-        if (field && options.value && options.value.length === flowForms.length - 2) {
+        if (forms.length === 2 || (field && options.value && options.value.length === flowForms.length - 2)) {
             setIsFlowAllowed(true);
             const data = {
                 formId: String(initialForm),
@@ -212,10 +217,14 @@ const BandoFlowEdit = () => {
     useEffect(() => {
         setMainField('');
         setMainFieldOptions([]);
+        storeSet.main.flowData([]);
+
         const flowForms = storeGet.main.flowForms();
-        const form = head(flowForms.filter(o => String(o.id) === String(initialForm)))
+        const initialFormObj = head(flowForms.filter(o => String(o.id) === String(initialForm)));
-        const relevantFields = form
+        let finalFormObj = null;
-            ? form.content
+
+        const relevantFields = initialFormObj
+            ? initialFormObj.content
                 .filter(o => ['radio', 'select'].includes(o.name))
                 .map(o => {
                     const label = head(o.settings.filter(o => o.name === 'label'));
@@ -223,15 +232,49 @@ const BandoFlowEdit = () => {
                 })
             : [];
         setMainFieldOptions([
-            {label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: ''},
+            { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' },
             ...relevantFields]
         );
 
+        if (finalForm) {
+            finalFormObj = head(flowForms.filter(o => String(o.id) !== String(finalForm)));
+        }
+
+        const flowItem1 = {
+            formId: String(initialFormObj.id),
+            chosenField: '',
+            chosenValue: ''
+        }
+        storeSet.main.addFlowData(flowItem1);
+
         if (flowForms.length === 2) {
-            setIsFlowAllowed(true)
+            setIsFlowAllowed(true);
+            finalFormObj = head(flowForms.filter(o => String(o.id) !== String(initialForm)));
+            console.log('finalFormObj', finalFormObj);
+            setFinalForm(finalFormObj.id);
+            const flowItem2 = {
+                formId: String(finalFormObj.id),
+                chosenField: '',
+                chosenValue: ''
+            }
+            storeSet.main.addFlowData(flowItem2);
+
+            const edge = {
+                id: `${initialFormObj.id}->${finalFormObj.id}`,
+                source: String(initialFormObj.id),
+                target: finalFormObj.id,
+                type: 'smoothstep'
+            }
+            storeSet.main.flowEdges([edge]);
+        } else if (flowForms.length > 2) {
+
         }
     }, [initialForm]);
 
+    useEffect(() => {
+
+    }, [finalForm])
+
     useEffect(() => {
         const bandoId = getBandoId();
         storeSet.main.setAsyncRequest();
@@ -268,7 +311,7 @@ const BandoFlowEdit = () => {
             storeSet.main.flowEdges([]);
         }
     }, []);
-
+    console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges)
     return (
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -284,16 +327,57 @@ const BandoFlowEdit = () => {
                 {forms.length >= 2 && isFlowAllowed
                     ? <div className="flowContainer">
                         <div className="flowContainer__level">
-                            <div className="flowContainer__level">
+                            <div className="flowContainer__flowItem">
-
+                                <label htmlFor="mainField">{__('Scegli form iniziale', 'gepafin')}</label>
+                                <Dropdown
+                                    id="initialForm"
+                                    disabled={'PUBLISH' === bandoStatus}
+                                    value={initialForm}
+                                    onChange={(e) => updateInitialForm(e.value)}
+                                    optionDisabled={(opt) => finalForm === opt.value || isEmpty(opt.value)}
+                                    options={formOptions}
+                                    optionLabel="label"
+                                    optionValue="value"
+                                    placeholder={__('Scegli il form', 'gepafin')}/>
+                                {initialForm && forms.length > 2 && mainFieldOptions
+                                    ? <div className="appForm__field">
+                                        <label htmlFor="mainField">{__('Scegli il campo principale', 'gepafin')}</label>
+                                        <Dropdown
+                                            id="mainField"
+                                            disabled={'PUBLISH' === bandoStatus}
+                                            value={mainField}
+                                            onChange={(e) => setMainField(e.value)}
+                                            optionDisabled={(opt) => isEmpty(opt.value)}
+                                            options={mainFieldOptions}
+                                            optionLabel="label"
+                                            optionValue="value"
+                                            placeholder={__('Scegli il campo', 'gepafin')}/>
+                                    </div> : null}
                             </div>
                         </div>
+
+                        {forms.length >= 2 && initialForm
+                            ? <div className="flowContainer__level">
+                                <div className="flowContainer__flowItem">
+                                    <label htmlFor="mainField">{__('Scegli form finale', 'gepafin')}</label>
+                                    <Dropdown
+                                        id="finalForm"
+                                        disabled={'PUBLISH' === bandoStatus}
+                                        value={finalForm}
+                                        onChange={(e) => setFinalForm(e.value)}
+                                        optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)}
+                                        options={formOptions}
+                                        optionLabel="label"
+                                        optionValue="value"
+                                        placeholder={__('Scegli il form', 'gepafin')}/>
+                                </div>
+                            </div> : null}
                     </div> : null}
             </div>
 
             <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>
@@ -339,9 +423,9 @@ const BandoFlowEdit = () => {
                                 placeholder={__('Scegli il form', 'gepafin')}/>
                         </div> : null}
                 </div>
-            </div>
+            </div>*/}
 
-            <div className="appPageSection">
+            {/*<div className="appPageSection">
                 <div className="appPageSection__actions">
                     <Button
                         onClick={goBack}
@@ -352,15 +436,15 @@ const BandoFlowEdit = () => {
                         disabled={shoudDisableSaving()}
                         label={__('Salva', 'gepafin')} icon="pi pi-save" iconPos="right"/>
                 </div>
-            </div>
+            </div>*/}
 
             <div className="appPageSection">
                 <Messages ref={flowMsgs}/>
-                {forms.length >= 2 && isFlowAllowed
+                {/*{forms.length >= 2 && isFlowAllowed
                     ? <FlowBuilder
                         initialForm={initialForm}
                         finalForm={finalForm}
-                        mainField={mainField}/> : null}
+                        mainField={mainField}/> : null}*/}
             </div>
 
             <div className="appPage__spacer"></div>