Code: Select all
Uncaught TypeError: filters[field] is undefined
onInputChange datatable.esm.js:2842
onChange datatable.esm.js:3122
React 15
callCallback
invokeGuardedCallbackDev
invokeGuardedCallback
invokeGuardedCallbackAndCatchFirstError
executeDispatch
processDispatchQueueItemsInOrder
processDispatchQueue
dispatchEventsForPlugins
dispatchEventForPluginEventSystem
batchedUpdates$1
batchedUpdates
dispatchEventForPluginEventSystem
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
dispatchEvent
dispatchDiscreteEvent
Code: Select all
import React, { useState, useEffect, useRef } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Dropdown } from 'primereact/dropdown';
import { Button } from 'primereact/button';
import { Panel } from 'primereact/panel';
import { Toast } from 'primereact/toast';
import { useNavigate } from "react-router-dom";
import { CompanyService } from '../service/CompanyService';
import { LegalFormService } from '../service/LegalFormService';
import AppNavbar from '../public/AppNavbar';
export const ProcurementList = () => {
const [loading, setLoading] = useState(false);
const [totalRecords, setTotalRecords] = useState(0);
const [entities, setEntities] = useState(null);
const [selectedEntity, setSelectedEntity] = useState(null);
const [legalForms, setLegalForms] = useState(null);
const toast = useRef(null);
const [lazyParams, setLazyParams] = useState({
first: 0,
rows: 10,
page: 1,
sortField: null,
sortOrder: null,
filters: {
'inn': { value: '', matchMode: 'contains' },
'title': { value: '', matchMode: 'contains' },
'form': { value: '', matchMode: 'contains' },
'field': {value: '', matchMode: 'contains'}
}
});
const service = new CompanyService();
const navigate = useNavigate();
let loadLazyTimeout = null;
useEffect(() => {
loadLazyData();
},[lazyParams])
const loadLazyData = () => {
setLoading(true);
if (loadLazyTimeout) {
clearTimeout(loadLazyTimeout);
}
loadLazyTimeout = setTimeout(() => {
service.getListParam(lazyParams, navigate).then(data => {
setTotalRecords(data.totalElements);
setEntities(data.content);
setLoading(false);
});
new LegalFormService().grouped(navigate).then(data => setLegalForms(data));
});
}
const onPage = (event) => {
setLazyParams(event);
}
const onSort = (event) => {
setLazyParams(event);
}
const onFilter = (event) => {
event['first'] = 0;
setLazyParams(event);
}
const statusRowFilterTemplate = (options) => {
return <Dropdown value={options.value} options={legalForms} onChange={(e) => {
console.log(e.value);
options.filterApplyCallback(e.value);
}}
optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate}
placeholder="Select a Status" className="p-column-filter" showClear />;
}
const groupedItemTemplate = (option) => {
return (
<div>{option.label}</div>
);
}
const onRowSelect = (event) => {
navigate('/procurement_detail', {state: event.data});
}
const gotoUsers = (rowData) => {
navigate('/procurement_users', {state: rowData});
}
const userBodyTemplate = (rowData) => {
return <Button icon="pi pi-user" className="p-button-rounded p-button-info p-button-outlined" aria-label="User" onClick={() => gotoUsers(rowData)} />;
}
return (
<div>
<Toast ref={toast} />
<Panel>
<AppNavbar/>
</Panel>
<div className="card">
<DataTable value={entities} lazy filterDisplay="row" responsiveLayout="scroll" dataKey="id"
paginator first={lazyParams.first} rows={10} totalRecords={totalRecords} onPage={onPage}
onSort={onSort} sortField={lazyParams.sortField} sortOrder={lazyParams.sortOrder}
globalFilterFields={['inn', 'title', 'form']}
onFilter={onFilter} filters={lazyParams.filters} loading={loading}
selectionMode="single" selection={selectedEntity} onSelectionChange={e => setSelectedEntity(e.value)}
onRowSelect={onRowSelect}>
<Column field="inn" header="Pin" sortable filter={true} filterField='inn' filterPlaceholder="Search by Pin" />
<Column field="title" header="Name" sortable filter={true} filterPlaceholder="Search by country" />
<Column field="form.title" sortable header="LegalForm" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }}
style={{ minWidth: '12rem' }} filter filterElement={statusRowFilterTemplate} />
<Column field="action" header="Action" style={{ minWidth: '6rem' }} body={userBodyTemplate} />
</DataTable>
</div>
</div>
);
}