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

Client: Fixed up pagination, now also stored

Browse Source
This commit is contained in:
Donkie
2023-07-06 23:18:39 +02:00
parent 58833f2203
commit eeac30a963
5 changed files with 138 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,28 +41,43 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
const initialState = useInitialTableState("filamentList");
// Fetch data from the API
const { tableProps, sorters, filters, setSorters, setFilters } =
useTable<IFilament>({
syncWithLocation: false,
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
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
const {
tableProps,
sorters,
setSorters,
filters,
setFilters,
current,
pageSize,
setCurrent,
setPageSize,
} = useTable<IFilament>({
syncWithLocation: false,
pagination: {
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
// Type the sorters and filters
const typedSorters = typeSorters<IFilamentCollapsed>(sorters);
const typedFilters = typeFilters<IFilamentCollapsed>(filters);
// Store state in local storage
useStoreInitialState("filamentList", { sorters, filters });
useStoreInitialState("filamentList", {
sorters,
filters,
pagination: { current, pageSize },
});
// Collapse the dataSource to a mutable list and add a filament_name field
const dataSource: IFilamentCollapsed[] = React.useMemo(
@@ -96,6 +111,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
onClick={() => {
setFilters([], "replace");
setSorters([{ field: "id", order: "asc" }]);
setCurrent(1);
}}
>
Clear Filters
@@ -107,7 +123,15 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<Table
{...tableProps}
dataSource={filteredDataSource}
pagination={{ showSizeChanger: true, pageSize: 20 }}
pagination={{
showSizeChanger: true,
current: current,
pageSize: pageSize,
onChange: (page, pageSize) => {
setCurrent(page);
setPageSize(pageSize);
},
}}
rowKey="id"
>
<Table.Column

58
client/src/pages/spools/list.tsx
View File

@@ -42,28 +42,43 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
const initialState = useInitialTableState("spoolList");
// Fetch data from the API
const { tableProps, sorters, filters, setSorters, setFilters } =
useTable<ISpool>({
syncWithLocation: false,
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
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
const {
tableProps,
sorters,
setSorters,
filters,
setFilters,
current,
pageSize,
setCurrent,
setPageSize,
} = useTable<ISpool>({
syncWithLocation: false,
pagination: {
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
// Type the sorters and filters
const typedSorters = typeSorters<ISpoolCollapsed>(sorters);
const typedFilters = typeFilters<ISpoolCollapsed>(filters);
// Store state in local storage
useStoreInitialState("spoolList", { sorters, filters });
useStoreInitialState("spoolList", {
sorters,
filters,
pagination: { current, pageSize },
});
// Collapse the dataSource to a mutable list and add a filament_name field
const dataSource: ISpoolCollapsed[] = React.useMemo(
@@ -98,6 +113,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
onClick={() => {
setFilters([], "replace");
setSorters([{ field: "id", order: "asc" }]);
setCurrent(1);
}}
>
Clear Filters
@@ -109,7 +125,15 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
<Table
{...tableProps}
dataSource={filteredDataSource}
pagination={{ showSizeChanger: true, pageSize: 20 }}
pagination={{
showSizeChanger: true,
current: current,
pageSize: pageSize,
onChange: (page, pageSize) => {
setCurrent(page);
setPageSize(pageSize);
},
}}
rowKey="id"
>
<Table.Column

58
client/src/pages/vendors/list.tsx vendored
View File

@@ -31,28 +31,43 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
const initialState = useInitialTableState("vendorList");
// Fetch data from the API
const { tableProps, sorters, filters, setSorters, setFilters } =
useTable<IVendor>({
syncWithLocation: false,
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
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
const {
tableProps,
sorters,
setSorters,
filters,
setFilters,
current,
pageSize,
setCurrent,
setPageSize,
} = useTable<IVendor>({
syncWithLocation: false,
pagination: {
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
// Type the sorters and filters
const typedSorters = typeSorters<IVendor>(sorters);
const typedFilters = typeFilters<IVendor>(filters);
// Store state in local storage
useStoreInitialState("vendorList", { sorters, filters });
useStoreInitialState("vendorList", {
sorters,
filters,
pagination: { current, pageSize },
});
// Collapse the dataSource to a mutable list
const dataSource: IVendor[] = React.useMemo(
@@ -77,6 +92,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
onClick={() => {
setFilters([], "replace");
setSorters([{ field: "id", order: "asc" }]);
setCurrent(1);
}}
>
Clear Filters
@@ -88,7 +104,15 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
<Table
{...tableProps}
dataSource={filteredDataSource}
pagination={{ showSizeChanger: true, pageSize: 20 }}
pagination={{
showSizeChanger: true,
current: current,
pageSize: pageSize,
onChange: (page, pageSize) => {
setCurrent(page);
setPageSize(pageSize);
},
}}
rowKey="id"
>
<Table.Column

1
client/src/utils/filtering.ts
View File

@@ -69,7 +69,6 @@ export function useListFiltersForField<Obj, Field extends keyof Obj>(
dataSource: Obj[],
field: Field): ColumnFilterItem[] {
return React.useMemo(() => {
console.log("useListFiltersForField");
const filters: ColumnFilterItem[] = [];
dataSource.forEach((element) => {
const value = element[field];

16
client/src/utils/saveload.ts
View File

@@ -2,18 +2,26 @@ import React from "react";
import { CrudFilter, CrudSort } from "@refinedev/core";
import { isLocalStorageAvailable } from "./support";
interface Pagination {
current: number;
pageSize: number;
}
interface TableState {
sorters: CrudSort[];
filters: CrudFilter[];
pagination: Pagination;
}
export function useInitialTableState(tableId: string): TableState {
const [initialState] = React.useState(() => {
const savedSorters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-sorters`) : null;
const savedFilters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-filters`) : null;
const savedPagination = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-pagination`) : null;
const sorters = savedSorters ? JSON.parse(savedSorters) : [{ field: "id", order: "asc" }];
const filters = savedFilters ? JSON.parse(savedFilters) : [];
return { sorters, filters };
const pagination = savedPagination ? JSON.parse(savedPagination) : { page: 1, pageSize: 20 };
return { sorters, filters, pagination };
});
return initialState;
}
@@ -30,4 +38,10 @@ export function useStoreInitialState(tableId: string, state: TableState) {
localStorage.setItem(`${tableId}-filters`, JSON.stringify(state.filters));
}
}, [tableId, state.filters]);
React.useEffect(() => {
if (isLocalStorageAvailable) {
localStorage.setItem(`${tableId}-pagination`, JSON.stringify(state.pagination));
}
}, [tableId, state.pagination]);
}