Merge pull request #14 from Kitzanos/feature/74-new-evaluation-flow

Feature/74 new evaluation flow

.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,22 +229,30 @@
     flex-direction: column;
     padding: 0;
     width: 100%;
+    list-style: inside;
+}
 
-    > li {
+.appPageSection__listItem {
-        padding: 15px;
+    padding: 15px;
-        border-bottom: 1px solid var(--button-secondary-borderColor);
+    border-bottom: 1px solid var(--button-secondary-borderColor);
-        display: flex;
+    display: flex;
-        justify-content: space-between;
+    justify-content: space-between;
-        align-items: center;
+    align-items: center;
-        flex-direction: column;
+    flex-direction: column;
-        gap: 1rem;
+    gap: 1rem;
 
-        &.row {
+    &.row {
-            flex-direction: row;
+        flex-direction: row;
-        }
     }
 }
 
+.appPageSection__listItemRow {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 16px;
+}
+
 .appPageSection__checklist {
     display: flex;
     flex-direction: column;

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/components/FormField/components/Datepicker/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { classNames } from 'primereact/utils';
 import { Controller } from 'react-hook-form';
-import { is } from 'ramda';
+import { is, isEmpty } from 'ramda';
 
 import { Calendar } from 'primereact/calendar';
 
@@ -30,7 +30,7 @@ const Datepicker = ({
                 rules={config}
                 render={({ field, fieldState }) => (<Calendar id={field.name}
                                   disabled={disabled}
-                                  value={is(String, field.value) ? new Date(field.value) : field.value}
+                                  value={is(String, field.value) && !isEmpty(field.value) ? new Date(field.value) : field.value}
                                   onChange={(e) => field.onChange(e.value)}
                                   dateFormat="dd/mm/yy"
                                   hourFormat="24"

src/pages/BandoEdit/components/BandoEditFormStep2/index.js

@@ -284,7 +284,7 @@ const BandoEditFormStep2 = forwardRef(function ({ initialData, setInitialData, g
                 options={checklistOptions}
                 errors={errors}
                 register={register}
-                label={<>{__('Checklist valutazione Pre-Istruttoria', 'gepafin')}*
+                label={<>{__('Checklist valutazione Istruttoria', 'gepafin')}*
                     <span>{__('(almeno 1 elemento)', 'gepafin')}</span></>}
                 config={{
                     validate: {

src/pages/Dashboard/components/DraftApplicationsTable/index.js

@@ -173,9 +173,15 @@ const DraftApplicationsTable = () => {
                        emptyMessage={translationStrings.emptyMessage}
                        onFilter={(e) => setFilters(e.filters)}>
                 <Column field="id" header={__('ID domanda', 'gepafin')}
-                        filter filterPlaceholder={__('Cerca', 'gepafin')}
+                        sortable
+                        filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
-                <Column field="callTitle" header={__('Bando', 'gepafin')} filter
+                <Column field="callTitle" header={__('Bando', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column field="companyName" header={__('Azienda', 'gepafin')}
+                        filter sortable
                         filterPlaceholder={__('Cerca il nome', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
                 {/*<Column header={__('Scadenza', 'gepafin')} filterField="callEndDate" dataType="date"
@@ -185,7 +191,8 @@ const DraftApplicationsTable = () => {
                         style={{ minWidth: '8rem' }}
                         body={dateModifyBodyTemplate} filter filterElement={dateFilterTemplate}/>*/}
                 <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
-                        style={{ minWidth: '7rem' }} body={statusBodyTemplate} filter
+                        style={{ minWidth: '7rem' }} body={statusBodyTemplate}
+                        filter
                         filterElement={statusFilterTemplate}/>
                 <Column header={__('Progressi', 'gepafin')}
                         style={{ minWidth: '10rem' }} field="progress" body={progressBodyTemplate}/>

src/pages/DashboardBeneficiario/components/MyLatestSubmissionsTable/index.js

@@ -178,16 +178,26 @@ const MyLatestSubmissionsTable = () => {
                        header={header}
                        emptyMessage={translationStrings.emptyMessage}
                        onFilter={(e) => setFilters(e.filters)}>
-                <Column field="callTitle" header={__('Bando', 'gepafin')} filter filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                <Column field="callTitle" header={__('Bando', 'gepafin')}
+                        sortable
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column field="companyName" header={__('Azienda', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
                 <Column header={__('Scadenza', 'gepafin')} filterField="callEndDate" dataType="date"
                         style={{ minWidth: '8rem' }}
-                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                        body={dateEndBodyTemplate}
+                        filter
+                        filterElement={dateFilterTemplate}/>
                 <Column header={__('Ultima modifica', 'gepafin')} filterField="modifiedDate" dataType="date"
                         style={{ minWidth: '8rem' }}
-                        body={dateModifyBodyTemplate} filter filterElement={dateFilterTemplate}/>
+                        body={dateModifyBodyTemplate}
+                        filter
+                        filterElement={dateFilterTemplate}/>
                 <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
-                        style={{ minWidth: '7rem' }} body={statusBodyTemplate} filter
+                        style={{ minWidth: '7rem' }} body={statusBodyTemplate}
                         filterElement={statusFilterTemplate}/>
                 <Column header={__('Progressi', 'gepafin')}
                         style={{ minWidth: '10rem' }} field="progress" body={progressBodyTemplate}/>

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/DashboardPreInstructor/components/PreInstructorDomandeTable/index.js

@@ -158,10 +158,15 @@ const PreInstructorDomandeTable = () => {
                        emptyMessage={translationStrings.emptyMessage}
                        onFilter={(e) => setFilters(e.filters)}>
                 <Column field="applicationId" header={__('ID domanda', 'gepafin')}
-                        filter filterPlaceholder={__('Cerca', 'gepafin')}
+                        sortable filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '6rem' }}/>
                 <Column field="callName" header={__('Bando', 'gepafin')}
-                        filter filterPlaceholder={__('Cerca', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column field="companyName" header={__('Azienda', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
                 <Column header={__('Data ricezione', 'gepafin')} filterField="submissionDate" dataType="date"
                         style={{ minWidth: '8rem' }}

src/pages/DomandaBeneficiario/index.js

@@ -1,32 +1,30 @@
-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';
+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 FormField from '../../components/FormField';
-import { InputTextarea } from 'primereact/inputtextarea';
+import SoccorsoComunications from '../SoccorsoEditPreInstructor/components/SoccorsoComunications';
-import ApplicationService from '../../service/application-service';
 
 const DomandaBeneficiario = () => {
     const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -34,12 +32,22 @@ 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({});
+    const {
+        control,
+        handleSubmit,
+        formState: { errors },
+        setValue,
+        register,
+        trigger,
+        getValues
+    } = useForm({
+        defaultValues: useMemo(() => {
+            return formInitialData;
+        }, [formInitialData]), mode: 'onChange'
+    });
 
     const goToArchivePage = () => {
         navigate(`/domande`);
@@ -57,8 +65,15 @@ const DomandaBeneficiario = () => {
     const getCallback = (data) => {
         if (data.status === 'SUCCESS') {
             if (data.data.length) {
-                setData(getFormattedData(data.data[0]));
+                const amendmentObj = data.data[0];
-                CommunicationService.getCommsByAmendmentId(data.data[0].id, getCommsCallback, errGetCommsCallback);
+                setData(getFormattedData(amendmentObj));
+                const formDataInitial = amendmentObj.applicationFormFields.reduce((acc, cur) => {
+                    if (cur.fieldValue) {
+                        acc[cur.fieldId] = cur.fieldValue;
+                    }
+                    return acc;
+                }, {});
+                setFormInitialData(formDataInitial);
                 storeSet.main.unsetAsyncRequest();
             } else {
                 ApplicationService.getApplication(id, getApplCallback, errGetCallback)
@@ -85,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 : '');
@@ -111,55 +107,36 @@ const DomandaBeneficiario = () => {
         return data;
     };
 
-    const getFormattedCommsData = (data) => {
+    const onSubmit = () => {
-        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 = () => {
+    const doUpdateAmendment = () => {
-        return <span>{__('Aggiungi comunicazione', 'gepafin')}</span>
+        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 hideNewComDialog = () => {
+    const updateAmendmentCallback = (data) => {
-        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({
@@ -168,13 +145,11 @@ const DomandaBeneficiario = () => {
                     detail: data.message
                 });
             }
-            setComms([...comms, getFormattedCommsData(data.data)])
-            setIsVisibleNewCommDialog(false);
         }
-        setIsLoadingCommunication(false);
+        storeSet.main.unsetAsyncRequest();
     }
 
-    const errCreateCommunicationCallback = (data) => {
+    const errUpdateAmendmentCallback = (data) => {
         if (toast.current && data.message) {
             toast.current.show({
                 severity: 'error',
@@ -183,7 +158,7 @@ const DomandaBeneficiario = () => {
             });
         }
         set404FromErrorResponse(data);
-        setIsLoadingCommunication(false);
+        storeSet.main.unsetAsyncRequest();
     }
 
     return (
@@ -272,61 +247,53 @@ const DomandaBeneficiario = () => {
 
                 {data.id
                     ? <div className="appPageSection">
-                    <h2>{__('Dettagli Richiesta', 'gepafin')}</h2>
+                        <h2>{__('Dettagli Richiesta', 'gepafin')}</h2>
-                    <h3>{__('Documenti Richiesti', 'gepafin')}</h3>
+                        <h3>{__('Note e spiegazioni', 'gepafin')}</h3>
-                    <ol className="appPageSection__list">
+                        <div className="appPageSection__withBorder grey ql-editor"
+                             style={{ minHeight: '100px' }}>
+                            {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) => {
+                                    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>
+                    </ol>*/}
-                </div> : null}
+                    </div> : null}
 
                 {data.id
                     ? <div className="appPageSection">
-                    <h3>{__('Note e spiegazioni', 'gepafin')}</h3>
+                        <h2>{__('Comunicazioni', 'gepafin')}</h2>
-                    <div className="appPageSection__withBorder grey ql-editor"
+                        <SoccorsoComunications amendmentId={data.id} soccorsoStatus={data.status}/>
-                         style={{ minHeight: '200px' }}>
-                        {renderHtmlContent(data.note)}
-                    </div>
-                </div> : null}
-
-                {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"
-                        label={__('Aggiungi Comunicazione', 'gepafin')}
-                        icon="pi pi-plus" iconPos="right"/>
                 </div> : null}
 
                 {data.id
@@ -354,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

@@ -29,6 +29,8 @@ import { Toast } from 'primereact/toast';
 import HelpIcon from '../../icons/HelpIcon';
 import { Dialog } from 'primereact/dialog';
 
+const APP_EVALUATION_FLOW_ID = process.env.REACT_APP_EVALUATION_FLOW_ID;
+
 const DomandaEditPreInstructor = () => {
     const isAsyncRequest = useStore().main.isAsyncRequest();
     const { id } = useParams();
@@ -40,6 +42,10 @@ const DomandaEditPreInstructor = () => {
     const [isAdmissible, setIsAdmissible] = useState(false);
     const [connectedSoccorsoId, setConnectedSoccorsoId] = useState(0);
     const toast = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [isVisibleCompleteDialog, setIsVisibleCompleteDialog] = useState(false);
+    const [operationType, setOperationType] = useState('');
+    const [motivation, setMotivation] = useState('');
 
     const goToEvaluationsPage = () => {
         navigate('/domande');
@@ -57,6 +63,7 @@ const DomandaEditPreInstructor = () => {
     const getCallback = (data) => {
         if (data.status === 'SUCCESS') {
             setData(getFormattedData(data.data));
+            setMotivation(data.data.motivation);
         }
         storeSet.main.unsetAsyncRequest();
     }
@@ -102,7 +109,7 @@ const DomandaEditPreInstructor = () => {
     const updateEvaluationValue = (value, path, maxValue) => {
         let finalValue = value;
 
-        if (maxValue) {
+        if (maxValue || maxValue === 0) {
             finalValue = value > maxValue ? maxValue : value;
         }
 
@@ -152,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);
     }
 
@@ -163,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);
     }
 
@@ -256,6 +267,60 @@ const DomandaEditPreInstructor = () => {
     }
 
     const errGetAmendmentsCallback = () => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+    }
+
+    const shouldDisableField = (fieldName) => {
+        return !['EVALUATION'].includes(data.applicationStatus)
+            || (['ADMISSIBLE'].includes(data.applicationStatus) && fieldName !== 'criteria')
+    }
+
+    const headerCompleteDialog = () => {
+        return 'approve' === operationType
+            ? <span>{__('Confermare l\'approvazione', 'gepafin')}</span>
+            : <span>{__('Confermare il rifiuto', 'gepafin')}</span>;
+    }
+
+    const hideCompleteDialog = () => {
+        setIsVisibleCompleteDialog(false);
+        setOperationType('');
+        setMotivation('');
+    }
+
+    const footerCompleteDialog = () => {
+        return <div>
+            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideCompleteDialog} outlined/>
+            <Button
+                type="button"
+                disabled={loading}
+                label={__('Invia', 'gepafin')} onClick={'approve' === operationType ? doApprove : doReject}/>
+        </div>
+    }
+
+    const initiateApproving = () => {
+        setOperationType('approve');
+        setIsVisibleCompleteDialog(true);
+
+    }
+
+    const initiateRejecting = () => {
+        setOperationType('reject');
+        setIsVisibleCompleteDialog(true);
+    }
+
+    const doCreateAppointment = () => {
+        // TODO
+    }
+
+    const doMakeAdmisible = () => {
+        // TODO
     }
 
     useEffect(() => {
@@ -325,13 +390,11 @@ const DomandaEditPreInstructor = () => {
                         </p>
                         <p className="appPageSection__pMeta">
                             <span>{__('Stato', 'gepafin')}</span>
-                            <span>{getBandoLabel(data.status)}</span>
+                            <span>{getBandoLabel(data.applicationStatus)}</span>
                         </p>
                     </div>
 
-                    <div className="appPageSection">
+                    <div className="appPageSection"></div>
-
-                    </div>
 
                     <div className="appPageSection">
                         <h2>{__('Punteggi di valutazione', 'gepafin')}</h2>
@@ -350,7 +413,7 @@ const DomandaEditPreInstructor = () => {
                                     <td>
                                         <div className="p-inputgroup">
                                             <InputNumber
-                                                disabled={data.status === 'CLOSE'}
+                                                disabled={shouldDisableField('criteria')}
                                                 placeholder={__('Punteggio', 'gepafin')}
                                                 keyfilter="int"
                                                 value={o.score}
@@ -373,7 +436,7 @@ const DomandaEditPreInstructor = () => {
                                                           onClick={() => displayCriterionData(o.id)}
                                                           aria-label={__('Mostra', 'gepafin')}/> : null}
                                             <Button icon="pi pi-thumbs-up" rounded outlined
-                                                    disabled={data.status === 'CLOSE'}
+                                                    disabled={shouldDisableField('criteria')}
                                                     severity={!isNil(o.valid) && o.valid ? 'success' : 'secondary'}
                                                     onClick={() => updateEvaluationValue(
                                                         true,
@@ -381,7 +444,7 @@ const DomandaEditPreInstructor = () => {
                                                     )}
                                                     aria-label={__('Su', 'gepafin')}/>
                                             <Button icon="pi pi-thumbs-down" rounded outlined
-                                                    disabled={data.status === 'CLOSE'}
+                                                    disabled={shouldDisableField('criteria')}
                                                     severity={!isNil(o.valid) && !o.valid ? 'danger' : 'secondary'}
                                                     onClick={() => updateEvaluationValue(
                                                         false,
@@ -422,7 +485,7 @@ const DomandaEditPreInstructor = () => {
                                     <div className="appPageSection__checklist">
                                         {data.checklist.map((o, i) => <div key={o.id}>
                                             <Checkbox
-                                                disabled={data.status === 'CLOSE'}
+                                                disabled={shouldDisableField('checklist')}
                                                 inputId={`checklist_${o.id}`}
                                                 onChange={(e) => updateEvaluationValue(
                                                     e.checked,
@@ -438,7 +501,7 @@ const DomandaEditPreInstructor = () => {
                                 <div>
                                     <Editor
                                         value={data.note}
-                                        readOnly={data.status === 'CLOSE'}
+                                        readOnly={shouldDisableField('note')}
                                         placeholder={__('Digita qui il messagio', 'gepafin')}
                                         headerTemplate={header}
                                         onTextChange={(e) => updateEvaluationValue(
@@ -452,12 +515,8 @@ const DomandaEditPreInstructor = () => {
                             <div>
                                 <h3>{__('Documenti allegati', 'gepafin')}</h3>
                                 <ol className="appPageSection__list">
-                                    {data.files.map((o, i) => <li key={o.id}>
+                                    {data.files.map((o, i) => <li key={o.id} className="appPageSection__listItem">
-                                        <div className="appPageSection" style={{
+                                        <div className="appPageSection__listItemRow">
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between'
-                                        }}>
                                             <span>{o.label}</span>
                                             <div className="appPageSection__iconActions">
                                                 {o.fileDetail && o.fileDetail.length === 1
@@ -466,7 +525,7 @@ const DomandaEditPreInstructor = () => {
                                                               outlined severity="info"
                                                               aria-label={__('Mostra', 'gepafin')}/> : null}
                                                 <Button icon="pi pi-thumbs-up" rounded outlined
-                                                        disabled={data.status === 'CLOSE'}
+                                                        disabled={shouldDisableField('files')}
                                                         severity={!isNil(o.valid) && o.valid ? 'success' : 'secondary'}
                                                         onClick={() => updateEvaluationValue(
                                                             true,
@@ -474,7 +533,7 @@ const DomandaEditPreInstructor = () => {
                                                         )}
                                                         aria-label={__('Su', 'gepafin')}/>
                                                 <Button icon="pi pi-thumbs-down" rounded outlined
-                                                        disabled={data.status === 'CLOSE'}
+                                                        disabled={shouldDisableField('files')}
                                                         severity={!isNil(o.valid) && !o.valid ? 'danger' : 'secondary'}
                                                         onClick={() => updateEvaluationValue(
                                                             false,
@@ -521,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"
@@ -546,18 +608,33 @@ 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
-                                    onClick={doApprove}
+                                        || (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={doReject}
+                                    onClick={initiateRejecting}
                                     label={__('Respingi Domanda', 'gepafin')}
                                     icon="pi pi-times" iconPos="right"/> : null}
                         </div>
@@ -571,6 +648,26 @@ const DomandaEditPreInstructor = () => {
                         {criterionDataContent}
                     </Dialog>
 
+                    <Dialog
+                        visible={isVisibleCompleteDialog}
+                        modal
+                        header={headerCompleteDialog}
+                        footer={footerCompleteDialog}
+                        style={{ maxWidth: '600px', width: '100%' }}
+                        onHide={hideCompleteDialog}>
+                        <div className="appForm__field">
+                            <label>{__('Motivazione', 'gepafin')}</label>
+                            <Editor
+                                value={motivation}
+                                readOnly={loading}
+                                placeholder={__('Digita qui il messagio', 'gepafin')}
+                                headerTemplate={header}
+                                onTextChange={(e) => setMotivation(e.htmlValue)}
+                                style={{ height: 80 * 3, width: '100%' }}
+                            />
+                        </div>
+                    </Dialog>
+
                 </div>
                 : <>
                     <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>

src/pages/Domande/components/AllDomandeTable/index.js

@@ -158,11 +158,17 @@ const AllDomandeTable = ({ openDialogFn, updaterString = '' }) => {
                        emptyMessage={translationStrings.emptyMessage}
                        onFilter={(e) => setFilters(e.filters)}>
                 <Column field="id" header={__('ID domanda', 'gepafin')}
-                        filter filterPlaceholder={__('Cerca', 'gepafin')}
+                        sortable
+                        filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
                 <Column field="callTitle" header={__('Bando', 'gepafin')}
-                        filter filterPlaceholder={__('Cerca', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '10rem' }}/>
+                <Column field="companyName" header={__('Azienda', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
                 <Column header={__('Data Ricezione', 'gepafin')}
                         filterField="submissionDate" dataType="date"
                         style={{ minWidth: '8rem' }}

src/pages/Domande/index.js

@@ -169,7 +169,7 @@ const Domande = () => {
                 <div className="appForm__field">
                     <label
                         className={classNames({ 'p-error': isEmpty(chosenUser) || chosenUser === 0 || chosenApplication === 0 })}>
-                        {__('Pre-istruttore', 'gepafin')}*
+                        {__('Istruttore', 'gepafin')}*
                     </label>
                     <Dropdown
                         value={chosenUser}

src/pages/DomandeBeneficiario/components/BeneficiarioDomandeTable/index.js

@@ -172,17 +172,23 @@ const BeneficiarioDomandeTable = () => {
                        header={header}
                        emptyMessage={translationStrings.emptyMessage}
                        onFilter={(e) => setFilters(e.filters)}>
-                <Column field="id" header={__('ID domanda', 'gepafin')} filter
+                <Column field="id" header={__('ID domanda', 'gepafin')}
+                        sortable
                         filterPlaceholder={__('Cerca il nome', 'gepafin')}
                         style={{ minWidth: '6rem' }}/>
-                <Column field="callTitle" header={__('Titolo bando', 'gepafin')} filter
+                <Column field="callTitle" header={__('Titolo bando', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column field="companyName" header={__('Azienda', 'gepafin')}
+                        filter sortable
                         filterPlaceholder={__('Cerca il nome', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
                 <Column header={__('Data di invio', 'gepafin')} filterField="submissionDate" dataType="date"
                         style={{ minWidth: '8rem' }}
                         body={dateSubmissionBodyTemplate} filter filterElement={dateFilterTemplate}/>
                 <Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
-                        style={{ minWidth: '7rem' }} body={statusBodyTemplate} filter
+                        style={{ minWidth: '7rem' }} body={statusBodyTemplate}
                         filterElement={statusFilterTemplate}/>
                 <Column header={__('Esito', 'gepafin')}
                         style={{ minWidth: '7rem' }} field="progress" body={progressBodyTemplate}/>

src/pages/ProfileCompany/index.js

@@ -5,7 +5,7 @@ import { klona } from 'klona';
 import { wrap } from 'object-path-immutable';
 import { useForm } from 'react-hook-form';
 import emailjs from '@emailjs/browser';
-import { useNavigate } from 'react-router-dom';
+//import { useNavigate } from 'react-router-dom';
 
 // store
 import { storeSet, useStore, storeGet } from '../../store';
@@ -41,7 +41,7 @@ const ProfileCompany = () => {
     const [isVisibleRemoveDialog, setIsVisibleRemoveDialog] = useState(false);
     const { delegaFirstName = '', delegaLastName = '', delegaCodiceFiscale = '' } = delegaData;
     const toast = useRef(null);
-    const navigate = useNavigate();
+    //const navigate = useNavigate();
 
     const {
         control,

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 = () => {
     };
 
@@ -397,8 +296,6 @@ const SoccorsoEditPreInstructor = () => {
         AmendmentsService.getSoccorsoById(getCallback, errGetCallback, [['id', soccorsoEntityId]]);
     }, [amendmentId]);
 
-    console.log('formInitialData', formInitialData)
-
     return (
         <div className="appPage">
             <div className="appPage__pageHeader">
@@ -473,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">
@@ -513,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'}
@@ -536,13 +399,6 @@ const SoccorsoEditPreInstructor = () => {
                             />
                         }) : null}
                     </form>
-
-                    {/*<Button
-                        style={{ marginTop: 30 }}
-                        type="button"
-                        disabled={data.status === 'CLOSE'}
-                        onClick={doUpdateAmendment}
-                        label={__('Aggiorna', 'gepafin')}/>*/}
                 </div>
 
                 <div className="appPage__spacer"></div>
@@ -598,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