- added FLOW_ID env variable;

- implemented two types of evaluation flow;
- refactored component related to communication messages;
- fixed displaying elements based on evaluation status;
- fixed some styles;

.env

@@ -4,3 +4,4 @@ REACT_APP_API_ADDRESS=https://api-dev-gepafin.memento.credit
 REACT_APP_LOGO_FILENAME=gepafin-logo.svg
 REACT_APP_FAVICON_FILENAME=gepafin-favicon.ico
 REACT_APP_HUB_ID=p4lk3bcx1RStqTaIVVbXs
+REACT_APP_EVALUATION_FLOW_ID=1

environments/dev/dev.env

@@ -4,3 +4,4 @@ REACT_APP_API_ADDRESS=https://api-dev-gepafin.memento.credit
 REACT_APP_LOGO_FILENAME=gepafin-logo.svg
 REACT_APP_FAVICON_FILENAME=gepafin-favicon.ico
 REACT_APP_HUB_ID=p4lk3bcx1RStqTaIVVbXs
+REACT_APP_EVALUATION_FLOW_ID=1

environments/prod/prod.env

@@ -4,3 +4,4 @@ REACT_APP_API_ADDRESS=https://bandi-api.gepafin.it
 REACT_APP_LOGO_FILENAME=gepafin-logo.svg
 REACT_APP_FAVICON_FILENAME=gepafin-favicon.ico
 REACT_APP_HUB_ID=p4lk3bcx1RStqTaIVVbXs
+REACT_APP_EVALUATION_FLOW_ID=1

src/assets/scss/components/appPage.scss

@@ -208,10 +208,18 @@
         column-count: 2;
         column-width: 4em;
         display: block;
-        padding-bottom: 0;
+        /*padding-bottom: 0;*/
 
         .appPageSection__pMeta {
             margin-bottom: 1em;
+            
+            span:nth-of-type(1) {
+                max-width: 30%;
+            }
+            span:nth-of-type(2) {
+                max-width: 60%;
+                text-align: right;
+            }
         }
     }
 }
@@ -221,6 +229,7 @@
     flex-direction: column;
     padding: 0;
     width: 100%;
+    list-style: inside;
 }
 
 .appPageSection__listItem {

src/assets/scss/components/myTable.scss

@@ -23,6 +23,9 @@
     border-width: 0 0 1px 0;
     padding: 1rem 1rem;
   }
+  tr.outgoing {
+    background-color: #DAF0C3B2;
+  }
 }
 
 .myTfoot {

src/pages/DashboardBeneficiario/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Link, useNavigate } from 'react-router-dom';
 import { head, isEmpty, pathOr } from 'ramda';
 import NumberFlow from '@number-flow/react';

src/pages/DomandaBeneficiario/index.js

@@ -1,35 +1,30 @@
 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 { is, isEmpty } from 'ramda';
-import { wrap } from 'object-path-immutable';
+import { useForm } from 'react-hook-form';
+import { klona } from 'klona';
 
 // store
 import { storeSet, useStore } from '../../store';
 
 // api
 import AmendmentsService from '../../service/amendments-service';
-import CommunicationService from '../../service/communication-service';
+import ApplicationService from '../../service/application-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 ApplicationService from '../../service/application-service';
 import FormField from '../../components/FormField';
