diff --git a/package.json b/package.json index c998aa0..c1d79c6 100644 --- a/package.json +++ b/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", diff --git a/src/assets/scss/components/flowBuilder.scss b/src/assets/scss/components/flowBuilder.scss index 8e4155c..a4456ec 100644 --- a/src/assets/scss/components/flowBuilder.scss +++ b/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); } \ No newline at end of file diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index 8b94030..5efc13a 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/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')); } - - if (field && options.value && options.value.length === flowForms.length - 2) { + console.log('isFlowAllowed', initialForm, mainField, field) + 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 relevantFields = form - ? form.content + const initialFormObj = head(flowForms.filter(o => String(o.id) === String(initialForm))); + let finalFormObj = null; + + 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 (
@@ -284,16 +327,57 @@ const BandoFlowEdit = () => { {forms.length >= 2 && isFlowAllowed ?
-
- +
+ + 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)} + options={formOptions} + optionLabel="label" + optionValue="value" + placeholder={__('Scegli il form', 'gepafin')}/> +
+
: null}
: null}
-
+ {/*
@@ -339,9 +423,9 @@ const BandoFlowEdit = () => { placeholder={__('Scegli il form', 'gepafin')}/>
: null}
-
+
*/} -
+ {/*
-
+
*/}
- {forms.length >= 2 && isFlowAllowed + {/*{forms.length >= 2 && isFlowAllowed ? : null} + mainField={mainField}/> : null}*/}