- role director functionality;

src/pages/DashboardBeneficiario/index.js

@@ -5,7 +5,7 @@ import { head, isEmpty, pathOr } from 'ramda';
 import NumberFlow from '@number-flow/react';
 
 // store
-import { storeGet, useStoreValue } from '../../store';
+import { useStoreValue } from '../../store';
 
 // api
 import DashboardService from '../../service/dashboard-service';
@@ -47,7 +47,6 @@ const DashboardBeneficiario = () => {
 
         if (existingCompany) {
             DashboardService.getBeneficiaryStatsForCompany(existingCompany.id, getStats, errGetStats);
-            const userData = storeGet('userData');
         }
     }, [companies, chosenCompanyId]);
 

src/pages/DashboardDirector/components/LatestPecEmailsTable/index.js

@@ -1,31 +1,31 @@
-import React, { useState, useEffect} from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { __ } from '@wordpress/i18n';
-import { uniq } from 'ramda';
+import { isEmpty, pluck } from 'ramda';
 
 // api
-import BandoService from '../../../../service/bando-service';
+import PecEmailService from '../../../../service/pec-email-service';
 
 // tools
-import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
-import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
+import renderHtmlContent from '../../../../helpers/renderHtmlContent';
 
 // components
 import { FilterMatchMode, FilterOperator } from 'primereact/api';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
-import { Calendar } from 'primereact/calendar';
-import ProperBandoLabel from '../../../../components/ProperBandoLabel';
-import { Link } from 'react-router-dom';
+import { Toast } from 'primereact/toast';
+import { Dialog } from 'primereact/dialog';
 
 import translationStrings from '../../../../translationStringsForComponents';
