105 lines
3.2 KiB
JavaScript
105 lines
3.2 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
import translationStrings from '../../translationStringsForComponents';
|
|
|
|
// components
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
import { Button } from 'primereact/button';
|
|
import BandoService from '../../service/bando-service';
|
|
|
|
const DataTableAsync = () => {
|
|
const [localAsyncRequest, setLocalAsyncRequest] = useState(false);
|
|
const [items, setItems] = useState(null);
|
|
const [totalRecordsNum, setTotalRecordsNum] = useState(0);
|
|
const [lazyState, setLazyState] = useState({
|
|
first: 0,
|
|
rows: 5,
|
|
page: 1,
|
|
sortField: null,
|
|
sortOrder: null,
|
|
filters: {
|
|
name: { value: '', matchMode: 'contains' }
|
|
}
|
|
});
|
|
|
|
const getPaginationQuery = () => {
|
|
return {
|
|
"globalFilters": {
|
|
"page": 0,
|
|
"limit": lazyState.rows,
|
|
"sortBy": {
|
|
"columnName": "ID",
|
|
"sortDesc": true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const onPage = (event) => {
|
|
setLazyState(event);
|
|
};
|
|
|
|
const onSort = (event) => {
|
|
setLazyState(event);
|
|
};
|
|
|
|
const onFilter = (event) => {
|
|
event['first'] = 0;
|
|
setLazyState(event);
|
|
};
|
|
|
|
const getCallback = (data) => {
|
|
if (data.status === 'SUCCESS') {
|
|
const { body, totalRecords, currentPage, totalPages, pageSize } = data.data;
|
|
setTotalRecordsNum(totalRecords);
|
|
const newItems = body.filter(o => o.status === 'PUBLISH');
|
|
setItems(getFormattedBandiData(newItems));
|
|
}
|
|
setLocalAsyncRequest(false);
|
|
}
|
|
|
|
const errGetCallbacks = (data) => {
|
|
setLocalAsyncRequest(false);
|
|
}
|
|
|
|
const getFormattedBandiData = (data) => {
|
|
return [...(data || [])].map((d) => {
|
|
d.start_date = new Date(d.dates[0]);
|
|
d.end_date = new Date(d.dates[1]);
|
|
|
|
return d;
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
console.log(lazyState)
|
|
}, [lazyState]);
|
|
|
|
useEffect(() => {
|
|
if (!localAsyncRequest) {
|
|
setLocalAsyncRequest(true);
|
|
const paginationQuery = getPaginationQuery();
|
|
BandoService.getBandiPaginated(paginationQuery, getCallback, errGetCallbacks);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className="appPageSection__table">
|
|
<DataTable
|
|
value={items} stripedRows showGridlines
|
|
lazy filterDisplay="row" dataKey="id" paginator
|
|
first={lazyState.first} rows={lazyState.rows} totalRecords={totalRecordsNum} onPage={onPage}
|
|
onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
|
|
onFilter={onFilter} filters={lazyState.filters} loading={localAsyncRequest}
|
|
emptyMessage={translationStrings.emptyMessage}>
|
|
<Column field="name" filterField="name" filter
|
|
header={__('Nome Bando', 'gepafin')}
|
|
style={{ minWidth: '8rem' }}/>
|
|
</DataTable>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DataTableAsync; |