629 lines
25 KiB
JavaScript
629 lines
25 KiB
JavaScript
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { head, is, isEmpty, isNil, pathOr } from 'ramda';
|
|
import { wrap } from 'object-path-immutable';
|
|
|
|
// store
|
|
import { storeSet, useStore } from '../../store';
|
|
|
|
// api
|
|
import AmendmentsService from '../../service/amendments-service';
|
|
import CommunicationService from '../../service/communication-service';
|
|
|
|
// tools
|
|
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
|
|
import getBandoLabel from '../../helpers/getBandoLabel';
|
|
import getDateFromISOstring from '../../helpers/getDateFromISOstring';
|
|
import renderHtmlContent from '../../helpers/renderHtmlContent';
|
|
|
|
// components
|
|
import { Skeleton } from 'primereact/skeleton';
|
|
import { Button } from 'primereact/button';
|
|
import BlockingOverlay from '../../components/BlockingOverlay';
|
|
import { Toast } from 'primereact/toast';
|
|
import { classNames } from 'primereact/utils';
|
|
import { Dialog } from 'primereact/dialog';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { InputTextarea } from 'primereact/inputtextarea';
|
|
import { klona } from 'klona';
|
|
import { useForm } from 'react-hook-form';
|
|
import FormField from '../../components/FormField';
|
|
import uniqid from '../../helpers/uniqid';
|
|
import { Editor } from 'primereact/editor';
|
|
import { TZDate } from '@date-fns/tz';
|
|
import { InputNumber } from 'primereact/inputnumber';
|
|
|
|
const SoccorsoEditPreInstructor = () => {
|
|
const isAsyncRequest = useStore().main.isAsyncRequest();
|
|
const { id, amendmentId } = useParams();
|
|
const navigate = useNavigate();
|
|
const [data, setData] = useState({});
|
|
const [comms, setComms] = useState([]);
|
|
const [isVisibleNewCommDialog, setIsVisibleNewCommDialog] = useState(false);
|
|
const [newCommData, setNewCommData] = useState({});
|
|
const [isLoadingCommunication, setIsLoadingCommunication] = useState(false);
|
|
const [isVisibleExtendTimeDialog, setIsVisibleExtendTimeDialog] = useState(false);
|
|
const [extendedTime, setExtendedTime] = useState(3);
|
|
const [isLoadingExtendingTime, setIsLoadingExtendingTime] = useState(false);
|
|
const toast = useRef(null);
|
|
const [formInitialData, setFormInitialData] = useState({});
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors, isValid },
|
|
setValue,
|
|
register,
|
|
trigger,
|
|
getValues,
|
|
clearErrors
|
|
} = useForm({
|
|
defaultValues: useMemo(() => {
|
|
return formInitialData;
|
|
}, [formInitialData]), mode: 'onChange'
|
|
});
|
|
|
|
const goToEvaluationPage = () => {
|
|
navigate(`/domande/${id}`);
|
|
}
|
|
|
|
const getCallback = (data) => {
|
|
if (data.status === 'SUCCESS') {
|
|
setData(getFormattedData(data.data));
|
|
CommunicationService.getCommsByAmendmentId(data.data.id, getCommsCallback, errGetCommsCallback);
|
|
}
|
|
//storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const errGetCallback = (data) => {
|
|
if (toast.current && data.message) {
|
|
toast.current.show({
|
|
severity: 'error',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
set404FromErrorResponse(data);
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const getCommsCallback = (data) => {
|
|
if (data.status === 'SUCCESS') {
|
|
setComms(data.data.commentsList.map(o => getFormattedCommsData(o)));
|
|
}
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const errGetCommsCallback = (data) => {
|
|
if (toast.current && data.message) {
|
|
toast.current.show({
|
|
severity: 'error',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
set404FromErrorResponse(data);
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const getFormattedData = (data) => {
|
|
data.startDate = is(String, data.startDate) ? new Date(data.startDate) : (data.startDate ? data.startDate : '');
|
|
data.expirationDate = is(String, data.expirationDate) ? new Date(data.expirationDate) : (data.expirationDate ? data.expirationDate : '');
|
|
return data;
|
|
};
|
|
|
|
const getFormattedCommsData = (data) => {
|
|
data.id = isNil(data.id) ? uniqid('id') : data.id;
|
|
data.commentedDate = is(String, data.commentedDate) ? new Date(data.commentedDate) : (data.commentedDate ? data.commentedDate : '');
|
|
data.createdDate = is(String, data.createdDate) ? new Date(data.createdDate) : (data.createdDate ? data.createdDate : '');
|
|
data.updatedDate = is(String, data.updatedDate) ? new Date(data.updatedDate) : (data.updatedDate ? data.updatedDate : '');
|
|
return data;
|
|
};
|
|
|
|
const headerNewComDialog = () => {
|
|
return <span>{__('Aggiungi comunicazione', 'gepafin')}</span>
|
|
}
|
|
|
|
const hideNewComDialog = () => {
|
|
setIsVisibleNewCommDialog(false);
|
|
setNewCommData({
|
|
title: '',
|
|
comment: ''
|
|
});
|
|
}
|
|
|
|
const footerNewComDialog = () => {
|
|
return <div>
|
|
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideNewComDialog} outlined/>
|
|
<Button
|
|
type="button"
|
|
disabled={isLoadingCommunication || isEmpty(newCommData.title) || isEmpty(newCommData.comment)}
|
|
label={__('Invia', 'gepafin')} onClick={createCommunication}/>
|
|
</div>
|
|
}
|
|
|
|
const openNewCommDialog = () => {
|
|
setIsVisibleNewCommDialog(true);
|
|
setNewCommData({
|
|
title: '',
|
|
comment: ''
|
|
});
|
|
}
|
|
|
|
const updateNewCommData = (value, path) => {
|
|
const newData = wrap(newCommData).set(path.split('.'), value).value();
|
|
setNewCommData(newData);
|
|
}
|
|
|
|
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>
|
|
<button className="ql-list" value="ordered"></button>
|
|
<button className="ql-header" value="2"></button>
|
|
<button className="ql-header" value="3"></button>
|
|
<button className="ql-blockquote"></button>
|
|
<button className="ql-list" value="bullet"></button>
|
|
<button className="ql-indent" value="-1"></button>
|
|
<button className="ql-indent" value="+1"></button>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const header = renderHeader();
|
|
|
|
const updateNewAmendmentData = (value, path) => {
|
|
const newData = wrap(data).set(path.split('.'), value).value();
|
|
setData(newData);
|
|
}
|
|
|
|
const createCommunication = () => {
|
|
setIsLoadingCommunication(true);
|
|
CommunicationService.createCommunication(amendmentId, newCommData, createCommunicationCallback, errCreateCommunicationCallback);
|
|
}
|
|
|
|
const createCommunicationCallback = (data) => {
|
|
if (data.status === 'SUCCESS') {
|
|
if (toast.current) {
|
|
toast.current.show({
|
|
severity: 'success',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
setComms([...comms, getFormattedCommsData(data.data)])
|
|
setIsVisibleNewCommDialog(false);
|
|
}
|
|
setIsLoadingCommunication(false);
|
|
}
|
|
|
|
const errCreateCommunicationCallback = (data) => {
|
|
if (toast.current && data.message) {
|
|
toast.current.show({
|
|
severity: 'error',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
set404FromErrorResponse(data);
|
|
setIsLoadingCommunication(false);
|
|
}
|
|
|
|
const onSubmit = () => {
|
|
};
|
|
|
|
const doUpdateAmendment = () => {
|
|
trigger();
|
|
let formValues = klona(getValues());
|
|
const newFormValues = Object.keys(formValues)
|
|
.reduce((acc, cur) => {
|
|
let fieldVal = formValues[cur];
|
|
|
|
fieldVal = isEmpty(fieldVal) ? null : fieldVal;
|
|
fieldVal = is(Array, fieldVal) ? fieldVal.map(o => o.id).join(',') : null;
|
|
|
|
acc.push({
|
|
'fieldId': cur,
|
|
'fieldValue': fieldVal
|
|
});
|
|
return acc;
|
|
}, []);
|
|
|
|
const submitData = {
|
|
updatedFormFields: newFormValues,
|
|
//note: data.internalNote
|
|
}
|
|
|
|
storeSet.main.setAsyncRequest();
|
|
AmendmentsService.updateSoccorso(amendmentId, submitData, updateAmendmentCallback, errUpdateAmendmentCallback);
|
|
}
|
|
|
|
const updateAmendmentCallback = (data) => {
|
|
if (data.status === 'SUCCESS') {
|
|
if (toast.current) {
|
|
toast.current.show({
|
|
severity: 'success',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
}
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const errUpdateAmendmentCallback = (data) => {
|
|
if (toast.current && data.message) {
|
|
toast.current.show({
|
|
severity: 'error',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
set404FromErrorResponse(data);
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const doCloseAmendment = () => {
|
|
const submitData = {
|
|
internalNote: data.internalNote
|
|
}
|
|
storeSet.main.setAsyncRequest();
|
|
AmendmentsService.closeSoccorso(amendmentId, submitData, closeAmendmentCallback, errCloseAmendmentCallback);
|
|
}
|
|
|
|
const closeAmendmentCallback = (data) => {
|
|
if (data.status === 'SUCCESS') {
|
|
if (toast.current) {
|
|
toast.current.show({
|
|
severity: 'success',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
if (data.data.status) {
|
|
updateNewAmendmentData(data.data.status, 'status')
|
|
}
|
|
}
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const errCloseAmendmentCallback = (data) => {
|
|
if (toast.current && data.message) {
|
|
toast.current.show({
|
|
severity: 'error',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
set404FromErrorResponse(data);
|
|
storeSet.main.unsetAsyncRequest();
|
|
}
|
|
|
|
const headerExtendRespDialog = () => {
|
|
return <span>{__('Estendi scadenza', 'gepafin')}</span>
|
|
}
|
|
|
|
const hideExtendRespDialog = () => {
|
|
setIsVisibleExtendTimeDialog(false);
|
|
}
|
|
|
|
const footerExtendRespDialog = () => {
|
|
return <div>
|
|
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideExtendRespDialog} outlined/>
|
|
<Button
|
|
type="button"
|
|
disabled={isLoadingExtendingTime || isEmpty(extendedTime)}
|
|
label={__('Invia', 'gepafin')} onClick={doExtendTimeResponse}/>
|
|
</div>
|
|
}
|
|
|
|
const openExtendResponseTimeDialog = () => {
|
|
setIsVisibleExtendTimeDialog(true);
|
|
setExtendedTime(3);
|
|
}
|
|
|
|
const doExtendTimeResponse = () => {
|
|
setIsLoadingExtendingTime(true);
|
|
AmendmentsService.extendSoccorso(amendmentId, extendedTime, extendCallback, errExtendCallback);
|
|
}
|
|
|
|
const extendCallback = (data) => {
|
|
if (data.status === 'SUCCESS') {
|
|
if (toast.current) {
|
|
toast.current.show({
|
|
severity: 'success',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
setIsVisibleExtendTimeDialog(false);
|
|
}
|
|
setIsLoadingExtendingTime(false);
|
|
}
|
|
|
|
const errExtendCallback = (data) => {
|
|
if (toast.current && data.message) {
|
|
toast.current.show({
|
|
severity: 'error',
|
|
summary: '',
|
|
detail: data.message
|
|
});
|
|
}
|
|
set404FromErrorResponse(data);
|
|
setIsLoadingExtendingTime(false);
|
|
}
|
|
|
|
useEffect(() => {
|
|
const parsedSoccorsoId = parseInt(amendmentId);
|
|
const soccorsoEntityId = !isNaN(parsedSoccorsoId) ? parsedSoccorsoId : 0;
|
|
|
|
AmendmentsService.getSoccorsoById(getCallback, errGetCallback, [['id', soccorsoEntityId]]);
|
|
}, [amendmentId]);
|
|
|
|
return (
|
|
<div className="appPage">
|
|
<div className="appPage__pageHeader">
|
|
<h1>{__('Soccorso Istruttorio - Dettagli', 'gepafin')}</h1>
|
|
</div>
|
|
|
|
<div className="appPage__spacer"></div>
|
|
<Toast ref={toast}/>
|
|
<BlockingOverlay shouldDisplay={isAsyncRequest}/>
|
|
|
|
<div className="appPageSection__row">
|
|
<Button
|
|
type="button"
|
|
outlined
|
|
onClick={goToEvaluationPage}
|
|
label={__('Indietro', 'gepafin')}
|
|
icon="pi pi-arrow-left" iconPos="left"/>
|
|
</div>
|
|
|
|
<div className="appPage__spacer"></div>
|
|
|
|
{!isAsyncRequest && !isEmpty(data)
|
|
? <div className="appPage__content">
|
|
<div className="appPageSection__withBorder columns">
|
|
<p className="appPageSection__pMeta">
|
|
<span>{__('ID domanda', 'gepafin')}</span>
|
|
<span>{data.applicationId}</span>
|
|
</p>
|
|
<p className="appPageSection__pMeta">
|
|
<span>{__('Bando', 'gepafin')}</span>
|
|
<span>{data.callName}</span>
|
|
</p>
|
|
<p className="appPageSection__pMeta">
|
|
<span>{__('Beneficiario', 'gepafin')}</span>
|
|
<span>{data.beneficiaryName}</span>
|
|
</p>
|
|
<p className="appPageSection__pMeta">
|
|
<span>{__('Inizio', 'gepafin')}</span>
|
|
<span>{getDateFromISOstring(data.startDate)}</span>
|
|
</p>
|
|
<p className="appPageSection__pMeta">
|
|
<span>{__('Scadenza', 'gepafin')}</span>
|
|
<span>{getDateFromISOstring(data.expirationDate)}</span>
|
|
</p>
|
|
<p className="appPageSection__pMeta">
|
|
<span>{__('Stato', 'gepafin')}</span>
|
|
<span>{getBandoLabel(data.status)}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="appPageSection">
|
|
<h2>{__('Dettagli Richiesta', 'gepafin')}</h2>
|
|
<div className="appPageSection columns">
|
|
<div>
|
|
<h3>{__('Documenti Richiesti', 'gepafin')}</h3>
|
|
<ol className="appPageSection__list">
|
|
{data.formFields.map((o, i) => <li key={o.fieldId}>
|
|
<span>{o.label}</span>
|
|
</li>)}
|
|
</ol>
|
|
</div>
|
|
<div>
|
|
<h3>{__('Note e spiegazioni', 'gepafin')}</h3>
|
|
<div className="appPageSection__withBorder grey ql-editor"
|
|
style={{ minHeight: '200px' }}>
|
|
{renderHtmlContent(data.note)}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div className="appPageSection">
|
|
<h2>{__('Comunicazioni', 'gepafin')}</h2>
|
|
<table className="myTable">
|
|
<thead className="myThead">
|
|
<tr>
|
|
<th style={{ width: 250 }}>{__('Data', 'gepafin')}</th>
|
|
<th>{__('Comunicazione', 'gepafin')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="myTbody">
|
|
{!isNil(comms) && !isEmpty(comms)
|
|
? comms.map((o, i) => <tr key={o.id}>
|
|
<td valign="top">
|
|
{getDateFromISOstring(o.commentedDate)}
|
|
</td>
|
|
<td>
|
|
<h3>{o.title}</h3>
|
|
<p>{o.comment}</p>
|
|
</td>
|
|
</tr>)
|
|
: <tr>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>}
|
|
</tbody>
|
|
</table>
|
|
|
|
<Button
|
|
style={{ marginTop: 30 }}
|
|
onClick={openNewCommDialog}
|
|
type="button"
|
|
label={__('Aggiungi Comunicazione', 'gepafin')}
|
|
icon="pi pi-plus" iconPos="right"/>
|
|
</div>
|
|
|
|
<div className="appPageSection">
|
|
<h2>{__('Documenti Ricevuti', 'gepafin')}</h2>
|
|
|
|
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
|
{data.formFields.map((o, i) => {
|
|
const test = {
|
|
'updatedFormFields': [
|
|
{
|
|
'fieldId': 'a5867bdceb',
|
|
'fieldValue': '136'
|
|
},
|
|
{
|
|
'fieldId': 'ab0f00219b',
|
|
'fieldValue': null
|
|
}
|
|
]
|
|
}
|
|
const thisField = head(test.updatedFormFields.filter(j => j.fieldId === o.fieldId));
|
|
const value = pathOr({}, ['fieldValue'], thisField);
|
|
console.log('value', value, o.fieldId);
|
|
return <FormField
|
|
key={o.fieldId}
|
|
type="fileupload"
|
|
setDataFn={setValue}
|
|
fieldName={o.fieldId}
|
|
label={o.label}
|
|
control={control}
|
|
errors={errors}
|
|
defaultValue={[]}
|
|
accept={[]}
|
|
doctype="document"
|
|
register={register}
|
|
sourceId={data.applicationId}
|
|
source="application"
|
|
multiple={true}
|
|
/>
|
|
})}
|
|
</form>
|
|
|
|
<Button
|
|
style={{ marginTop: 30 }}
|
|
type="button"
|
|
onClick={doUpdateAmendment}
|
|
label={__('Aggiorna', 'gepafin')}/>
|
|
</div>
|
|
|
|
<div className="appPage__spacer"></div>
|
|
|
|
<div className="appPageSection__hr">
|
|
<span>{__('Azioni', 'gepafin')}</span>
|
|
</div>
|
|
|
|
<div className="appPageSection">
|
|
<div className="appPageSection__actions">
|
|
<Button
|
|
type="button"
|
|
disabled={true}
|
|
outlined
|
|
label={__('Invia Sollecito', 'gepafin')}
|
|
icon="pi pi-send"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
onClick={openExtendResponseTimeDialog}
|
|
outlined
|
|
label={__('Estendi Scadenza', 'gepafin')}
|
|
icon="pi pi-stopwatch"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
onClick={doCloseAmendment}
|
|
label={__('Chiudi Soccorso Istruttorio', 'gepafin')}
|
|
icon="pi pi-times" iconPos="right"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="appForm__field" style={{ marginTop: '-40px' }}>
|
|
<label>{__('Note Interne', 'gepafin')}</label>
|
|
<div>
|
|
<Editor
|
|
value={data.internalNote}
|
|
placeholder={__('Digita qui il messagio', 'gepafin')}
|
|
headerTemplate={header}
|
|
onTextChange={(e) => updateNewAmendmentData(
|
|
e.htmlValue,
|
|
'internalNote'
|
|
)}
|
|
style={{ height: 80 * 3, width: '100%' }}
|
|
/>
|
|
</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>
|
|
</>}
|
|
|
|
<Dialog
|
|
visible={isVisibleNewCommDialog}
|
|
modal
|
|
header={headerNewComDialog}
|
|
footer={footerNewComDialog}
|
|
style={{ maxWidth: '600px', width: '100%' }}
|
|
onHide={hideNewComDialog}>
|
|
<div className="appForm__field">
|
|
<label
|
|
className={classNames({ 'p-error': isEmpty(newCommData.title) })}>
|
|
{__('Titolo', 'gepafin')}*
|
|
</label>
|
|
<InputText value={newCommData.title}
|
|
invalid={isEmpty(newCommData.title)}
|
|
onChange={(e) => updateNewCommData(e.target.value, 'title')}/>
|
|
|
|
<label
|
|
className={classNames({ 'p-error': isEmpty(newCommData.comment) })}>
|
|
{__('Contenuto', 'gepafin')}*
|
|
</label>
|
|
<InputTextarea
|
|
value={newCommData.comment}
|
|
rows={5} cols={30}
|
|
invalid={isEmpty(newCommData.comment)}
|
|
onChange={(e) => updateNewCommData(e.target.value, 'comment')}/>
|
|
</div>
|
|
</Dialog>
|
|
|
|
<Dialog
|
|
visible={isVisibleExtendTimeDialog}
|
|
modal
|
|
header={headerExtendRespDialog}
|
|
footer={footerExtendRespDialog}
|
|
style={{ maxWidth: '600px', width: '100%' }}
|
|
onHide={hideExtendRespDialog}>
|
|
<div className="appForm__field">
|
|
<label
|
|
className={classNames({ 'p-error': isEmpty(extendedTime) })}>
|
|
{__('Giorni', 'gepafin')}*
|
|
</label>
|
|
<InputNumber
|
|
keyfilter="int"
|
|
value={extendedTime}
|
|
showButtons
|
|
onChange={(e) => setExtendedTime(e.value)}/>
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
export default SoccorsoEditPreInstructor; |