- re added tables with pagination;

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 [statuses, setStatuses] = useState([]);
-    const perPage = 5;
-
-    const getPaginationQuery = (status = 'DRAFT', curPage = 1) => {
-        return {
-            "globalFilters": {
-                //"year": 0,
-                "page": curPage,
-                //"search": "",
-                "limit": perPage,
-            },
-            //"daysRange": 0,
-            "status": status
+    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: '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 = 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]);
 
     useEffect(() => {
         const existingCompany = head(companies.filter(o => o.id === chosenCompanyId));
 
         if (existingCompany && !localAsyncRequest) {
-            const bodyParams = getPaginationQuery(
-                ['SOCCORSO', 'APPROVED', 'REJECTED', 'EVALUATION', 'SUBMIT'],
-                1
-            );
+            const paginationQuery = getPaginationQuery();
 
             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)) {
-                setItems(getFormattedBandiData(resp.data.body));
-                setStatuses(uniq(items.map(o => o.status)))
-                initFilters();
-            }
+            const { body, totalRecords,
+                //currentPage, totalPages, pageSize
+            } = resp.data;
+            setTotalRecordsNum(totalRecords);
+            setItems(getFormattedData(body));
         }
         setLocalAsyncRequest(false);
     }
@@ -75,12 +87,11 @@ const BeneficiarioUltimeDomandeTable = () => {
         setLocalAsyncRequest(false);
     }
 
-    const getFormattedBandiData = (data) => {
-        return [...(data || [])].map((d) => {
-            d.callEndDate = new Date(d.callEndDate);
-            d.modifiedDate = new Date(d.modifiedDate);
-            d.submissionDate = new Date(d.submissionDate);
-
+    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;
         });
     };
@@ -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,9 +116,13 @@ const BeneficiarioUltimeDomandeTable = () => {
 
     return (
         <div className="appPageSection__table">
-            <DataTable value={items} showGridlines rows={5} loading={localAsyncRequest} dataKey="id"
-                       stripedRows
-                       emptyMessage={translationStrings.emptyMessage}>
+            <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')}
                         style={{ minWidth: '8rem' }}/>
                 <Column header={__('Anno', 'gepafin')} dataType="date"