- page benficiary domanda/soccorso;
- fixed fetching data in overview tables for beneficiary/pre instructor; - fixed styles;
This commit is contained in:
Vitalii Kiiko
391
src/pages/DomandaBeneficiario/index.js
Normal file
391
src/pages/DomandaBeneficiario/index.js
Normal file
@@ -0,0 +1,391 @@
|
||||
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { is, isEmpty, isNil } from 'ramda';
|
||||
import { wrap } from 'object-path-immutable';
|
||||
import { klona } from 'klona';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
// 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';
|
||||
import uniqid from '../../helpers/uniqid';
|
||||
|
||||
// components
|
||||
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 FormField from '../../components/FormField';
|
||||
import { Editor } from 'primereact/editor';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
|
||||
const DomandaBeneficiario = () => {
|
||||
const isAsyncRequest = useStore().main.isAsyncRequest();
|
||||
const { id } = 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 [isLoadingReminding, setIsLoadingReminding] = 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 goToArchivePage = () => {
|
||||
navigate(`/domande`);
|
||||
}
|
||||
|
||||
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);
|
||||
const amendmentId = 0
|
||||
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);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const parsedId = parseInt(id);
|
||||
const entityId = !isNaN(parsedId) ? parsedId : 0;
|
||||
|
||||
AmendmentsService.getSoccorsoByApplId(entityId, getCallback, errGetCallback, [
|
||||
['statuses', 'AWAITING']
|
||||
]);
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<div className="appPage">
|
||||
<div className="appPage__pageHeader">
|
||||
<h1>{sprintf(__('Soccorso Istruttorio: richiesta integrazione documenti per domanda #%s', 'gepafin'), id)}</h1>
|
||||
</div>
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
<Toast ref={toast}/>
|
||||
<BlockingOverlay shouldDisplay={isAsyncRequest}/>
|
||||
|
||||
<div className="appPageSection__row">
|
||||
<Button
|
||||
type="button"
|
||||
outlined
|
||||
onClick={goToArchivePage}
|
||||
label={__('Indietro', 'gepafin')}
|
||||
icon="pi pi-arrow-left" iconPos="left"/>
|
||||
</div>
|
||||
|
||||
<div className="appPage__spacer"></div>
|
||||
|
||||
<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
|
||||
? data.formFields.map((o, i) => <li key={o.fieldId} style={{ flexDirection: 'row' }}>
|
||||
<span>{o.label}</span>
|
||||
</li>) : null}
|
||||
</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}
|
||||
disabled={data.status === 'CLOSE'}
|
||||
type="button"
|
||||
label={__('Aggiungi Comunicazione', 'gepafin')}
|
||||
icon="pi pi-plus" iconPos="right"/>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection__message warning">
|
||||
<i className="pi pi-exclamation-triangle"></i>
|
||||
<span className="summary">{__('Attenzione', 'gepafin')}</span>
|
||||
<span>{__('Inviare la documentazione richiesta completa delle integrazioni esclusivamente via PEC. In caso contarrio l’integrazione non può essere ritenuta valida.', 'gepafin')}</span>
|
||||
</div>
|
||||
|
||||
<div className="appPageSection">
|
||||
<div className="appPageSection__actions">
|
||||
<Button
|
||||
type="button"
|
||||
disabled={isAsyncRequest}
|
||||
label={__('Invia documenti via PEC', 'gepafin')}
|
||||
icon="pi pi-envelope" iconPos="right"/>
|
||||
<Button
|
||||
type="button"
|
||||
outlined
|
||||
disabled={isAsyncRequest}
|
||||
label={__('Chiudi', 'gepafin')}
|
||||
icon="pi pi-times" iconPos="right"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<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}
|
||||
disabled={data.status === 'CLOSE'}
|
||||
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}
|
||||
disabled={data.status === 'CLOSE'}
|
||||
rows={5} cols={30}
|
||||
invalid={isEmpty(newCommData.comment)}
|
||||
onChange={(e) => updateNewCommData(e.target.value, 'comment')}/>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default DomandaBeneficiario;
|
||||
Reference in New Issue
Block a user