tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Client: Added clear filters button

Browse Source
This commit is contained in:
Donkie
2023-07-06 19:33:30 +02:00
parent 3c8e414aef
commit f36eb86fc7
1 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
client/src/pages/filaments/list.tsx
View File

@@ -13,7 +13,7 @@ import {
DateField, DateField,
CloneButton, CloneButton,
} from "@refinedev/antd"; } from "@refinedev/antd";
import { Table, Space } from "antd"; import { Table, Space, Button } from "antd";
import { NumberFieldUnit } from "../../components/numberField"; import { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
@@ -25,6 +25,7 @@ import {
getFiltersForField, getFiltersForField,
getSortOrderForField, getSortOrderForField,
} from "../../utils/sorting"; } from "../../utils/sorting";
import { FilterOutlined } from "@ant-design/icons";
dayjs.extend(utc); dayjs.extend(utc);
@@ -53,20 +54,21 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
}); });
// Fetch data from the API // Fetch data from the API
const { tableProps, sorters, filters } = useTable<IFilament>({ const { tableProps, sorters, filters, setSorters, setFilters } =
syncWithLocation: false, useTable<IFilament>({
pagination: { syncWithLocation: false,
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work. pagination: {
}, mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
sorters: { },
mode: "off", // Disable server-side sorting sorters: {
initial: sorters_initial, mode: "off", // Disable server-side sorting
}, initial: sorters_initial,
filters: { },
mode: "off", // Disable server-side filtering filters: {
initial: filters_initial, mode: "off", // Disable server-side filtering
}, initial: filters_initial,
}); },
});
// Store sorter state in local storage // Store sorter state in local storage
React.useEffect(() => { React.useEffect(() => {
@@ -97,7 +99,23 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
filteredDataSource.sort(genericSorter(sorters)); filteredDataSource.sort(genericSorter(sorters));
return ( return (
<List> <List
headerButtons={({ defaultButtons }) => (
<>
<Button
type="primary"
icon={<FilterOutlined />}
onClick={() => {
setFilters([], "replace");
setSorters([{ field: "id", order: "asc" }]);
}}
>
Clear Filters
</Button>
{defaultButtons}
</>
)}
>
<Table <Table
{...tableProps} {...tableProps}
dataSource={filteredDataSource} dataSource={filteredDataSource}