diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx index 6cf0ee8..aaf5bc2 100644 --- a/client/src/pages/filaments/list.tsx +++ b/client/src/pages/filaments/list.tsx @@ -41,28 +41,43 @@ export const FilamentList: React.FC = () => { const initialState = useInitialTableState("filamentList"); // Fetch data from the API - const { tableProps, sorters, filters, setSorters, setFilters } = - useTable({ - 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({ + 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(sorters); const typedFilters = typeFilters(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 = () => { onClick={() => { setFilters([], "replace"); setSorters([{ field: "id", order: "asc" }]); + setCurrent(1); }} > Clear Filters @@ -107,7 +123,15 @@ export const FilamentList: React.FC = () => { { + setCurrent(page); + setPageSize(pageSize); + }, + }} rowKey="id" > = () => { const initialState = useInitialTableState("spoolList"); // Fetch data from the API - const { tableProps, sorters, filters, setSorters, setFilters } = - useTable({ - 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({ + 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(sorters); const typedFilters = typeFilters(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 = () => { onClick={() => { setFilters([], "replace"); setSorters([{ field: "id", order: "asc" }]); + setCurrent(1); }} > Clear Filters @@ -109,7 +125,15 @@ export const SpoolList: React.FC = () => {
{ + setCurrent(page); + setPageSize(pageSize); + }, + }} rowKey="id" > = () => { const initialState = useInitialTableState("vendorList"); // Fetch data from the API - const { tableProps, sorters, filters, setSorters, setFilters } = - useTable({ - 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({ + 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(sorters); const typedFilters = typeFilters(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 = () => { onClick={() => { setFilters([], "replace"); setSorters([{ field: "id", order: "asc" }]); + setCurrent(1); }} > Clear Filters @@ -88,7 +104,15 @@ export const VendorList: React.FC = () => {
{ + setCurrent(page); + setPageSize(pageSize); + }, + }} rowKey="id" > ( dataSource: Obj[], field: Field): ColumnFilterItem[] { return React.useMemo(() => { - console.log("useListFiltersForField"); const filters: ColumnFilterItem[] = []; dataSource.forEach((element) => { const value = element[field]; diff --git a/client/src/utils/saveload.ts b/client/src/utils/saveload.ts index dc3579d..a303c9a 100644 --- a/client/src/utils/saveload.ts +++ b/client/src/utils/saveload.ts @@ -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]); }