diff --git a/package.json b/package.json index 9baab70..145700c 100644 --- 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", diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index 98c6d03..4689c85 100644 --- 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; } } } \ No newline at end of file diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index f730bab..4c4cb10 100644 --- 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 (
@@ -390,59 +460,79 @@ const BandoFlowEdit = () => {
- {forms.length >= 2 && isFlowAllowed + {forms.length >= 2 ?
-
-
+
initialForm ? setItemRef(initialForm, el) : null}> +
- 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 - ?
- - setMainField(e.value)} - optionDisabled={(opt) => isEmpty(opt.value)} - options={mainFieldOptions} - optionLabel="label" - optionValue="value" - placeholder={__('Scegli il campo', 'gepafin')}/> -
: null} -
-
-
- - {forms.length >= 2 && initialForm - ?
-
-
- +
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 + ?
+ + setMainField(e.value)} + optionDisabled={(opt) => isEmpty(opt.value)} + options={mainFieldOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il campo', 'gepafin')}/> +
: null}
+
+
+ + {initialForm && finalForm && levelForms.length + ?
+ {levelForms.map(o =>
setItemRef(o.id, el)} + className="flowContainer__flowItem levelForms" > +
+ +
+
+
+
)}
: null} + + {forms.length >= 2 && initialForm + ?
+
finalForm ? setItemRef(finalForm, el) : null}> +
+ +
+ setFinalForm(e.value)} + optionDisabled={(opt) => initialForm === opt.value || isEmpty(opt.value)} + options={formOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il form', 'gepafin')}/> +
+
+
+
+ : null}
: null}