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

- updated version;

Browse Source
This commit is contained in:
Vitalii Kiiko
2024-09-06 17:28:25 +02:00
parent 4054745695
commit 19e17ec2d7
14 changed files with 160 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,22 @@
flex-direction: column;
gap: 10px;
label {
font-size: 13px;
text-align: center;
}
}
.nodeIntermediateForm {
padding: 10px 20px;
background-color: white;
border: 1px solid black;
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 180px;
label {
font-size: 13px;
text-align: center;

3
src/assets/scss/components/layout.scss
View File

@@ -12,7 +12,8 @@ body {
margin: 0;
font-family: "Montserrat", sans-serif;
p, span:not(.p-button-label, .p-button-icon, .p-badge), input, label:not(.p-error), textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td {
p, span:not(.p-button-label, .p-button-icon, .p-badge, .p-message-detail), input, label:not(.p-error),
textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td {
color: var(--global-textColor);
}
}

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

@@ -28,7 +28,7 @@
}
.p-paginator-page {
color: var(--menuitem-active-color);
/*color: var(--menuitem-active-color);*/
}
.p-datepicker-buttonbar .p-button {
@@ -78,6 +78,10 @@
color: var(--primary-text);
}
.p-toast-detail {
color: white;
margin: 0;
}
.mb-2 {
margin-bottom: 4px;

2
src/components/FlowBuilder/components/NodeIntermediateForm/index.js
View File

@@ -43,7 +43,7 @@ const NodeIntermediateForm = ({ data: { id, label = '' } }) => {
}, [flowEdges, flowData]);
return (
<div className="nodeInitialForm">
<div className="nodeIntermediateForm">
<Handle
type="target"
position={Position.Top}

36
src/components/FlowBuilder/index.js
View File

@@ -32,33 +32,38 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
}
useEffect(() => {
if (initialForm && finalForm && forms.length) {
if (
(forms.length === 2 && initialForm) ||
(forms.length > 2 && initialForm && finalForm)
) {
const total = (forms.length - 2) * (200 - 90);
let coordinates = range(total * -1, total, 200);
const initialNodes = forms.map(o => {
const formId = String(o.id);
let obj;
if (o.id === initialForm) {
if (formId === String(initialForm)) {
obj = {
id: String(o.id),
id: formId,
type: 'initialForm',
data: { label: o.label, id: o.id },
data: { label: o.label, id: formId },
position: { x: 0, y: 0 },
}
} else if (o.id === finalForm) {
} else if (formId === String(finalForm)) {
obj = {
id: String(o.id),
id: formId,
type: 'output',
data: { label: o.label, id: o.id },
data: { label: o.label, id: formId },
position: { x: 0, y: 300 },
}
} else {
const x = coordinates.splice(0, 1);
console.log('x', x)
obj = {
id: String(o.id),
id: formId,
type: 'intermediateForm',
data: { label: o.label, id: o.id },
data: { label: o.label, id: formId },
position: { x, y: 150 },
}
}
@@ -66,13 +71,18 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
});
let edges = [];
// eslint-disable-next-line
forms.map(o => {
if (o.id !== initialForm && o.id !== finalForm) {
edges.push({ id: `${initialForm}->${o.id}`, source: String(initialForm), target: String(o.id), type: 'smoothstep' });
edges.push({ id: `${o.id}->${finalForm}`, source: String(o.id), target: String(finalForm), type: 'smoothstep' });
const formId = String(o.id);
if (formId !== String(initialForm) && formId !== String(finalForm)) {
edges.push({ id: `${initialForm}->${formId}`, source: String(initialForm), target: formId, type: 'smoothstep' });
}
if (formId !== String(finalForm) && formId !== String(initialForm) && String(finalForm) !== '0') {
edges.push({ id: `${formId}->${finalForm}`, source: formId, target: String(finalForm), type: 'smoothstep' });
}
});
console.log('edges', edges, initialNodes);
setNodes(initialNodes);
setEdges(edges);
storeSet.main.flowEdges(edges);

4
src/components/FormField/components/FileuploadAsync/index.js
View File

@@ -116,7 +116,9 @@ const FileuploadAsync = ({
}, [accept]);
useEffect(() => {
inputRef.current.setUploadedFiles(stateFieldData);
if (inputRef.current) {
inputRef.current.setUploadedFiles(stateFieldData);
}
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])

13
src/components/FormFieldRepeater/index.js
View File

@@ -1,14 +1,14 @@
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { head, isEmpty, isNil } from 'ramda';
import { head, isEmpty, isNil, pluck } from 'ramda';
import { diff } from 'deep-object-diff';
// components
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Menu } from 'primereact/menu';
import { Dropdown } from 'primereact/dropdown';
import { diff } from 'deep-object-diff';
const FormFieldRepeater = ({
data,
@@ -39,7 +39,7 @@ const FormFieldRepeater = ({
setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: null }]);
}
}
]
];
const removeItem = (index) => {
const newData = stateFieldData.toSpliced(index, 1);
@@ -96,6 +96,11 @@ const FormFieldRepeater = ({
if (!isEmpty(diffData)) {
const storeFieldData = data ?? [];
setStateFieldData(storeFieldData);
setStateOptionsData(prevState => {
const ids = pluck('id', storeFieldData)
const objectsToAdd = storeFieldData.filter(o => ids.includes(o.id));
return [...prevState, ...objectsToAdd];
});
}
}, [data]);
@@ -105,7 +110,7 @@ const FormFieldRepeater = ({
useEffect(() => {
setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
}, [stateFieldData])
}, [stateFieldData]);
return (
<div className={classNames(['appForm__field', 'formfieldrepeater'])}>

10
src/components/FormFieldRepeaterFaq/index.js
View File

@@ -61,8 +61,9 @@ const FormFieldRepeaterFaq = ({
const editItem = (e, index) => {
e.stopPropagation();
setQuestion(stateFieldData[index].title);
setAnswer(stateFieldData[index].value);
setTitle(stateFieldData[index].title);
setQuestion(stateFieldData[index].value);
setAnswer(stateFieldData[index].response);
setEditDataIndex(index);
setIsVisibleEditDialog(true);
}
@@ -71,6 +72,7 @@ const FormFieldRepeaterFaq = ({
setIsVisibleEditDialog(false);
setQuestion('');
setAnswer('');
setTitle('');
setEditDataIndex(null);
}
@@ -99,6 +101,7 @@ const FormFieldRepeaterFaq = ({
setIsVisibleEditDialog(false);
setQuestion('');
setAnswer('');
setTitle('');
setEditDataIndex(null);
}
@@ -172,7 +175,6 @@ const FormFieldRepeaterFaq = ({
offLabel=""
checked={o.isVisible}
onChange={(e) => {
console.log('e', e);
e.preventDefault();
e.stopPropagation();
setChecked(e, i);
@@ -181,9 +183,11 @@ const FormFieldRepeaterFaq = ({
</div>
<div className="appForm__faqTabItem">
<Button icon="pi pi-pencil" severity="success"
type="button"
aria-label={__('Modifica', 'gepafin')}
onClick={(e) => editItem(e, i)}/>
<Button icon="pi pi-times" severity="danger"
type="button"
aria-label={__('Cancella', 'gepafin')}
onClick={() => removeItem(i)}/>
</div>

1
src/components/UnsavedChangesDetector/index.js
View File

@@ -10,7 +10,6 @@ const UnsavedChangesDetector = ({ getValuesFn }) => {
const formData = getValuesFn();
const initial = storeGet.main.formInitialData();
const isEqual = equal(initial, formData);
console.log(initial, formData);
if (!isEqual) {
event.returnValue = __('You have unsaved changes. If you proceed, they will be lost.', 'gepafin');

18
src/pages/BandoEdit/components/BandoEditFormStep1/index.js
View File

@@ -1,4 +1,4 @@
import React, { forwardRef, useImperativeHandle, useEffect, useState, useMemo } from 'react';
import React, { forwardRef, useImperativeHandle, useEffect, useState, useMemo, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
@@ -11,6 +11,9 @@ import FormFieldRepeater from '../../../../components/FormFieldRepeater';
import FormFieldRepeaterFaq from '../../../../components/FormFieldRepeaterFaq';
import BandoEditFormActions from '../BandoEditFormActions';
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
import { Toast } from 'primereact/toast';
// api
import BandoService from '../../../../service/bando-service';
import LookupdataService from '../../../../service/lookupdata-service';
@@ -39,6 +42,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
}, [formInitialData]), mode: 'onChange'
});
const values = getValues();
const toast = useRef(null);
const onSubmit = (formData) => {
if (!isNil(formData.dates) && formData.dates.length) {
@@ -54,6 +58,11 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
const createCallback = (data) => {
if (data.status === 'SUCCESS') {
toast.current.show({
severity: 'success',
summary: '',
detail: __('Il bando è stato aggiornato corretamente!', 'gepafin')
});
const values = getValues();
if (!values.id && data.data.id) {
navigate(`/tenders/${data.data.id}`);
@@ -84,7 +93,8 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
delete o.type;
return {
...o,
lookUpDataId: o.id
lookUpDataId: o.id,
id: null
};
});
setAimedToOptions(aimedTo);
@@ -94,7 +104,8 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
delete o.type;
return {
...o,
lookUpDataId: o.id
lookUpDataId: o.id,
id: null
};
});
setFaqOptions(faqItems);
@@ -290,6 +301,7 @@ const BandoEditFormStep1 = forwardRef(function ({ initialData, getFormErrors },
<span>{__('Azioni', 'gepafin')}</span>
</div>
<Toast ref={toast} />
<BandoEditFormActions
id={values.id}
openPreview={openPreview}

20
src/pages/BandoEdit/components/BandoEditFormStep2/index.js
View File

@@ -1,4 +1,4 @@
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
@@ -11,8 +11,13 @@ import FormFieldRepeater from '../../../../components/FormFieldRepeater';
import FormFieldRepeaterCriteria from '../../../../components/FormFieldRepeaterCriteria';
import BandoEditFormActions from '../BandoEditFormActions';
import UnsavedChangesDetector from '../../../../components/UnsavedChangesDetector';
import { Toast } from 'primereact/toast';
// api
import BandoService from '../../../../service/bando-service';
import LookupdataService from '../../../../service/lookupdata-service';
// store
import { storeSet } from '../../../../store';
const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors }, ref) {
@@ -37,6 +42,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
});
const values = getValues();
const step2Props = ['threshold', 'criteria', 'checkList', 'docs', 'images'];
const toast = useRef(null);
const onSubmit = (formData) => {
if (!isNil(formData.dates) && formData.dates.length) {
@@ -55,6 +61,11 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
const createCallback = (data) => {
if (data.status === 'SUCCESS') {
toast.current.show({
severity: 'success',
summary: '',
detail: __('Il bando è stato aggiornato corretamente!', 'gepafin')
});
setFormInitialData(data.data);
reset();
}
@@ -73,7 +84,8 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
return {
...o,
score: 0,
lookUpDataId: o.id
lookUpDataId: o.id,
id: null
};
});
setCriteriaOptions(criteria);
@@ -83,7 +95,8 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
delete o.type;
return {
...o,
lookUpDataId: o.id
lookUpDataId: o.id,
id: null
};
});
setChecklistOptions(checklist);
@@ -215,6 +228,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
<span>{__('Azioni', 'gepafin')}</span>
</div>
<Toast ref={toast} />
<BandoEditFormActions
openPreview={openPreview}
openPreviewEvaluation={openPreviewEvaluation}/>

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

@@ -1,4 +1,4 @@
import React, { useEffect, useState, useCallback } from 'react';
import React, { useEffect, useState, useCallback, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { isEmpty } from 'ramda';
@@ -16,15 +16,18 @@ import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
import FlowBuilder from '../../components/FlowBuilder';
import { Messages } from 'primereact/messages';
const BandoFlowEdit = () => {
const { id } = useParams();
const navigate = useNavigate();
const forms = useStore().main.flowForms();
const flowData = useStore().main.flowData();
const flowEdges = useStore().main.flowEdges();
const [formOptions, setFormOptions] = useState([]);
const [initialForm, setInitialForm] = useState(0);
const [finalForm, setFinalForm] = useState(0);
const flowMsgs = useRef(null);
const getBandoId = () => {
const parsed = parseInt(id)
@@ -51,7 +54,7 @@ const BandoFlowEdit = () => {
const getFormsCallback = (data) => {
if (data.status === 'SUCCESS') {
const formOptions = data.data.map(o => ({label: o.label, value: o.id}))
const formOptions = data.data.map(o => ({ label: o.label, value: o.id }))
storeSet.main.flowForms(data.data);
setFormOptions(formOptions);
}
@@ -69,6 +72,20 @@ const BandoFlowEdit = () => {
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
}
]);
}
}, [forms]);
useEffect(() => {
return () => {
storeSet.main.flowForms([]);
@@ -100,28 +117,31 @@ const BandoFlowEdit = () => {
options={formOptions}
optionLabel="label"
optionValue="value"
placeholder={__('Scegli il form', 'gepafin')} />
placeholder={__('Scegli il form', 'gepafin')}/>
</div>
<div className="appForm__field">
<label htmlFor="finalForm">{__('Scegli form finale', 'gepafin')}</label>
<Dropdown
id="finalForm"
value={finalForm}
onChange={(e) => setFinalForm(e.value)}
optionDisabled={(opt) => initialForm === opt.value}
options={formOptions}
optionLabel="label"
optionValue="value"
placeholder={__('Scegli il form', 'gepafin')} />
</div>
{forms.length > 2
? <div className="appForm__field">
<label htmlFor="finalForm">{__('Scegli form finale', 'gepafin')}</label>
<Dropdown
id="finalForm"
value={finalForm}
onChange={(e) => setFinalForm(e.value)}
optionDisabled={(opt) => initialForm === opt.value}
options={formOptions}
optionLabel="label"
optionValue="value"
placeholder={__('Scegli il form', 'gepafin')}/>
</div> : null}
</div>
</div>
<div className="appPage__spacer"></div>
<div className="appPageSection">
<FlowBuilder initialForm={initialForm} finalForm={finalForm}/>
{forms.length >= 2
? <FlowBuilder initialForm={initialForm} finalForm={finalForm}/>
: <Messages ref={flowMsgs}/>}
</div>
<div className="appPage__spacer"></div>

3
src/pages/BandoFormsEdit/index.js
View File

@@ -57,7 +57,6 @@ const BandoFormsEdit = () => {
if (data.status === 'SUCCESS') {
storeSet.main.unsetAsyncRequest();
const bandoId = getBandoId();
if (shouldRedirect) {
navigate(`/tenders/${bandoId}/forms/${data.data.id}/preview`);
return;
@@ -198,7 +197,7 @@ const BandoFormsEdit = () => {
outlined
label={__('Indietro', 'gepafin')} icon="pi pi-arrow-left" iconPos="left"/>
<Button
onClick={doSave}
onClick={() => doSave()}
label={__('Salva progressi', 'gepafin')} icon="pi pi-save" iconPos="right"/>
<Button
outlined

27
src/pages/Dashboard/components/LatestBandiTable/index.js
View File

@@ -6,6 +6,12 @@ import { uniq } from 'ramda';
import getBandoLabel from '../../../../helpers/getBandoLabel';
import getBandoSeverity from '../../../../helpers/getBandoSeverity';
// store
import { storeSet } from '../../../../store';
// api
import BandoService from '../../../../service/bando-service';
// components
import { FilterMatchMode, FilterOperator } from 'primereact/api';
import { DataTable } from 'primereact/datatable';
@@ -30,7 +36,7 @@ const LatestBandiTable = () => {
useEffect(() => {
// TODO
const items = [
/*const items = [
{
name: 'Bando Innovazione 2024',
start_date: '2024-08-08T00:00:00+00:00',
@@ -59,9 +65,26 @@ const LatestBandiTable = () => {
setItems(getFormattedBandiData(items));
setStatuses(uniq(items.map(o => o.status)))
setLoading(false);
initFilters();
initFilters();*/
storeSet.main.setAsyncRequest();
BandoService.getBandi(getCallback, errGetCallbacks);
}, []);
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
setItems(getFormattedBandiData(data.data));
setStatuses(uniq(data.data.map(o => o.status)))
initFilters();
}
storeSet.main.unsetAsyncRequest();
}
const errGetCallbacks = (data) => {
console.log('errGetCallbacks', data)
storeSet.main.unsetAsyncRequest();
}
const getFormattedBandiData = (data) => {
return [...(data || [])].map((d) => {
d.start_date = new Date(d.start_date);