BFLOWS/bflows-bandi-fe
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- saving;

Browse Source
This commit is contained in:
Vitalii Kiiko
2025-01-10 09:57:12 +01:00
parent 66178f3d9a
commit 40e84c7d02
1 changed files with 258 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
src/pages/BandoFlowEdit/index.js
View File

@@ -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 = () => {
if (!isEmpty(initialForm) && !isEmpty(finalForm)) {
const flowForms = storeGet.main.flowForms();
const buildFlowEdges = (initialForm, finalForm) => {
let edges = [];
if (!isEmpty(initialForm) && !isEmpty(finalForm)) {
// 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 (
<div className="appPage">
<div className="appPage__pageHeader">
@@ -545,8 +650,10 @@ const BandoFlowEdit = () => {
</div>
</div>)}
{levelForms.length > 1
? <><div className="flowContainer__levelMaskEnd"></div>
<div className="flowContainer__levelMaskStart"></div></> : null}
? <>
<div className="flowContainer__levelMaskEnd"></div>
<div className="flowContainer__levelMaskStart"></div>
</> : null}
</div> : null}
{forms.length >= 2 && initialForm && finalForm