diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx index 053806e..24aa6d4 100644 --- a/client/src/pages/filaments/list.tsx +++ b/client/src/pages/filaments/list.tsx @@ -1,5 +1,9 @@ import React from "react"; -import { IResourceComponentsProps, BaseRecord } from "@refinedev/core"; +import { + IResourceComponentsProps, + BaseRecord, + CrudSort, +} from "@refinedev/core"; import { useTable, List, @@ -14,10 +18,26 @@ import dayjs from "dayjs"; import utc from "dayjs/plugin/utc"; import { IFilament } from "./model"; import { genericSorter } from "../../utils/sorting"; +import { SortOrder } from "antd/es/table/interface"; dayjs.extend(utc); export const FilamentList: React.FC = () => { + // Load sorter state from local storage + const [sorters_initial] = React.useState(() => { + const storedSorters = localStorage.getItem("filamentListSorters"); + if (storedSorters) { + return JSON.parse(storedSorters); + } + return [ + { + field: "id", + order: "asc", + }, + ]; + }); + + // Fetch data from the API const { tableProps, sorters } = useTable({ syncWithLocation: false, pagination: { @@ -25,21 +45,30 @@ export const FilamentList: React.FC = () => { }, sorters: { mode: "off", // Disable server-side sorting - initial: [ - { - field: "id", - order: "asc", - }, - ], + initial: sorters_initial, }, }); + // Store sorter state in local storage + React.useEffect(() => { + localStorage.setItem("filamentListSorters", JSON.stringify(sorters)); + }, [sorters]); + // Copy dataSource to avoid mutating the original const dataSource = [...(tableProps.dataSource || [])]; // Sort dataSource by the sorters dataSource.sort(genericSorter(sorters)); + // Utility function to get the default sort order of a field based on the sorters_initial + const defaultSortOrder = (field: string): SortOrder | undefined => { + const sorter = sorters_initial.find((s) => s.field === field); + if (sorter) { + return sorter.order === "asc" ? "ascend" : "descend"; + } + return undefined; + }; + return ( = () => { dataIndex="id" title="Id" sorter={true} - defaultSortOrder="ascend" + defaultSortOrder={defaultSortOrder("id")} /> + + + - - - ( = () => { dataIndex="diameter" title="Diameter" sorter={true} + defaultSortOrder={defaultSortOrder("diameter")} render={(value) => ( = () => { dataIndex="weight" title="Weight" sorter={true} + defaultSortOrder={defaultSortOrder("weight")} render={(value) => { if (value === null || value === undefined) { return <>; @@ -113,6 +161,7 @@ export const FilamentList: React.FC = () => { dataIndex="spool_weight" title="Spool Weight" sorter={true} + defaultSortOrder={defaultSortOrder("spool_weight")} render={(value) => { if (value === null || value === undefined) { return <>; @@ -132,11 +181,13 @@ export const FilamentList: React.FC = () => { dataIndex="article_number" title="Article Number" sorter={true} + defaultSortOrder={defaultSortOrder("article_number")} /> ( = () => { /> )} /> - + = () => { + // Load sorter state from local storage + const [sorters_initial] = React.useState(() => { + const storedSorters = localStorage.getItem("spoolListSorters"); + if (storedSorters) { + return JSON.parse(storedSorters); + } + return [ + { + field: "id", + order: "asc", + }, + ]; + }); + + // Fetch data from the API const { tableProps, sorters } = useTable({ syncWithLocation: false, pagination: { @@ -25,15 +45,15 @@ export const SpoolList: React.FC = () => { }, sorters: { mode: "off", // Disable server-side sorting - initial: [ - { - field: "id", - order: "asc", - }, - ], + initial: sorters_initial, }, }); + // Store sorter state in local storage + React.useEffect(() => { + localStorage.setItem("spoolListSorters", JSON.stringify(sorters)); + }, [sorters]); + // Copy dataSource to avoid mutating the original const dataSource = [...(tableProps.dataSource || [])]; @@ -49,6 +69,15 @@ export const SpoolList: React.FC = () => { } }); + // Utility function to get the default sort order of a field based on the sorters_initial + const defaultSortOrder = (field: string): SortOrder | undefined => { + const sorter = sorters_initial.find((s) => s.field === field); + if (sorter) { + return sorter.order === "asc" ? "ascend" : "descend"; + } + return undefined; + }; + return (
= () => { dataIndex="id" title="Id" sorter={true} - defaultSortOrder="ascend" + defaultSortOrder={defaultSortOrder("id")} /> { return ( = () => { dataIndex="remaining_weight" title="Estimated Remaining Weight" sorter={true} + defaultSortOrder={defaultSortOrder("remaining_weight")} render={(value) => { if (value === null || value === undefined) { return ; @@ -103,12 +135,23 @@ export const SpoolList: React.FC = () => { ); }} /> - - + + (
- + + ( = () => { /> )} /> - +