diff --git a/src/pages/BandoFlowEdit/index.js b/src/pages/BandoFlowEdit/index.js index b579a1e..75152e9 100644 --- a/src/pages/BandoFlowEdit/index.js +++ b/src/pages/BandoFlowEdit/index.js @@ -23,20 +23,24 @@ import { Toast } from 'primereact/toast'; const BandoFlowEdit = () => { const { id } = useParams(); const navigate = useNavigate(); - const forms = useStore().main.flowForms(); - const flowData = useStore().main.flowData(); - const flowEdges = useStore().main.flowEdges(); + + const [flowStructure, setFlowStructure] = useState({ + initialForm: 0, + finalForm: 0, + flowData: [], + flowWdges: [], + chosenField: '' + }); + + const [forms, setForms] = useState([]); const [formOptions, setFormOptions] = useState([]); - const [initialForm, setInitialForm] = useState(null); const [chosenMainFieldOptions, setChosenMainFieldOptions] = useState([]); const [chosenMainField, setChosenMainField] = useState(''); const [mainFieldSuboptions, setMainFieldSubOptions] = useState([]); const [bandoStatus, setBandoStatus] = useState(''); const [isFlowAllowed, setIsFlowAllowed] = useState(true); - const [finalForm, setFinalForm] = useState(null); const flowMsgs = useRef(null); const toast = useRef(null); - const [lines, setLines] = useState([]); const itemRefs = useRef({}); const itemContainerRef = useRef(null); @@ -68,59 +72,88 @@ const BandoFlowEdit = () => { if (flowMsgs.current) { flowMsgs.current.clear(); } - storeSet.main.flowData([]); - storeSet.main.flowEdges([]); - setInitialForm(null); - setChosenMainFieldOptions([]); - setChosenMainField(''); + + setFlowStructure({ + initialForm: 0, + finalForm: 0, + flowData: [], + flowWdges: [], + chosenField: '' + }) + setIsFlowAllowed(false); - setFinalForm(0); - lines.forEach(line => line.remove()); + setChosenMainFieldOptions([]); } const updateInitialForm = (value) => { - if (value !== finalForm) { - console.log('setInitialForm1') - setInitialForm(value); - if (forms.length === 2) { - const finalForm = head(forms.filter(o => o.id !== value)); - if (finalForm) { - setFinalForm(finalForm.id); - } - } + const finalFormObj = head(forms.filter(o => o.id !== value)); + + if (forms.length === 2 && finalFormObj) { + setFlowStructure({ + ...flowStructure, + initialForm: value, + finalForm: finalFormObj.id + }); + } else { + setFlowStructure({ + ...flowStructure, + initialForm: value + }); } } const updateFinalForm = (value) => { - if (value !== initialForm) { - setFinalForm(value); - } + const filtered = flowStructure.flowData.filter(o => o.formId === flowStructure.initialForm); + const flowEdges = buildFlowEdges(flowStructure.initialForm, value); + + setFlowStructure({ + ...flowStructure, + flowEdges, + flowData: filtered, + finalForm: value + }); } + const addFlowData = useCallback((data) => { + const initial = flowStructure.flowData; + const exists = initial ? initial.filter(o => parseInt(o.formId) === parseInt(data.formId)) : []; + let final = []; + + if (exists.length) { + final = initial.map(o => parseInt(o.formId) === parseInt(data.formId) ? data : o); + } else { + final = [...initial, data]; + } + + setFlowStructure({ + ...flowStructure, + flowData: final + }); + }, [flowStructure]); + const updateItermediateForm = (value, formId) => { - const isUsed = flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(value); + const isUsed = flowStructure.flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(value); if (!isUsed) { const data = { formId: parseInt(formId), chosenField: '', chosenValue: value } - storeSet.main.addFlowData(data); + addFlowData(data); } } const displayChosenOptionValue = (id) => { - const suboptionId = pathOr('', ['chosenValue'], head(flowData.filter(f => parseInt(f.formId) === parseInt(id)))); + const suboptionId = pathOr('', ['chosenValue'], head(flowStructure.flowData.filter(f => parseInt(f.formId) === parseInt(id)))); return pathOr('', ['label'], head(mainFieldSuboptions.filter(o => o.name === suboptionId))); } const disabledOptionForIntermediateForm = (opt) => { - return flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(opt.name); + return flowStructure.flowData.map(o => o.chosenValue).filter(v => !isEmpty(v)).includes(opt.name); } const shoudDisableSaving = useCallback(() => { - const flowForms = storeGet.main.flowForms(); - const nonEmptyFlowItems = flowData.filter(o => isEmpty(o.chosenField)).filter(o => !isEmpty(o.chosenValue)); + const nonEmptyFlowItems = flowStructure.flowData.filter(o => isEmpty(o.chosenField)).filter(o => !isEmpty(o.chosenValue)); /*if (flowForms.length > 2) { console.log('disable BTN:', nonEmptyFlowItems.length !== flowForms.length - 2, isEmpty(flowEdges), 'PUBLISH' === bandoStatus, @@ -130,27 +163,22 @@ const BandoFlowEdit = () => { isEmpty(initialForm), isEmpty(finalForm)); }*/ - return flowForms.length > 2 - ? nonEmptyFlowItems.length !== flowForms.length - 2 || isEmpty(flowEdges) || 'PUBLISH' === bandoStatus - || isEmpty(initialForm) || isEmpty(finalForm) - : nonEmptyFlowItems.length !== 1 || isEmpty(flowEdges) || 'PUBLISH' === bandoStatus - || isEmpty(initialForm) || isEmpty(finalForm); - }, [flowData, flowEdges]); + return forms.length > 2 + ? nonEmptyFlowItems.length !== forms.length - 2 || isEmpty(flowStructure.flowEdges) || 'PUBLISH' === bandoStatus + || isEmpty(flowStructure.initialForm) || isEmpty(flowStructure.finalForm) + : nonEmptyFlowItems.length !== 1 || isEmpty(flowStructure.flowEdges) || 'PUBLISH' === bandoStatus + || isEmpty(flowStructure.initialForm) || isEmpty(flowStructure.finalForm); + }, [flowStructure, forms]); const doSave = () => { storeSet.main.setAsyncRequest(); const bandoId = getBandoId(); - const body = { - initialForm, - finalForm, - flowData, - flowEdges - }; + if (flowMsgs.current) { flowMsgs.current.clear(); } - FlowService.createFlow(bandoId, body, getFlowCreateCallback, errGetFlowCreateCallback); + FlowService.createFlow(bandoId, flowStructure, getFlowCreateCallback, errGetFlowCreateCallback); } const getFlowCreateCallback = (data) => { @@ -173,10 +201,11 @@ const BandoFlowEdit = () => { const getFormsCallback = (data) => { if (data.status === 'SUCCESS') { + setForms(data.data); const formOptions = data.data.map(o => ({ label: o.label, value: o.id })) - storeSet.main.flowForms(data.data); setFormOptions([{ label: '', value: '' }, ...formOptions]); const bandoId = getBandoId(); + storeSet.main.setAsyncRequest(); FlowService.getFlow(bandoId, (resp) => getFlowCallback(resp, data.data), errGetFlowCallback); } @@ -190,15 +219,17 @@ const BandoFlowEdit = () => { const getFlowCallback = (data, forms) => { if (data.status === 'SUCCESS' && data.data) { - storeSet.main.flowData(data.data.flowData); - storeSet.main.flowEdges(data.data.flowEdges); - console.log('setInitialForm2') - setInitialForm(data.data.initialForm); - setFinalForm(data.data.finalForm); - setBandoStatus(data.data.callStatus); const chosenFieldItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField))); + setBandoStatus(data.data.callStatus); + if (chosenFieldItem) { - setChosenMainField(chosenFieldItem.chosenField); + setFlowStructure({ + initialForm: data.data.initialForm, + finalForm: data.data.finalForm, + flowData: data.data.flowData, + flowWdges: data.data.flowWdges, + chosenField: chosenFieldItem.chosenField + }); const form = head(forms.filter(o => o.id === data.data.initialForm)); const relevantFields = form ? form.content @@ -212,14 +243,16 @@ const BandoFlowEdit = () => { const field = form ? head(form.content.filter(o => o.id === chosenFieldItem.chosenField)) : null; if (field) { const options = head(field.settings.filter(o => o.name === 'options')); - console.log('suboptions1', options.value, data.data.initialForm) setMainFieldSubOptions(options.value); } - } - const flowDataItem = head(data.data.flowData.filter(o => !isEmpty(o.chosenField))); - - if (flowDataItem) { - setChosenMainField(flowDataItem.chosenField); + } else { + setFlowStructure({ + initialForm: data.data.initialForm, + finalForm: data.data.finalForm, + flowData: data.data.flowData, + flowWdges: data.data.flowWdges, + chosenField: '' + }); } } storeSet.main.unsetAsyncRequest(); @@ -234,12 +267,12 @@ const BandoFlowEdit = () => { itemRefs.current[id] = element; }; - const buildFlowEdges = () => { + const buildFlowEdges = (initialForm, finalForm) => { + let edges = []; + if (!isEmpty(initialForm) && !isEmpty(finalForm)) { - const flowForms = storeGet.main.flowForms(); - let edges = []; // eslint-disable-next-line - flowForms.map(o => { + forms.map(o => { const formId = String(o.id); if (formId !== String(initialForm) && formId !== String(finalForm)) { @@ -260,7 +293,7 @@ const BandoFlowEdit = () => { } }); - if (flowForms.length === 2 && initialForm && finalForm) { + if (forms.length === 2 && initialForm && finalForm) { edges.push({ id: `${initialForm}->${finalForm}`, source: String(initialForm), @@ -268,18 +301,123 @@ const BandoFlowEdit = () => { type: 'smoothstep' }); } - - //console.log('edges', edges); - storeSet.main.flowEdges(edges); } - } + + return edges; + }; useEffect(() => { + const bandoId = getBandoId(); + storeSet.main.setAsyncRequest(); + FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback); + }, [id]); + + useEffect(() => { + if (flowMsgs.current && forms.length < 2) { + flowMsgs.current.clear(); + flowMsgs.current.show([ + { + id: '1', + sticky: true, severity: 'info', summary: '', + detail: __('Devi creare almeno 2 form.', 'gepafin'), + closable: false + } + ]); + } else { + flowMsgs.current.clear(); + if (itemContainerRef.current) { + itemContainerRef.current.dispatchEvent(new Event('scroll')); + } + } + }, [forms]); + + useEffect(() => { + console.log('updated flowStructure:', flowStructure); + const { initialForm = 0, finalForm = 0, chosenField = '' } = flowStructure; + + if (!isEmpty(initialForm) && !isEmpty(finalForm)) { + const form = head(forms.filter(o => String(o.id) === String(initialForm))) + const relevantFields = form + ? form.content + .filter(o => ['radio', 'select'].includes(o.name)) + .map(o => { + const label = head(o.settings.filter(o => o.name === 'label')); + return { value: o.id, label: label ? label.value : o.label }; + }) + : []; + setChosenMainFieldOptions([ + { label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: '' }, + ...relevantFields] + ); + + if (forms.length === 2) { + setIsFlowAllowed(true) + } + + const flowEdges = buildFlowEdges(initialForm, finalForm); + + if (!isEmpty(chosenField)) { + const field = form ? head(form.content.filter(o => o.id === chosenField)) : null; + let options = []; + + if (field) { + options = head(field.settings.filter(o => o.name === 'options')); + } + + if (field && options.value && options.value.length === forms.length - 2) { + setIsFlowAllowed(true); + const suboptions = [ + { label: __('Nessun scelta', 'gepafin'), name: '' }, + ...options.value + ] + + setMainFieldSubOptions(suboptions); + + const data = { + formId: parseInt(initialForm), + chosenField: chosenField, + chosenValue: '' + } + + addFlowData(data); + + if (flowMsgs.current && !isEmpty(chosenField)) { + flowMsgs.current.clear(); + } + } else { + setIsFlowAllowed(false); + + let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; + + if (forms.length - 2 === 1) { + msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.'; + } + + if (flowMsgs.current && !isEmpty(chosenMainField)) { + flowMsgs.current.clear(); + flowMsgs.current.show([ + { + id: '1', + sticky: true, severity: 'error', summary: '', + detail: sprintf( + __(msg, 'gepafin'), + forms.length - 2 + ), + closable: false + } + ]); + } + } + } + } + }, [flowStructure]); + + /*useEffect(() => { const isAsyncRequest = storeGet.main.isAsyncRequest(); if ('PUBLISH' === bandoStatus || isAsyncRequest || isNil(initialForm)) { return; } - storeSet.main.flowData([]); + //storeSet.main.flowData([]); setChosenMainField(''); console.log('suboptions3', [], initialForm) setMainFieldSubOptions([]); @@ -380,32 +518,6 @@ const BandoFlowEdit = () => { } }, [finalForm]); - useEffect(() => { - const bandoId = getBandoId(); - storeSet.main.setAsyncRequest(); - FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback); - }, [id]); - - useEffect(() => { - console.log(forms) - if (flowMsgs.current && forms.length < 2) { - flowMsgs.current.clear(); - flowMsgs.current.show([ - { - id: '1', - sticky: true, severity: 'info', summary: '', - detail: __('Devi creare almeno 2 form.', 'gepafin'), - closable: false - } - ]); - } else { - flowMsgs.current.clear(); - if (itemContainerRef.current) { - itemContainerRef.current.dispatchEvent(new Event('scroll')); - } - } - }, [forms]); - useEffect(() => { const isAsyncRequest = storeGet.main.isAsyncRequest(); if (isAsyncRequest) { @@ -415,21 +527,14 @@ const BandoFlowEdit = () => { if (chosenFieldItem) { setChosenMainField(chosenFieldItem.chosenField); } - }, [flowData]) - - useEffect(() => { - return () => { - storeSet.main.flowForms([]); - storeSet.main.flowData([]); - storeSet.main.flowEdges([]); - } - }, []); + }, [flowData]);*/ + const { initialForm = 0, finalForm = 0, flowData = [] } = flowStructure; const initialFormData = head(forms.filter(o => o.id === initialForm)); const finalFormData = head(forms.filter(o => o.id === finalForm)); const levelForms = forms.filter(o => o.id !== initialForm && o.id !== finalForm); - console.log('mainFieldSuboptions', mainFieldSuboptions); + console.log('mainFieldSuboptions', mainFieldSuboptions, flowStructure); return (