- re added tables with pagination;

src/helpers/getQueryParamsForPaginatedEndpoint.js

@@ -1,9 +1,9 @@
 import { isEmpty, pathOr } from 'ramda';
 import formatDateString from './formatDateString';
 
-const getQueryParamsForPaginatedEndpoint = (lazyState, statuses) => {
+const getQueryParamsForPaginatedEndpoint = (lazyState, statuses, sortByCol = 'applicationId') => {
     let sortBy = {
-        columnName: 'applicationId',
+        columnName: sortByCol,
         sortDesc: true
     };
 
@@ -13,6 +13,7 @@ const getQueryParamsForPaginatedEndpoint = (lazyState, statuses) => {
             sortDesc: lazyState.sortOrder === -1
         }
     }
+
     return {
         globalFilters: {
             page: lazyState.page ? lazyState.page + 1 : 1,
@@ -22,9 +23,10 @@ const getQueryParamsForPaginatedEndpoint = (lazyState, statuses) => {
         status: statuses,
         filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
             const value = pathOr('', ['filters', cur, 'value'], lazyState);
+            const matchMode = pathOr('', ['filters', cur, 'matchMode'], lazyState);
             if (!isEmpty(value)) {
                 acc[cur] = typeof value.getMonth === 'function'
-                    ? formatDateString(value)
+                    ? {value: formatDateString(value), matchMode}
                     : lazyState.filters[cur];
             }
             return acc;

src/pages/Bandi/components/AllBandiTableAsync/index.js

@@ -0,0 +1,181 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// api
+import BandoService from '../../../../service/bando-service';
+
+// tools
+import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
+import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+
+// components
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { Calendar } from 'primereact/calendar';
+
+const AllBandiTableAsync = () => {
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [items, setItems] = useState(null);
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 5,
+        page: 0,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            name: { value: null, matchMode: 'contains' },
+            startDate: { value: null, matchMode: 'date_is' },
+            endDate: { value: null, matchMode: 'date_is' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+    const statuses = [];
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    };
+
+    const onFilter = useCallback((event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    }, [lazyState]);
+
+    const getCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            const { body, totalRecords,
+                //currentPage, totalPages, pageSize
+            } = resp.data;
+            setTotalRecordsNum(totalRecords);
+            setItems(getFormattedData(body));
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = () => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedData = (data) => {
+        return [...(data || [])].map((d) => {
+            d.startDate = new Date(d.dates[0]);
+            d.endDate = new Date(d.dates[1]);
+
+            return d;
+        });
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <Link to={`/bandi/${rowData.id}`}>
+            <Button severity="info" label={__('Mostra', 'gepafin')} icon="pi pi-eye" size="small" iconPos="right" />
+        </Link>
+    }
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses}
+                         onChange={(e) => {
+                             options.filterCallback(e.value, options.index)
+                             const filters = { ...lazyState.filters };
+                             if (e.value) {
+                                 filters['status'] = { value: e.value, matchMode: 'equals' };
+                             } else {
+                                 delete filters['status'];
+                             }
+                             setLazyState({ ...lazyState, filters, first: 0 });
+                         }}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
+                         showClear/>;
+    };
+
+    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 dateStartBodyTemplate = (rowData) => {
+        const startTimeObj = getTimeParsedFromString(rowData.startTime);
+        return getFormattedDateString(rowData.startDate) + ' ' + getTimeFromISOstring(startTimeObj);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        const endTimeObg = getTimeParsedFromString(rowData.endTime);
+        return getFormattedDateString(rowData.endDate)  + ' ' + getTimeFromISOstring(endTimeObg);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
+    }, [lazyState]);
+
+    return (
+        <div className="appPageSection__table">
+            <DataTable
+                value={items} stripedRows showGridlines
+                lazy filterDisplay="menu" dataKey="id" paginator
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
+                emptyMessage={translationStrings.emptyMessage}>
+                <Column field="name"
+                        sortable
+                        filterField="name" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        header={__('Nome Bando', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="startDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="endDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate}/>
+                <Column field="status"
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        header={__('Stato', 'gepafin')}
+                        style={{ minWidth: '7rem' }}
+                        body={statusBodyTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default AllBandiTableAsync;

src/pages/Bandi/index.js

@@ -3,8 +3,8 @@ import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
 
 // components
-import AllBandiTable from './components/AllBandiTable';
 import { Button } from 'primereact/button';
+import AllBandiTableAsync from './components/AllBandiTableAsync';
 
 const Bandi = () => {
     const navigate = useNavigate();
@@ -28,7 +28,7 @@ const Bandi = () => {
                         label={__('Crea nuovo bando')} icon="pi pi-plus" iconPos="right"/>
                 </div>
 
-                <AllBandiTable/>
+                <AllBandiTableAsync/>
             </div>
         </div>
     )

src/pages/BandiPreInstructor/components/AllBandiPreInstructorTableAsync/index.js

@@ -0,0 +1,181 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// api
+import BandoService from '../../../../service/bando-service';
+
+// tools
+import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
+import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+
+// components
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { Calendar } from 'primereact/calendar';
+
+const AllBandiPreInstructorTableAsync = () => {
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [items, setItems] = useState(null);
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 5,
+        page: 0,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            name: { value: null, matchMode: 'contains' },
+            startDate: { value: null, matchMode: 'date_is' },
+            endDate: { value: null, matchMode: 'date_is' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+    const statuses = [];
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    };
+
+    const onFilter = useCallback((event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    }, [lazyState]);
+
+    const getCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            const { body, totalRecords,
+                //currentPage, totalPages, pageSize
+            } = resp.data;
+            setTotalRecordsNum(totalRecords);
+            setItems(getFormattedData(body));
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = () => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedData = (data) => {
+        return [...(data || [])].map((d) => {
+            d.startDate = new Date(d.dates[0]);
+            d.endDate = new Date(d.dates[1]);
+
+            return d;
+        });
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <Link to={`/bandi/${rowData.id}`}>
+            <Button severity="info" label={__('Mostra', 'gepafin')} icon="pi pi-eye" size="small" iconPos="right" />
+        </Link>
+    }
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses}
+                         onChange={(e) => {
+                             options.filterCallback(e.value, options.index)
+                             const filters = { ...lazyState.filters };
+                             if (e.value) {
+                                 filters['status'] = { value: e.value, matchMode: 'equals' };
+                             } else {
+                                 delete filters['status'];
+                             }
+                             setLazyState({ ...lazyState, filters, first: 0 });
+                         }}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
+                         showClear/>;
+    };
+
+    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 dateStartBodyTemplate = (rowData) => {
+        const startTimeObj = getTimeParsedFromString(rowData.startTime);
+        return getFormattedDateString(rowData.startDate) + ' ' + getTimeFromISOstring(startTimeObj);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        const endTimeObg = getTimeParsedFromString(rowData.endTime);
+        return getFormattedDateString(rowData.endDate)  + ' ' + getTimeFromISOstring(endTimeObg);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
+    }, [lazyState]);
+
+    return (
+        <div className="appPageSection__table">
+            <DataTable
+                value={items} stripedRows showGridlines
+                lazy filterDisplay="menu" dataKey="id" paginator
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
+                emptyMessage={translationStrings.emptyMessage}>
+                <Column field="name"
+                        sortable
+                        filterField="name" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        header={__('Nome Bando', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="startDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="endDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate}/>
+                <Column field="status"
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        header={__('Stato', 'gepafin')}
+                        style={{ minWidth: '7rem' }}
+                        body={statusBodyTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default AllBandiPreInstructorTableAsync;

src/pages/BandiPreInstructor/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 
 // components
-import AllBandiTable from './components/AllBandiTable';
+import AllBandiPreInstructorTableAsync from './components/AllBandiPreInstructorTableAsync';
 
 const BandiPreInstructor = () => {
     return(
@@ -14,7 +14,7 @@ const BandiPreInstructor = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <AllBandiTable/>
+                <AllBandiPreInstructorTableAsync/>
             </div>
         </div>
     )

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { is, pathOr, isEmpty } from 'ramda';
+import { is } from 'ramda';
 
 // store
 import { useStore } from '../../../../store';
@@ -8,18 +8,22 @@ import { useStore } from '../../../../store';
 // api
 import ApplicationService from '../../../../service/application-service';
 
+// tools
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+
 // components
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { ProgressBar } from 'primereact/progressbar';
 import { Button } from 'primereact/button';
-import ProperBandoLabel from '../../../../components/ProperBandoLabel';
 import { Link } from 'react-router-dom';
-import translationStrings from '../../../../translationStringsForComponents';
 import { Dropdown } from 'primereact/dropdown';
 import { Tag } from 'primereact/tag';
-import getBandoLabel from '../../../../helpers/getBandoLabel';
+
-import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import translationStrings from '../../../../translationStringsForComponents';
 
 const DraftApplicationsTableAsync = () => {
     const chosenCompanyId = useStore().main.chosenCompanyId();
@@ -41,34 +45,7 @@ const DraftApplicationsTableAsync = () => {
     });
     const statuses = ['DRAFT', 'AWAITING', 'READY'];
 
-    const getPaginationQuery = useCallback(() => {
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
-        let sortBy = {
-            columnName: "ID",
-            sortDesc: true
-        };
-
-        if (lazyState.sortField) {
-            sortBy = {
-                columnName: lazyState.sortField,
-                sortDesc: lazyState.sortOrder === -1
-            }
-        }
-        return {
-            globalFilters: {
-                page: lazyState.page ? lazyState.page + 1 : 1,
-                limit: lazyState.rows,
-                sortBy
-            },
-            status: statuses,
-            filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
-                const value = pathOr('', ['filters', cur, 'value'], lazyState);
-                if (!isEmpty(value)) {
-                    acc[cur] = lazyState.filters[cur];
-                }
-                return acc;
-            }, {}),
-        }
-    }, [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { isEmpty, pathOr } from 'ramda';
 import { Link } from 'react-router-dom';
 
 import translationStrings from '../../../../translationStringsForComponents';
@@ -14,6 +13,7 @@ import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
 import getFormattedDateString from '../../../../helpers/getFormattedDateString';
 import getBandoLabel from '../../../../helpers/getBandoLabel';
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 // components
 import { DataTable } from 'primereact/datatable';
@@ -43,34 +43,7 @@ const LatestBandiTableAsync = () => {
     });
     const statuses = ['PUBLISH'];
 
-    const getPaginationQuery = useCallback(() => {
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
-        let sortBy = {
-            columnName: "ID",
-            sortDesc: true
-        };
-
-        if (lazyState.sortField) {
-            sortBy = {
-                columnName: lazyState.sortField,
-                sortDesc: lazyState.sortOrder === -1
-            }
-        }
-        return {
-            globalFilters: {
-                page: lazyState.page ? lazyState.page + 1 : 1,
-                limit: lazyState.rows,
-                sortBy
-            },
-            status: statuses,
-            filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
-                const value = pathOr('', ['filters', cur, 'value'], lazyState);
-                if (!isEmpty(value)) {
-                    acc[cur] = lazyState.filters[cur];
-                }
-                return acc;
-            }, {}),
-        }
-    }, [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);

src/pages/Dashboard/index.js

@@ -11,12 +11,9 @@ import DashboardService from '../../service/dashboard-service';
 import { Button } from 'primereact/button';
 import ChartDomandePerBando from '../../components/ChartDomandePerBando';
 import ChartStatoDomande from '../../components/ChartStatoDomande';
-/*import LatestBandiTableAsync from './components/LatestBandiTableAsync';
+import LatestBandiTableAsync from './components/LatestBandiTableAsync';
 import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync';
-import DraftApplicationsTableAsync from './components/DraftApplicationsTableAsync';*/
+import DraftApplicationsTableAsync from './components/DraftApplicationsTableAsync';
-import LatestBandiTable from './components/LatestBandiTable';
-import DraftApplicationsTable from './components/DraftApplicationsTable';
-import AllDomandeTable from '../Domande/components/AllDomandeTable';
 
 const REACT_APP_HUB_ID = process.env.REACT_APP_HUB_ID;
 
@@ -142,24 +139,21 @@ const Dashboard = () => {
 
             <div className="appPageSection">
                 <h2>{__('Ultimi bandi pubblicati', 'gepafin')}</h2>
-                {/*<LatestBandiTableAsync/>*/}
+                <LatestBandiTableAsync/>
-                <LatestBandiTable/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Ultime domande pubblicate', 'gepafin')}</h2>
-                {/*<AllDomandeTableAsync/>*/}
+                <AllDomandeTableAsync/>
-                <AllDomandeTable/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Domande in bozza', 'gepafin')}</h2>
-                {/*<DraftApplicationsTableAsync/>*/}
+                <DraftApplicationsTableAsync/>
-                <DraftApplicationsTable/>
             </div>
 
             <div className="appPage__spacer"></div>

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

@@ -0,0 +1,246 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// api
+import BandoService from '../../../../service/bando-service';
+
+// tools
+import getTimeParsedFromString from '../../../../helpers/getTimeParsedFromString';
+import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+
+// components
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { Calendar } from 'primereact/calendar';
+import { isNil } from 'ramda';
+import { storeGet } from '../../../../store';
+import PreferredBandoService from '../../../../service/preferred-bando-service';
+import set404FromErrorResponse from '../../../../helpers/set404FromErrorResponse';
+
+const LatestBandiBeneficiarioTableAsync = () => {
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [items, setItems] = useState(null);
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 5,
+        page: 0,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            name: { value: null, matchMode: 'contains' },
+            startDate: { value: null, matchMode: 'date_is' },
+            endDate: { value: null, matchMode: 'date_is' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+    const statuses = ['PUBLISH'];
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    };
+
+    const onFilter = useCallback((event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    }, [lazyState]);
+
+    const getCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            const { body, totalRecords,
+                //currentPage, totalPages, pageSize
+            } = resp.data;
+            setTotalRecordsNum(totalRecords);
+            setItems(getFormattedData(body));
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = () => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedData = (data) => {
+        return [...(data || [])].map((d) => {
+            d.startDate = new Date(d.dates[0]);
+            d.endDate = new Date(d.dates[1]);
+
+            return d;
+        });
+    };
+
+    const addToFavourites = (id, preferredId) => {
+        const companyId = storeGet.main.chosenCompanyId()
+        const data = {
+            companyId,
+            callId: id
+        }
+        setLocalAsyncRequest(true);
+        if (preferredId && preferredId !== 0) {
+            PreferredBandoService.deleteFromPreferred(preferredId, (data) => removeFavCallback(data, id), errToggleFavCallback);
+        } else {
+            PreferredBandoService.addToPreferred(data, addFavCallback, errToggleFavCallback);
+        }
+    }
+
+    const removeFavCallback = (data, id) => {
+        if (data.status === 'SUCCESS') {
+            const newItems = items.map((o) => {
+                if (o.id === id) {
+                    return {
+                        ...o,
+                        preferredCallId: null
+                    }
+                } else {
+                    return o;
+                }
+            });
+            setItems(newItems)
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const addFavCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            const newItems = items.map((o) => {
+                if (o.id === data.data.callId) {
+                    return {
+                        ...o,
+                        preferredCallId: data.data.id
+                    }
+                } else {
+                    return o;
+                }
+            });
+            setItems(newItems)
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errToggleFavCallback = (data) => {
+        set404FromErrorResponse(data);
+        setLocalAsyncRequest(false);
+    }
+
+    const actionsBodyTemplate = (rowData) => {
+        return <div className="appPageSection__tableActions">
+            <button type="button"
+                    className="appPageSection__addToFavourites"
+                    data-active={!isNil(rowData.preferredCallId)}
+                    onClick={() => addToFavourites(rowData.id, rowData.preferredCallId)}>
+                <i className="pi pi-heart" style={{ fontSize: '1rem' }}></i>
+            </button>
+            <Link to={`/bandi/${rowData.id}`}>
+                <Button severity="info" label={__('Partecipa', 'gepafin')} icon="pi pi-arrow-right" size="small"
+                        iconPos="right"/>
+            </Link></div>
+    }
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses}
+                         onChange={(e) => {
+                             options.filterCallback(e.value, options.index)
+                             const filters = { ...lazyState.filters };
+                             if (e.value) {
+                                 filters['status'] = { value: e.value, matchMode: 'equals' };
+                             } else {
+                                 delete filters['status'];
+                             }
+                             setLazyState({ ...lazyState, filters, first: 0 });
+                         }}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
+                         showClear/>;
+    };
+
+    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 dateStartBodyTemplate = (rowData) => {
+        const startTimeObj = getTimeParsedFromString(rowData.startTime);
+        return getFormattedDateString(rowData.startDate) + ' ' + getTimeFromISOstring(startTimeObj);
+    };
+
+    const dateEndBodyTemplate = (rowData) => {
+        const endTimeObg = getTimeParsedFromString(rowData.endTime);
+        return getFormattedDateString(rowData.endDate)  + ' ' + getTimeFromISOstring(endTimeObg);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
+    }, [lazyState]);
+
+    return (
+        <div className="appPageSection__table">
+            <DataTable
+                value={items} stripedRows showGridlines
+                lazy filterDisplay="menu" dataKey="id" paginator
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
+                emptyMessage={translationStrings.emptyMessage}>
+                <Column field="name"
+                        sortable
+                        filterField="name" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        header={__('Nome Bando', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data Pubblicazione', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="startDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateStartBodyTemplate}/>
+                <Column header={__('Data Scadenza', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="endDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate}/>
+                <Column field="status"
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        header={__('Stato', 'gepafin')}
+                        style={{ minWidth: '7rem' }}
+                        body={statusBodyTemplate} />
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default LatestBandiBeneficiarioTableAsync;

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

@@ -0,0 +1,250 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { is } from 'ramda';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// store
+import { useStore } from '../../../../store';
+
+// api
+import ApplicationService from '../../../../service/application-service';
+
+//
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+import isDateTimeInPast from '../../../../helpers/isDateTimeInPast';
+
+// components
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { Calendar } from 'primereact/calendar';
+import { confirmPopup, ConfirmPopup } from 'primereact/confirmpopup';
+import { ProgressBar } from 'primereact/progressbar';
+
+const MyLatestSubmissionsTableAsync = () => {
+    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const companies = useStore().main.companies();
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [items, setItems] = useState(null);
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 5,
+        page: 0,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            id: { value: null, matchMode: 'equals' },
+            callTitle: { value: null, matchMode: 'contains' },
+            companyName: { value: null, matchMode: 'contains' },
+            submissionDate: { value: null, matchMode: 'date_is' },
+            assignedUserName: { value: null, matchMode: 'equals' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+
+    const statuses = ['DRAFT', 'AWAITING', 'READY'];
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    };
+
+    const onFilter = useCallback((event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    }, [lazyState]);
+
+    const getCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            const { body, totalRecords,
+                //currentPage, totalPages, pageSize
+            } = resp.data;
+            setTotalRecordsNum(totalRecords);
+            setItems(getFormattedData(body));
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = () => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedData = (data) => {
+        return data.map((d) => {
+            d.callEndDate = is(String, d.callEndDate) ? new Date(d.callEndDate) : (d.callEndDate ? d.callEndDate : '');
+            d.modifiedDate = is(String, d.modifiedDate) ? new Date(d.modifiedDate) : (d.modifiedDate ? d.modifiedDate : '');
+            return d;
+        });
+    };
+
+    const confirmDelete = (event, id) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: __('Sei sicuro di voler rimuovere la domanda?', 'gepafin'),
+            acceptLabel: __('Si', 'gepafin'),
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept: () => {
+                handleDeleteApplication(id);
+            },
+            reject: () => {
+            }
+        });
+    };
+
+    const handleDeleteApplication = (id) => {
+        setLocalAsyncRequest(true);
+        ApplicationService.deleteApplication(id, (resp) => delApplCallback(resp, id), errDelApplCallback)
+    }
+
+    const delApplCallback = (resp, id) => {
+        if (resp.status === 'SUCCESS') {
+            const newItems = items.filter(o => o.id !== id);
+            setItems(newItems);
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errDelApplCallback = (data) => {
+        setLocalAsyncRequest(false);
+    }
+
+    const actionsBodyTemplate = (rowData) => {
+        const isCallExpired = isDateTimeInPast(rowData.callEndDate, rowData.callEndTime);
+        return <div className="appPageSection__tableActions lessGap">
+            {'DRAFT' === rowData.status && !isCallExpired
+                ? <Link to={`/imieibandi/${rowData.id}`}>
+                    <Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small"
+                            iconPos="right"/>
+                </Link>
+                : null}
+            {'DRAFT' !== rowData.status || isCallExpired
+                ? <Link to={`/imieibandi/${rowData.id}`}>
+                    <Button severity="info" label={__('Mostra', 'gepafin')} icon="pi pi-eye" size="small"
+                            iconPos="right"/>
+                </Link>
+                : null}
+            <ConfirmPopup/>
+            <Button severity="danger"
+                    onClick={(event) => confirmDelete(event, rowData.id)}
+                    label={__('Cancella', 'gepafin')}
+                    icon="pi pi-trash"
+                    size="small"
+                    iconPos="right"/>
+        </div>
+    }
+
+    const progressBodyTemplate = (options) => {
+        return <ProgressBar value={options.progress} color={'#64748B'}></ProgressBar>;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses}
+                         onChange={(e) => {
+                             options.filterCallback(e.value, options.index)
+                             const filters = { ...lazyState.filters };
+                             if (e.value) {
+                                 filters['status'] = { value: e.value, matchMode: 'equals' };
+                             } else {
+                                 delete filters['status'];
+                             }
+                             setLazyState({ ...lazyState, filters, first: 0 });
+                         }}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
+                         showClear/>;
+    };
+
+    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 dateEndBodyTemplate = (rowData) => {
+        return getFormattedDateString(rowData.callEndDate);
+    };
+
+    const dateModifyBodyTemplate = (rowData) => {
+        return getFormattedDateString(rowData.modifiedDate);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        ApplicationService.getApplicationsPaginated(paginationQuery, getCallback, errGetCallbacks, [
+            ['companyId', chosenCompanyId]
+        ]);
+    }, [lazyState, chosenCompanyId, companies]);
+
+    return (
+        <div className="appPageSection__table">
+            <DataTable
+                value={items} stripedRows showGridlines
+                lazy filterDisplay="menu" dataKey="id" paginator
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
+                emptyMessage={translationStrings.emptyMessage}>
+                <Column field="callTitle" header={__('Bando', 'gepafin')}
+                        filterField="callTitle" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '10rem' }}/>
+                <Column field="companyName" header={__('Azienda Beneficiaria', 'gepafin')}
+                        filterField="companyName" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Scadenza', 'gepafin')}
+                        filterField="callEndDate" dataType="date"
+                        style={{ minWidth: '8rem' }}
+                        body={dateEndBodyTemplate}
+                        filter
+                        filterElement={dateFilterTemplate}/>
+                <Column header={__('Ultima modifica', 'gepafin')}
+                        filterField="modifiedDate" dataType="date"
+                        style={{ minWidth: '8rem' }}
+                        body={dateModifyBodyTemplate}
+                        filter
+                        filterElement={dateFilterTemplate}/>
+                <Column field="status" header={__('Stato', 'gepafin')}
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={statusBodyTemplate}/>
+                <Column header={__('Progressi', 'gepafin')}
+                        style={{ minWidth: '10rem' }} field="progress" body={progressBodyTemplate}/>
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default MyLatestSubmissionsTableAsync;

src/pages/DashboardBeneficiario/index.js

@@ -5,16 +5,16 @@ import { head, isEmpty, pathOr } from 'ramda';
 import NumberFlow from '@number-flow/react';
 
 // store
-import { storeSet, useStore } from '../../store';
+import { useStore } from '../../store';
 
 // api
 import DashboardService from '../../service/dashboard-service';
 
 // components
-import MyLatestSubmissionsTable from './components/MyLatestSubmissionsTable';
 import { Button } from 'primereact/button';
 import ErrorBoundary from '../../components/ErrorBoundary';
-import LatestBandiTableAsync from '../Dashboard/components/LatestBandiTableAsync';
+import LatestBandiBeneficiarioTableAsync from './components/LatestBandiBeneficiarioTableAsync';
+import MyLatestSubmissionsTableAsync from './components/MyLatestSubmissionsTableAsync';
 
 const DashboardBeneficiario = () => {
     const navigate = useNavigate();
@@ -88,7 +88,7 @@ const DashboardBeneficiario = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande in lavorazione', 'gepafin')}</h2>
-                <ErrorBoundary><MyLatestSubmissionsTable/></ErrorBoundary>
+                <ErrorBoundary><MyLatestSubmissionsTableAsync/></ErrorBoundary>
             </div>
 
             <div className="appPage__spacer"></div>
@@ -108,7 +108,7 @@ const DashboardBeneficiario = () => {
 
             <div className="appPageSection">
                 <h2>{__('Bandi disponibili', 'gepafin')}</h2>
-                <ErrorBoundary><LatestBandiTableAsync/></ErrorBoundary>
+                <ErrorBoundary><LatestBandiBeneficiarioTableAsync/></ErrorBoundary>
             </div>
 
             <div className="appPage__spacer"></div>

src/pages/DashboardInstructorManager/components/LatestBandiTableInstructorManagerAsync/index.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { isEmpty, pathOr } from 'ramda';
 
 import translationStrings from '../../../../translationStringsForComponents';
 
@@ -13,6 +12,7 @@ import getTimeFromISOstring from '../../../../helpers/getTimeFromISOstring';
 import getFormattedDateString from '../../../../helpers/getFormattedDateString';
 import getBandoLabel from '../../../../helpers/getBandoLabel';
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 // components
 import { DataTable } from 'primereact/datatable';
@@ -41,34 +41,7 @@ const LatestBandiTableInstructorManagerAsync = () => {
     });
     const statuses = ['PUBLISH'];
 
-    const getPaginationQuery = useCallback(() => {
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
-        let sortBy = {
-            columnName: "ID",
-            sortDesc: true
-        };
-
-        if (lazyState.sortField) {
-            sortBy = {
-                columnName: lazyState.sortField,
-                sortDesc: lazyState.sortOrder === -1
-            }
-        }
-        return {
-            globalFilters: {
-                page: lazyState.page ? lazyState.page + 1 : 1,
-                limit: lazyState.rows,
-                sortBy
-            },
-            status: statuses,
-            filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
-                const value = pathOr('', ['filters', cur, 'value'], lazyState);
-                if (!isEmpty(value)) {
-                    acc[cur] = lazyState.filters[cur];
-                }
-                return acc;
-            }, {}),
-        }
-    }, [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);

src/pages/DashboardInstructorManager/components/MieDomandeTableInstructorManagerAsync/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { head, is, isEmpty, pathOr } from 'ramda';
+import { head, is } from 'ramda';
 import { klona } from 'klona';
 
 import translationStrings from '../../../../translationStringsForComponents';
@@ -25,6 +25,7 @@ import { Tag } from 'primereact/tag';
 import { Calendar } from 'primereact/calendar';
 import { Button } from 'primereact/button';
 import { Link, useNavigate } from 'react-router-dom';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
@@ -48,38 +49,11 @@ const MieDomandeTableInstructorManagerAsync = ({ userId = null, statuses = [] })
             companyName: { value: null, matchMode: 'contains' },
             submissionDate: { value: null, matchMode: 'date_is' },
             evaluationEndDate: { value: null, matchMode: 'date_is' },
-            status: { value: null, matchMode: 'equals' }
+            applicationStatus: { value: null, matchMode: 'equals' }
         }
     });
 
-    const getPaginationQuery = useCallback(() => {
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'applicationId'), [lazyState]);
-        let sortBy = {
-            columnName: "ID",
-            sortDesc: true
-        };
-
-        if (lazyState.sortField) {
-            sortBy = {
-                columnName: lazyState.sortField,
-                sortDesc: lazyState.sortOrder === -1
-            }
-        }
-        return {
-            globalFilters: {
-                page: lazyState.page ? lazyState.page + 1 : 1,
-                limit: lazyState.rows,
-                sortBy
-            },
-            status: statuses,
-            filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
-                const value = pathOr('', ['filters', cur, 'value'], lazyState);
-                if (!isEmpty(value)) {
-                    acc[cur] = lazyState.filters[cur];
-                }
-                return acc;
-            }, {}),
-        }
-    }, [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);
@@ -121,7 +95,7 @@ const MieDomandeTableInstructorManagerAsync = ({ userId = null, statuses = [] })
     };
 
     const statusBodyTemplate = (rowData) => {
-        return <ProperBandoLabel status={rowData.status}/>;
+        return <ProperBandoLabel status={rowData.applicationStatus}/>;
     };
 
     const statusItemTemplate = (option) => {

src/pages/DashboardInstructorManager/index.js

@@ -11,12 +11,9 @@ import DashboardService from '../../service/dashboard-service';
 import { Button } from 'primereact/button';
 import ChartDomandePerBando from '../../components/ChartDomandePerBando';
 import ChartStatoDomande from '../../components/ChartStatoDomande';
-/*import LatestBandiTableInstructorManagerAsync from './components/LatestBandiTableInstructorManagerAsync';
+import LatestBandiTableInstructorManagerAsync from './components/LatestBandiTableInstructorManagerAsync';
 import DraftApplicationsTableAsync from '../Dashboard/components/DraftApplicationsTableAsync';
-import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync';*/
+import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync';
-import LatestBandiTableInstructorManager from './components/LatestBandiTableInstructorManager';
-import AllDomandeTable from '../Domande/components/AllDomandeTable';
-import DraftApplicationsTable from '../Dashboard/components/DraftApplicationsTable';
 
 const DashboardInstructorManager = () => {
     const navigate = useNavigate();
@@ -112,24 +109,21 @@ const DashboardInstructorManager = () => {
 
             <div className="appPageSection">
                 <h2>{__('Ultimi bandi pubblicati', 'gepafin')}</h2>
-                {/*<LatestBandiTableInstructorManagerAsync/>*/}
+                <LatestBandiTableInstructorManagerAsync/>
-                <LatestBandiTableInstructorManager/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Ultime domande pubblicate', 'gepafin')}</h2>
-                {/*<AllDomandeTableAsync/>*/}
+                <AllDomandeTableAsync/>
-                <AllDomandeTable/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Domande in bozza', 'gepafin')}</h2>
-                {/*<DraftApplicationsTableAsync/>*/}
+                <DraftApplicationsTableAsync/>
-                <DraftApplicationsTable/>
             </div>
 
             <div className="appPage__spacer"></div>

src/pages/DashboardPreInstructor/components/DomandeTablePreInstructorAsync/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { head, is, isEmpty, pathOr } from 'ramda';
+import { head, is } from 'ramda';
 import { klona } from 'klona';
 
 import translationStrings from '../../../../translationStringsForComponents';
@@ -25,6 +25,7 @@ import { Tag } from 'primereact/tag';
 import { Calendar } from 'primereact/calendar';
 import { Button } from 'primereact/button';
 import { Link, useNavigate } from 'react-router-dom';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 
 const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
@@ -48,38 +49,11 @@ const DomandeTablePreInstructorAsync = ({ userId = null, statuses = [] }) => {
             companyName: { value: null, matchMode: 'contains' },
             submissionDate: { value: null, matchMode: 'date_is' },
             evaluationEndDate: { value: null, matchMode: 'date_is' },
-            status: { value: null, matchMode: 'equals' }
+            applicationStatus: { value: null, matchMode: 'equals' }
         }
     });
 
-    const getPaginationQuery = useCallback(() => {
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'applicationId'), [lazyState]);
-        let sortBy = {
-            columnName: "ID",
-            sortDesc: true
-        };
-
-        if (lazyState.sortField) {
-            sortBy = {
-                columnName: lazyState.sortField,
-                sortDesc: lazyState.sortOrder === -1
-            }
-        }
-        return {
-            globalFilters: {
-                page: lazyState.page ? lazyState.page + 1 : 1,
-                limit: lazyState.rows,
-                sortBy
-            },
-            status: statuses,
-            filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
-                const value = pathOr('', ['filters', cur, 'value'], lazyState);
-                if (!isEmpty(value)) {
-                    acc[cur] = lazyState.filters[cur];
-                }
-                return acc;
-            }, {}),
-        }
-    }, [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);
@@ -121,7 +95,7 @@ const DomandeTablePreInstructorAsync = ({ userId = null, statuses = [] }) => {
     };
 
     const statusBodyTemplate = (rowData) => {
-        return <ProperBandoLabel status={rowData.status}/>;
+        return <ProperBandoLabel status={rowData.applicationStatus}/>;
     };
 
     const statusItemTemplate = (option) => {

src/pages/DashboardPreInstructor/index.js

@@ -12,8 +12,7 @@ import DashboardService from '../../service/dashboard-service';
 
 // components
 import { Button } from 'primereact/button';
-//import DomandeTablePreInstructorAsync from './components/DomandeTablePreInstructorAsync';
+import DomandeTablePreInstructorAsync from './components/DomandeTablePreInstructorAsync';
-import PreInstructorDomandeTable from './components/PreInstructorDomandeTable';
 
 const DashboardPreInstructor = () => {
     const navigate = useNavigate();
@@ -111,8 +110,7 @@ const DashboardPreInstructor = () => {
 
             <div className="appPageSection">
                 <h2>{__('Coda di lavoro', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
+                <DomandeTablePreInstructorAsync statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
-                {/*<DomandeTablePreInstructorAsync statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>*/}
             </div>
 
             <div className="appPage__spacer"></div>

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { is, isEmpty, pathOr } from 'ramda';
+import { is } from 'ramda';
 import { Link, useLocation } from 'react-router-dom';
 
 import translationStrings from '../../../../translationStringsForComponents';
@@ -12,6 +12,7 @@ import ApplicationService from '../../../../service/application-service';
 import getBandoLabel from '../../../../helpers/getBandoLabel';
 import getBandoSeverity from '../../../../helpers/getBandoSeverity';
 import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 // components
 import { DataTable } from 'primereact/datatable';
@@ -34,43 +35,17 @@ const AllDomandeTableAsync = ({ openDialogFn, updaterString = '' }) => {
         sortField: null,
         sortOrder: null,
         filters: {
-            id: { value: null, matchMode: 'contains' },
+            id: { value: null, matchMode: 'equals' },
             callTitle: { value: null, matchMode: 'contains' },
             companyName: { value: null, matchMode: 'contains' },
             submissionDate: { value: null, matchMode: 'date_is' },
+            assignedUserName: { value: null, matchMode: 'equals' },
             status: { value: null, matchMode: 'equals' }
         }
     });
-    const statuses = ['SUBMIT', 'EVALUATION', 'SOCCORSO'];
+    const statuses = ['SUBMIT', 'EVALUATION', 'SOCCORSO', 'APPOINTMENT', 'NDG', 'ADMISSIBLE', 'TECHNICAL_EVALUATION'];
 
-    const getPaginationQuery = useCallback(() => {
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
-        let sortBy = {
-            columnName: "ID",
-            sortDesc: true
-        };
-
-        if (lazyState.sortField) {
-            sortBy = {
-                columnName: lazyState.sortField,
-                sortDesc: lazyState.sortOrder === -1
-            }
-        }
-        return {
-            globalFilters: {
-                page: lazyState.page ? lazyState.page + 1 : 1,
-                limit: lazyState.rows,
-                sortBy
-            },
-            status: statuses,
-            filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
-                const value = pathOr('', ['filters', cur, 'value'], lazyState);
-                if (!isEmpty(value)) {
-                    acc[cur] = lazyState.filters[cur];
-                }
-                return acc;
-            }, {}),
-        }
-    }, [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);
@@ -182,7 +157,7 @@ const AllDomandeTableAsync = ({ openDialogFn, updaterString = '' }) => {
                 <Column field="id" header={__('ID domanda', 'gepafin')}
                         sortable
                         filterField="id" filter
-                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterMatchModeOptions={translationStrings.numberFilterOptions}
                         filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '6rem' }}/>
                 <Column field="protocolNumber" header={__('Protocollo', 'gepafin')}
@@ -204,6 +179,8 @@ const AllDomandeTableAsync = ({ openDialogFn, updaterString = '' }) => {
                         style={{ minWidth: '8rem' }}
                         body={dateAppliedBodyTemplate}/>
                 <Column field="assignedUserName" header={__('Assegnato', 'gepafin')}
+                        filterField="assignedUserName" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
                         style={{ minWidth: '8rem' }}/>
                 <Column field="status" header={__('Stato', 'gepafin')}
                         filterElement={statusFilterTemplate} filter

src/pages/Domande/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { __ } from '@wordpress/i18n';
 import { isEmpty, pathOr } from 'ramda';
+import NumberFlow from '@number-flow/react';
 
 // api
 import UserService from '../../service/user-service';
@@ -19,11 +20,8 @@ import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
 import { classNames } from 'primereact/utils';
 import { Dropdown } from 'primereact/dropdown';
-import NumberFlow from '@number-flow/react';
+import DraftApplicationsTableAsync from '../Dashboard/components/DraftApplicationsTableAsync';
-/*import DraftApplicationsTableAsync from '../Dashboard/components/DraftApplicationsTableAsync';
+import AllDomandeTableAsync from './components/AllDomandeTableAsync';
-import AllDomandeTableAsync from './components/AllDomandeTableAsync';*/
-import DraftApplicationsTable from '../Dashboard/components/DraftApplicationsTable';
-import AllDomandeTable from './components/AllDomandeTable';
 
 const Domande = () => {
     const [loading, setLoading] = useState(false);
@@ -168,8 +166,7 @@ const Domande = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande pubblicate', 'gepafin')}</h2>
-                {/*<AllDomandeTableAsync openDialogFn={openAssignDialog} updaterString={updaterString}/>*/}
+                <AllDomandeTableAsync openDialogFn={openAssignDialog} updaterString={updaterString}/>
-                <AllDomandeTable openDialogFn={openAssignDialog} updaterString={updaterString}/>
             </div>
 
             <div className="appPage__spacer"></div>
@@ -227,8 +224,7 @@ const Domande = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande in bozza', 'gepafin')}</h2>
-                {/*<DraftApplicationsTableAsync/>*/}
+                <DraftApplicationsTableAsync/>
-                <DraftApplicationsTable/>
             </div>
 
             <Dialog

src/pages/DomandeArchive/index.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { __ } from '@wordpress/i18n';
 
 // components
-//import AllDomandeArchiveTable from './components/AllDomandeArchiveTable';
+import DomandeTablePreInstructorAsync from '../DashboardPreInstructor/components/DomandeTablePreInstructorAsync';
-import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
 
 const DomandeArchive = () => {
     return (
@@ -16,7 +15,7 @@ const DomandeArchive = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande completate', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['CLOSE']} userId={0}/>
+                <DomandeTablePreInstructorAsync statuses={['CLOSE']} userId={0}/>
             </div>
         </div>
     )

src/pages/DomandeArchivePreInstructor/index.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { useStore } from '../../store';
 
 // components
-import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
+import DomandeTablePreInstructorAsync from '../DashboardPreInstructor/components/DomandeTablePreInstructorAsync';
 
 const DomandeArchivePreInstructor = () => {
     const userData = useStore().main.userData();
@@ -20,7 +20,7 @@ const DomandeArchivePreInstructor = () => {
 
             <div className="appPageSection">
                 <h2>{__('Domande completate', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['CLOSE']} userId={userData.id}/>
+                <DomandeTablePreInstructorAsync statuses={['CLOSE']} userId={userData.id}/>
             </div>
         </div>
     )

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

@@ -0,0 +1,200 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { __ } from '@wordpress/i18n';
+import { is } from 'ramda';
+import { Link } from 'react-router-dom';
+
+import translationStrings from '../../../../translationStringsForComponents';
+
+// store
+import { useStore } from '../../../../store';
+
+// api
+import ApplicationService from '../../../../service/application-service';
+
+//
+import getBandoLabel from '../../../../helpers/getBandoLabel';
+import getBandoSeverity from '../../../../helpers/getBandoSeverity';
+import getFormattedDateString from '../../../../helpers/getFormattedDateString';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
+
+// components
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import ProperBandoLabel from '../../../../components/ProperBandoLabel';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { Calendar } from 'primereact/calendar';
+
+const AllDomandeBeneficiarioTableAsync = ({ statuses }) => {
+    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const companies = useStore().main.companies();
+    const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
+    const [items, setItems] = useState(null);
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 5,
+        page: 0,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            id: { value: null, matchMode: 'equals' },
+            callTitle: { value: null, matchMode: 'contains' },
+            companyName: { value: null, matchMode: 'contains' },
+            submissionDate: { value: null, matchMode: 'date_is' },
+            assignedUserName: { value: null, matchMode: 'equals' },
+            status: { value: null, matchMode: 'equals' }
+        }
+    });
+
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    };
+
+    const onFilter = useCallback((event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    }, [lazyState]);
+
+    const getCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            const { body, totalRecords,
+                //currentPage, totalPages, pageSize
+            } = resp.data;
+            setTotalRecordsNum(totalRecords);
+            setItems(getFormattedData(body));
+        }
+        setLocalAsyncRequest(false);
+    }
+
+    const errGetCallbacks = () => {
+        setLocalAsyncRequest(false);
+    }
+
+    const getFormattedData = (data) => {
+        return data.map((d) => {
+            d.callEndDate = is(String, d.callEndDate) ? new Date(d.callEndDate) : (d.callEndDate ? d.callEndDate : '');
+            d.modifiedDate = is(String, d.modifiedDate) ? new Date(d.modifiedDate) : (d.modifiedDate ? d.modifiedDate : '');
+            d.submissionDate = is(String, d.submissionDate) ? new Date(d.submissionDate) : (d.submissionDate ? d.submissionDate : '');
+            return d;
+        });
+    };
+
+    const actionsBodyTemplate = (rowData) => {
+        return <div className="appPageSection__tableActions">
+            {rowData.status === 'SOCCORSO'
+                ? <Link to={`/domande/${rowData.id}`}>
+                    <Button severity="info" label={__('Dettagli', 'gepafin')} icon="pi pi-eye" size="small"
+                            iconPos="right"/>
+                </Link> : null}
+            <Link to={`/domande/${rowData.id}/preview`}>
+                <Button severity="info" label={__('Anteprima', 'gepafin')} icon="pi pi-eye" size="small"
+                        iconPos="right"/>
+            </Link>
+        </div>
+    }
+
+    const progressBodyTemplate = () => {
+        return '-';
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <ProperBandoLabel status={rowData.status}/>;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)}/>;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses}
+                         onChange={(e) => {
+                             options.filterCallback(e.value, options.index)
+                             const filters = { ...lazyState.filters };
+                             if (e.value) {
+                                 filters['status'] = { value: e.value, matchMode: 'equals' };
+                             } else {
+                                 delete filters['status'];
+                             }
+                             setLazyState({ ...lazyState, filters, first: 0 });
+                         }}
+                         itemTemplate={statusItemTemplate} placeholder={translationStrings.selectOneLabel} className="p-column-filter"
+                         showClear/>;
+    };
+
+    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 dateAppliedBodyTemplate = (rowData) => {
+        return getFormattedDateString(rowData.submissionDate);
+    };
+
+    useEffect(() => {
+        setLocalAsyncRequest(true);
+        const paginationQuery = getPaginationQuery();
+
+        ApplicationService.getApplicationsPaginated(paginationQuery, getCallback, errGetCallbacks, [
+            ['companyId', chosenCompanyId]
+        ]);
+    }, [lazyState, chosenCompanyId, companies]);
+
+    return (
+        <div className="appPageSection__table">
+            <DataTable
+                value={items} stripedRows showGridlines
+                lazy filterDisplay="menu" dataKey="id" paginator
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
+                emptyMessage={translationStrings.emptyMessage}>
+                <Column field="id" header={__('ID domanda', 'gepafin')}
+                        sortable
+                        filterField="id" filter
+                        filterMatchModeOptions={translationStrings.numberFilterOptions}
+                        filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                <Column field="protocolNumber" header={__('Protocollo', 'gepafin')}
+                        style={{ minWidth: '6rem' }}/>
+                <Column field="callTitle" header={__('Bando', 'gepafin')}
+                        filterField="callTitle" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '10rem' }}/>
+                <Column field="companyName" header={__('Azienda Beneficiaria', 'gepafin')}
+                        filterField="companyName" filter
+                        filterMatchModeOptions={translationStrings.textFilterOptions}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column header={__('Data di invio', 'gepafin')}
+                        filterElement={dateFilterTemplate} filter
+                        filterField="submissionDate" dataType="date"
+                        filterMatchModeOptions={translationStrings.dateFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={dateAppliedBodyTemplate}/>
+                <Column field="status" header={__('Stato', 'gepafin')}
+                        filterElement={statusFilterTemplate} filter
+                        filterMatchModeOptions={translationStrings.statusFilterOptions}
+                        style={{ minWidth: '8rem' }}
+                        body={statusBodyTemplate}/>
+                <Column header={__('Esito', 'gepafin')}
+                        style={{ minWidth: '7rem' }} field="progress" body={progressBodyTemplate}/>
+                <Column header={__('Azioni', 'gepafin')}
+                        body={actionsBodyTemplate}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default AllDomandeBeneficiarioTableAsync;

src/pages/DomandeBeneficiario/index.js

@@ -6,7 +6,7 @@ import { head } from 'ramda';
 import { useStore } from '../../store';
 
 // components
-import BeneficiarioDomandeTable from './components/BeneficiarioDomandeTable';
+import AllDomandeBeneficiarioTableAsync from './components/AllDomandeBeneficiarioTableAsync';
 
 const DomandeBeneficiario = () => {
     const chosenCompanyId = useStore().main.chosenCompanyId();
@@ -23,7 +23,8 @@ const DomandeBeneficiario = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <BeneficiarioDomandeTable/>
+                <AllDomandeBeneficiarioTableAsync statuses={['SOCCORSO', 'APPROVED', 'REJECTED', 'EVALUATION', 'SUBMIT',
+                    'APPOINTMENT', 'NDG', 'ADMISSIBLE', 'TECHNICAL_EVALUATION']}/>
             </div>
         </div>
     )

src/pages/DomandeInstructorManager/index.js

@@ -14,13 +14,13 @@ import AssignedApplicationService from '../../service/assigned-application-servi
 import UserService from '../../service/user-service';
 
 // components
-import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
-import AllDomandeTable from '../Domande/components/AllDomandeTable';
 import { classNames } from 'primereact/utils';
 import { Dropdown } from 'primereact/dropdown';
 import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
 import DashboardService from '../../service/dashboard-service';
+import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync';
+import DomandeTablePreInstructorAsync from '../DashboardPreInstructor/components/DomandeTablePreInstructorAsync';
 
 const DomandeInstructorManager = () => {
     const [loading, setLoading] = useState(false);
@@ -31,6 +31,7 @@ const DomandeInstructorManager = () => {
     const [chosenApplication, setChosenApplication] = useState(0);
     const [updaterString, setUpdaterString] = useState('');
     const toast = useRef(null);
+    // eslint-disable-next-line
     const [mainStats, setMainStats] = useState({});
 
     const getRolesCallback = (data) => {
@@ -161,67 +162,16 @@ const DomandeInstructorManager = () => {
 
             <div className="appPageSection">
                 <h2>{__('Da assegnare', 'gepafin')}</h2>
-                <AllDomandeTable openDialogFn={openAssignDialog} updaterString={updaterString}/>
+                <AllDomandeTableAsync openDialogFn={openAssignDialog} updaterString={updaterString}/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('In lavorazione', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={0}/>
+                <DomandeTablePreInstructorAsync statuses={['OPEN', 'SOCCORSO']} userId={0}/>
             </div>
 
-            {/*<div className="appPage__spacer"></div>
-
-            <div className="appPageSection statsBigBadges">
-                <h2>{__('Riepilogo', 'gepafin')}</h2>
-                <div className="statsBigBadges__grid applStats">
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Totale domande', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfAssignedApplication', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('In soccorso', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationInAmendmentState', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('In valutazione', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationInOpenState', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Completate', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationInCloseState', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Tempo medio di valutazione', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('averageEvaluationDays', 0)}
-                            format={{ notation: 'compact' }}
-                            suffix={` ${__('giorni', 'gepafin')}`}
-                            locales="it-IT"/></span>
-                    </div>
-                    <div className="statsBigBadges__gridItem">
-                        <span>{__('Domande in scadenza (48h)', 'gepafin')}</span>
-                        <span><NumberFlow
-                            value={getStatValue('numberOfApplicationExpiringIn48Hours', 0)}
-                            format={{ notation: 'compact' }}
-                            locales="en-US"/></span>
-                    </div>
-                </div>
-            </div>*/}
-
             <Dialog
                 visible={isVisibleEditDialog}
                 modal

src/pages/DomandeMieInstructorManager/index.js

@@ -5,9 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { useStore } from '../../store';
 
 // components
-//import MieDomandeTableInstructorManagerAsync from '../DashboardInstructorManager/components/MieDomandeTableInstructorManagerAsync';
+import MieDomandeTableInstructorManagerAsync from '../DashboardInstructorManager/components/MieDomandeTableInstructorManagerAsync';
-import InstructorManagerMieDomandeTable
-    from '../DashboardInstructorManager/components/InstructorManagerMieDomandeTable';
 
 const DomandeMieInstructorManager = () => {
     const userData = useStore().main.userData();
@@ -22,16 +20,14 @@ const DomandeMieInstructorManager = () => {
 
             <div className="appPageSection">
                 <h2>{__('Nuove domande da valutare', 'gepafin')}</h2>
-                {/*<MieDomandeTableInstructorManagerAsync statuses={['AWAITING']} userId={userData.id}/>*/}
+                <MieDomandeTableInstructorManagerAsync statuses={['AWAITING']} userId={userData.id}/>
-                <InstructorManagerMieDomandeTable statuses={['AWAITING']} userId={userData.id}/>
             </div>
 
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
                 <h2>{__('Coda di lavoro', 'gepafin')}</h2>
-                {/*<MieDomandeTableInstructorManagerAsync statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>*/}
+                <MieDomandeTableInstructorManagerAsync statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
-                <InstructorManagerMieDomandeTable statuses={['OPEN', 'SOCCORSO']} userId={userData.id}/>
             </div>
         </div>
     )

src/pages/DomandePreInstructor/index.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { useStore } from '../../store';
 
 // components
-import PreInstructorDomandeTable from '../DashboardPreInstructor/components/PreInstructorDomandeTable';
+import DomandeTablePreInstructorAsync from '../DashboardPreInstructor/components/DomandeTablePreInstructorAsync';
 
 const DomandePreInstructor = () => {
     const userData = useStore().main.userData();
@@ -20,7 +20,7 @@ const DomandePreInstructor = () => {
 
             <div className="appPageSection">
                 <h2>{__('Nuove domande da valutare', 'gepafin')}</h2>
-                <PreInstructorDomandeTable statuses={['AWAITING']} userId={userData.id}/>
+                <DomandeTablePreInstructorAsync statuses={['AWAITING']} userId={userData.id}/>
             </div>
         </div>
     )

src/pages/Imieibandi/index.js

@@ -7,11 +7,11 @@ import { head } from 'ramda';
 import { useStore } from '../../store';
 
 // components
-import MyLatestSubmissionsTable from '../DashboardBeneficiario/components/MyLatestSubmissionsTable';
 import { Button } from 'primereact/button';
 import ErrorBoundary from '../../components/ErrorBoundary';
+import MyLatestSubmissionsTableAsync from '../DashboardBeneficiario/components/MyLatestSubmissionsTableAsync';
 
-const Applications = () => {
+const Imieibandi = () => {
     const navigate = useNavigate();
     const chosenCompanyId = useStore().main.chosenCompanyId();
     const companies = useStore().main.companies();
@@ -31,7 +31,7 @@ const Applications = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <ErrorBoundary><MyLatestSubmissionsTable/></ErrorBoundary>
+                <ErrorBoundary><MyLatestSubmissionsTableAsync/></ErrorBoundary>
             </div>
 
             <div className="appPage__spacer"></div>
@@ -57,4 +57,4 @@ const Applications = () => {
     )
 }
 
-export default Applications;
+export default Imieibandi;

src/pages/SoccorsoIstruttorioInstructorManager/index.js

@@ -1,12 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { __ } from '@wordpress/i18n';
+import { pathOr } from 'ramda';
+import NumberFlow from '@number-flow/react';
 
 // components
 import DashboardService from '../../service/dashboard-service';
-import { pathOr } from 'ramda';
+import SoccorsiPreInstructorTableAsync from '../SoccorsoIstruttorioPreInstructor/components/SoccorsiPreInstructorTableAsync';
-import NumberFlow from '@number-flow/react';
-//import SoccorsiPreInstructorTableAsync from '../SoccorsoIstruttorioPreInstructor/components/SoccorsiPreInstructorTableAsync';
-import PreInstructorSoccorsiTable from '../SoccorsoIstruttorioPreInstructor/components/PreInstructorSoccorsiTable';
 
 const SoccorsoIstruttorioInstructorManager = () => {
     const [mainStats, setMainStats] = useState({});
@@ -87,8 +86,7 @@ const SoccorsoIstruttorioInstructorManager = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                <PreInstructorSoccorsiTable userId={0}/>
+                <SoccorsiPreInstructorTableAsync userId={0}/>
-                {/*<SoccorsiPreInstructorTableAsync userId={0}/>*/}
             </div>
         </div>
     )

src/pages/SoccorsoIstruttorioMioInstructorManager/components/SoccorsiInstructorManagerMioTableAsync/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { is, isEmpty, pathOr } from 'ramda';
+import { is } from 'ramda';
 import { Link } from 'react-router-dom';
 
 import translationStrings from '../../../../translationStringsForComponents';
@@ -21,6 +21,7 @@ import ProperBandoLabel from '../../../../components/ProperBandoLabel';
 import { Dropdown } from 'primereact/dropdown';
 import { Tag } from 'primereact/tag';
 import { Calendar } from 'primereact/calendar';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 const SoccorsiInstructorManagerMioTableAsync = ({ userId = null }) => {
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
@@ -43,34 +44,7 @@ const SoccorsiInstructorManagerMioTableAsync = ({ userId = null }) => {
     });
     const statuses = [];
 
-    const getPaginationQuery = useCallback(() => {
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'applicationId'), [lazyState]);
-        let sortBy = {
-            columnName: 'applicationId',
-            sortDesc: true
-        };
-
-        if (lazyState.sortField) {
-            sortBy = {
-                columnName: lazyState.sortField,
-                sortDesc: lazyState.sortOrder === -1
-            }
-        }
-        return {
-            globalFilters: {
-                page: lazyState.page ? lazyState.page + 1 : 1,
-                limit: lazyState.rows,
-                sortBy
-            },
-            status: statuses,
-            filters: Object.keys(lazyState.filters).reduce((acc, cur) => {
-                const value = pathOr('', ['filters', cur, 'value'], lazyState);
-                if (!isEmpty(value)) {
-                    acc[cur] = lazyState.filters[cur];
-                }
-                return acc;
-            }, {}),
-        }
-    }, [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);

src/pages/SoccorsoIstruttorioMioInstructorManager/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { __ } from '@wordpress/i18n';
 
+// store
+import { useStore } from '../../store';
+
 // components
-//import SoccorsiInstructorManagerMioTableAsync from './components/SoccorsiInstructorManagerMioTableAsync';
+import SoccorsiInstructorManagerMioTableAsync from './components/SoccorsiInstructorManagerMioTableAsync';
-//import { useStore } from '../../store';
-import InstructorManagerSoccorsiTable from './components/InstructorManagerSoccorsiTable';
 
 const SoccorsoIstruttorioMioInstructorManager = () => {
-    //const userData = useStore().main.userData();
+    const userData = useStore().main.userData();
 
     return(
         <div className="appPage">
@@ -18,8 +19,7 @@ const SoccorsoIstruttorioMioInstructorManager = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                {/*<SoccorsiInstructorManagerMioTableAsync userId={userData.id}/>*/}
+                <SoccorsiInstructorManagerMioTableAsync userId={userData.id}/>
-                <InstructorManagerSoccorsiTable/>
             </div>
         </div>
     )

src/pages/SoccorsoIstruttorioPreInstructor/components/SoccorsiPreInstructorTableAsync/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { is, isEmpty, pathOr } from 'ramda';
+import { is } from 'ramda';
 import { Link } from 'react-router-dom';
 
 import translationStrings from '../../../../translationStringsForComponents';
@@ -44,7 +44,7 @@ const SoccorsiPreInstructorTableAsync = ({ userId = null }) => {
     });
     const statuses = [];
 
-    const getPaginationQuery = useCallback(getQueryParamsForPaginatedEndpoint(lazyState, statuses), [lazyState]);
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'applicationId'), [lazyState]);
 
     const onPage = (event) => {
         setLazyState(event);

src/pages/SoccorsoIstruttorioPreInstructor/index.js

@@ -8,8 +8,7 @@ import { useStore } from '../../store';
 
 // components
 import DashboardService from '../../service/dashboard-service';
-//import SoccorsiPreInstructorTableAsync from './components/SoccorsiPreInstructorTableAsync';
+import SoccorsiPreInstructorTableAsync from './components/SoccorsiPreInstructorTableAsync';
-import PreInstructorSoccorsiTable from './components/PreInstructorSoccorsiTable';
 
 const SoccorsoIstruttorioPreInstructor = () => {
     const [mainStats, setMainStats] = useState({});
@@ -91,8 +90,8 @@ const SoccorsoIstruttorioPreInstructor = () => {
             <div className="appPage__spacer"></div>
 
             <div className="appPageSection">
-                {/*<SoccorsiPreInstructorTableAsync userId={userData.id}/>*/}
+                <SoccorsiPreInstructorTableAsync userId={userData.id}/>
-                <PreInstructorSoccorsiTable userId={userData.id}/>
+          ==
             </div>
         </div>
     )

src/pages/StatsBeneficiary/components/BeneficiarioUltimeDomandeTable/index.js

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { __ } from '@wordpress/i18n';
-import { head, is, uniq } from 'ramda';
+import { head, is } from 'ramda';
 
 // store
 import { useStore } from '../../../../store';
@@ -10,9 +10,9 @@ import ApplicationService from '../../../../service/application-service';
 
 // tools
 import getNumberWithCurrency from '../../../../helpers/getNumberWithCurrency';
+import getQueryParamsForPaginatedEndpoint from '../../../../helpers/getQueryParamsForPaginatedEndpoint';
 
 // components
-import { FilterMatchMode, FilterOperator } from 'primereact/api';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import ProperBandoLabel from '../../../../components/ProperBandoLabel';
@@ -22,51 +22,63 @@ import translationStrings from '../../../../translationStringsForComponents';
 const BeneficiarioUltimeDomandeTable = () => {
     const chosenCompanyId = useStore().main.chosenCompanyId();
     const companies = useStore().main.companies();
-    const [items, setItems] = useState(null);
-    // eslint-disable-next-line
-    const [filters, setFilters] = useState(null);
     const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
-    // eslint-disable-next-line
+    const [items, setItems] = useState(null);
-    const [statuses, setStatuses] = useState([]);
+    const [totalRecordsNum, setTotalRecordsNum] = useState(0);
-    const perPage = 5;
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 5,
+        page: 0,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            id: { value: null, matchMode: 'contains' },
+            callTitle: { value: null, matchMode: 'contains' },
+            companyName: { value: null, matchMode: 'contains' },
+            status: { value: null, matchMode: 'contains' }
+        }
+    });
+    const statuses = ['SOCCORSO', 'APPROVED', 'REJECTED', 'EVALUATION', 'SUBMIT'];
 
-    const getPaginationQuery = (status = 'DRAFT', curPage = 1) => {
+    const getPaginationQuery = useCallback(() => getQueryParamsForPaginatedEndpoint(lazyState, statuses, 'id'), [lazyState]);
-        return {
+
-            "globalFilters": {
+    const onPage = (event) => {
-                //"year": 0,
+        setLazyState(event);
-                "page": curPage,
+    };
-                //"search": "",
+
-                "limit": perPage,
+    const onSort = (event) => {
-            },
+        event['first'] = 0;
-            //"daysRange": 0,
+        event['page'] = 0;
-            "status": status
+        setLazyState(event);
-        }
+    };
-    }
+
+    const onFilter = useCallback((event) => {
+        event['first'] = 0;
+        event['page'] = 0;
+        setLazyState(event);
+    }, [lazyState]);
 
     useEffect(() => {
         const existingCompany = head(companies.filter(o => o.id === chosenCompanyId));
 
         if (existingCompany && !localAsyncRequest) {
-            const bodyParams = getPaginationQuery(
+            const paginationQuery = getPaginationQuery();
-                ['SOCCORSO', 'APPROVED', 'REJECTED', 'EVALUATION', 'SUBMIT'],
-                1
-            );
 
             setLocalAsyncRequest(true);
-            ApplicationService.getApplicationsPaginated(bodyParams, getApplCallback, errGetApplCallback, [
+            ApplicationService.getApplicationsPaginated(paginationQuery, getApplCallback, errGetApplCallback, [
                 ['companyId', chosenCompanyId],
-                ['statuses', ['SOCCORSO', 'APPROVED', 'REJECTED', 'EVALUATION', 'SUBMIT']] // 'NDG', 'ADMISSIBLE', 'APPOINTMENT'
+                ['statuses', statuses] // 'NDG', 'ADMISSIBLE', 'APPOINTMENT'
             ]);
         }
     }, [chosenCompanyId, companies]);
 
     const getApplCallback = (resp) => {
         if (resp.status === 'SUCCESS') {
-            if (resp.data && is(Array, resp.data.body)) {
+            const { body, totalRecords,
-                setItems(getFormattedBandiData(resp.data.body));
+                //currentPage, totalPages, pageSize
-                setStatuses(uniq(items.map(o => o.status)))
+            } = resp.data;
-                initFilters();
+            setTotalRecordsNum(totalRecords);
-            }
+            setItems(getFormattedData(body));
         }
         setLocalAsyncRequest(false);
     }
@@ -75,12 +87,11 @@ const BeneficiarioUltimeDomandeTable = () => {
         setLocalAsyncRequest(false);
     }
 
-    const getFormattedBandiData = (data) => {
+    const getFormattedData = (data) => {
-        return [...(data || [])].map((d) => {
+        return data.map((d) => {
-            d.callEndDate = new Date(d.callEndDate);
+            d.callEndDate = is(String, d.callEndDate) ? new Date(d.callEndDate) : (d.callEndDate ? d.callEndDate : '');
-            d.modifiedDate = new Date(d.modifiedDate);
+            d.modifiedDate = is(String, d.modifiedDate) ? new Date(d.modifiedDate) : (d.modifiedDate ? d.modifiedDate : '');
-            d.submissionDate = new Date(d.submissionDate);
+            d.submissionDate = is(String, d.submissionDate) ? new Date(d.submissionDate) : (d.submissionDate ? d.submissionDate : '');
-
             return d;
         });
     };
@@ -91,28 +102,6 @@ const BeneficiarioUltimeDomandeTable = () => {
         });
     };
 
-    const initFilters = () => {
-        setFilters({
-            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-            callTitle: {
-                operator: FilterOperator.AND,
-                constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
-            },
-            companyName: {
-                operator: FilterOperator.AND,
-                constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
-            },
-            modifiedDate: {
-                operator: FilterOperator.AND,
-                constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
-            },
-            callEndDate: {
-                operator: FilterOperator.AND,
-                constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
-            }
-        });
-    };
-
     const dateSubmissionBodyTemplate = (rowData) => {
         return formatDate(rowData.submissionDate);
     };
@@ -127,8 +116,12 @@ const BeneficiarioUltimeDomandeTable = () => {
 
     return (
         <div className="appPageSection__table">
-            <DataTable value={items} showGridlines rows={5} loading={localAsyncRequest} dataKey="id"
+            <DataTable
-                       stripedRows
+                value={items} stripedRows showGridlines
+                lazy filterDisplay="menu" dataKey="id" paginator
+                first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
+                onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
                 emptyMessage={translationStrings.emptyMessage}>
                 <Column field="callTitle" header={__('Bando', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>

src/routes.js

@@ -15,7 +15,7 @@ import BandoFormsEdit from './pages/BandoFormsEdit';
 import BandoForms from './pages/BandoForms';
 import BandoFormsPreview from './pages/BandoFormsPreview';
 import BandoFlowEdit from './pages/BandoFlowEdit';
-import Applications from './pages/Applications';
+import Imieibandi from './pages/Imieibandi';
 import BandoApplication from './pages/BandoApplication';
 import Registration from './pages/Registration';
 import BandiBeneficiario from './pages/BandiBeneficiario';
@@ -223,8 +223,8 @@ const routes = ({ role, chosenCompanyId }) => {
                 </DefaultLayout>}/>
                 <Route path="/imieibandi" element={<DefaultLayout>
                     {'ROLE_SUPER_ADMIN' === role ? <PageNotFound/> : null}
-                    {'ROLE_BENEFICIARY' === role ? <Applications/> : null}
+                    {'ROLE_BENEFICIARY' === role ? <Imieibandi/> : null}
-                    {'ROLE_CONFIDI' === role ? <Applications/> : null}
+                    {'ROLE_CONFIDI' === role ? <Imieibandi/> : null}
                     {'ROLE_PRE_INSTRUCTOR' === role ? <PageNotFound/> : null}
                     {'ROLE_INSTRUCTOR_MANAGER' === role ? <PageNotFound/> : null}
                 </DefaultLayout>}/>

src/translationStringsForComponents.js

@@ -8,6 +8,10 @@ const emptyMessage = __('Nessun dato disponibile', 'gepafin');
 
 const selectOneLabel = __('Seleziona', 'gepafin');
 
+const numberFilterOptions = [
+    { label: 'Uguale a', value: FilterMatchMode.EQUALS }
+];
+
 const textFilterOptions = [
     //{ label: 'Inizia con', value: FilterMatchMode.STARTS_WITH },
     { label: 'Contiene', value: FilterMatchMode.CONTAINS },
@@ -42,6 +46,7 @@ const translationStrings = {
     emptyMessage,
     selectOneLabel,
     textFilterOptions,
+    numberFilterOptions,
     statusFilterOptions,
     numericFilterOptions,
     dateFilterOptions