- saving progress;

package.json

@@ -22,7 +22,7 @@
     "html-react-parser": "5.1.18",
     "jwt-decode": "4.0.0",
     "klona": "2.0.6",
-    "leader-line": "1.0.7",
+    "leader-line-new": "1.1.9",
     "luxon": "3.5.0",
     "object-path-immutable": "4.1.2",
     "primeicons": "7.0.0",

src/assets/scss/components/flowBuilder.scss

@@ -39,22 +39,39 @@
   flex-direction: column;
   gap: 60px;
   width: 100%;
+  overflow-x: auto;
 }
 
 .flowContainer__level {
   display: flex;
   justify-content: center;
   gap: 20px;
-  width: 100%;
+  padding: 10px 0;
+  min-height: 240px;
+  margin: 0 auto;
 }
 
 .flowContainer__flowItem {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: 280px;
-  max-width: 280px;
+  min-width: 280px;
   padding: 15px;
   border: 1px solid var(--panel-content-borderColor);
+
+  .flowContainer__flowItemInner > label {
+    border-color: #757575;
+    background-color: #757575;
+    color: white;
+  }
+
+  &.initialForm, &.finalForm {
+    .flowContainer__flowItemInner > label {
+      border-color: var(--card-full-background-color-3);
+      background-color: var(--card-full-background-color-3);
+      color: white;
+    }
+  }
 }
 
 .flowContainer__flowItemInner {
@@ -65,22 +82,27 @@
   max-width: 250px;
   border: 1px solid var(--panel-content-borderColor);
 
-  label {
+  > label {
     display: flex;
     justify-content: center;
-    padding: 10px 0 5px;
+    padding: 10px 0;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
   }
+}
 
-  &.initialForm, &.finalForm {
+.flowContainer__flowItemContent {
-    border-color: var(--card-full-background-color-3);
+  padding: 5px;
-    background-color: var(--card-full-background-color-3);
+  display: flex;
+  flex-direction: column;
+  
+  .appForm__field {
+    margin-top: 10px;
     
     label {
-      color: white;
+      text-align: center;
     }
   }
 }

src/pages/BandoFlowEdit/index.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
 import { isEmpty, head } from 'ramda';
+import LeaderLine from 'leader-line-new';
 
 // store
 import { storeGet, storeSet, useStore } from '../../store';
@@ -35,6 +36,8 @@ const BandoFlowEdit = () => {
     const [finalForm, setFinalForm] = useState(0);
     const flowMsgs = useRef(null);
     const toast = useRef(null);
+    const [lines, setLines] = useState([]);
+    const itemRefs = useRef({});
 
     const getBandoId = () => {
         const parsed = parseInt(id)
@@ -166,6 +169,10 @@ const BandoFlowEdit = () => {
         storeSet.main.unsetAsyncRequest();
     }
 
+    const setItemRef = (id, element) => {
+        itemRefs.current[id] = element;
+    };
+
     useEffect(() => {
         const flowForms = storeGet.main.flowForms();
         const form = head(flowForms.filter(o => String(o.id) === String(initialForm)))
@@ -179,7 +186,7 @@ const BandoFlowEdit = () => {
         if (field) {
             options = head(field.settings.filter(o => o.name === 'options'));
         }
-        console.log('isFlowAllowed', initialForm, mainField, field)
+        //console.log('isFlowAllowed', initialForm, mainField, field)
         if (forms.length === 2 || (field && options.value && options.value.length === flowForms.length - 2)) {
             setIsFlowAllowed(true);
             const data = {
@@ -253,7 +260,7 @@ const BandoFlowEdit = () => {
         if (flowForms.length === 2) {
             setIsFlowAllowed(true);
             finalFormObj = head(flowForms.filter(o => String(o.id) !== String(initialForm)));
-            console.log('finalFormObj', finalFormObj);
+            //console.log('finalFormObj', finalFormObj);
             setFinalForm(finalFormObj.id);
             const flowItem2 = {
                 formId: String(finalFormObj.id),
@@ -269,14 +276,74 @@ const BandoFlowEdit = () => {
                 type: 'smoothstep'
             }
             storeSet.main.flowEdges([edge]);
-        } else if (flowForms.length > 2) {
-
         }
+
+        /*lines.forEach(line => line.remove());
+
+        // Create new lines between consecutive items
+        const newLines = [];
+        console.log('itemRefs.current', itemRefs.current);
+        for (let i = 0; i < forms.length - 1; i++) {
+            const startElement = itemRefs.current[forms[i].id];
+            const endElement = itemRefs.current[forms[i + 1].id];
+            console.log('startElement', startElement, endElement);
+            if (startElement && endElement) {
+                const line = new LeaderLine(
+                    startElement,
+                    endElement,
+                    {
+                        color: '#2196F3',
+                        size: 1
+                    }
+                );
+                newLines.push(line);
+            }
+        }
+
+        setLines(newLines);*/
     }, [initialForm]);
 
     useEffect(() => {
+        const flowForms = storeGet.main.flowForms();
+        const finalFormObj = head(flowForms.filter(o => String(o.id) === String(finalForm)));
 
-    }, [finalForm])
+        if (finalFormObj) {
+            const flowItem = {
+                formId: String(finalFormObj.id),
+                chosenField: '',
+                chosenValue: ''
+            }
+            storeSet.main.addFlowData(flowItem);
+
+            const initialFormObj = head(flowForms.filter(o => String(o.id) === String(initialForm)));
+            const edge = {
+                id: `${initialFormObj.id}->${finalFormObj.id}`,
+                source: String(initialFormObj.id),
+                target: finalFormObj.id,
+                type: 'smoothstep'
+            }
+            storeSet.main.flowEdges([edge]);
+
+            if (flowForms.length > 2) {
+                flowForms
+                    .filter(o => ![initialForm, finalForm].includes(o.id))
+                    .map(o => {
+                        const flowItem = {
+                            formId: String(o.id),
+                            chosenField: '',
+                            chosenValue: ''
+                        }
+                        storeSet.main.addFlowData(flowItem);
+                    });
+            }
+        }
+    }, [finalForm]);
+
+    useEffect(() => {
+        return () => {
+            lines.forEach(line => line.remove());
+        };
+    }, [lines]);
 
     useEffect(() => {
         const bandoId = getBandoId();
@@ -314,6 +381,9 @@ const BandoFlowEdit = () => {
             storeSet.main.flowEdges([]);
         }
     }, []);
+
+    const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm);
+
     console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges)
     return (
         <div className="appPage">
@@ -390,59 +460,79 @@ const BandoFlowEdit = () => {
             <div className="appPageSection">
                 <Messages ref={flowMsgs}/>
 
-                {forms.length >= 2 && isFlowAllowed
+                {forms.length >= 2
                     ? <div className="flowContainer">
                         <div className="flowContainer__level">
-                            <div className="flowContainer__flowItem initialForm">
+                            <div className="flowContainer__flowItem initialForm initialForm"
-                                <div className="flowContainer__flowItemInner initialForm">
+                                 ref={(el) => initialForm ? setItemRef(initialForm, el) : null}>
+                                <div className="flowContainer__flowItemInner">
                                     <label htmlFor="mainField">{__('Scegli form iniziale', 'gepafin')}</label>
-                                    <Dropdown
+                                    <div className="flowContainer__flowItemContent">
-                                        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>
-                        </div>
-
-                        {forms.length >= 2 && initialForm
-                            ? <div className="flowContainer__level">
-                                <div className="flowContainer__flowItem">
-                                    <div className="flowContainer__flowItemInner finalForm">
-                                        <label htmlFor="mainField">{__('Scegli form finale', 'gepafin')}</label>
                                         <Dropdown
-                                            id="finalForm"
+                                            id="initialForm"
                                             disabled={'PUBLISH' === bandoStatus}
-                                            value={finalForm}
+                                            value={initialForm}
-                                            onChange={(e) => setFinalForm(e.value)}
+                                            onChange={(e) => updateInitialForm(e.value)}
-                                            optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.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>
+                            </div>
+                        </div>
+
+                        {initialForm && finalForm && levelForms.length
+                            ? <div className="flowContainer__level">
+                                {levelForms.map(o => <div key={o.id}
+                                                          ref={(el) => setItemRef(o.id, el)}
+                                                          className="flowContainer__flowItem levelForms" >
+                                    <div className="flowContainer__flowItemInner">
+                                        <label htmlFor="mainField">{o.label}</label>
+                                        <div className="flowContainer__flowItemContent">
+                                        </div>
+                                    </div>
+                                </div>)}
                             </div> : null}
+
+                        {forms.length >= 2 && initialForm
+                            ? <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>
+                                        <div className="flowContainer__flowItemContent">
+                                            <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>
+                                </div>
+                            </div>
+                            : null}
                     </div> : null}
             </div>