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

- saving progress;

Browse Source
This commit is contained in:
Vitalii Kiiko
2024-11-27 10:28:35 +01:00
parent 198fdb71b4
commit 3a4823bb7d
3 changed files with 124 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/assets/scss/components/flowBuilder.scss
View File

@@ -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);
}

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

@@ -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 (
<div className="appPage">
<div className="appPage__pageHeader">
@@ -284,16 +327,57 @@ const BandoFlowEdit = () => {
{forms.length >= 2 && isFlowAllowed
? <div className="flowContainer">
<div className="flowContainer__level">
<div className="flowContainer__level">
<div className="flowContainer__flowItem">
<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>
{forms.length >= 2 && initialForm
? <div className="flowContainer__level">
<div className="flowContainer__flowItem">
<label htmlFor="mainField">{__('Scegli form finale', 'gepafin')}</label>
<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> : null}
</div> : null}
</div>
<div className="appPage__spacer"></div>
<div className="appPageSection">
{/*<div className="appPageSection">
<div className="appForm__cols">
<div className="appForm__field">
<label htmlFor="initialForm">{__('Scegli form iniziale', 'gepafin')}</label>
@@ -339,9 +423,9 @@ const BandoFlowEdit = () => {
placeholder={__('Scegli il form', 'gepafin')}/>
</div> : null}
</div>
</div>
</div>*/}
<div className="appPageSection">
{/*<div className="appPageSection">
<div className="appPageSection__actions">
<Button
onClick={goBack}
@@ -352,15 +436,15 @@ const BandoFlowEdit = () => {
disabled={shoudDisableSaving()}
label={__('Salva', 'gepafin')} icon="pi pi-save" iconPos="right"/>
</div>
</div>
</div>*/}
<div className="appPageSection">
<Messages ref={flowMsgs}/>
{forms.length >= 2 && isFlowAllowed
{/*{forms.length >= 2 && isFlowAllowed
? <FlowBuilder
initialForm={initialForm}
finalForm={finalForm}
mainField={mainField}/> : null}
mainField={mainField}/> : null}*/}
</div>
<div className="appPage__spacer"></div>