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

updated form fields and application logic;

Browse Source
This commit is contained in:
Vitalii Kiiko
2024-09-12 17:17:48 +02:00
parent 19e17ec2d7
commit a8471ba7aa
42 changed files with 1423 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/scss/components/appPage.scss
View File

@@ -102,7 +102,7 @@
.appPageSection__withBorder {
display: flex;
flex-direction: column;
gap: 7px;
gap: 16px;
width: 100%;
padding: 17px;
border-radius: 6px;
@@ -131,7 +131,7 @@
padding: 5px 0;
&.rowContent {
padding: 17px 0;
padding: 7px 0;
}
p {
@@ -194,6 +194,7 @@
display: flex;
gap: 0.5rem;
justify-content: space-between;
margin: 0;
span {
font-size: 14px;

1
src/assets/scss/components/formBuilder.scss
View File

@@ -1,4 +1,5 @@
.formBuilder {
position: relative;
display: flex;
gap: 20px;
width: 100%;

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

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

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

@@ -83,6 +83,13 @@
margin: 0;
}
.blockingOverlay {
position: absolute;
z-index: 999;
inset: 0;
background-color: rgba(255,255,255,0.3)
}
.mb-2 {
margin-bottom: 4px;
}

8
src/components/BlockingOverlay/index.js Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
const BlockingOverlay = ({ shouldDisplay = false }) => {
return shouldDisplay
? <div className="blockingOverlay"></div> : null;
}
export default BlockingOverlay;

16
src/components/FlowBuilder/components/NodeInitialForm/index.js
View File

@@ -22,13 +22,15 @@ const NodeInitialForm = ({ data: { id, label = '' } }) => {
useEffect(() => {
const forms = storeGet.main.flowForms();
const form = head(forms.filter(o => String(o.id) === String(id)))
const relevantFields = form
? form.content
.filter(o => ['radio', 'select'].includes(o.name))
.map(o => ({ name: o.id, label: o.label }))
: [];
setOptions(relevantFields);
if (forms.length > 2) {
const form = head(forms.filter(o => String(o.id) === String(id)))
const relevantFields = form
? form.content
.filter(o => ['radio', 'select'].includes(o.name))
.map(o => ({ name: o.id, label: o.label }))
: [];
setOptions(relevantFields);
}
}, [id]);
return (

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

@@ -55,11 +55,10 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
id: formId,
type: 'output',
data: { label: o.label, id: formId },
position: { x: 0, y: 300 },
position: { x: 0, y: forms.length === 2 ? 150 : 300 },
}
} else {
const x = coordinates.splice(0, 1);
console.log('x', x)
obj = {
id: formId,
type: 'intermediateForm',
@@ -78,11 +77,15 @@ const FlowBuilder = ({ initialForm = 0, finalForm = 0 }) => {
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') {
if (formId !== String(initialForm) && formId !== String(finalForm) && String(finalForm) !== '0') {
edges.push({ id: `${formId}->${finalForm}`, source: formId, target: String(finalForm), type: 'smoothstep' });
}
});
console.log('edges', edges, initialNodes);
if (forms.length === 2 && initialForm && finalForm) {
edges.push({ id: `${initialForm}->${finalForm}`, source: String(initialForm), target: String(finalForm), type: 'smoothstep' });
}
setNodes(initialNodes);
setEdges(edges);
storeSet.main.flowEdges(edges);

57
src/components/FormField/components/Checkboxes/index.js Normal file
View File

@@ -0,0 +1,57 @@
import React, { useState, useCallback } from 'react';
import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form';
import { Checkbox } from 'primereact/checkbox';
const Checkboxes = ({
fieldName,
label,
control,
errors,
defaultValue = [],
config = {},
infoText = null,
options = []
}) => {
const [fieldVal, setFieldVal] = useState(defaultValue);
const onCheckboxesChange = useCallback((e, updateFn) => {
let data = [...fieldVal];
if (e.checked) {
data.push(e.value);
} else {
data.splice(data.indexOf(e.value), 1);
}
setFieldVal(data);
updateFn(data);
}, [fieldVal]);
const input = <Controller
name={fieldName}
control={control}
defaultValue={fieldVal}
rules={config}
render={({ field, fieldState }) =>
options.map(o => <div className="appForm__fieldItem" key={o.name}>
<Checkbox
inputId={`${fieldName}_${o.name}`}
name={fieldName}
value={o.name}
onChange={(e) => onCheckboxesChange(e, field.onChange)}
checked={field.value.includes(o.name)}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
<label htmlFor={`${fieldName}_${o.name}`}>{o.label}</label>
</div>)}/>
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required || config.isRequired ? '*' : null}
</label>
{input}
{infoText ? <small>{infoText}</small> : null}
</>)
}
export default Checkboxes;

2
src/components/FormField/components/Datepicker/index.js
View File

@@ -18,7 +18,7 @@ const Datepicker = ({
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
{label}{config.required || config.isRequired ? '*' : null}
</label>
<Controller
name={fieldName}

9
src/components/FormField/components/NumberInput/index.js
View File

@@ -15,8 +15,8 @@ const NumberInput = ({
inputgroup = false,
icon = null,
locale = 'it-IT',
minFractionDigits = 2,
step = 1,
minFractionDigits = 0,
maxFractionDigits = 1,
min,
max
}) => {
@@ -31,13 +31,14 @@ const NumberInput = ({
onValueChange={(e) => field.onChange(e.value)}
min={min}
max={max}
locale={locale} minFractionDigits={minFractionDigits} step={step}
locale={locale}
minFractionDigits={minFractionDigits}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
{label}{config.required || config.isRequired ? '*' : null}
</label>
{inputgroup
? <div className="p-inputgroup flex-1">

39
src/components/FormField/components/Radio/index.js
View File

@@ -4,34 +4,35 @@ import { Controller } from 'react-hook-form';
import { RadioButton } from 'primereact/radiobutton';
const Radio = ({
fieldName,
label,
control,
errors,
defaultValue,
config = {},
infoText = null,
options = []
}) => {
fieldName,
label,
control,
errors,
defaultValue,
config = {},
infoText = null,
options = []
}) => {
const input = <Controller
name={fieldName}
control={control}
defaultValue={defaultValue}
rules={config}
render={({ field, fieldState }) =>
options.map(o => <div className="appForm__fieldItem" key={o.name}>
<RadioButton
id={`${fieldName}_${o.name}`}
name={fieldName}
value={o.name}
onChange={(e) => field.onChange(e.value)}
checked={field.value === o.name}/>
<label htmlFor={`${fieldName}_${o.name}`}>{o.label}</label>
</div>)}/>
options.map(o => <div className="appForm__fieldItem" key={o.name}>
<RadioButton
inputId={`${fieldName}_${o.name}`}
name={fieldName}
value={o.name}
onChange={(e) => field.onChange(e.value)}
checked={field.value === o.name}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
<label htmlFor={`${fieldName}_${o.name}`}>{o.label}</label>
</div>)}/>
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
{label}{config.required || config.isRequired ? '*' : null}
</label>
{input}
{infoText ? <small>{infoText}</small> : null}

3
src/components/FormField/components/Select/index.js
View File

@@ -27,13 +27,14 @@ const Select = ({
onChange={(e) => field.onChange(e.value)}
options={options}
optionLabel="label"
optionValue="name"
placeholder={placeholder}
className={classNames({ 'p-invalid': fieldState.invalid })}/>
)}/>
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
{label}{config.required || config.isRequired ? '*' : null}
</label>
{inputgroup
? <div className="p-inputgroup flex-1">

2
src/components/FormField/components/Switch/index.js
View File

@@ -34,7 +34,7 @@ const Switch = ({
<>
<div className="appForm__row">
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] }, 'mr-8')}>
{label}{config.required ? '*' : null}
{label}{config.required || config.isRequired ? '*' : null}
</label>
<div className="appForm__row">
{offLabel ? <span>{offLabel}</span> : null}

2
src/components/FormField/components/TextArea/index.js
View File

@@ -16,7 +16,7 @@ const TextArea = ({
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
{label}{config.required || config.isRequired ? '*' : null}
</label>
<Controller
name={fieldName}

2
src/components/FormField/components/TextInput/index.js
View File

@@ -31,7 +31,7 @@ const TextInput = ({
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required ? '*' : null}
{label}{config.required || config.isRequired ? '*' : null}
</label>
{inputgroup
? <div className="p-inputgroup flex-1">

54
src/components/FormField/components/Wysiwyg/index.js Normal file
View File

@@ -0,0 +1,54 @@
import React from 'react';
import { classNames } from 'primereact/utils';
import { Controller } from 'react-hook-form';
import { Editor } from 'primereact/editor';
const Wysiwyg = ({
fieldName,
label,
control,
rows = 3,
errors,
defaultValue,
config = {},
infoText = null
}) => {
const renderHeader = () => {
return (
<span className="ql-formats">
<button className="ql-bold" aria-label="Bold"></button>
<button className="ql-italic" aria-label="Italic"></button>
<button className="ql-underline" aria-label="Underline"></button>
<button className="ql-link" aria-label="Link"></button>
</span>
);
};
const header = renderHeader();
return (
<>
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
{label}{config.required || config.isRequired ? '*' : null}
</label>
<Controller
name={fieldName}
control={control}
defaultValue={defaultValue}
rules={config}
render={({ field, fieldState }) => (
<Editor
id={field.name}
{...field}
headerTemplate={header}
onTextChange={(e) => field.onChange(e.htmlValue)}
style={{ height: 80 * rows }}
className={classNames({ 'p-invalid': fieldState.invalid })}
/>
)}/>
{infoText ? <small>{infoText}</small> : null}
</>)
}
export default Wysiwyg;

6
src/components/FormField/index.js
View File

@@ -12,6 +12,8 @@ import NumberInput from './components/NumberInput';
import Switch from './components/Switch';
import Select from './components/Select';
import Radio from './components/Radio';
import Wysiwyg from './components/Wysiwyg';
import Checkboxes from './components/Checkboxes';
const FormField = (props) => {
const fields = {
@@ -23,7 +25,9 @@ const FormField = (props) => {
numberinput: NumberInput,
switch: Switch,
select: Select,
radio: Radio
radio: Radio,
wysiwyg: Wysiwyg,
checkboxes: Checkboxes
}
const Comp = !isNil(fields[props.type]) ? fields[props.type] : null;

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

@@ -3,6 +3,7 @@ import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { head, isEmpty, isNil, pluck } from 'ramda';
import { diff } from 'deep-object-diff';
import { klona } from 'klona';
// components
import { InputText } from 'primereact/inputtext';
@@ -97,8 +98,10 @@ const FormFieldRepeater = ({
const storeFieldData = data ?? [];
setStateFieldData(storeFieldData);
setStateOptionsData(prevState => {
const ids = pluck('id', storeFieldData)
const objectsToAdd = storeFieldData.filter(o => ids.includes(o.id));
const ids = pluck('lookUpDataId', prevState)
const objectsToAdd = klona(storeFieldData)
.filter(o => !ids.includes(o.lookUpDataId))
.map(o => ({...o, id: null}));
return [...prevState, ...objectsToAdd];
});
}
@@ -120,7 +123,7 @@ const FormFieldRepeater = ({
{stateFieldData.map((o, i) => <div key={i} className={classNames('appForm__repeaterItem')}>
<div className="p-inputgroup flex-1">
{properField(o, i)}
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
<Button type="button" icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
</div>
{isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
</div>)}

22
src/components/FormFieldRepeaterCriteria/index.js
View File

@@ -1,7 +1,7 @@
import React, { useRef, useEffect, useState, useCallback } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { head, isNil, pluck } from 'ramda';
import { head, isEmpty, isNil, pluck } from 'ramda';
// components
import { InputText } from 'primereact/inputtext';
@@ -9,6 +9,8 @@ import { Button } from 'primereact/button';
import { Menu } from 'primereact/menu';
import { Dropdown } from 'primereact/dropdown';
import { InputNumber } from 'primereact/inputnumber';
import { diff } from 'deep-object-diff';
import { klona } from 'klona';
const FormFieldRepeaterCriteria = ({
data,
@@ -99,6 +101,22 @@ const FormFieldRepeaterCriteria = ({
})
}, []);
useEffect(() => {
const diffData = diff(data[fieldName], stateFieldData);
if (!isEmpty(diffData)) {
const storeFieldData = data[fieldName] ?? [];
setStateFieldData(storeFieldData);
setStateOptionsData(prevState => {
const ids = pluck('lookUpDataId', prevState)
const objectsToAdd = klona(storeFieldData)
.filter(o => !ids.includes(o.lookUpDataId))
.map(o => ({...o, id: null, score: 0}));
return [...prevState, ...objectsToAdd];
});
}
}, [data]);
useEffect(() => {
setStateOptionsData([...options]);
}, [options]);
@@ -126,7 +144,7 @@ const FormFieldRepeaterCriteria = ({
<label>{__('Nome criterio di valutazione', 'gepafin')}</label>
<div className="p-inputgroup flex-1">
{properField(o, i)}
<Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
<Button type="button" icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
</div>
{isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
</div>

2
src/layouts/DefaultLayout/components/AppSidebar/index.js
View File

@@ -30,7 +30,7 @@ const AppSidebar = () => {
{
label: __('Domande in lavorazione', 'gepafin'),
icon: 'pi pi-file',
href: '/bids',
href: '/applications',
id: 11,
enable: intersection(permissions, ['APPLY_CALLS']).length
},

14
src/pages/Bids/index.js → src/pages/Applications/index.js
View File

@@ -3,12 +3,16 @@ import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
// components
import MyLatestSubmissionsTable from '../DashboardBenefeciario/components/MyLatestSubmissionsTable';
import MyLatestSubmissionsTable from '../DashboardBeneficiario/components/MyLatestSubmissionsTable';
import { Button } from 'primereact/button';
const Bandi = () => {
const Applications = () => {
const navigate = useNavigate();
const gotToBandiDisponibili = () => {
navigate('')
}
return(
<div className="appPage">
<div className="appPage__pageHeader">
@@ -29,6 +33,10 @@ const Bandi = () => {
<div className="appPageSection">
<div className="appPageSection__actions">
<Button
disabled={true}
onClick={gotToBandiDisponibili}
label={__('Bandi disponibili', 'gepafin')} icon="pi pi-bookmark" iconPos="right"/>
<Button
disabled={true}
outlined
@@ -41,4 +49,4 @@ const Bandi = () => {
)
}
export default Bandi;
export default Applications;

2
src/pages/Bandi/components/AllBandiTable/index.js
View File

@@ -146,7 +146,7 @@ const AllBandiTable = () => {
style={{ minWidth: '10rem' }}
body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
<Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter
style={{ width: '120px' }} body={statusBodyTemplate} filter
filterElement={statusFilterTemplate}/>
<Column header={__('Azioni', 'gepafin')}
body={actionsBodyTemplate}/>

155
src/pages/BandoApplication/index.js Normal file
View File

@@ -0,0 +1,155 @@
import React, { useState, useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { klona } from 'klona';
import { head, is, isNil } from 'ramda';
import { useForm } from 'react-hook-form';
// store
import { storeSet, useStore } from '../../store';
// api
import FormsService from '../../service/forms-service';
// components
import { Skeleton } from 'primereact/skeleton';
import { Button } from 'primereact/button';
import FormField from '../../components/FormField';
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import { formData as testformData } from '../../tempData';
import BandoService from '../../service/bando-service';
const BandoApplication = () => {
const { id } = useParams();
const navigate = useNavigate();
const [formData, setFormData] = useState([]);
const [formName, setFormName] = useState('');
const isAsyncRequest = useStore().main.isAsyncRequest();
const {
control,
handleSubmit,
formState: { errors },
getValues,
} = useForm({ defaultValues: {}, mode: 'onChange' });
const values = getValues();
const onSubmit = (formData) => {
const newFormData = Object.keys(formData).reduce((acc, cur) => {
acc.push({
'fieldId': cur,
'fieldValue': formData[cur] && formData[cur].getMonth ? formData[cur].toISOString() : formData[cur]
});
return acc;
}, []);
console.log('newFormData', newFormData)
};
const getBandoId = () => {
const parsed = parseInt(id)
return !isNaN(parsed) ? parsed : 0;
}
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
/*const forms = data.data;
setFormName(forms[0].label);
const elements = klona(forms[0].content);
setFormData(elements);*/
//console.log('testformData.content', testformData.content);
setFormName(testformData.label);
setFormData(testformData.content);
}
storeSet.main.unsetAsyncRequest();
}
const errGetCallbacks = (data) => {
set404FromErrorResponse(data);
storeSet.main.unsetAsyncRequest();
}
useEffect(() => {
const bandoId = getBandoId();
if (bandoId) {
storeSet.main.setAsyncRequest();
FormsService.getFormsForCall(bandoId, getCallback, errGetCallbacks);
}
}, [id]);
return (
<div className="appPage">
{!isAsyncRequest
? <div className="appPage__pageHeader">
<h1>{formName}</h1>
</div>
: <>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
</>}
<div className="appPage__spacer"></div>
{!isAsyncRequest
? <div className="appPage__content">
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
{formData.map(o => {
const label = head(o.settings.filter(o => o.name === 'label'));
const placeholder = head(o.settings.filter(o => o.name === 'placeholder'));
const options = head(o.settings.filter(o => o.name === 'options'));
const step = head(o.settings.filter(o => o.name === 'step'));
const mime = head(o.settings.filter(o => o.name === 'mime').join(','));
return <FormField
key={o.id}
type={o.name}
fieldName={o.id}
label={label ? label.value : ''}
placeholder={placeholder ? placeholder.value : ''}
control={control}
errors={errors}
defaultValue={values[o.id]}
maxFractionDigits={step}
accept={mime}
config={o.validators}
options={options ? options.value : []}
/>
})}
<div className="appPage__spacer"></div>
<div className="appPageSection__hr">
<span>{__('Azioni rapide', 'gepafin')}</span>
</div>
<div className="appPageSection">
<div className="appPageSection__actions">
<Button
outlined
label={__('Salva bozza', 'gepafin')} icon="pi pi-save" iconPos="right"/>
<Button
type="button"
disabled={true}
onClick={() => {
}}
label={__('Vai avanti', 'gepafin')} icon="pi pi-arrow-right" iconPos="right"/>
</div>
</div>
</form>
</div>
: <>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="4rem"></Skeleton>
</>}
</div>
)
}
export default BandoApplication;

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

@@ -66,8 +66,9 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, getFormErrors },
summary: '',
detail: __('Il bando è stato aggiornato corretamente!', 'gepafin')
});
setFormInitialData(data.data);
reset();
const newFormData = {...formInitialData, ...data.data};
setFormInitialData(newFormData);
reset(newFormData);
}
}

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

@@ -21,6 +21,7 @@ import BandoEditFormStep2 from './components/BandoEditFormStep2';
import { Messages } from 'primereact/messages';
import FormsService from '../../service/forms-service';
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import BlockingOverlay from '../../components/BlockingOverlay';
const BandoEdit = () => {
const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -280,7 +281,7 @@ const BandoEdit = () => {
model={stepItems}
activeIndex={activeStep}
readOnly={false}/>
: null}
: <BlockingOverlay shouldDisplay={isAsyncRequest}/>}
<div className="appPage__spacer"></div>

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

@@ -1,7 +1,7 @@
import React, { useEffect, useState, useCallback, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { isEmpty } from 'ramda';
import { isEmpty, head } from 'ramda';
// store
import { storeSet, useStore } from '../../store';
@@ -17,6 +17,8 @@ import { Button } from 'primereact/button';
import { Dropdown } from 'primereact/dropdown';
import FlowBuilder from '../../components/FlowBuilder';
import { Messages } from 'primereact/messages';
import FlowService from '../../service/flow-service';
import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup';
const BandoFlowEdit = () => {
const { id } = useParams();
@@ -39,17 +41,76 @@ const BandoFlowEdit = () => {
navigate(`/tenders/${bandoId}/forms`);
}
const confirmDelete = (event) => {
confirmPopup({
target: event.currentTarget,
message: __('Sei sicuro di reset questo flow?', 'gepafin'),
acceptLabel: __('Si', 'gepafin'),
icon: 'pi pi-info-circle',
defaultFocus: 'reject',
acceptClassName: 'p-button-danger',
accept: doDelete,
reject: () => {}
});
};
const doDelete = () => {
storeSet.main.flowData([]);
storeSet.main.flowEdges([]);
setInitialForm(0);
setFinalForm(0);
}
const updateInitialForm = (value) => {
setInitialForm(value);
if (forms.length === 2) {
const finalForm = head(forms.filter(o => o.id !== value));
if (finalForm) {
setFinalForm(finalForm.id);
}
}
}
const shoudDisableSaving = useCallback(() => {
return isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm);
return forms.length > 2
? isEmpty(flowData) || isEmpty(flowEdges) || isEmpty(initialForm) || isEmpty(finalForm)
: isEmpty(flowEdges) || isEmpty(initialForm);
}, [flowData, flowEdges]);
const doSave = () => {
console.log('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);
}
const getFlowCreateCallback = (data) => {
if (data.status === 'SUCCESS') {
if (flowMsgs.current) {
flowMsgs.current.show([
{
id: '99',
sticky: true, severity: 'success', summary: '',
detail: __('Flow è salvato.', 'gepafin'),
closable: false
}
]);
}
}
storeSet.main.unsetAsyncRequest();
}
const errGetFlowCreateCallback = (data) => {
set404FromErrorResponse(data);
storeSet.main.unsetAsyncRequest();
}
const getFormsCallback = (data) => {
@@ -66,10 +127,27 @@ const BandoFlowEdit = () => {
storeSet.main.unsetAsyncRequest();
}
const getFlowCallback = (data) => {
if (data.status === 'SUCCESS' && data.data) {
storeSet.main.flowData(data.data.flowData);
storeSet.main.flowEdges(data.data.flowEdges);
setInitialForm(data.data.initialForm);
setFinalForm(data.data.finalForm);
}
storeSet.main.unsetAsyncRequest();
}
const errGetFlowCallback = (data) => {
set404FromErrorResponse(data);
storeSet.main.unsetAsyncRequest();
}
useEffect(() => {
const bandoId = getBandoId();
storeSet.main.setAsyncRequest();
FormsService.getFormsForCall(bandoId, getFormsCallback, errGetFormsCallback);
FlowService.getFlow(bandoId, getFlowCallback, errGetFlowCallback)
}, [id]);
useEffect(() => {
@@ -112,7 +190,7 @@ const BandoFlowEdit = () => {
<Dropdown
id="initialForm"
value={initialForm}
onChange={(e) => setInitialForm(e.value)}
onChange={(e) => updateInitialForm(e.value)}
optionDisabled={(opt) => finalForm === opt.value}
options={formOptions}
optionLabel="label"
@@ -157,6 +235,13 @@ const BandoFlowEdit = () => {
disabled={shoudDisableSaving()}
label={__('Salva', 'gepafin')} icon="pi pi-save" iconPos="right"/>
</div>
<div className="appPageSection__actions">
<ConfirmPopup/>
<Button
onClick={confirmDelete}
severity="warning"
label={__('Reset', 'gepafin')} icon="pi pi-refresh" iconPos="right"/>
</div>
</div>
</div>
)

28
src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
// components
import ElementSettingRepeater from '../ElementSettingRepeater';
import { InputText } from 'primereact/inputtext';
const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
const settingLabels = {
label: __('Label', 'gepafin'),
placeholder: __('Segnaposto', 'gepafin'),
step: __('Precisione decimale', 'gepafin'),
options: __('Opzioni', 'gepafin'),
mime: __('Tipo di file', 'gepafin'),
}
return <div className="formElementSettings__field" key={setting.name}>
<label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
{setting.name === 'options'
? <ElementSettingRepeater value={setting.value} name={setting.name} setDataFn={updateDataFn}/>
: <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
value={setting.value}
onChange={(e) => changeFn(e.target.value, setting.name)}/>}
</div>
}
export default ElementSetting;

16
src/pages/BandoFormsEdit/components/BuilderElementSettings/index.js
View File

@@ -12,7 +12,7 @@ import { Button } from 'primereact/button';
import { Tag } from 'primereact/tag';
import { TabView, TabPanel } from 'primereact/tabview';
import { InputSwitch } from 'primereact/inputswitch';
import ElementSettingRepeater from './components/ElementSettingRepeater';
import ElementSetting from './components/ElementSetting';
const BuilderElementSettings = ({ closeSettings }) => {
const elements = useStore().main.formElements();
@@ -97,15 +97,11 @@ const BuilderElementSettings = ({ closeSettings }) => {
<TabView className="formElementSettings__tabs">
<TabPanel header={__('Presentation', 'gepafin')}>
{settings
? settings.map((o) => <div className="formElementSettings__field" key={o.name}>
<label htmlFor={o.name}>{o.name}</label>
{o.name === 'options'
?
<ElementSettingRepeater value={o.value} name={o.name} setDataFn={onUpdateOptions}/>
: <InputText id={o.name} aria-describedby={`${o.name}-help`}
value={o.value}
onChange={(e) => onChange(e.target.value, o.name)}/>}
</div>)
? settings.map((o) => <ElementSetting
key={o.name}
setting={o}
changeFn={onChange}
updateDataFn={onUpdateOptions}/>)
: null}
</TabPanel>
<TabPanel header={__('Validation', 'gepafin')}>

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

@@ -11,11 +11,13 @@ import BuilderElementItem from '../BuilderElementItem';
import { Sidebar } from 'primereact/sidebar';
import BuilderElementSettings from '../BuilderElementSettings';
import BuilderDropzone from '../BuilderDropzone';
import BlockingOverlay from '../../../../components/BlockingOverlay';
const FormBuilder = () => {
const elements = useStore().main.formElements();
const elementItems = useStore().main.elementItems();
const activeElement = useStore().main.activeElement();
const isAsyncRequest = useStore().main.isAsyncRequest();
const renderField = useCallback((field, index) => {
return (
@@ -65,6 +67,7 @@ const FormBuilder = () => {
{elementItems.map((item) => renderItem(item))}
</ul>
</div>
<BlockingOverlay shouldDisplay={isAsyncRequest}/>
</div>
</>
)

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

@@ -113,7 +113,7 @@ const BandoFormsEdit = () => {
const getElementItemsCallback = (data) => {
if (data.status === 'SUCCESS') {
storeSet.main.elementItems(elementItems);
storeSet.main.elementItems(elementItems.sort((a, b) => a.sortOrder - b.sortOrder));
//storeSet.main.elementItems(data.data);
}
storeSet.main.unsetAsyncRequest();
@@ -184,7 +184,7 @@ const BandoFormsEdit = () => {
<div className="appPageSection">
<DndProvider backend={HTML5Backend}>
{!isAsyncRequest ? <FormBuilder/> : null}
<FormBuilder/>
</DndProvider>
</div>
@@ -198,10 +198,12 @@ const BandoFormsEdit = () => {
label={__('Indietro', 'gepafin')} icon="pi pi-arrow-left" iconPos="left"/>
<Button
onClick={() => doSave()}
disabled={isAsyncRequest}
label={__('Salva progressi', 'gepafin')} icon="pi pi-save" iconPos="right"/>
<Button
outlined
onClick={openPreview}
disabled={isAsyncRequest}
label={__('Visualizza Anteprima Beneficiario', 'gepafin')} icon="pi pi-image" iconPos="right"/>
{/*<Button
disabled={true}
@@ -212,6 +214,7 @@ const BandoFormsEdit = () => {
<ConfirmPopup />
<Button
onClick={confirmDelete}
disabled={isAsyncRequest}
severity="danger"
label={__('Cancella', 'gepafin')} icon="pi pi-trash" iconPos="right"/>
</div>

26
src/pages/BandoView/index.js
View File

@@ -32,22 +32,6 @@ const BandoView = () => {
navigate(`/tenders/${id}`);
}
const scaricaBando = () => {
}
const scaricaModulistica = () => {
}
const submitQuestion = () => {
}
const saveToFavourites = () => {
}
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
setData(getFormattedBandiData(data.data));
@@ -196,7 +180,7 @@ const BandoView = () => {
<div className="appPageSection">
<h2>{__('FAQ', 'gepafin')}</h2>
<Accordion>
{data.faq.map((o, i) => <AccordionTab key={i} header={o.question}>
{data.faq.map((o, i) => <AccordionTab key={i} header={o.value}>
<p>
{o.response}
</p>
@@ -228,20 +212,20 @@ const BandoView = () => {
type="button"
disabled={true}
outlined
onClick={scaricaBando}
onClick={() => {}}
label={__('Scarica Bando Completo', 'gepafin')}
icon="pi pi-download" iconPos="right"/>
<Button
type="button"
disabled={true}
outlined
onClick={scaricaModulistica}
onClick={() => {}}
label={__('Scarica Modulistica', 'gepafin')}
icon="pi pi-download" iconPos="right"/>
<Button
type="button"
disabled={true}
onClick={submitQuestion}
onClick={() => {}}
label={__('Presenta Domanda', 'gepafin')}
icon="pi pi-save" iconPos="right"/>
<Button
@@ -249,7 +233,7 @@ const BandoView = () => {
outlined
rounded
disabled={true}
onClick={saveToFavourites}
onClick={() => {}}
label={__('Aggiungi a Preferiti', 'gepafin')}
icon="pi pi-heart" iconPos="left"/>
</div>

271
src/pages/BandoViewBeneficiario/index.js Normal file
View File

@@ -0,0 +1,271 @@
import React, { useState, useEffect, useRef } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';
import { is, isEmpty } from 'ramda';
// store
import { storeSet, useStore } from '../../store';
// tools
import getNumberWithCurrency from '../../helpers/getNumberWithCurrency';
import getDateFromISOstring from '../../helpers/getDateFromISOstring';
// components
import { Skeleton } from 'primereact/skeleton';
import { Accordion } from 'primereact/accordion';
import { AccordionTab } from 'primereact/accordion';
import { InputTextarea } from 'primereact/inputtextarea';
import { Button } from 'primereact/button';
import BandoService from '../../service/bando-service';
import { Messages } from 'primereact/messages';
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
const BandoViewBeneficiario = () => {
const isAsyncRequest = useStore().main.isAsyncRequest();
const { id } = useParams();
const navigate = useNavigate();
const [data, setData] = useState({});
const [newQuestion, setNewQuestion] = useState('');
const bandoMsgs = useRef(null);
const closePreview = () => {
navigate(`/tenders/${id}`);
}
const scaricaBando = () => {
}
const scaricaModulistica = () => {
}
const submitApplication = () => {
navigate(`/tenders/${id}/application`);
}
const saveToFavourites = () => {
}
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
setData(getFormattedBandiData(data.data));
}
storeSet.main.unsetAsyncRequest();
}
const errGetCallback = (data) => {
if (bandoMsgs.current && data.message) {
bandoMsgs.current.show([
{
sticky: true, severity: 'error', summary: '',
detail: data.message,
closable: true
}
]);
}
set404FromErrorResponse(data);
storeSet.main.unsetAsyncRequest();
}
const getFormattedBandiData = (data) => {
data.dates = data.dates.map(v => is(String, v) ? new Date(v) : (v ? v : ''));
return data;
};
useEffect(() => {
const parsed = parseInt(id)
const bandoId = !isNaN(parsed) ? parsed : 0;
BandoService.getBando(bandoId, getCallback, errGetCallback);
}, [id]);
return (
<div className="appPage">
{!isAsyncRequest && !isEmpty(data)
? <div className="appPage__pageHeader">
<h1>{data.name}</h1>
<p>
{__('Data:', 'gepafin')}
<span>{getDateFromISOstring(data.createdDate)}</span>
</p>
</div>
: <>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
</>}
<div className="appPage__spacer"></div>
<Messages ref={bandoMsgs}/>
{!isAsyncRequest && !isEmpty(data)
? <div className="appPage__content">
<picture className="appPageSection__hero">
<source srcSet={data.images[0] ? data.images[0].filePath : ''}/>
<img src={data.images[0] ? data.images[0].filePath : ''} alt={data.name}/>
</picture>
<div className="appPageSection__withBorder">
<h2>{__('Descrizione breve', 'gepafin')}</h2>
<div className="row rowContent">
<p>{data.descriptionShort}</p>
</div>
</div>
<div className="appPageSection__row">
<div className="appPageSection__withBorder">
<p className="appPageSection__pMeta">
<span>{__('Importo totale', 'gepafin')}</span>
<span>{getNumberWithCurrency(data.amount)}</span>
</p>
<p className="appPageSection__pMeta">
<span>{__('Importo massimo per progetto', 'gepafin')}</span>
<span>{getNumberWithCurrency(data.amountMax)}</span>
</p>
</div>
<div className="appPageSection__withBorder">
<p className="appPageSection__pMeta">
<span>{__('Data apertura', 'gepafin')}</span>
<span>{getDateFromISOstring(data.dates[0])}</span>
</p>
<p className="appPageSection__pMeta">
<span>{__('Data chiusura', 'gepafin')}</span>
<span>{getDateFromISOstring(data.dates[1])}</span>
</p>
</div>
</div>
<div className="appPageSection__withBorder">
<h2>{__('Descrizione dettagliata', 'gepafin')}</h2>
<div className="row rowContent">
<p>{data.descriptionLong}</p>
</div>
</div>
<div className="appPageSection__withBorder">
<h2>{__('Requisiti di Partecipazione', 'gepafin')}</h2>
<div className="row rowContent">
<ul>
{data.aimedTo.map((o, i) => <li key={i}>
{o.value}
</li>)}
</ul>
</div>
</div>
<div className="appPageSection__withBorder">
<h2>{__('Documentazione Richiesta', 'gepafin')}</h2>
<div className="row rowContent">
<p>{data.documentationRequested}</p>
</div>
</div>
<div className="appPageSection__withBorder">
<h2>{__('Criteri di Valutazione', 'gepafin')}</h2>
<div className="row rowContent">
<ul>
{data.criteria.map((o, i) => <li key={i}>
{`${o.value} ${sprintf(__('(%d punti)'), o.score)}`}
</li>)}
</ul>
</div>
</div>
<div className="appPageSection__withBorder">
<h2>{__('Allegati', 'gepafin')}</h2>
<div className="row rowContent">
<ul>
{data.docs.map((o, i) => <li key={i}>
<a href={o.filePath} target="_blank" rel="noreferrer">{o.name}</a>
</li>)}
</ul>
</div>
</div>
<div className="appPageSection">
<h2>{__('FAQ', 'gepafin')}</h2>
<Accordion>
{data.faq.map((o, i) => <AccordionTab key={i} header={o.value}>
<p>
{o.response}
</p>
</AccordionTab>)}
</Accordion>
</div>
<div className="appPageSection">
<h2>{__('Non hai trovato la risposta che cercavi?', 'gepafin')}</h2>
<div className="appForm__field">
<label htmlFor="newQuestion">{__('Fai una domanda', 'gepafin')}</label>
<InputTextarea
id="newQuestion"
rows={7}
value={newQuestion}
placeholder={__('Digita qui la tua domanda', 'gepafin')}
onChange={(e) => setNewQuestion(e.target.value)}
aria-describedby="newQuestion-help"/>
<small id="newQuestion-help">
{__('Riceverai una notifica quando ti risponderemo', 'gepafin')}
</small>
</div>
</div>
<div className="appPageSection">
<h2>{__('Download Documenti', 'gepafin')}</h2>
<div className="appPageSection__actions">
<Button
type="button"
disabled={true}
outlined
onClick={scaricaBando}
label={__('Scarica Bando Completo', 'gepafin')}
icon="pi pi-download" iconPos="right"/>
<Button
type="button"
disabled={true}
outlined
onClick={scaricaModulistica}
label={__('Scarica Modulistica', 'gepafin')}
icon="pi pi-download" iconPos="right"/>
<Button
type="button"
onClick={submitApplication}
label={__('Presenta Domanda', 'gepafin')}
icon="pi pi-save" iconPos="right"/>
<Button
type="button"
outlined
rounded
disabled={true}
onClick={saveToFavourites}
label={__('Aggiungi a Preferiti', 'gepafin')}
icon="pi pi-heart" iconPos="left"/>
</div>
</div>
<div className="appPageSection__withBorder">
<h2>{__('Contatti per Assistenza', 'gepafin')}</h2>
<div className="row rowContent">
<p>Email: bandi@gepafin.it</p>
<p>Telefono: +39 075 123 4567</p>
</div>
</div>
</div>
: <>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
<Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
<Skeleton width="100%" height="4rem"></Skeleton>
</>}
</div>
)
}
export default BandoViewBeneficiario;

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

@@ -25,6 +25,7 @@ import { Button } from 'primereact/button';
import { Calendar } from 'primereact/calendar';
import { Tag } from 'primereact/tag';
import ProperBandoLabel from '../../../../components/ProperBandoLabel';
import { Link } from 'react-router-dom';
const LatestBandiTable = () => {
@@ -73,7 +74,8 @@ const LatestBandiTable = () => {
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
setItems(getFormattedBandiData(data.data));
const newItems = data.data.filter(o => o.status === 'PUBLISH');
setItems(getFormattedBandiData(newItems));
setStatuses(uniq(data.data.map(o => o.status)))
initFilters();
}
@@ -87,8 +89,8 @@ const LatestBandiTable = () => {
const getFormattedBandiData = (data) => {
return [...(data || [])].map((d) => {
d.start_date = new Date(d.start_date);
d.end_date = new Date(d.end_date);
d.start_date = new Date(d.dates[0]);
d.end_date = new Date(d.dates[1]);
return d;
});
@@ -122,8 +124,7 @@ const LatestBandiTable = () => {
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
submissions: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
});
setGlobalFilterValue('');
};
@@ -168,6 +169,12 @@ const LatestBandiTable = () => {
return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
};
const actionsBodyTemplate = (rowData) => {
return <Link to={`/tenders/${rowData.id}`}>
<Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small" iconPos="right" />
</Link>
}
const header = renderHeader();
return(
@@ -185,12 +192,10 @@ const LatestBandiTable = () => {
<Column header={__('Data Scadenza', 'gepafin')} filterField="end_date" dataType="date"
style={{ minWidth: '10rem' }}
body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
<Column header={__('Domande ricevute', 'gepafin')} filterField="submissions" dataType="numeric"
style={{ minWidth: '10rem' }} field="submissions"
filter filterElement={balanceFilterTemplate}/>
<Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter
filterElement={statusFilterTemplate}/>
<Column field="status" header={__('Stato', 'gepafin')}
style={{ width: '120px' }} body={statusBodyTemplate} />
<Column header={__('Azioni', 'gepafin')}
body={actionsBodyTemplate}/>
</DataTable>
</div>
)

172
src/pages/DashboardBeneficiario/components/LatestBandiTable/index.js Normal file
View File

@@ -0,0 +1,172 @@
import React, { useState, useEffect} from 'react';
import { __ } from '@wordpress/i18n';
import { uniq } from 'ramda';
// tools
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';
import { Column } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { IconField } from 'primereact/iconfield';
import { InputIcon } from 'primereact/inputicon';
import { Dropdown } from 'primereact/dropdown';
import { InputNumber } from 'primereact/inputnumber';
import { Button } from 'primereact/button';
import { Calendar } from 'primereact/calendar';
import { Tag } from 'primereact/tag';
import ProperBandoLabel from '../../../../components/ProperBandoLabel';
import { Link } from 'react-router-dom';
const LatestBandiTable = () => {
const [items, setItems] = useState(null);
const [filters, setFilters] = useState(null);
const [loading, setLoading] = useState(false);
const [globalFilterValue, setGlobalFilterValue] = useState('');
const [statuses, setStatuses] = useState([]);
useEffect(() => {
storeSet.main.setAsyncRequest();
BandoService.getBandi(getCallback, errGetCallbacks);
}, []);
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
const newItems = data.data.filter(o => o.status === 'PUBLISH');
setItems(getFormattedBandiData(newItems));
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.dates[0]);
d.end_date = new Date(d.dates[1]);
return d;
});
};
const formatDate = (value) => {
return value.toLocaleDateString('it-IT', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
};
const clearFilter = () => {
initFilters();
};
const onGlobalFilterChange = (e) => {
const value = e.target.value;
let _filters = { ...filters };
_filters['global'].value = value;
setFilters(_filters);
setGlobalFilterValue(value);
};
const initFilters = () => {
setFilters({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
});
setGlobalFilterValue('');
};
const renderHeader = () => {
return (
<div className="appTableHeader">
<Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
<IconField iconPosition="left">
<InputIcon className="pi pi-search" />
<InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder={__('Cerca', 'gepafin')} />
</IconField>
</div>
);
};
const dateStartBodyTemplate = (rowData) => {
return formatDate(rowData.start_date);
};
const dateEndBodyTemplate = (rowData) => {
return formatDate(rowData.end_date);
};
const dateFilterTemplate = (options) => {
return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
};
const balanceFilterTemplate = (options) => {
return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} />;
};
const statusBodyTemplate = (rowData) => {
return <ProperBandoLabel status={rowData.status}/>;
};
const statusFilterTemplate = (options) => {
return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
};
const statusItemTemplate = (option) => {
return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
};
const actionsBodyTemplate = (rowData) => {
return <Link to={`/tenders/${rowData.id}/preview`}>
<Button severity="info" label={__('Partecipa', 'gepafin')} icon="pi pi-arrow-right" size="small" iconPos="right" />
</Link>
}
const header = renderHeader();
return(
<div className="appPageSection__table">
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
filters={filters}
globalFilterFields={['name', 'status']}
header={header}
emptyMessage="Nothing found." onFilter={(e) => setFilters(e.filters)}>
<Column field="name" header={__('Nome Bando', 'gepafin')} filter filterPlaceholder="Search by name"
style={{ minWidth: '12rem' }}/>
<Column header={__('Data Pubblicazione', 'gepafin')} filterField="start_date" dataType="date"
style={{ minWidth: '10rem' }}
body={dateStartBodyTemplate} filter filterElement={dateFilterTemplate}/>
<Column header={__('Data Scadenza', 'gepafin')} filterField="end_date" dataType="date"
style={{ minWidth: '10rem' }}
body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
<Column field="status" header={__('Stato', 'gepafin')}
style={{ width: '120px' }} body={statusBodyTemplate} />
<Column header={__('Azioni', 'gepafin')}
body={actionsBodyTemplate}/>
</DataTable>
</div>
)
}
export default LatestBandiTable;

10
src/pages/DashboardBenefeciario/components/MyLatestSubmissionsTable/index.js → src/pages/DashboardBeneficiario/components/MyLatestSubmissionsTable/index.js
View File

@@ -38,7 +38,8 @@ const MyLatestSubmissionsTable = () => {
modify_date: '2024-08-30T00:00:00+00:00',
progress: 50,
status: 'DRAFT',
id: 11
id: 11,
callId: 11
},
{
name: 'Bando Sostenibilità 2024',
@@ -46,7 +47,8 @@ const MyLatestSubmissionsTable = () => {
modify_date: '2024-08-15T00:00:00+00:00',
progress: 25,
status: 'DRAFT',
id: 9
id: 9,
callId: 12
}
]
setItems(getFormattedBandiData(items));
@@ -138,7 +140,7 @@ const MyLatestSubmissionsTable = () => {
};
const actionsBodyTemplate = (rowData) => {
return <Link to={`/bids/${rowData.id}`}>
return <Link to={`/tenders/${rowData.callId}/application`}>
<Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small" iconPos="right" />
</Link>
}
@@ -161,7 +163,7 @@ const MyLatestSubmissionsTable = () => {
style={{ minWidth: '10rem' }}
body={dateModifyBodyTemplate} filter filterElement={dateFilterTemplate}/>
<Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter
style={{ width: '120px' }} body={statusBodyTemplate} filter
filterElement={statusFilterTemplate}/>
<Column header={__('Progressi', 'gepafin')}
style={{ minWidth: '10rem' }} field="progress"

8
src/pages/DashboardBenefeciario/index.js → src/pages/DashboardBeneficiario/index.js
View File

@@ -3,15 +3,15 @@ import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
// components
import LatestBandiTable from '../Dashboard/components/LatestBandiTable';
import LatestBandiTable from './components/LatestBandiTable';
import MyLatestSubmissionsTable from './components/MyLatestSubmissionsTable';
import { Button } from 'primereact/button';
const DashboardBenefeciario = () => {
const DashboardBeneficiario = () => {
const navigate = useNavigate();
const goToAllSubmissions = () => {
navigate('/bids/new');
navigate('/bids');
}
return(
@@ -83,4 +83,4 @@ const DashboardBenefeciario = () => {
)
}
export default DashboardBenefeciario;
export default DashboardBeneficiario;

16
src/routes.js
View File

@@ -5,7 +5,8 @@ import PageNotFound from './pages/PageNotFound';
import Login from './pages/Login';
import ProtectedRoute from './components/ProtectedRoute';
import Dashboard from './pages/Dashboard';
import DashboardBenefeciario from './pages/DashboardBenefeciario';
import DashboardBeneficiario from './pages/DashboardBeneficiario';
import BandoViewBeneficiario from './pages/BandoViewBeneficiario';
import DefaultLayout from './layouts/DefaultLayout';
import Bandi from './pages/Bandi';
import BandoEdit from './pages/BandoEdit';
@@ -14,7 +15,8 @@ import BandoFormsEdit from './pages/BandoFormsEdit';
import BandoForms from './pages/BandoForms';
import BandoFormsPreview from './pages/BandoFormsPreview';
import BandoFlowEdit from './pages/BandoFlowEdit';
import Bids from './pages/Bids';
import Applications from './pages/Applications';
import BandoApplication from './pages/BandoApplication';
const routes = ({ role }) => {
return (
@@ -22,7 +24,7 @@ const routes = ({ role }) => {
<Route element={<ProtectedRoute/>}>
<Route path="/" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <Dashboard/> : null}
{'ROLE_BENEFICIARY' === role ? <DashboardBenefeciario/> : null}
{'ROLE_BENEFICIARY' === role ? <DashboardBeneficiario/> : null}
</DefaultLayout>}/>
<Route path="/tenders" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <Bandi/> : null}
@@ -32,6 +34,7 @@ const routes = ({ role }) => {
</DefaultLayout>}/>
<Route path="/tenders/:id/preview" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <BandoView/> : null}
{'ROLE_BENEFICIARY' === role ? <BandoViewBeneficiario/> : null}
</DefaultLayout>}/>
<Route path="/tenders/:id/preview-evaluation" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <BandoView/> : null}
@@ -48,8 +51,11 @@ const routes = ({ role }) => {
<Route path="/tenders/:id/flow" element={<DefaultLayout>
{'ROLE_SUPER_ADMIN' === role ? <BandoFlowEdit/> : null}
</DefaultLayout>}/>
<Route path="/bids" element={<DefaultLayout>
{'ROLE_BENEFICIARY' === role ? <Bids/> : null}
<Route path="/tenders/:id/application/" element={<DefaultLayout>
{'ROLE_BENEFICIARY' === role ? <BandoApplication/> : null}
</DefaultLayout>}/>
<Route path="/applications" element={<DefaultLayout>
{'ROLE_BENEFICIARY' === role ? <Applications/> : null}
</DefaultLayout>}/>
</Route>
<Route exact path="/login" element={<Login/>}/>

14
src/service/flow-service.js Normal file
View File

@@ -0,0 +1,14 @@
import { NetworkService } from './network-service';
const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
export default class FlowService {
static getFlow = (id, callback, errCallback) => {
NetworkService.get(`${API_BASE_URL}/flow/call/${id}`, callback, errCallback);
};
static createFlow = (id, body, callback, errCallback) => {
NetworkService.put(`${API_BASE_URL}/flow/call/${id}`, body, callback, errCallback);
};
}

413
src/tempData.js
View File

@@ -95,22 +95,22 @@ export const formData = {
label: 'La forma per Innovazione digitale 2024',
content: [
{
"id": "aec5ee1885",
"id": "a9a8aeb479",
"name": "textinput",
"label": "Text Input",
"label": "Testo Breve",
"settings": [
{
"name": "label",
"value": "Text input"
"value": "Testo Breve"
},
{
"name": "placeholder",
"value": "Placeholder text"
"value": ""
}
],
"validators": {
"isRequired": false,
"minLength": null,
"isRequired": true,
"minLength": "3",
"maxLength": null,
"pattern": null,
"custom": null
@@ -118,17 +118,17 @@ export const formData = {
"dbId": 1
},
{
"id": "a730f1f4d0",
"id": "a20469fc97",
"name": "textarea",
"label": "Text Area",
"label": "Testo Lungo",
"settings": [
{
"name": "label",
"value": "Text area"
"value": "Testo Lungo"
},
{
"name": "placeholder",
"value": "Placeholder text"
"value": ""
}
],
"validators": {
@@ -141,69 +141,46 @@ export const formData = {
"dbId": 2
},
{
"id": "aa8746a7c3",
"name": "textinput",
"label": "P.IVA",
"id": "a21dc560f6",
"name": "wysiwyg",
"label": "Campo di Testo Formattato",
"settings": [
{
"name": "label",
"value": "P.IVA"
},
{
"name": "placeholder",
"value": "Insert p.iva number"
}
],
"validators": {
"isRequired": true,
"minLength": null,
"maxLength": null,
"pattern": null,
"custom": "isValidVAT"
},
"dbId": 4
},
{
"id": "ae3dde17cd",
"name": "radio",
"label": "Radio Input",
"settings": [
{
"name": "label",
"value": "Radio input"
},
{
"name": "options",
"value": [
{
"name": "opt1",
"label": "Opt1"
}
]
}
],
"validators": {
"isRequired": false,
"min": null,
"max": null,
"custom": null
},
"dbId": 5
},
{
"id": "abf838016f",
"name": "textinput",
"label": "Number Input",
"settings": [
{
"name": "label",
"value": "Number"
"value": "Testo Formattato"
},
{
"name": "placeholder",
"value": ""
}
],
"validators": {
"isRequired": false,
"minLength": null,
"maxLength": null,
"pattern": null,
"custom": null
},
"dbId": 3
},
{
"id": "a5c3860c1a",
"name": "numberinput",
"label": "Campo Numerico",
"settings": [
{
"name": "label",
"value": "Numero"
},
{
"name": "placeholder",
"value": 0
},
{
"name": "step",
"value": 0
}
],
"validators": {
"isRequired": false,
"min": null,
@@ -211,7 +188,146 @@ export const formData = {
"pattern": null,
"custom": null
},
"dbId": 3
"dbId": 4
},
{
"id": "a7252ecc8d",
"name": "radio",
"label": "Scelta Singola",
"settings": [
{
"name": "label",
"value": "Scelta Singola"
},
{
"name": "options",
"value": [
{
"name": "o8df4ffa62",
"label": "Radio opzione A"
},
{
"name": "o3ed6fb4d8",
"label": "Radio opzione B"
}
]
}
],
"validators": {
"isRequired": true,
"custom": null
},
"dbId": 5
},
{
"id": "a778783c9d",
"name": "select",
"label": "Menu a Tendina",
"settings": [
{
"name": "label",
"value": "Menu a Tendina"
},
{
"name": "options",
"value": [
{
"name": "od9f50d8a8",
"label": "Opzione A"
},
{
"name": "o8cb208732",
"label": "Opzione B"
}
]
}
],
"validators": {
"isRequired": false,
"custom": null
},
"dbId": 6
},
{
"id": "afee29df1a",
"name": "switch",
"label": "Casella di Spunta",
"settings": [
{
"name": "label",
"value": "Casella di Spunta"
}
],
"validators": {
"isRequired": false
},
"dbId": 8
},
{
"id": "a5fdbd77df",
"name": "checkboxes",
"label": "Scelta Multipla",
"settings": [
{
"name": "label",
"value": "Scelta Multipla"
},
{
"name": "options",
"value": [
{
"name": "o55ea20665",
"label": "Opz checkbox A"
},
{
"name": "oc10db3d79",
"label": "Opz checkbox B"
}
]
}
],
"validators": {
"isRequired": true,
"custom": null
},
"dbId": 7
},
{
"id": "a2810fd8a1",
"name": "fileupload",
"label": "Caricamento File",
"settings": [
{
"name": "label",
"value": "Caricamento File"
},
{
"name": "mime",
"value": ['image/jpeg', 'image/png']
}
],
"validators": {
"isRequired": true,
"maxSize": 100000,
"custom": null
},
"dbId": 10
},
{
"id": "ae14c94da7",
"name": "datepicker",
"label": "Data",
"settings": [
{
"name": "label",
"value": "Data"
}
],
"validators": {
"isRequired": true,
"custom": null
},
"dbId": 9
}
]
};
@@ -219,16 +335,18 @@ export const formData = {
export const elementItems = [
{
id: 1,
sortOrder: 1,
name: 'textinput',
label: 'Text Input',
label: 'Testo Breve',
description: 'Per risposte concise (nomi, titoli, brevi descrizioni)',
settings: [
{
name: "label",
value: "Text input"
value: "Testo Breve"
},
{
name: "placeholder",
value: "Placeholder text"
value: ""
}
],
validators: {
@@ -241,16 +359,18 @@ export const elementItems = [
},
{
id: 2,
sortOrder: 2,
name: 'textarea',
label: 'Text Area',
label: 'Testo Lungo',
description: 'Campo di testo esteso per paragrafi, descrizioni, proposte',
settings: [
{
name: "label",
value: "Text area"
value: "Testo Lungo"
},
{
name: "placeholder",
value: "Placeholder text"
value: ""
}
],
validators: {
@@ -263,15 +383,44 @@ export const elementItems = [
},
{
id: 3,
name: 'numberinput',
label: 'Number Input',
sortOrder: 3,
name: 'wysiwyg',
label: 'Campo di Testo Formattato',
description: 'Editor avanzato per testo con formattazione',
settings: [
{
name: "label",
value: "Number"
value: "Testo Formattato"
},
{
name: "placeholder",
value: ""
}
],
validators: {
isRequired: false,
minLength: null,
maxLength: null,
custom: null
}
},
{
id: 4,
sortOrder: 4,
name: 'numberinput',
label: 'Campo Numerico',
description: "Per l'inserimento di valori numerici (quantità, importi, percentuali)",
settings: [
{
name: "label",
value: "Numero"
},
{
name: "placeholder",
value: 0
},
{
name: "step",
value: 0
}
],
@@ -283,43 +432,20 @@ export const elementItems = [
custom: null
}
},
{
id: 4,
name: 'textinput',
label: 'P.IVA',
settings: [
{
name: "label",
value: "P.IVA"
},
{
name: "placeholder",
value: "Insert p.iva number"
}
],
validators: {
isRequired: true,
minLength: null,
maxLength: null,
pattern: null,
custom: 'isValidVAT'
}
},
{
id: 5,
sortOrder: 5,
name: 'radio',
label: 'Radio Input',
label: 'Scelta Singola',
description: 'Gruppo di opzioni per selezione singola',
settings: [
{
name: "label",
value: "Radio input"
value: "Scelta Singola"
},
{
name: "options",
value: [
{ name: "opt1", label: "Opt1" },
{ name: "opt2", label: "Opt2" }
]
value: []
}
],
validators: {
@@ -329,19 +455,18 @@ export const elementItems = [
},
{
id: 6,
sortOrder: 6,
name: 'select',
label: 'Select',
label: 'Menu a Tendina',
description: 'Selezione da opzioni predefinite',
settings: [
{
name: "label",
value: "Select"
value: "Menu a Tendina"
},
{
name: "options",
value: [
{ name: "opt1", label: "Opt1" },
{ name: "opt2", label: "Opt2" }
]
value: []
}
],
validators: {
@@ -351,21 +476,85 @@ export const elementItems = [
},
{
id: 7,
name: 'datepicker',
label: 'Datepicker',
sortOrder: 7,
name: 'checkboxes',
label: 'Scelta Multipla',
description: 'Gruppo di opzioni per selezione singola o multipla',
settings: [
{
name: "label",
value: "Datepicker"
value: "Scelta Multipla"
},
{
name: "options",
value: []
}
],
validators: {
isRequired: false,
min: null,
max: null,
custom: null
}
},
{
id: 8,
sortOrder: 8,
name: 'switch',
label: 'Casella di Spunta',
description: 'Per selezioni binarie, accettazioni, conferme',
settings: [
{
name: "label",
value: "Casella di Spunta"
}
],
validators: {
isRequired: false
}
},
{
id: 9,
sortOrder: 9,
name: 'datepicker',
label: 'Data',
description: 'Selezione di data',
settings: [
{
name: "label",
value: "Data"
}
],
validators: {
isRequired: false,
custom: null
}
},
{
id: 10,
sortOrder: 10,
name: 'fileupload',
label: 'Caricamento File',
description: "Per l'upload di documenti o immagini",
settings: [
{
name: "label",
value: "Caricamento File"
},
{
name: "mime",
value: []
}
],
validators: {
isRequired: false,
maxSize: 100000,
custom: null
}
}
]
/*
const flowData = {
"initialForm":9,
"finalForm":13,
@@ -412,4 +601,4 @@ const flowData = {
"type":"smoothstep"
}
]
}
}*/