- updated user activity functionality;

src/assets/scss/components/misc.scss

@@ -147,6 +147,10 @@
   max-width: 100%;
 }
 
+.p-dropdown {
+  width: 100%;
+}
+
 .p-password.p-inputwrapper {
   width: 100%;
 

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 (
+            <div className="appTableHeader">
+                <Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined
+                        onClick={clearFilter}/>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData) => {
+        return formatDate(rowData.createdDate);
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="appPageSection__table">
+            <DataTable value={items} paginator showGridlines rows={10} dataKey="id"
+                       filters={filters} stripedRows removableSort
+                       header={header}
+                       emptyMessage={translationStrings.emptyMessage}
+                       onFilter={(e) => setFilters(e.filters)}>
+                <Column header={__('Timestamp', 'gepafin')}
+                        filterField="createdDate" dataType="date"
+                        style={{ minWidth: '8rem' }}
+                        body={dateBodyTemplate}/>
+                <Column field="actionType" header={__('Tipo di attività', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column field="actionContext" header={__('Azione', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+                <Column field="ipAddress" header={__('IP', 'gepafin')}
+                        filter sortable
+                        filterPlaceholder={__('Cerca', 'gepafin')}
+                        style={{ minWidth: '8rem' }}/>
+            </DataTable>
+        </div>
+    )
+}
+
+export default UserActivityTable;

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 = () => {
                     </div>
                 </div> : null}
 
+            <div className="appPage__spacer"></div>
+
             {!isEmpty(userActions)
                 ? <div className="appPageSection">
-                    <h2>{__('Statistiche attività', 'gepafin')}</h2>
+                    <h2>{__('Filtri attività', 'gepafin')}</h2>
+                    <div className="appPageSection columns">
+                        <div className="row">
+                            <label>{__('Periodo', 'gepafin')}</label>
+                            <Dropdown
+                                value={chosenPeriod}
+                                onChange={(e) => 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"/>
+                        </div>
+                        {!isEmpty(actionsContext)
+                            ? <div className="row">
+                                <label>{__('Tipo di attività', 'gepafin')}</label>
+                                <Dropdown
+                                    className="fullWidth"
+                                    value={chosenActivity}
+                                    onChange={(e) => setChosenActivity(e.value)}
+                                    options={actionsContext.map(o => ({
+                                        value: o.actionContext,
+                                        label: o.description
+                                    }))}
+                                    optionLabel="label"/>
+                            </div> : null}
+                        <div className="row">
+                            <Button
+                                type="button"
+                                onClick={doFilterUserActivity}
+                                label={__('Applica', 'gepafin')}/>
+                        </div>
+                    </div>
+                </div> : null}
+
+            <div className="appPage__spacer"></div>
+
+            {!isEmpty(userActions)
+                ? <div className="appPageSection">
+                    <h2>{__('Attività dettagliate', 'gepafin')}</h2>
+                    <UserActivityTable data={userActions.userActions}/>
                 </div> : null}
         </div>
     )