From 5357d9e8d00b662d554f8fc381dcc5a85131839a Mon Sep 17 00:00:00 2001 From: Vitalii Kiiko Date: Wed, 2 Apr 2025 12:59:01 +0200 Subject: [PATCH] - fixed back to users; - added table user paginated; - added persistence for filter in the table with assigning functionality; --- .../components/AllDomandeTable/index.js | 2 +- .../UserActivityTableAsync/index.js | 159 ++++++++++++++++++ src/pages/UserActivity/index.js | 29 +--- src/service/user-action-service.js | 4 + 4 files changed, 172 insertions(+), 22 deletions(-) create mode 100644 src/pages/UserActivity/components/UserActivityTableAsync/index.js diff --git a/src/pages/Domande/components/AllDomandeTable/index.js b/src/pages/Domande/components/AllDomandeTable/index.js index 29a4bd8..24591d1 100644 --- a/src/pages/Domande/components/AllDomandeTable/index.js +++ b/src/pages/Domande/components/AllDomandeTable/index.js @@ -46,7 +46,7 @@ const AllDomandeTable = ({ openDialogFn, updaterString = '' }) => { if (data.status === 'SUCCESS') { setItems(getFormattedData(data.data)); setStatuses(uniq(data.data.map(o => o.status))) - initFilters(); + //initFilters(); } setLocalAsyncRequest(false); } diff --git a/src/pages/UserActivity/components/UserActivityTableAsync/index.js b/src/pages/UserActivity/components/UserActivityTableAsync/index.js new file mode 100644 index 0000000..87a7cd0 --- /dev/null +++ b/src/pages/UserActivity/components/UserActivityTableAsync/index.js @@ -0,0 +1,159 @@ +import React, { useEffect, useState, useCallback } from 'react'; +import { __ } from '@wordpress/i18n'; +import { is, isEmpty, pathOr } from 'ramda'; + +// api +import UserActionService from '../../../../service/user-action-service'; + +// +import getFormattedDateString from '../../../../helpers/getFormattedDateString'; + +// components +import { DataTable } from 'primereact/datatable'; +import { Column } from 'primereact/column'; +import { Calendar } from 'primereact/calendar'; + +import translationStrings from '../../../../translationStringsForComponents'; +import { useParams } from 'react-router-dom'; + +const UserActivityTableAsync = ({ chosenActivity = '', chosenPeriod = '' }) => { + const { id } = useParams(); + 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' }, + createdDate: { value: null, matchMode: 'date_is' }, + ipAddress: { value: null, matchMode: 'contains' } + } + }); + 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 + } + } + + const timeFilter = chosenPeriod; + const activityFilter = !isEmpty(chosenActivity) ? [chosenActivity] : []; + + 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; + }, {}), + timeFilter, + actionContext: activityFilter + } + }, [lazyState, chosenActivity, chosenPeriod]); + + 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.createdDate = is(String, d.createdDate) ? new Date(d.createdDate) : (d.createdDate ? d.createdDate : ''); + return d; + }); + }; + + const dateFilterTemplate = (options) => { + return options.filterCallback(e.value, options.index)} + dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" mask="99/99/9999"/>; + }; + + const dateBodyTemplate = (rowData) => { + return getFormattedDateString(rowData.createdDate); + }; + + useEffect(() => { + if (!isEmpty(chosenActivity) && !isEmpty(chosenPeriod)) { + setLocalAsyncRequest(true); + const paginationQuery = getPaginationQuery(); + + UserActionService.getUserActionPaginated(id, paginationQuery, getCallback, errGetCallbacks); + } + }, [lazyState, chosenActivity, chosenPeriod]); + + return ( +
+ + + + + + +
+ ) +} + +export default UserActivityTableAsync; \ No newline at end of file diff --git a/src/pages/UserActivity/index.js b/src/pages/UserActivity/index.js index a29a6b7..696f72b 100644 --- a/src/pages/UserActivity/index.js +++ b/src/pages/UserActivity/index.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect, useRef, useCallback } from 'react'; import { __ } from '@wordpress/i18n'; import { isEmpty, pathOr } from 'ramda'; import { useNavigate, useParams } from 'react-router-dom'; @@ -16,7 +16,7 @@ import { Button } from 'primereact/button'; import { Toast } from 'primereact/toast'; import { Dropdown } from 'primereact/dropdown'; import UserActionService from '../../service/user-action-service'; -import UserActivityTable from './components/UserActivityTable'; +import UserActivityTableAsync from './components/UserActivityTableAsync'; const UserActivity = () => { @@ -62,9 +62,9 @@ const UserActivity = () => { setLoading(false); } - const getStatValue = (key, fallback = 0) => { + const getStatValue = useCallback((key, fallback = 0) => { return pathOr(fallback, [key], userActions); - } + }, [userActions]); const handleRoleUpdate = () => { if (user.role?.id !== chosenRole) { @@ -109,19 +109,6 @@ const UserActivity = () => { setLoading(false); } - const doFilterUserActivity = () => { - let queryParams = []; - - if (!isEmpty(chosenPeriod)) { - queryParams.push(['timeFilter', chosenPeriod]) - } - if (!isEmpty(chosenActivity)) { - queryParams.push(['actionContext', chosenActivity]) - } - - UserActionService.getUserActions(id, getUserActionsCallback, errGetUserActionsCallback, queryParams); - } - useEffect(() => { if (id && !isEmpty(id)) { setLoading(true); @@ -238,7 +225,7 @@ const UserActivity = () => {
- {!isEmpty(userActions) + {!isEmpty(actionsContext) ?

{__('Filtri attività', 'gepafin')}

@@ -268,12 +255,12 @@ const UserActivity = () => { }))} optionLabel="label"/>
: null} -
+ {/*
+
*/}
: null} @@ -282,7 +269,7 @@ const UserActivity = () => { {!isEmpty(userActions) ?

{__('Attività dettagliate', 'gepafin')}

- +
: null} ) diff --git a/src/service/user-action-service.js b/src/service/user-action-service.js index 5fcfc26..67dd355 100644 --- a/src/service/user-action-service.js +++ b/src/service/user-action-service.js @@ -11,4 +11,8 @@ export default class UserActionService { static getUserActions = (id, callback, errCallback, queryParams) => { NetworkService.get(`${API_BASE_URL}/userAction/user/${id}`, callback, errCallback, queryParams); }; + + static getUserActionPaginated = (id, data, callback, errCallback, queryParams) => { + NetworkService.post(`${API_BASE_URL}/userAction/user/${id}/pagination`, data, callback, errCallback, queryParams); + }; }