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-12-13 08:13:54 +01:00
parent ecfa6c3de0
commit ad3d4ade5f
2 changed files with 94 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,6 +39,7 @@
flex-direction: column;
gap: 60px;
width: 100%;
margin-top: 30px;
overflow-x: auto;
}
@@ -47,7 +48,7 @@
justify-content: center;
gap: 20px;
padding: 10px 0;
min-height: 240px;
/*min-height: 240px;*/
margin: 0 auto;
}
@@ -85,11 +86,12 @@
> label {
display: flex;
justify-content: center;
padding: 10px 0;
padding: 10px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
text-align: center;
}
}

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

@@ -179,6 +179,72 @@ const BandoFlowEdit = () => {
const field = form ? head(form.content.filter(o => o.id === mainField)) : null;
let options = [];
if (field) {
options = head(field.settings.filter(o => o.name === 'options'));
}
if (field && options.value && options.value.length === flowForms.length - 2) {
setIsFlowAllowed(true);
const data = {
formId: String(initialForm),
chosenField: mainField,
chosenValue: ''
}
storeSet.main.addFlowData(data);
} else {
setIsFlowAllowed(false);
let msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzioni.';
if (flowForms.length - 2 === 1) {
msg = 'Non è possibile creare il flusso. Il campo principale deve avere esattamente %s opzione.';
}
if (flowMsgs.current && !isEmpty(mainField)) {
flowMsgs.current.clear();
flowMsgs.current.show([
{
id: '1',
sticky: true, severity: 'error', summary: '',
detail: sprintf(
__(msg, 'gepafin'),
flowForms.length - 2
),
closable: false
}
]);
}
}
}, [mainField]);
useEffect(() => {
setMainField('');
setMainFieldOptions([]);
const flowForms = storeGet.main.flowForms();
const form = head(flowForms.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 };
})
: [];
setMainFieldOptions([
{label: isEmpty(relevantFields) ? __('Nessun scelta', 'gepafin') : '', value: ''},
...relevantFields]
);
if (flowForms.length === 2) {
setIsFlowAllowed(true)
}
}, [initialForm]);
/*useEffect(() => {
const flowForms = storeGet.main.flowForms();
const form = head(flowForms.filter(o => String(o.id) === String(initialForm)))
const field = form ? head(form.content.filter(o => o.id === mainField)) : null;
let options = [];
if (initialForm === 0) {
return;
}
@@ -278,7 +344,7 @@ const BandoFlowEdit = () => {
storeSet.main.flowEdges([edge]);
}
/*lines.forEach(line => line.remove());
/!*lines.forEach(line => line.remove());
// Create new lines between consecutive items
const newLines = [];
@@ -300,7 +366,7 @@ const BandoFlowEdit = () => {
}
}
setLines(newLines);*/
setLines(newLines);*!/
}, [initialForm]);
useEffect(() => {
@@ -343,7 +409,7 @@ const BandoFlowEdit = () => {
return () => {
lines.forEach(line => line.remove());
};
}, [lines]);
}, [lines]);*/
useEffect(() => {
const bandoId = getBandoId();
@@ -382,9 +448,12 @@ const BandoFlowEdit = () => {
}
}, []);
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('isFlowAllowed', isFlowAllowed, flowData, flowEdges)
console.log('isFlowAllowed', isFlowAllowed, flowData, flowEdges);
console.log('mainField', mainField)
return (
<div className="appPage">
<div className="appPage__pageHeader">
@@ -396,7 +465,7 @@ const BandoFlowEdit = () => {
<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>
@@ -442,7 +511,7 @@ const BandoFlowEdit = () => {
placeholder={__('Scegli il form', 'gepafin')}/>
</div> : null}
</div>
</div>*/}
</div>
{/*<div className="appPageSection">
<div className="appPageSection__actions">
@@ -460,14 +529,17 @@ const BandoFlowEdit = () => {
<div className="appPageSection">
<Messages ref={flowMsgs}/>
{forms.length >= 2
{forms.length >= 2 && initialForm && finalForm
? <div className="flowContainer">
<div className="flowContainer__level">
<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>
<div className="flowContainer__flowItemContent">
<label htmlFor="mainField">
{/*{__('Scegli form iniziale', 'gepafin')}*/}
{initialFormData.label}
</label>
{/*<div className="flowContainer__flowItemContent">
<Dropdown
id="initialForm"
disabled={'PUBLISH' === bandoStatus}
@@ -493,12 +565,12 @@ const BandoFlowEdit = () => {
optionValue="value"
placeholder={__('Scegli il campo', 'gepafin')}/>
</div> : null}
</div>
</div>*/}
</div>
</div>
</div>
{initialForm && finalForm && levelForms.length
{levelForms.length && initialForm && finalForm
? <div className="flowContainer__level">
{levelForms.map(o => <div key={o.id}
ref={(el) => setItemRef(o.id, el)}
@@ -511,13 +583,16 @@ const BandoFlowEdit = () => {
</div>)}
</div> : null}
{forms.length >= 2 && initialForm
{forms.length >= 2 && initialForm && finalForm
? <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">
<label htmlFor="mainField">
{/*{__('Scegli form finale', 'gepafin')}*/}
{finalFormData.label}
</label>
{/*<div className="flowContainer__flowItemContent">
<Dropdown
id="finalForm"
disabled={'PUBLISH' === bandoStatus}
@@ -528,7 +603,7 @@ const BandoFlowEdit = () => {
optionLabel="label"
optionValue="value"
placeholder={__('Scegli il form', 'gepafin')}/>
</div>
</div>*/}
</div>
</div>
</div>