-import { useForm } from 'react-hook-form';
+import SoccorsoComunications from '../SoccorsoEditPreInstructor/components/SoccorsoComunications';
-import { klona } from 'klona';
 
 const DomandaBeneficiario = () => {
     const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -37,10 +32,6 @@ const DomandaBeneficiario = () => {
     const navigate = useNavigate();
     const [data, setData] = useState({});
     const [dataAppl, setDataAppl] = useState({});
-    const [comms, setComms] = useState([]);
-    const [isVisibleNewCommDialog, setIsVisibleNewCommDialog] = useState(false);
-    const [newCommData, setNewCommData] = useState({});
-    const [isLoadingCommunication, setIsLoadingCommunication] = useState(false);
     const [isVisibleEmailDialog, setIsVisibleEmailDialog] = useState(false);
     const toast = useRef(null);
     const [formInitialData, setFormInitialData] = useState({});
@@ -83,7 +74,6 @@ const DomandaBeneficiario = () => {
                     return acc;
                 }, {});
                 setFormInitialData(formDataInitial);
-                CommunicationService.getCommsByAmendmentId(amendmentObj.id, getCommsCallback, errGetCommsCallback);
                 storeSet.main.unsetAsyncRequest();
             } else {
                 ApplicationService.getApplication(id, getApplCallback, errGetCallback)
@@ -110,25 +100,6 @@ const DomandaBeneficiario = () => {
         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.submissionDate = is(String, data.submissionDate) ? new Date(data.submissionDate) : (data.submissionDate ? data.submissionDate : '');
         data.startDate = is(String, data.startDate) ? new Date(data.startDate) : (data.startDate ? data.startDate : '');
@@ -136,81 +107,6 @@ const DomandaBeneficiario = () => {
         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 createCommunication = () => {
-        setIsLoadingCommunication(true);
-        CommunicationService.createCommunication(data.id, 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 = () => {
     };
 
@@ -354,7 +250,7 @@ const DomandaBeneficiario = () => {
                         <h2>{__('Dettagli Richiesta', 'gepafin')}</h2>
                         <h3>{__('Note e spiegazioni', 'gepafin')}</h3>
                         <div className="appPageSection__withBorder grey ql-editor"
-                             style={{ minHeight: '200px' }}>
+                             style={{ minHeight: '100px' }}>
                             {renderHtmlContent(data.note)}
                         </div>
                     </div> : null}
@@ -365,9 +261,6 @@ const DomandaBeneficiario = () => {
                         <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'}
@@ -400,38 +293,7 @@ const DomandaBeneficiario = () => {
                 {data.id
                     ? <div className="appPageSection">
                         <h2>{__('Comunicazioni', 'gepafin')}</h2>
-                        <table className="myTable">
+                        <SoccorsoComunications amendmentId={data.id} soccorsoStatus={data.status}/>
-                            <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> : null}
 
                 {data.id
@@ -459,40 +321,8 @@ const DomandaBeneficiario = () => {
                             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>
-
             <Dialog
                 header={__('Invia documenti via PEC', 'gepafin')}
                 visible={isVisibleEmailDialog}

src/pages/DomandaEditPreInstructor/index.js

@@ -28,8 +28,8 @@ import BlockingOverlay from '../../components/BlockingOverlay';
 import { Toast } from 'primereact/toast';
 import HelpIcon from '../../icons/HelpIcon';
 import { Dialog } from 'primereact/dialog';
-import { classNames } from 'primereact/utils';
+
-import { Dropdown } from 'primereact/dropdown';
+const APP_EVALUATION_FLOW_ID = process.env.REACT_APP_EVALUATION_FLOW_ID;
 
 const DomandaEditPreInstructor = () => {
     const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -63,6 +63,7 @@ const DomandaEditPreInstructor = () => {
     const getCallback = (data) => {
         if (data.status === 'SUCCESS') {
             setData(getFormattedData(data.data));
+            setMotivation(data.data.motivation);
         }
         storeSet.main.unsetAsyncRequest();
     }
@@ -158,8 +159,10 @@ const DomandaEditPreInstructor = () => {
             criteria: klona(data.criteria),
             checklist: klona(data.checklist),
             files: klona(data.files),
-            note: data.note
+            note: data.note,
+            motivation
         }
+
         ApplicationEvaluationService.updateEvaluation(data.assignedApplicationId, formData, updateStatusCallback, errUpdateStatusCallback);
     }
 
@@ -169,8 +172,10 @@ const DomandaEditPreInstructor = () => {
             criteria: klona(data.criteria),
             checklist: klona(data.checklist),
             files: klona(data.files),
-            note: data.note
+            note: data.note,
+            motivation
         }
+
         ApplicationEvaluationService.updateEvaluation(data.assignedApplicationId, formData, updateStatusCallback, errUpdateStatusCallback);
     }
 
@@ -273,7 +278,8 @@ const DomandaEditPreInstructor = () => {
     }
 
     const shouldDisableField = (fieldName) => {
-        return !['EVALUATION', 'OPEN'].includes(data.status) || (['ADMISSIBLE'].includes(data.status) && fieldName !== 'criteria')
+        return !['EVALUATION'].includes(data.applicationStatus)
+            || (['ADMISSIBLE'].includes(data.applicationStatus) && fieldName !== 'criteria')
     }
 
     const headerCompleteDialog = () => {
@@ -285,6 +291,7 @@ const DomandaEditPreInstructor = () => {
     const hideCompleteDialog = () => {
         setIsVisibleCompleteDialog(false);
         setOperationType('');
+        setMotivation('');
     }
 
     const footerCompleteDialog = () => {
@@ -304,10 +311,18 @@ const DomandaEditPreInstructor = () => {
     }
 
     const initiateRejecting = () => {
-        setOperationType('approve');
+        setOperationType('reject');
         setIsVisibleCompleteDialog(true);
     }
 
+    const doCreateAppointment = () => {
+        // TODO
+    }
+
+    const doMakeAdmisible = () => {
+        // TODO
+    }
+
     useEffect(() => {
         const maxScore = pathOr(0, ['minScore'], data);
         const criteria = pathOr([], ['criteria'], data);
@@ -565,18 +580,21 @@ const DomandaEditPreInstructor = () => {
 
                     <div className="appPageSection">
                         <div className="appPageSection__actions">
-                            <Button
+                            {['EVALUATION', 'SOCCORSO', 'CLOSE'].includes(data.applicationStatus)
+                                ? <Button
                                 type="button"
                                 disabled={!data.id || data.status === 'CLOSE'}
                                 onClick={doNewSoccorso}
                                 outlined
                                 label={<>
-                                    {__('Richiedi Soccorso Istruttorio', 'gepafin')}
+                                    {data.applicationStatus === 'EVALUATION'
+                                        ? __('Richiedi Soccorso Istruttorio', 'gepafin')
+                                        : __('Apri Soccorso Istruttorio', 'gepafin')}
                                     <i style={{ marginLeft: 7 }}>
                                         <HelpIcon/>
                                     </i>
                                 </>}
-                            />
+                            /> : null}
                             {data.id
                                 ? <Button
                                     type="button"
@@ -590,17 +608,32 @@ const DomandaEditPreInstructor = () => {
                                     onClick={doSaveDraft}
                                     label={__('Crea valutazione', 'gepafin')}
                                     icon="pi pi-save" iconPos="right"/>}
+                            {APP_EVALUATION_FLOW_ID === '1' && ['EVALUATION'].includes(data.applicationStatus)
+                                ? <Button
+                                    type="button"
+                                    disabled={!data.id}
+                                    onClick={doCreateAppointment}
+                                    label={__('Crea l\'appuntamento', 'gepafin')}
+                                /> : null}
+                            {APP_EVALUATION_FLOW_ID === '1' && ['APPOINTMENT'].includes(data.applicationStatus)
+                                ? <Button
+                                    type="button"
+                                    disabled={!data.id}
+                                    onClick={doMakeAdmisible}
+                                    label={__('Ammissibile', 'gepafin')}
+                                /> : null}
                             {data.id
                                 ? <Button
                                     type="button"
-                                    disabled={!isAdmissible || ['CLOSE', 'SOCCORSO'].includes(data.status)}
+                                    disabled={!isAdmissible
+                                        || (APP_EVALUATION_FLOW_ID === '1' && !['ADMISSIBLE', 'APPOINTMENT'].includes(data.applicationStatus))}
                                     onClick={initiateApproving}
                                     label={__('Approva Domanda', 'gepafin')}
                                     icon="pi pi-check" iconPos="right"/> : null}
                             {data.id
                                 ? <Button
                                     type="button"
-                                    disabled={['CLOSE', 'SOCCORSO'].includes(data.status)}
+                                    disabled={APP_EVALUATION_FLOW_ID === '1' && !['ADMISSIBLE', 'APPOINTMENT'].includes(data.applicationStatus)}
                                     onClick={initiateRejecting}
                                     label={__('Respingi Domanda', 'gepafin')}
                                     icon="pi pi-times" iconPos="right"/> : null}

src/pages/SoccorsoEditPreInstructor/components/SoccorsoComunications/index.js

@@ -0,0 +1,218 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { is, isEmpty, isNil } from 'ramda';
+import { wrap } from 'object-path-immutable';
+
+// tools
+import getDateFromISOstring from '../../../../helpers/getDateFromISOstring';
+import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
+import uniqid from '../../../../helpers/uniqid';
+
+// store
+import { storeGet } from '../../../../store';
+
+// api
+import CommunicationService from '../../../../service/communication-service';
+
+// components
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Dialog } from 'primereact/dialog';
+import { Toast } from 'primereact/toast';
+
+const SoccorsoComunications = ({ amendmentId, soccorsoStatus }) => {
+    const [comms, setComms] = useState([]);
+    const [isVisibleNewCommDialog, setIsVisibleNewCommDialog] = useState(false);
+    const [newCommData, setNewCommData] = useState({});
+    const [isLoadingCommunication, setIsLoadingCommunication] = useState(false);
+    const toast = useRef(null);
+
+    useEffect(() => {
+        if (amendmentId && amendmentId !== 0) {
+            setIsLoadingCommunication(true);
+            CommunicationService.getCommsByAmendmentId(amendmentId, getCommsCallback, errGetCommsCallback);
+        }
+    }, [amendmentId]);
+
+    const getCommsCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setComms(data.data.commentsList.map(o => getFormattedCommsData(o)));
+        }
+        setIsLoadingCommunication(false);
+    }
+
+    const errGetCommsCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        setIsLoadingCommunication(false);
+    }
+    
+    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 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 displayCommIcon = (comm) => {
+        const userData = storeGet.main.userData();
+        return userData.id === comm.senderUserId
+            ? <i className="pi pi-upload"></i>
+            : <i className="pi pi-download"></i>;
+    }
+
+    const getCommRowClass = (comm) => {
+        const userData = storeGet.main.userData();
+        return userData.id === comm.senderUserId ? 'outgoing' : 'incoming';
+    }
+
+    return (
+        <>
+        <Toast ref={toast}/>
+            <table className="myTable">
+                <thead className="myThead">
+                <tr>
+                    <th style={{ width: 50 }}></th>
+                    <th style={{ width: 250 }}>{__('Data', 'gepafin')}</th>
+                    <th style={{ width: '100%' }}>{__('Comunicazione', 'gepafin')}</th>
+                </tr>
+                </thead>
+                <tbody className="myTbody">
+                {!isNil(comms) && !isEmpty(comms)
+                    ? comms.map((o, i) => <tr key={o.id} className={getCommRowClass(o)}>
+                        <td valign="top">
+                            {displayCommIcon(o)}
+                        </td>
+                        <td valign="top">
+                            {getDateFromISOstring(o.commentedDate)}
+                        </td>
+                        <td>
+                            <h3>{o.title}</h3>
+                            <p>{o.comment}</p>
+                        </td>
+                    </tr>)
+                    : <tr>
+                        <td></td>
+                        <td>-</td>
+                        <td>-</td>
+                    </tr>}
+                </tbody>
+            </table>
+
+            <Button
+                style={{ marginTop: 30 }}
+                onClick={openNewCommDialog}
+                disabled={soccorsoStatus === 'CLOSE'}
+                type="button"
+                label={__('Aggiungi Comunicazione', 'gepafin')}
+                icon="pi pi-plus" iconPos="right"/>
+
+            <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={soccorsoStatus === '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={soccorsoStatus === 'CLOSE'}
+                        rows={5} cols={30}
+                        invalid={isEmpty(newCommData.comment)}
+                        onChange={(e) => updateNewCommData(e.target.value, 'comment')}/>
+                </div>
+            </Dialog>
+        </>
+    )
+}
+
+export default SoccorsoComunications;

src/pages/SoccorsoEditPreInstructor/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate, useParams } from 'react-router-dom';
-import { is, isEmpty, isNil } from 'ramda';
+import { is, isEmpty } from 'ramda';
 import { wrap } from 'object-path-immutable';
 import { klona } from 'klona';
 import { useForm } from 'react-hook-form';
@@ -11,14 +11,12 @@ 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';
@@ -26,21 +24,17 @@ 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';
+import SoccorsoComunications from './components/SoccorsoComunications';
+
 
 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);
@@ -75,9 +69,8 @@ const SoccorsoEditPreInstructor = () => {
                 return acc;
             }, {});
             setFormInitialData(formDataInitial);
-            CommunicationService.getCommsByAmendmentId(data.data.id, getCommsCallback, errGetCommsCallback);
         }
-        //storeSet.main.unsetAsyncRequest();
+        storeSet.main.unsetAsyncRequest();
     }
 
     const errGetCallback = (data) => {
@@ -92,74 +85,12 @@ const SoccorsoEditPreInstructor = () => {
         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">
@@ -185,38 +116,6 @@ const SoccorsoEditPreInstructor = () => {
         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 = () => {
     };
 
@@ -471,38 +370,7 @@ const SoccorsoEditPreInstructor = () => {
 
                 <div className="appPageSection">
                     <h2>{__('Comunicazioni', 'gepafin')}</h2>
-                    <table className="myTable">
+                    <SoccorsoComunications amendmentId={amendmentId} soccorsoStatus={data.status}/>
-                        <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">
@@ -511,9 +379,6 @@ const SoccorsoEditPreInstructor = () => {
                     <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'}
@@ -589,36 +454,6 @@ const SoccorsoEditPreInstructor = () => {
 
             </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>
-
             <Dialog
                 visible={isVisibleExtendTimeDialog}
                 modal