- saving progress;

2024-12-02 17:27:04 +01:00
parent 3ebce754d7
commit e438447bad
3 changed files with 169 additions and 57 deletions
--- a/package.json
+++ b/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",
--- a/src/assets/scss/components/flowBuilder.scss
+++ b/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%;
-  max-width: 280px;
+  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 {
-    border-color: var(--card-full-background-color-3);
-    background-color: var(--card-full-background-color-3);
-
+.flowContainer__flowItemContent {
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  
+  .appForm__field {
+    margin-top: 10px;
+    
    label {
-      color: white;
+      text-align: center;
    }
  }
 }
--- a/src/pages/BandoFlowEdit/index.js
+++ b/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__flowItemInner initialForm">
+                            <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>
-                                    <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>
-                        </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>
+                                    <div className="flowContainer__flowItemContent">
                                        <Dropdown
-                                            id="finalForm"
+                                            id="initialForm"
                                            disabled={'PUBLISH' === bandoStatus}
-                                            value={finalForm}
-                                            onChange={(e) => setFinalForm(e.value)}
-                                            optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)}
+                                            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>
+                        </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>