- page benficiary domanda/soccorso;
- fixed fetching data in overview tables for beneficiary/pre instructor; - fixed styles;
This commit is contained in:
Vitalii Kiiko
@@ -1,8 +1,10 @@
|
||||
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 { 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';
|
||||
@@ -16,9 +18,9 @@ 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 { Skeleton } from 'primereact/skeleton';
|
||||
import { Button } from 'primereact/button';
|
||||
import BlockingOverlay from '../../components/BlockingOverlay';
|
||||
import { Toast } from 'primereact/toast';
|
||||
@@ -26,12 +28,8 @@ 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 = () => {
|
||||
@@ -46,6 +44,7 @@ const SoccorsoEditPreInstructor = () => {
|
||||
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 {
|
||||
@@ -70,6 +69,13 @@ const SoccorsoEditPreInstructor = () => {
|
||||
const getCallback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
setData(getFormattedData(data.data));
|
||||
const formDataInitial = data.data.applicationFormFields.reduce((acc, cur) => {
|
||||
if (cur.fieldValue) {
|
||||
acc[cur.fieldId] = cur.fieldValue;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
setFormInitialData(formDataInitial);
|
||||
CommunicationService.getCommsByAmendmentId(data.data.id, getCommsCallback, errGetCommsCallback);
|
||||
}
|
||||
//storeSet.main.unsetAsyncRequest();
|
||||
@@ -234,7 +240,6 @@ const SoccorsoEditPreInstructor = () => {
|
||||
|
||||
const submitData = {
|
||||
updatedFormFields: newFormValues,
|
||||
//note: data.internalNote
|
||||
}
|
||||
|
||||
storeSet.main.setAsyncRequest();
|
||||
@@ -356,6 +361,36 @@ const SoccorsoEditPreInstructor = () => {
|
||||
setIsLoadingExtendingTime(false);
|
||||
}
|
||||
|
||||
const sendReminder = () => {
|
||||
setIsLoadingReminding(true);
|
||||
AmendmentsService.sendReminderForSoccorso(amendmentId, reminderCallback, errReminderCallback)
|
||||
}
|
||||
|
||||
const reminderCallback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
if (toast.current) {
|
||||
toast.current.show({
|
||||
severity: 'success',
|
||||
summary: '',
|
||||
detail: data.message
|
||||
});
|
||||
}
|
||||
}
|
||||
setIsLoadingReminding(false);
|
||||
}
|
||||
|
||||
const errReminderCallback = (data) => {
|
||||
if (toast.current && data.message) {
|
||||
toast.current.show({
|
||||
severity: 'error',
|
||||
summary: '',
|
||||
detail: data.message
|
||||
});
|
||||
}
|
||||
set404FromErrorResponse(data);
|
||||
setIsLoadingReminding(false);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const parsedSoccorsoId = parseInt(amendmentId);
|
||||
const soccorsoEntityId = !isNaN(parsedSoccorsoId) ? parsedSoccorsoId : 0;
|
||||
@@ -384,195 +419,182 @@ const SoccorsoEditPreInstructor = () => {
|
||||
|
||||
<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 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>
|
||||
: <>
|
||||
<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 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">
|
||||
<h2>{__('Documenti Ricevuti', 'gepafin')}</h2>
|
||||
|
||||
<form className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
{data.formFields
|
||||
? data.formFields.map((o, i) => {
|
||||
/*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}
|
||||
disabled={data.status === 'CLOSE'}
|
||||
type="fileupload"
|
||||
setDataFn={setValue}
|
||||
fieldName={o.fieldId}
|
||||
label={o.label}
|
||||
control={control}
|
||||
errors={errors}
|
||||
defaultValue={formInitialData[o.fieldId] ? formInitialData[o.fieldId] : []}
|
||||
accept={[]}
|
||||
doctype="document"
|
||||
register={register}
|
||||
sourceId={data.applicationId}
|
||||
source="application"
|
||||
multiple={true}
|
||||
/>
|
||||
}) : null}
|
||||
</form>
|
||||
|
||||
<Button
|
||||
style={{ marginTop: 30 }}
|
||||
type="button"
|
||||
disabled={data.status === 'CLOSE'}
|
||||
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"
|
||||
onClick={sendReminder}
|
||||
disabled={isLoadingReminding || data.status === 'CLOSE'}
|
||||
outlined
|
||||
label={__('Invia Sollecito', 'gepafin')}
|
||||
icon="pi pi-send"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={openExtendResponseTimeDialog}
|
||||
disabled={isLoadingExtendingTime || data.status === 'CLOSE'}
|
||||
outlined
|
||||
label={__('Estendi Scadenza', 'gepafin')}
|
||||
icon="pi pi-stopwatch"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={doCloseAmendment}
|
||||
disabled={isAsyncRequest || data.status === 'CLOSE'}
|
||||
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 style={{position: 'relative'}}>
|
||||
<BlockingOverlay shouldDisplay={data.status === 'CLOSE'}/>
|
||||
<Editor
|
||||
value={data.internalNote}
|
||||
readOnly={data.status === 'CLOSE'}
|
||||
placeholder={__('Digita qui il messagio', 'gepafin')}
|
||||
headerTemplate={header}
|
||||
onTextChange={(e) => updateNewAmendmentData(
|
||||
e.htmlValue,
|
||||
'internalNote'
|
||||
)}
|
||||
style={{ height: 80 * 3, width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
visible={isVisibleNewCommDialog}
|
||||
@@ -587,6 +609,7 @@ const SoccorsoEditPreInstructor = () => {
|
||||
{__('Titolo', 'gepafin')}*
|
||||
</label>
|
||||
<InputText value={newCommData.title}
|
||||
disabled={data.status === 'CLOSE'}
|
||||
invalid={isEmpty(newCommData.title)}
|
||||
onChange={(e) => updateNewCommData(e.target.value, 'title')}/>
|
||||
|
||||
@@ -596,6 +619,7 @@ const SoccorsoEditPreInstructor = () => {
|
||||
</label>
|
||||
<InputTextarea
|
||||
value={newCommData.comment}
|
||||
disabled={data.status === 'CLOSE'}
|
||||
rows={5} cols={30}
|
||||
invalid={isEmpty(newCommData.comment)}
|
||||
onChange={(e) => updateNewCommData(e.target.value, 'comment')}/>
|
||||
@@ -616,6 +640,7 @@ const SoccorsoEditPreInstructor = () => {
|
||||
</label>
|
||||
<InputNumber
|
||||
keyfilter="int"
|
||||
disabled={data.status === 'CLOSE'}
|
||||
value={extendedTime}
|
||||
showButtons
|
||||
onChange={(e) => setExtendedTime(e.value)}/>
|
||||
|
||||
Reference in New Issue
Block a user