- added company name to tables with applications;
- added form and file inputs to the page of editing/viewing soccorso for beneficiary;
This commit is contained in:
Vitalii Kiiko
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
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';
|
||||
@@ -27,6 +27,9 @@ import { Dialog } from 'primereact/dialog';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import ApplicationService from '../../service/application-service';
|
||||
import FormField from '../../components/FormField';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { klona } from 'klona';
|
||||
|
||||
const DomandaBeneficiario = () => {
|
||||
const isAsyncRequest = useStore().main.isAsyncRequest();
|
||||
@@ -40,6 +43,20 @@ const DomandaBeneficiario = () => {
|
||||
const [isLoadingCommunication, setIsLoadingCommunication] = useState(false);
|
||||
const [isVisibleEmailDialog, setIsVisibleEmailDialog] = useState(false);
|
||||
const toast = useRef(null);
|
||||
const [formInitialData, setFormInitialData] = useState({});
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
register,
|
||||
trigger,
|
||||
getValues
|
||||
} = useForm({
|
||||
defaultValues: useMemo(() => {
|
||||
return formInitialData;
|
||||
}, [formInitialData]), mode: 'onChange'
|
||||
});
|
||||
|
||||
const goToArchivePage = () => {
|
||||
navigate(`/domande`);
|
||||
@@ -57,8 +74,16 @@ const DomandaBeneficiario = () => {
|
||||
const getCallback = (data) => {
|
||||
if (data.status === 'SUCCESS') {
|
||||
if (data.data.length) {
|
||||
setData(getFormattedData(data.data[0]));
|
||||
CommunicationService.getCommsByAmendmentId(data.data[0].id, getCommsCallback, errGetCommsCallback);
|
||||
const amendmentObj = data.data[0];
|
||||
setData(getFormattedData(amendmentObj));
|
||||
const formDataInitial = amendmentObj.applicationFormFields.reduce((acc, cur) => {
|
||||
if (cur.fieldValue) {
|
||||
acc[cur.fieldId] = cur.fieldValue;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
setFormInitialData(formDataInitial);
|
||||
CommunicationService.getCommsByAmendmentId(amendmentObj.id, getCommsCallback, errGetCommsCallback);
|
||||
storeSet.main.unsetAsyncRequest();
|
||||
} else {
|
||||
ApplicationService.getApplication(id, getApplCallback, errGetCallback)
|
||||
@@ -186,6 +211,60 @@ const DomandaBeneficiario = () => {
|
||||
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 = {
|
||||
applicationFormFields: newFormValues,
|
||||
}
|
||||
const amendmentId = data.id;
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="appPage">
|
||||
<div className="appPage__pageHeader">
|
||||
@@ -272,59 +351,85 @@ const DomandaBeneficiario = () => {
|
||||
|
||||
{data.id
|
||||
? <div className="appPageSection">
|
||||
<h2>{__('Dettagli Richiesta', 'gepafin')}</h2>
|
||||
<h3>{__('Documenti Richiesti', 'gepafin')}</h3>
|
||||
<ol className="appPageSection__list">
|
||||
<h2>{__('Dettagli Richiesta', 'gepafin')}</h2>
|
||||
<h3>{__('Note e spiegazioni', 'gepafin')}</h3>
|
||||
<div className="appPageSection__withBorder grey ql-editor"
|
||||
style={{ minHeight: '200px' }}>
|
||||
{renderHtmlContent(data.note)}
|
||||
</div>
|
||||
</div> : null}
|
||||
|
||||
{data.id
|
||||
? <div className="appPageSection">
|
||||
<h3>{__('Documenti Richiesti', 'gepafin')}</h3>
|
||||
<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}
|
||||
saveFormCallback={doUpdateAmendment}
|
||||
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>
|
||||
{/*<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> : null}
|
||||
</ol>*/}
|
||||
</div> : null}
|
||||
|
||||
{data.id
|
||||
? <div className="appPageSection">
|
||||
<h3>{__('Note e spiegazioni', 'gepafin')}</h3>
|
||||
<div className="appPageSection__withBorder grey ql-editor"
|
||||
style={{ minHeight: '200px' }}>
|
||||
{renderHtmlContent(data.note)}
|
||||
</div>
|
||||
</div> : null}
|
||||
<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>
|
||||
|
||||
{data.id
|
||||
? <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"
|
||||
<Button
|
||||
style={{ marginTop: 30 }}
|
||||
onClick={openNewCommDialog}
|
||||
disabled={data.status === 'CLOSE'}
|
||||
type="button"
|
||||
label={__('Aggiungi Comunicazione', 'gepafin')}
|
||||
icon="pi pi-plus" iconPos="right"/>
|
||||
</div> : null}
|
||||
|
||||
Reference in New Issue
Block a user