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

Client: Filament table is now sortable

Browse Source 
Can only sort by 1 column for now
This commit is contained in:
Donkie
2023-07-06 15:36:10 +02:00
parent 97170719b2
commit f0403b3afb
3 changed files with 107 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,29 +12,56 @@ import { Table, Space } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { IFilament } from "./model";
import { genericSorter } from "../../utils/sorting";
dayjs.extend(utc);
export const FilamentList: React.FC<IResourceComponentsProps> = () => {
const { tableProps } = useTable({
const { tableProps, sorters } = useTable<IFilament>({
syncWithLocation: true,
pagination: {
mode: "client",
pageSize: 20,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: [
{
field: "id",
order: "asc",
},
],
},
});
// Copy dataSource to avoid mutating the original
const dataSource = [...(tableProps.dataSource || [])];
// Sort dataSource by the sorters
dataSource.sort(genericSorter(sorters));
return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="Id" />
<Table.Column dataIndex={["vendor", "name"]} title="Vendor" />
<Table.Column dataIndex="name" title="Name" />
<Table.Column dataIndex="material" title="Material" />
<Table.Column dataIndex="price" title="Price" />
<Table {...tableProps} dataSource={dataSource} rowKey="id">
<Table.Column
dataIndex="id"
title="Id"
sorter={true}
defaultSortOrder="ascend"
/>
<Table.Column
dataIndex={["vendor", "name"]}
title="Vendor"
sorter={true}
/>
<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}
render={(value) => (
<NumberFieldUnit
value={value}
@@ -48,6 +75,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<Table.Column
dataIndex="diameter"
title="Diameter"
sorter={true}
render={(value) => (
<NumberFieldUnit
value={value}
@@ -61,6 +89,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<Table.Column
dataIndex="weight"
title="Weight"
sorter={true}
render={(value) => {
if (value === null || value === undefined) {
return <></>;
@@ -79,6 +108,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<Table.Column
dataIndex="spool_weight"
title="Spool Weight"
sorter={true}
render={(value) => {
if (value === null || value === undefined) {
return <></>;
@@ -94,10 +124,15 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
);
}}
/>
<Table.Column dataIndex="article_number" title="Article Number" />
<Table.Column
dataIndex="article_number"
title="Article Number"
sorter={true}
/>
<Table.Column
dataIndex={["registered"]}
title="Registered"
sorter={true}
render={(value) => (
<DateField
value={dayjs.utc(value).local()}
@@ -106,7 +141,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
/>
)}
/>
<Table.Column dataIndex={["comment"]} title="Comment" />
<Table.Column dataIndex={["comment"]} title="Comment" sorter={true} />
<Table.Column
title="Actions"
dataIndex="actions"

3
client/src/pages/filaments/model.tsx
View File

@@ -1,7 +1,7 @@
import { IVendor } from "../vendors/model";
export interface IFilament {
id: string;
id: number;
registered: string;
name?: string;
vendor?: IVendor;
@@ -16,4 +16,5 @@ export interface IFilament {
settings_extruder_temp?: number;
settings_bed_temp?: number;
color_hex?: string;
[key: string]: unknown;
}

61
client/src/utils/sorting.ts Normal file
View File

@@ -0,0 +1,61 @@
import { CrudSort } from "@refinedev/core";
interface IObj {
[key: string]: unknown;
}
/**
* Returns a sorting function that can be used to sort an array of objects based on the provided sorters.
* @param sorters An array of `CrudSort` objects that define the sorting criteria.
* @returns A sorting function that can be used to sort an array of objects based on the provided sorters.
*/
export function genericSorter(sorters: CrudSort[]) {
return (a: IObj, b: IObj) => {
for (const sorter of sorters) {
const aValue = a[sorter.field];
const bValue = b[sorter.field];
if (aValue === bValue) {
continue;
}
// Send empty fields to the bottom
if (aValue === undefined || aValue === null) {
return 1;
}
if (bValue === undefined || bValue === null) {
return -1;
}
// Perform sorting based on type of the fields
if (typeof aValue === "string" && typeof bValue === "string") {
// Try to sort them as dates if possible
const aDate = new Date(aValue);
const bDate = new Date(bValue);
if (!isNaN(aDate.getTime()) && !isNaN(bDate.getTime())) {
return sorter.order === "asc"
? aDate.getTime() - bDate.getTime()
: bDate.getTime() - aDate.getTime();
}
return sorter.order === "asc"
? aValue.localeCompare(bValue)
: bValue.localeCompare(aValue);
}
if (typeof aValue === "number" && typeof bValue === "number") {
return sorter.order === "asc" ? aValue - bValue : bValue - aValue;
}
if (typeof aValue === "boolean" && typeof bValue === "boolean") {
return sorter.order === "asc" ? +aValue - +bValue : +bValue - +aValue;
}
if (aValue instanceof Date && bValue instanceof Date) {
return sorter.order === "asc"
? aValue.getTime() - bValue.getTime()
: bValue.getTime() - aValue.getTime();
}
if (typeof aValue === "object" && typeof bValue === "object") {
return sorter.order === "asc"
? JSON.stringify(aValue).localeCompare(JSON.stringify(bValue))
: JSON.stringify(bValue).localeCompare(JSON.stringify(aValue));
}
}
return 0;
};
}