- saving progress;
This commit is contained in:
Vitalii Kiiko
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user