-import PecEmailService from '../../../../service/pec-email-service';
 
 const LatestPecEmailsTable = () => {
     const [items, setItems] = useState(null);
     const [filters, setFilters] = useState(null);
+    const [selectedProducts, setSelectedProducts] = useState(null);
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
-    const [, setStatuses] = useState([]);
+    const [isVisibleDetails, setIsVisibleDetails] = useState(false);
+    const [previewItem, setPreviewItem] = useState({});
+    const toast = useRef(null);
 
     useEffect(() => {
         setLocalAsyncRequest(true);
@@ -35,8 +35,6 @@ const LatestPecEmailsTable = () => {
     const getCallback = (data) => {
         if (data.status === 'SUCCESS') {
             setItems(data.data);
-            /*setStatuses(uniq(data.data.map(o => o.status)));
-            initFilters();*/
         }
         setLocalAsyncRequest(false);
     }
@@ -45,23 +43,6 @@ const LatestPecEmailsTable = () => {
         setLocalAsyncRequest(false);
     }
 
-    const getFormattedBandiData = (data) => {
-        return [...(data || [])].map((d) => {
-            d.start_date = new Date(d.dates[0]);
-            d.end_date = new Date(d.dates[1]);
-
-            return d;
-        });
-    };
-
-    const formatDate = (value) => {
-        return value.toLocaleDateString('it-IT', {
-            day: '2-digit',
-            month: '2-digit',
-            year: 'numeric'
-        });
-    };
-
     const clearFilter = () => {
         initFilters();
     };
@@ -69,75 +50,173 @@ const LatestPecEmailsTable = () => {
     const initFilters = () => {
         setFilters({
             global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-            start_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-            end_date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            name: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
+            },
+            start_date: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
+            },
+            end_date: {
+                operator: FilterOperator.AND,
+                constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
+            },
             status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
         });
     };
 
-    const renderHeader = () => {
+    const doAccept = (ids) => {
+        if (isEmpty(ids)) {
+            return;
+        }
+
+        setLocalAsyncRequest(true);
+        PecEmailService.doUserAction(getUserActionCallback, errGetUserActionCallbacks, [
+            ['userActionIds', ids]
+        ]);
+    }
+
+    const getUserActionCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            setItems(resp.data);
+            if (toast.current && resp.message) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: resp.message
+                });
+            }
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetUserActionCallbacks = (resp) => {
+        setLocalAsyncRequest(false);
+        if (toast.current && resp.message) {
+            toast.current.show({
+                severity: resp.status === 'SUCCESS' ? 'info' : 'error',
+                summary: '',
+                detail: resp.message
+            });
+        }
+    }
+
+    const doShowDetails = (row) => {
+        setPreviewItem(row);
+        setIsVisibleDetails(true);
+    }
+
+    const headerDialog = () => {
+        return <span>{__('I dettagli dell\'email', 'gepafin')}</span>;
+    }
+
+    const hideDialog = () => {
+        setIsVisibleDetails(false);
+        setPreviewItem({});
+    }
+
+    const footerDialog = useCallback(() => {
+        return <div>
+            <Button type="button" label={__('Annulla', 'gepafin')} onClick={hideDialog} outlined/>
+            {previewItem && !isEmpty(previewItem)
+                ? <Button
+                    type="button"
+                    disabled={localAsyncRequest}
+                    label={__('Accetta', 'gepafin')} onClick={() => doAccept([previewItem.id])}/>
+                : null}
+        </div>
+    }, [previewItem]);
+
+    const renderHeader = useCallback(() => {
         return (
             <div className="appTableHeader">
-                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
+                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined
+                        onClick={clearFilter}/>
+                {selectedProducts && !isEmpty(selectedProducts) && (
+                    <Button type="button" icon="pi pi-check" label={__('Accetta tutte', 'gepafin')}
+                            onClick={() => doAccept(pluck(selectedProducts, 'userActionId'))}/>
+                )}
             </div>
         );
-    };
-
-    const dateStartBodyTemplate = (rowData) => {
-        const startTimeObj = getTimeParsedFromString(rowData.startTime);
-        return formatDate(rowData.start_date) + ' ' + getTimeFromISOstring(startTimeObj);
-    };
-
-    const dateEndBodyTemplate = (rowData) => {
-        const endTimeObg = getTimeParsedFromString(rowData.endTime);
-        return formatDate(rowData.end_date)  + ' ' + getTimeFromISOstring(endTimeObg);
-    };
-
-    const dateFilterTemplate = (options) => {
-        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999" />;
-    };
-
-    const statusBodyTemplate = (rowData) => {
-        return <ProperBandoLabel status={rowData.status}/>;
-    };
+    }, [selectedProducts]);
 
     const actionsBodyTemplate = (rowData) => {
-        return <Link to={`/bandi/${rowData.id}`}>
-            <Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small" iconPos="right" />
-        </Link>
+        return <div className="appPageSection__tableActions lessGap">
+            <Button severity="info"
+                    onClick={() => doShowDetails(rowData)}
+                    label={__('Dettagli', 'gepafin')}
+                    icon="pi pi-eye"
+                    size="small"
+                    iconPos="right"/>
+            <Button severity="success"
+                    onClick={() => doAccept([rowData.userActionId])}
+                    label={__('Accetta', 'gepafin')}
+                    icon="pi pi-check"
+                    size="small"
+                    iconPos="right"/>
+        </div>
     }
 
     const header = renderHeader();
 
-    console.log('items', items);
-    return null;
+    return <div className="appPageSection__table">
+        <DataTable value={items}
+                   paginator showGridlines
+                   rows={5} loading={localAsyncRequest} dataKey="id"
+                   filters={filters} stripedRows removableSort
+                   header={header}
+                   emptyMessage={translationStrings.emptyMessage}
+                   selectionMode="checkbox"
+                   selection={selectedProducts}
+                   onSelectionChange={(e) => setSelectedProducts(e.value)}
+                   onFilter={(e) => setFilters(e.filters)}>
+            <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+            <Column field="id" header={__('ID', 'gepafin')}
+                    filter sortable
+                    filterPlaceholder={__('Cerca', 'gepafin')}
+                    style={{ minWidth: '3rem' }}/>
+            <Column field="callName" header={__('Nome Bando', 'gepafin')}
+                    filter sortable
+                    filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                    style={{ minWidth: '8rem' }}/>
+            <Column field="applicationId" header={__('Domanda ID', 'gepafin')}
+                    filter sortable
+                    filterPlaceholder={__('Cerca ID', 'gepafin')}
+                    style={{ minWidth: '8rem' }}/>
+            <Column field="type" header={__('Tipo', 'gepafin')}
+                    filter sortable
+                    filterPlaceholder={__('Cerca tipo', 'gepafin')}
+                    style={{ minWidth: '8rem' }}/>
+            <Column header={__('Azioni', 'gepafin')}
+                    body={actionsBodyTemplate}/>
+        </DataTable>
 
