- fixed issue setting dates i ndatepicker;

- fixed styles and filters in tables;
This commit is contained in:
Vitalii Kiiko
2024-11-29 11:29:14 +01:00
parent 7dad6c056d
commit 68866d7542
18 changed files with 99 additions and 261 deletions

View File

@@ -18,9 +18,6 @@ import UserService from '../../../../service/user-service';
import { FilterMatchMode, FilterOperator } from 'primereact/api';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { IconField } from 'primereact/iconfield';
import { InputIcon } from 'primereact/inputicon';
import { Dropdown } from 'primereact/dropdown';
import { Button } from 'primereact/button';
import { Calendar } from 'primereact/calendar';
@@ -32,7 +29,6 @@ const AllUsersTable = () => {
const users = useStore().main.users();
const [filters, setFilters] = useState(null);
const [loading, setLoading] = useState(false);
const [globalFilterValue, setGlobalFilterValue] = useState('');
const [statuses, setStatuses] = useState([]);
useEffect(() => {
@@ -64,30 +60,18 @@ const AllUsersTable = () => {
initFilters();
};
const onGlobalFilterChange = (e) => {
const value = e.target.value;
let _filters = { ...filters };
_filters['global'].value = value;
setFilters(_filters);
setGlobalFilterValue(value);
};
const initFilters = () => {
setFilters({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: {
email: {
operator: FilterOperator.AND,
constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
},
lastLogin: {
operator: FilterOperator.AND,
constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
},
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
}
});
setGlobalFilterValue('');
};
const renderHeader = () => {
@@ -95,11 +79,6 @@ const AllUsersTable = () => {
<div className="appTableHeader">
<Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined
onClick={clearFilter}/>
<IconField iconPosition="left">
<InputIcon className="pi pi-search"/>
<InputText value={globalFilterValue} onChange={onGlobalFilterChange}
placeholder={__('Cerca', 'gepafin')}/>
</IconField>
</div>
);
};
@@ -158,24 +137,25 @@ const AllUsersTable = () => {
return (
<div className="appPageSection__table">
<DataTable value={users} paginator showGridlines rows={10} loading={loading} dataKey="id"
filters={filters}
globalFilterFields={['name', 'status']}
filters={filters} stripedRows removableSort
header={header}
emptyMessage={translationStrings.emptyMessage}
onFilter={(e) => setFilters(e.filters)}>
<Column body={nameBodyTemplate}
header={__('Nome utente', 'gepafin')}
filter filterPlaceholder={__('Cerca per nome', 'gepafin')}
filterPlaceholder={__('Cerca per nome', 'gepafin')}
style={{ minWidth: '12rem' }}/>
<Column body={roleEmailTemplate} header={__('Email', 'gepafin')}
filter filterPlaceholder={__('Cerca per email', 'gepafin')}
filter sortable
field="email"
filterPlaceholder={__('Cerca per email', 'gepafin')}
style={{ minWidth: '12rem' }}/>
<Column body={roleBodyTemplate} header={__('Ruolo', 'gepafin')}
style={{ minWidth: '12rem' }}/>
<Column field="status" header={__('Stato', 'gepafin')}
filterMenuStyle={{ width: '14rem' }}
style={{ width: '120px' }} body={statusBodyTemplate}
filter filterElement={statusFilterTemplate}/>
filterElement={statusFilterTemplate}/>
<Column header={__('Ultimo accesso', 'gepafin')}
filterField="lastLogin" dataType="date"
style={{ minWidth: '10rem' }}