From 00b4ad8569d79a2c0a8c7dc5f5503c3542bbaa3f Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Wed, 5 Mar 2025 17:06:00 +0100 Subject: [PATCH] - fixed filter for calls table; - implemented call table async on all pages; - added applications table async; --- src/helpers/getFormattedDateString.js | 9 + .../components/LatestBandiTableAsync/index.js | 95 ++++---- src/pages/Dashboard/index.js | 5 +- src/pages/DashboardBeneficiario/index.js | 4 +- .../components/AllDomandeTable/index.js | 11 +- .../components/AllDomandeTableAsync/index.js | 219 ++++++++++++++++++ src/translationStringsForComponents.js | 36 ++- 7 files changed, 316 insertions(+), 63 deletions(-) create mode 100644 src/helpers/getFormattedDateString.js create mode 100644 src/pages/Domande/components/AllDomandeTableAsync/index.js diff --git a/src/helpers/getFormattedDateString.js b/src/helpers/getFormattedDateString.js new file mode 100644 index 0000000..97c03f9 --- /dev/null +++ b/src/helpers/getFormattedDateString.js @@ -0,0 +1,9 @@ +const getFormattedDateString = (value) => { + return value.toLocaleDateString('it-IT', { + day: '2-digit', + month: '2-digit', + year: 'numeric' + }); +}; + +export default getFormattedDateString; \ No newline at end of file diff --git a/src/pages/Dashboard/components/LatestBandiTableAsync/index.js b/src/pages/Dashboard/components/LatestBandiTableAsync/index.js index c2bc869..2aab7ee 100644 --- a/src/pages/Dashboard/components/LatestBandiTableAsync/index.js +++ b/src/pages/Dashboard/components/LatestBandiTableAsync/index.js @@ -1,23 +1,28 @@ import React, { useEffect, useState, useCallback } from 'react'; import { __ } from '@wordpress/i18n'; -import { FilterMatchMode } from 'primereact/api'; +import { isEmpty, pathOr } from 'ramda'; +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'; + // components import { DataTable } from 'primereact/datatable'; import { Column } from 'primereact/column'; -import { Link } from 'react-router-dom'; import { Button } from 'primereact/button'; import ProperBandoLabel from '../../../../components/ProperBandoLabel'; import { Dropdown } from 'primereact/dropdown'; import { Tag } from 'primereact/tag'; -import getBandoLabel from '../../../../helpers/getBandoLabel'; -import getBandoSeverity from '../../../../helpers/getBandoSeverity'; -import { isEmpty, pathOr } from 'ramda'; +import { Calendar } from 'primereact/calendar'; const LatestBandiTableAsync = () => { const [localAsyncRequest, setLocalAsyncRequest] = useState(false); @@ -30,55 +35,54 @@ const LatestBandiTableAsync = () => { sortField: null, sortOrder: null, filters: { - name: { value: '', matchMode: 'contains' }, - status: { value: '', matchMode: 'equals' } + 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(() => { let sortBy = { - "columnName": "ID", - "sortDesc": true + columnName: "ID", + sortDesc: true }; if (lazyState.sortField) { sortBy = { - "columnName": lazyState.sortField, - "sortDesc": lazyState.sortOrder === -1 + columnName: lazyState.sortField, + sortDesc: lazyState.sortOrder === -1 } } return { globalFilters: { page: lazyState.page ? lazyState.page + 1 : 1, limit: lazyState.rows, - 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; - }, {}), sortBy }, - status: statuses + 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) => { - //console.log('onPage', event); setLazyState(event); }; const onSort = (event) => { - //console.log('onSort', event); event['first'] = 0; event['page'] = 0; setLazyState(event); }; const onFilter = useCallback((event) => { - //console.log('onFilter', event); event['first'] = 0; event['page'] = 0; setLazyState(event); @@ -90,7 +94,7 @@ const LatestBandiTableAsync = () => { //currentPage, totalPages, pageSize } = resp.data; setTotalRecordsNum(totalRecords); - setItems(getFormattedBandiData(body)); + setItems(getFormattedData(body)); } setLocalAsyncRequest(false); } @@ -99,10 +103,10 @@ const LatestBandiTableAsync = () => { setLocalAsyncRequest(false); } - const getFormattedBandiData = (data) => { + const getFormattedData = (data) => { return [...(data || [])].map((d) => { - d.start_date = new Date(d.dates[0]); - d.end_date = new Date(d.dates[1]); + d.startDate = new Date(d.dates[0]); + d.endDate = new Date(d.dates[1]); return d; }); @@ -138,39 +142,28 @@ const LatestBandiTableAsync = () => { showClear/>; }; + const dateFilterTemplate = (options) => { + return options.filterCallback(e.value, options.index)} + dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>; + }; + const dateStartBodyTemplate = (rowData) => { - return formatDate(rowData.start_date); + const startTimeObj = getTimeParsedFromString(rowData.startTime); + return getFormattedDateString(rowData.startDate) + ' ' + getTimeFromISOstring(startTimeObj); }; const dateEndBodyTemplate = (rowData) => { - return formatDate(rowData.end_date); - }; - - const formatDate = (value) => { - return value.toLocaleDateString('it-IT', { - day: '2-digit', - month: '2-digit', - year: 'numeric' - }); + const endTimeObg = getTimeParsedFromString(rowData.endTime); + return getFormattedDateString(rowData.endDate) + ' ' + getTimeFromISOstring(endTimeObg); }; useEffect(() => { - //console.log('lazyState', lazyState) setLocalAsyncRequest(true); const paginationQuery = getPaginationQuery(); - //console.log('paginationQuery', paginationQuery) BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks); }, [lazyState]); - /*useEffect(() => { - if (!localAsyncRequest) { - setLocalAsyncRequest(true); - const paginationQuery = getPaginationQuery(); - BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks); - } - }, []);*/ - return (
{ diff --git a/src/pages/Dashboard/index.js b/src/pages/Dashboard/index.js index 39f324f..f81f4f7 100644 --- a/src/pages/Dashboard/index.js +++ b/src/pages/Dashboard/index.js @@ -9,11 +9,11 @@ import DashboardService from '../../service/dashboard-service'; // components import { Button } from 'primereact/button'; -import AllDomandeTable from '../Domande/components/AllDomandeTable'; import DraftApplicationsTable from './components/DraftApplicationsTable'; import ChartDomandePerBando from '../../components/ChartDomandePerBando'; import ChartStatoDomande from '../../components/ChartStatoDomande'; import LatestBandiTableAsync from './components/LatestBandiTableAsync'; +import AllDomandeTableAsync from '../Domande/components/AllDomandeTableAsync'; const Dashboard = () => { const navigate = useNavigate(); @@ -137,14 +137,13 @@ const Dashboard = () => {

{__('Ultimi bandi pubblicati', 'gepafin')}

- {/**/}

{__('Ultime domande pubblicate', 'gepafin')}

- +
diff --git a/src/pages/DashboardBeneficiario/index.js b/src/pages/DashboardBeneficiario/index.js index cec061b..bceb0ca 100644 --- a/src/pages/DashboardBeneficiario/index.js +++ b/src/pages/DashboardBeneficiario/index.js @@ -11,10 +11,10 @@ import { useStore } from '../../store'; import DashboardService from '../../service/dashboard-service'; // components -import LatestBandiTable from './components/LatestBandiTable'; import MyLatestSubmissionsTable from './components/MyLatestSubmissionsTable'; import { Button } from 'primereact/button'; import ErrorBoundary from '../../components/ErrorBoundary'; +import LatestBandiTableAsync from '../Dashboard/components/LatestBandiTableAsync'; const DashboardBeneficiario = () => { const navigate = useNavigate(); @@ -108,7 +108,7 @@ const DashboardBeneficiario = () => {

{__('Bandi disponibili', 'gepafin')}

- +
diff --git a/src/pages/Domande/components/AllDomandeTable/index.js b/src/pages/Domande/components/AllDomandeTable/index.js index efeb7af..90721e2 100644 --- a/src/pages/Domande/components/AllDomandeTable/index.js +++ b/src/pages/Domande/components/AllDomandeTable/index.js @@ -9,6 +9,7 @@ import ApplicationService from '../../../../service/application-service'; // tools import getBandoLabel from '../../../../helpers/getBandoLabel'; import getBandoSeverity from '../../../../helpers/getBandoSeverity'; +import getFormattedDateString from '../../../../helpers/getFormattedDateString'; // translation import translationStrings from '../../../../translationStringsForComponents'; @@ -60,14 +61,6 @@ const AllDomandeTable = ({ openDialogFn, updaterString = '' }) => { }); }; - const formatDate = (value) => { - return value.toLocaleDateString('it-IT', { - day: '2-digit', - month: '2-digit', - year: 'numeric' - }); - }; - const clearFilter = () => { initFilters(); }; @@ -105,7 +98,7 @@ const AllDomandeTable = ({ openDialogFn, updaterString = '' }) => { }; const dateAppliedBodyTemplate = (rowData) => { - return formatDate(rowData.submissionDate); + return getFormattedDateString(rowData.submissionDate); }; const statusFilterTemplate = (options) => { diff --git a/src/pages/Domande/components/AllDomandeTableAsync/index.js b/src/pages/Domande/components/AllDomandeTableAsync/index.js new file mode 100644 index 0000000..5f6996d --- /dev/null +++ b/src/pages/Domande/components/AllDomandeTableAsync/index.js @@ -0,0 +1,219 @@ +import React, { useEffect, useState, useCallback } from 'react'; +import { __ } from '@wordpress/i18n'; +import { is, isEmpty, pathOr } from 'ramda'; +import { Link, useLocation } from 'react-router-dom'; + +import translationStrings from '../../../../translationStringsForComponents'; + +// api +import ApplicationService from '../../../../service/application-service'; + +// +import getBandoLabel from '../../../../helpers/getBandoLabel'; +import getBandoSeverity from '../../../../helpers/getBandoSeverity'; +import getFormattedDateString from '../../../../helpers/getFormattedDateString'; + +// 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 AllDomandeTableAsync = ({ openDialogFn, updaterString = '' }) => { + const location = useLocation(); + 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: 'contains' }, + callTitle: { value: null, matchMode: 'contains' }, + companyName: { value: null, matchMode: 'contains' }, + submissionDate: { value: null, matchMode: 'date_is' }, + status: { value: null, matchMode: 'equals' } + } + }); + const statuses = ['SUBMIT', 'EVALUATION', 'SOCCORSO']; + + const getPaginationQuery = useCallback(() => { + 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); + }; + + 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
+ {openDialogFn && ['SUBMIT', 'EVALUATION', 'SOCCORSO'].includes(rowData.status) + ?
+ } + + const statusBodyTemplate = (rowData) => { + return ; + }; + + const statusItemTemplate = (option) => { + return ; + }; + + const statusFilterTemplate = (options) => { + return { + 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 options.filterCallback(e.value, options.index)} + dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>; + }; + + const dateAppliedBodyTemplate = (rowData) => { + return getFormattedDateString(rowData.submissionDate); + }; + + useEffect(() => { + setLocalAsyncRequest(true); + const paginationQuery = getPaginationQuery(); + + ApplicationService.getApplicationsPaginated(paginationQuery, getCallback, errGetCallbacks); + }, [lazyState, updaterString]); + + return ( +
+ + + + + + + + + + +
+ ) +} + +export default AllDomandeTableAsync; \ No newline at end of file diff --git a/src/translationStringsForComponents.js b/src/translationStringsForComponents.js index e33247e..3423e68 100644 --- a/src/translationStringsForComponents.js +++ b/src/translationStringsForComponents.js @@ -1,5 +1,6 @@ /* data table related */ import { __ } from '@wordpress/i18n'; +import { FilterMatchMode } from 'primereact/api'; const currentPageReportTemplate = ''; @@ -7,10 +8,43 @@ const emptyMessage = __('Nessun dato disponibile', 'gepafin'); const selectOneLabel = __('Seleziona', 'gepafin'); +const textFilterOptions = [ + //{ label: 'Inizia con', value: FilterMatchMode.STARTS_WITH }, + { label: 'Contiene', value: FilterMatchMode.CONTAINS }, + //{ label: 'Non contiene', value: FilterMatchMode.NOT_CONTAINS }, + //{ label: 'Finisce con', value: FilterMatchMode.ENDS_WITH }, + { label: 'Uguale a', value: FilterMatchMode.EQUALS }, + //{ label: 'Diverso da', value: FilterMatchMode.NOT_EQUALS } +]; + +const statusFilterOptions = [ + { label: 'Uguale a', value: FilterMatchMode.EQUALS } +]; + +const numericFilterOptions = [ + { label: 'Uguale a', value: FilterMatchMode.EQUALS }, + { label: 'Diverso da', value: FilterMatchMode.NOT_EQUALS }, + { label: 'Maggiore di', value: FilterMatchMode.GREATER_THAN }, + { label: 'Maggiore o uguale a', value: FilterMatchMode.GREATER_THAN_OR_EQUAL_TO }, + { label: 'Minore di', value: FilterMatchMode.LESS_THAN }, + { label: 'Minore o uguale a', value: FilterMatchMode.LESS_THAN_OR_EQUAL_TO } +]; + +const dateFilterOptions = [ + { label: 'Data uguale a', value: FilterMatchMode.DATE_IS }, + { label: 'Data diversa da', value: FilterMatchMode.DATE_IS_NOT }, + { label: 'Data prima di', value: FilterMatchMode.DATE_BEFORE }, + { label: 'Data dopo', value: FilterMatchMode.DATE_AFTER } +]; + const translationStrings = { currentPageReportTemplate, emptyMessage, - selectOneLabel + selectOneLabel, + textFilterOptions, + statusFilterOptions, + numericFilterOptions, + dateFilterOptions } export default translationStrings; \ No newline at end of file