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

Client: Sort state is now saved in local storage

Browse Source
This commit is contained in:
Donkie
2023-07-06 16:18:14 +02:00
parent 4c17b8ea30
commit 096f75ffb5
3 changed files with 183 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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<IResourceComponentsProps> = () => {
// Load sorter state from local storage
const [sorters_initial] = React.useState<CrudSort[]>(() => {
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<IFilament>({
syncWithLocation: false,
pagination: {
@@ -25,21 +45,30 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
},
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 (
<List>
<Table
@@ -52,20 +81,37 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id"
title="Id"
sorter={true}
defaultSortOrder="ascend"
defaultSortOrder={defaultSortOrder("id")}
/>
<Table.Column
dataIndex={["vendor", "name"]}
title="Vendor"
sorter={true}
defaultSortOrder={defaultSortOrder("vendor.name")}
/>
<Table.Column
dataIndex="name"
title="Name"
sorter={true}
defaultSortOrder={defaultSortOrder("name")}
/>
<Table.Column
dataIndex="material"
title="Material"
sorter={true}
defaultSortOrder={defaultSortOrder("material")}
/>
<Table.Column
dataIndex="price"
title="Price"
sorter={true}
defaultSortOrder={defaultSortOrder("price")}
/>
<Table.Column dataIndex="name" title="Name" sorter={true} />
<Table.Column dataIndex="material" title="Material" sorter={true} />
<Table.Column dataIndex="price" title="Price" sorter={true} />
<Table.Column
dataIndex="density"
title="Density"
sorter={true}
defaultSortOrder={defaultSortOrder("density")}
render={(value) => (
<NumberFieldUnit
value={value}
@@ -80,6 +126,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="diameter"
title="Diameter"
sorter={true}
defaultSortOrder={defaultSortOrder("diameter")}
render={(value) => (
<NumberFieldUnit
value={value}
@@ -94,6 +141,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
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<IResourceComponentsProps> = () => {
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<IResourceComponentsProps> = () => {
dataIndex="article_number"
title="Article Number"
sorter={true}
defaultSortOrder={defaultSortOrder("article_number")}
/>
<Table.Column
dataIndex={["registered"]}
title="Registered"
sorter={true}
defaultSortOrder={defaultSortOrder("registered")}
render={(value) => (
<DateField
value={dayjs.utc(value).local()}
@@ -145,7 +196,12 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
/>
)}
/>
<Table.Column dataIndex={["comment"]} title="Comment" sorter={true} />
<Table.Column
dataIndex={["comment"]}
title="Comment"
sorter={true}
defaultSortOrder={defaultSortOrder("comment")}
/>
<Table.Column
title="Actions"
dataIndex="actions"

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

@@ -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 { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { genericSorter } from "../../utils/sorting";
import { SortOrder } from "antd/es/table/interface";
dayjs.extend(utc);
export const SpoolList: React.FC<IResourceComponentsProps> = () => {
// Load sorter state from local storage
const [sorters_initial] = React.useState<CrudSort[]>(() => {
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<IResourceComponentsProps> = () => {
},
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<IResourceComponentsProps> = () => {
}
});
// 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 (
<List>
<Table
@@ -61,17 +90,19 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id"
title="Id"
sorter={true}
defaultSortOrder="ascend"
defaultSortOrder={defaultSortOrder("id")}
/>
<Table.Column
dataIndex="filament_name"
title="Filament"
sorter={true}
defaultSortOrder={defaultSortOrder("filament_name")}
/>
<Table.Column
dataIndex="used_weight"
title="Used Weight"
sorter={true}
defaultSortOrder={defaultSortOrder("used_weight")}
render={(value) => {
return (
<NumberFieldUnit
@@ -88,6 +119,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="remaining_weight"
title="Estimated Remaining Weight"
sorter={true}
defaultSortOrder={defaultSortOrder("remaining_weight")}
render={(value) => {
if (value === null || value === undefined) {
return <TextField value="Unknown" />;
@@ -103,12 +135,23 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
);
}}
/>
<Table.Column dataIndex="location" title="Location" sorter={true} />
<Table.Column dataIndex="lot_nr" title="Lot Nr" sorter={true} />
<Table.Column
dataIndex="location"
title="Location"
sorter={true}
defaultSortOrder={defaultSortOrder("location")}
/>
<Table.Column
dataIndex="lot_nr"
title="Lot Nr"
sorter={true}
defaultSortOrder={defaultSortOrder("lot_nr")}
/>
<Table.Column
dataIndex={["first_used"]}
title="First Used"
sorter={true}
defaultSortOrder={defaultSortOrder("first_used")}
render={(value) => (
<DateField
hidden={!value}
@@ -122,6 +165,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["last_used"]}
title="Last Used"
sorter={true}
defaultSortOrder={defaultSortOrder("last_used")}
render={(value) => (
<DateField
hidden={!value}
@@ -131,7 +175,12 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
/>
)}
/>
<Table.Column dataIndex={["comment"]} title="Comment" sorter={true} />
<Table.Column
dataIndex={["comment"]}
title="Comment"
sorter={true}
defaultSortOrder={defaultSortOrder("comment")}
/>
<Table.Column
title="Actions"
dataIndex="actions"

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

@@ -1,5 +1,9 @@
import React from "react";
import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
import {
IResourceComponentsProps,
BaseRecord,
CrudSort,
} from "@refinedev/core";
import {
useTable,
List,
@@ -12,10 +16,26 @@ import { Table, Space } from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { genericSorter } from "../../utils/sorting";
import { SortOrder } from "antd/es/table/interface";
dayjs.extend(utc);
export const VendorList: React.FC<IResourceComponentsProps> = () => {
// Load sorter state from local storage
const [sorters_initial] = React.useState<CrudSort[]>(() => {
const storedSorters = localStorage.getItem("vendorListSorters");
if (storedSorters) {
return JSON.parse(storedSorters);
}
return [
{
field: "id",
order: "asc",
},
];
});
// Fetch data from the API
const { tableProps, sorters } = useTable({
syncWithLocation: false,
pagination: {
@@ -23,40 +43,55 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
},
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("vendorListSorters", 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 (
<List>
<Table.Column
dataIndex="id"
title="Id"
sorter={true}
defaultSortOrder="ascend"
/>
<Table
{...tableProps}
dataSource={dataSource}
pagination={{ showSizeChanger: true, pageSize: 20 }}
rowKey="id"
>
<Table.Column dataIndex="name" title="Name" sorter={true} />
<Table.Column
dataIndex="id"
title="Id"
sorter={true}
defaultSortOrder={defaultSortOrder("id")}
/>
<Table.Column
dataIndex="name"
title="Name"
sorter={true}
defaultSortOrder={defaultSortOrder("name")}
/>
<Table.Column
dataIndex={["registered"]}
title="Registered"
sorter={true}
defaultSortOrder={defaultSortOrder("registered")}
render={(value) => (
<DateField
value={dayjs.utc(value).local()}
@@ -65,7 +100,12 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
/>
)}
/>
<Table.Column dataIndex={["comment"]} title="Comment" sorter={true} />
<Table.Column
dataIndex={["comment"]}
title="Comment"
sorter={true}
defaultSortOrder={defaultSortOrder("comment")}
/>
<Table.Column
title="Actions"
dataIndex="actions"