383 lines
14 KiB
JavaScript
383 lines
14 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { is, isNil, isEmpty } from 'ramda';
|
|
|
|
// store
|
|
import { storeSet, useStore } from '../../store';
|
|
|
|
// api
|
|
import BandoService from '../../service/bando-service';
|
|
|
|
// tools
|
|
import getBandoLabel from '../../helpers/getBandoLabel';
|
|
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
|
|
|
|
// components
|
|
import { Button } from 'primereact/button';
|
|
import { Skeleton } from 'primereact/skeleton';
|
|
import { Steps } from 'primereact/steps';
|
|
import BandoEditFormStep1 from './components/BandoEditFormStep1';
|
|
import BandoEditFormStep2 from './components/BandoEditFormStep2';
|
|
import { Messages } from 'primereact/messages';
|
|
import FormsService from '../../service/forms-service';
|
|
import BlockingOverlay from '../../components/BlockingOverlay';
|
|
import { Toast } from 'primereact/toast';
|
|
import BandoEditFormStep3 from './components/BandoEditFormStep3';
|
|
|
|
const BandoEdit = () => {
|
|
const isAsyncRequest = useStore().main.isAsyncRequest();
|
|
const navigate = useNavigate();
|
|
const { id } = useParams();
|
|
const [activeStep, setActiveStep] = useState(null)
|
|
const [data, setData] = useState({});
|
|
const [forms, setForms] = useState([]);
|
|
const formRef = useRef(null);
|
|
const bandoMsgs = useRef(null);
|
|
const toast = useRef(null);
|
|
|
|
const stepItems = (evalProcessVer) => {
|
|
let steps = [
|
|
{
|
|
label: __('Testi', 'gepafin'),
|
|
command: () => {
|
|
if (activeStep === 0) {
|
|
return false
|
|
}
|
|
bandoMsgs.current.clear();
|
|
goToStep(0);
|
|
}
|
|
},
|
|
{
|
|
label: __('Gestione', 'gepafin'),
|
|
command: () => {
|
|
if (activeStep === 1) {
|
|
return false
|
|
}
|
|
bandoMsgs.current.clear();
|
|
goToStep(1);
|
|
}
|
|
}
|
|
];
|
|
|
|
if (evalProcessVer === 'V2') {
|
|
steps.push({
|
|
label: __('Valutazione', 'gepafin'),
|
|
command: () => {
|
|
if (activeStep === 2) {
|
|
return false
|
|
}
|
|
bandoMsgs.current.clear();
|
|
goToStep(2);
|
|
}
|
|
})
|
|
}
|
|
|
|
return steps;
|
|
}
|
|
|
|
const goToStep = (step) => {
|
|
setActiveStep(step);
|
|
}
|
|
|
|
const openBandoFormManagement = () => {
|
|
navigate(`/bandi/${id}/forms`);
|
|
}
|
|
|
|
const openBandoFlowManagement = () => {
|
|
navigate(`/bandi/${id}/flow`);
|
|
}
|
|
|
|
const validateBando = () => {
|
|
storeSet.main.setAsyncRequest();
|
|
bandoMsgs.current.clear();
|
|
BandoService.validateBando(id, validateCallback, errValidateCallback);
|
|
}
|
|
|
|
const validateCallback = (resp) => {
|
|
if (resp.status === 'SUCCESS') {
|
|
setData(resp.data);
|
|
if (bandoMsgs.current) {
|
|
bandoMsgs.current.show([
|
|
{
|
|
id: '99',
|
|
sticky: true, severity: 'info', summary: '',
|
|
detail: __('Potrai pubblicare il tuo Bando.', 'gepafin'),
|
|
closable: false
|
|
}
|
|
]);
|
|
if (toast.current) {
|
|
toast.current.show({
|
|
severity: 'info',
|
|
summary: '',
|
|
detail: __('Potrai pubblicare il tuo Bando.', 'gepafin')
|
|
});
|
|
}
|
|
}
|
|
}
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const errValidateCallback = (resp) => {
|
|
if (resp.status === 'VALIDATION_ERROR') {
|
|
storeSet.main.unsetAsyncRequest();
|
|
if (bandoMsgs.current) {
|
|
bandoMsgs.current.show(resp.data.map((v, i) => ({
|
|
id: i,
|
|
sticky: true, severity: 'error', summary: '',
|
|
detail: v,
|
|
closable: false
|
|
})));
|
|
}
|
|
if (toast.current) {
|
|
toast.current.show(resp.data.map((v, i) => ({
|
|
severity: 'error',
|
|
summary: '',
|
|
detail: v
|
|
})));
|
|
}
|
|
} else {
|
|
standardErrCallback(resp);
|
|
}
|
|
}
|
|
|
|
const publishBando = () => {
|
|
storeSet.main.setAsyncRequest();
|
|
bandoMsgs.current.clear();
|
|
BandoService.updateBandoStatus(id, publishCallback, errPublishCallback, [['status', 'PUBLISH']]);
|
|
}
|
|
|
|
const publishCallback = (resp) => {
|
|
if (resp.status === 'SUCCESS') {
|
|
if (bandoMsgs.current) {
|
|
bandoMsgs.current.show([
|
|
{
|
|
id: '99',
|
|
sticky: true, severity: 'success', summary: '',
|
|
detail: __('Pubblicato!', 'gepafin'),
|
|
closable: false
|
|
}
|
|
]);
|
|
}
|
|
if (toast.current) {
|
|
toast.current.show({
|
|
severity: 'success',
|
|
summary: '',
|
|
detail: __('Pubblicato!', 'gepafin')
|
|
});
|
|
}
|
|
if (resp.data.docs) {
|
|
resp.data.docs = resp.data.docs
|
|
.filter(o => o.source === 'CALL' && o.type === 'DOCUMENT');
|
|
}
|
|
setData(resp.data);
|
|
}
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const errPublishCallback = (resp) => {
|
|
standardErrCallback(resp);
|
|
}
|
|
|
|
const getCallback = (resp) => {
|
|
if (resp.status === 'SUCCESS') {
|
|
if (!isNil(resp.data.dates) && resp.data.dates.length) {
|
|
if (resp.data.dates[0]) {
|
|
resp.data.startDate = is(String, resp.data.dates[0]) ? new Date(resp.data.dates[0]) : (resp.data.dates[0] ? resp.data.dates[0] : '');
|
|
}
|
|
if (resp.data.dates[1]) {
|
|
resp.data.endDate = is(String, resp.data.dates[1]) ? new Date(resp.data.dates[1]) : (resp.data.dates[1] ? resp.data.dates[1] : '');
|
|
}
|
|
}
|
|
|
|
if (resp.data.status === 'READY_TO_PUBLISH') {
|
|
bandoMsgs.current.clear();
|
|
bandoMsgs.current.show([
|
|
{
|
|
id: '1',
|
|
sticky: true, severity: 'info', summary: '',
|
|
detail: __('Potrai pubblicare il tuo Bando.', 'gepafin'),
|
|
closable: false
|
|
}
|
|
]);
|
|
} else if (resp.data.status === 'DRAFT') {
|
|
if (bandoMsgs.current) {
|
|
bandoMsgs.current.clear();
|
|
bandoMsgs.current.show([
|
|
{
|
|
id: '1',
|
|
sticky: true, severity: 'info', summary: '',
|
|
detail: __('Potrai pubblicare il tuo Bando solo dopo aver completato tutti i campi obbligatori contrassegnati dagli asterischi.', 'gepafin'),
|
|
closable: false
|
|
}
|
|
]);
|
|
}
|
|
}
|
|
if (resp.data.docs) {
|
|
resp.data.docs = resp.data.docs
|
|
.filter(o => o.source === 'CALL' && o.type === 'DOCUMENT');
|
|
}
|
|
setData(resp.data);
|
|
}
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const errGetCallback = (resp) => {
|
|
set404FromErrorResponse(resp);
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const standardErrCallback = (resp) => {
|
|
if (bandoMsgs.current && resp.message) {
|
|
bandoMsgs.current.show([
|
|
{
|
|
sticky: true, severity: 'error', summary: '',
|
|
detail: resp.message,
|
|
closable: true
|
|
}
|
|
]);
|
|
}
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const getFormsCallback = (resp) => {
|
|
if (resp.status === 'SUCCESS') {
|
|
setForms(resp.data);
|
|
}
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
useEffect(() => {
|
|
storeSet.main.setAsyncRequest();
|
|
setActiveStep(0);
|
|
|
|
const parsed = parseInt(id)
|
|
const bandoId = !isNaN(parsed) ? parsed : 0;
|
|
|
|
if (bandoId === 0) {
|
|
setData({
|
|
status: null,
|
|
evaluationVersion: 'V2'
|
|
});
|
|
storeSet.main.unsetAsyncRequest();
|
|
|
|
if (bandoMsgs.current) {
|
|
bandoMsgs.current.clear();
|
|
bandoMsgs.current.show([
|
|
{
|
|
id: '1',
|
|
sticky: true, severity: 'info', summary: '',
|
|
detail: __('Potrai pubblicare il tuo Bando solo dopo aver completato tutti i campi obbligatori contrassegnati dagli asterischi.', 'gepafin'),
|
|
closable: false
|
|
}
|
|
]);
|
|
}
|
|
} else {
|
|
BandoService.getBando(id, getCallback, errGetCallback);
|
|
FormsService.getFormsForCall(id, getFormsCallback, () => {
|
|
});
|
|
}
|
|
}, [id]);
|
|
|
|
return (
|
|
<div className="appPage">
|
|
<div className="appPage__pageHeader">
|
|
<h1>{__('Creazione/Modifica Bando', 'gepafin')}</h1>
|
|
<p>
|
|
{__('Stato:', 'gepafin')}
|
|
<span>{getBandoLabel(data.status)}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="appPage__spacer"></div>
|
|
|
|
{!isEmpty(data)
|
|
? <Steps
|
|
model={stepItems(data.evaluationVersion)}
|
|
activeIndex={activeStep}
|
|
readOnly={isNil(data.status)}/>
|
|
: null}
|
|
<BlockingOverlay shouldDisplay={isAsyncRequest}/>
|
|
|
|
<div className="appPage__spacer"></div>
|
|
|
|
<Messages ref={bandoMsgs}/>
|
|
<Toast ref={toast}/>
|
|
|
|
{!isEmpty(data)
|
|
? <>
|
|
{activeStep === 0
|
|
? <BandoEditFormStep1 initialData={data} setInitialData={setData} ref={formRef} status={data.status}/>
|
|
: null}
|
|
{activeStep === 1
|
|
? <BandoEditFormStep2 initialData={data} setInitialData={setData} ref={formRef} status={data.status}/>
|
|
: null}
|
|
{activeStep === 2 && data.evaluationVersion === 'V2'
|
|
? <BandoEditFormStep3/>
|
|
: null}
|
|
|
|
<div className="appPageSection">
|
|
<h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>
|
|
|
|
<div className="row">
|
|
<Button
|
|
type="button"
|
|
disabled={!['DRAFT', 'PUBLISH', 'READY_TO_PUBLISH'].includes(data.status)}
|
|
outlined={data.status === 'PUBLISH'}
|
|
onClick={openBandoFormManagement}
|
|
label={__('Crea/modifica form', 'gepafin')}/>
|
|
|
|
<Button
|
|
type="button"
|
|
disabled={!['DRAFT', 'PUBLISH', 'READY_TO_PUBLISH'].includes(data.status)}
|
|
outlined={data.status === 'PUBLISH'}
|
|
onClick={openBandoFlowManagement}
|
|
icon="pi pi-sitemap"
|
|
iconPos="right"
|
|
label={__('Gestisci flusso dei form', 'gepafin')}/>
|
|
</div>
|
|
|
|
{forms.length
|
|
? <ul className="">
|
|
{forms.map(o => <li key={o.id}>
|
|
{o.label}
|
|
</li>)}
|
|
</ul>
|
|
: <p>{__('Nessun modulo creato ancora', 'gepafin')}</p>}
|
|
</div>
|
|
|
|
<div className="appPage__spacer"></div>
|
|
|
|
<div className="appPageSection">
|
|
<h2>{__('Pubblica il form', 'gepafin')}</h2>
|
|
|
|
<div className="row">
|
|
<Button
|
|
type="button"
|
|
outlined
|
|
disabled={!(data.status === 'DRAFT')}
|
|
onClick={validateBando}
|
|
label={__('Validate', 'gepafin')}/>
|
|
<Button
|
|
type="button"
|
|
disabled={!(data.status === 'READY_TO_PUBLISH')}
|
|
onClick={publishBando}
|
|
label={__('Publish', 'gepafin')}/>
|
|
</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 BandoEdit; |