diff --git a/src/assets/scss/components/misc.scss b/src/assets/scss/components/misc.scss
index 162068e..8f89d4f 100644
--- a/src/assets/scss/components/misc.scss
+++ b/src/assets/scss/components/misc.scss
@@ -147,6 +147,10 @@
max-width: 100%;
}
+.p-dropdown {
+ width: 100%;
+}
+
.p-password.p-inputwrapper {
width: 100%;
diff --git a/src/pages/UserActivity/components/UserActivityTable/index.js b/src/pages/UserActivity/components/UserActivityTable/index.js
new file mode 100644
index 0000000..e76ae55
--- /dev/null
+++ b/src/pages/UserActivity/components/UserActivityTable/index.js
@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { __ } from '@wordpress/i18n';
+import { is } from 'ramda';
+
+// translation
+import translationStrings from '../../../../translationStringsForComponents';
+
+// components
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+
+
+const UserActivityTable = ({ data = [] }) => {
+ const [items, setItems] = useState([]);
+ const [filters, setFilters] = useState(null);
+
+ useEffect(() => {
+ if (data) {
+ setItems(getFormattedData(data));
+ initFilters();
+ }
+ }, [data]);
+
+ const getFormattedData = (data) => {
+ return data.map((d) => {
+ d.createdDate = is(String, d.createdDate) ? new Date(d.createdDate) : (d.createdDate ? d.createdDate : '');
+ d.updatedDate = is(String, d.updatedDate) ? new Date(d.updatedDate) : (d.updatedDate ? d.updatedDate : '');
+ return d;
+ });
+ };
+
+ const formatDate = (value) => {
+ return value.toLocaleDateString('it-IT', {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric'
+ });
+ };
+
+ const clearFilter = () => {
+ initFilters();
+ };
+
+ const initFilters = () => {
+ setFilters({
+ global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+ actionType: {
+ operator: FilterOperator.AND,
+ constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
+ },
+ ipAddress: {
+ operator: FilterOperator.AND,
+ constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
+ },
+ createdDate: {
+ operator: FilterOperator.AND,
+ constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
+ }
+ });
+ };
+
+ const renderHeader = () => {
+ return (
+
+
+ );
+ };
+
+ const dateBodyTemplate = (rowData) => {
+ return formatDate(rowData.createdDate);
+ };
+
+ const header = renderHeader();
+
+ return (
+
+ setFilters(e.filters)}>
+
+
+
+
+
+
+ )
+}
+
+export default UserActivityTable;
diff --git a/src/pages/UserActivity/index.js b/src/pages/UserActivity/index.js
index 699cf38..a29a6b7 100644
--- a/src/pages/UserActivity/index.js
+++ b/src/pages/UserActivity/index.js
@@ -16,6 +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';
const UserActivity = () => {
@@ -28,6 +29,9 @@ const UserActivity = () => {
const [chosenRole, setChosenRole] = useState(0);
const [actionsContext, setActionsContext] = useState([]);
const [userActions, setUserActions] = useState({});
+ const [chosenPeriod, setChosenPeriod] = useState('');
+ const [chosenActivity, setChosenActivity] = useState('');
+
const goBack = () => {
navigate(`/utenti`);
@@ -105,6 +109,19 @@ 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);
@@ -219,9 +236,53 @@ const UserActivity = () => {
: null}
+
+
{!isEmpty(userActions)
?
-
{__('Statistiche attività', 'gepafin')}
+
{__('Filtri attività', 'gepafin')}
+
+
+
+ setChosenPeriod(e.value)}
+ options={[
+ { value: 'LAST_WEEK', label: __('Ultima settimana', 'gepafin') },
+ { value: 'LAST_QUARTER', label: __('Ultimo trimestre', 'gepafin') },
+ { value: 'LAST_SEMESTER', label: __('Ultimo semestre', 'gepafin') },
+ { value: 'LAST_YEAR', label: __('Ultimo anno', 'gepafin') }
+ ]}
+ optionLabel="label"/>
+
+ {!isEmpty(actionsContext)
+ ?
+
+ setChosenActivity(e.value)}
+ options={actionsContext.map(o => ({
+ value: o.actionContext,
+ label: o.description
+ }))}
+ optionLabel="label"/>
+
: null}
+
+
+
+
+
: null}
+
+
+
+ {!isEmpty(userActions)
+ ?
+
{__('Attività dettagliate', 'gepafin')}
+
: null}
)