-    {/*<div className="appPageSection__table">
-            <DataTable value={items}
-                       paginator showGridlines
-                       /!*lazy totalRecords={totalRecordsNum} onPage={onPageChange}*!/
-                       rows={5} loading={localAsyncRequest} dataKey="id"
-                       filters={filters} stripedRows removableSort
-                       header={header}
-                       emptyMessage={translationStrings.emptyMessage}
-                       onFilter={(e) => setFilters(e.filters)}>
-                <Column field="name" header={__('Nome Bando', 'gepafin')}
-                        filter sortable
-                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
-                        style={{ minWidth: '8rem' }}/>
-                <Column header={__('Data Pubblicazione', 'gepafin')} filterField="start_date" dataType="date"
-                        style={{ minWidth: '8rem' }}
-                        body={dateStartBodyTemplate} filter filterElement={dateFilterTemplate}/>
-                <Column header={__('Data Scadenza', 'gepafin')} filterField="end_date" dataType="date"
-                        style={{ minWidth: '8rem' }}
-                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>
-                <Column field="status" header={__('Stato', 'gepafin')}
-                        style={{ minWidth: '7rem' }} body={statusBodyTemplate} />
-                <Column header={__('Azioni', 'gepafin')}
-                        body={actionsBodyTemplate}/>
-            </DataTable>
-        </div>*/}
+        <Toast ref={toast}/>
+
+        <Dialog
+            visible={isVisibleDetails}
+            modal
+            header={headerDialog}
+            footer={footerDialog}
+            style={{ maxWidth: '600px', width: '100%' }}
+            onHide={hideDialog}>
+            <div className="appForm__field">
+                <h2>{__('Tipo:', 'gepafin')}</h2>
+                <div>
+                    <code>{previewItem.type}</code>
+                </div>
+                <h2>{__('Oggetto:', 'gepafin')}</h2>
+                <div>
+                    {renderHtmlContent(previewItem.subject)}
+                </div>
+                <h2>{__('Il corpo:', 'gepafin')}</h2>
+                <div>
+                    {renderHtmlContent(previewItem.htmlContent)}
+                </div>
+            </div>
+        </Dialog>
+    </div>
 }
 
 export default LatestPecEmailsTable;

src/pages/DashboardDirector/index.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
-import { useNavigate } from 'react-router-dom';
 import { pathOr } from 'ramda';
 import NumberFlow from '@number-flow/react';
 
@@ -13,10 +12,7 @@ import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync';
 import DraftApplicationsTableAsync from '../Dashboard/components/DraftApplicationsTableAsync';
 import LatestPecEmailsTable from './components/LatestPecEmailsTable';
 
-const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
-
 const DashboardDirector = () => {
-    const navigate = useNavigate();
     const [mainStats, setMainStats] = useState({});
 
     const getStatValue = (key, fallback = '') => {
@@ -106,6 +102,8 @@ const DashboardDirector = () => {
                 <LatestPecEmailsTable/>
             </div>
 
+            <div className="appPage__spacer"></div>
+
             <div className="appPageSection">
                 <h2>{__('Ultimi bandi pubblicati', 'gepafin')}</h2>
                 <LatestBandiTableAsync disableActions={true}/>

src/service/pec-email-service.js

@@ -7,4 +7,8 @@ export default class PecEmailService {
     static getPecEmails = (callback, errCallback, queryParams) => {
         NetworkService.get(`${API_BASE_URL}/pecMail`, callback, errCallback, queryParams);
     };
+
+    static doUserAction = (callback, errCallback, queryParams) => {
+        NetworkService.post(`${API_BASE_URL}/pecMail/userAction`, {}, callback, errCallback, queryParams);
+    };
 }