Client: Moved defaultSortOrder func to utils

This commit is contained in:
Donkie
2023-07-06 18:59:26 +02:00
parent f76c18ea3a
commit 391d38a3a5
4 changed files with 64 additions and 57 deletions

View File

@@ -17,8 +17,10 @@ import { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
import { IFilament } from "./model"; import { IFilament } from "./model";
import { genericSorter } from "../../utils/sorting"; import {
import { SortOrder } from "antd/es/table/interface"; genericSorter,
getSortOrderForField,
} from "../../utils/sorting";
dayjs.extend(utc); dayjs.extend(utc);
@@ -69,14 +71,6 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
// Sort dataSource by the sorters // Sort dataSource by the sorters
dataSource.sort(genericSorter(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 ( return (
<List> <List>
@@ -90,37 +84,40 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id" dataIndex="id"
title="Id" title="Id"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("id")} defaultSortOrder={getSortOrderForField(sorters_initial, "id")}
/> />
<Table.Column <Table.Column
dataIndex="vendor_name" dataIndex="vendor_name"
title="Vendor" title="Vendor"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("vendor_name")} defaultSortOrder={getSortOrderForField(
sorters_initial,
"vendor_name"
)}
/> />
<Table.Column <Table.Column
dataIndex="name" dataIndex="name"
title="Name" title="Name"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("name")} defaultSortOrder={getSortOrderForField(sorters_initial, "name")}
/> />
<Table.Column <Table.Column
dataIndex="material" dataIndex="material"
title="Material" title="Material"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("material")} defaultSortOrder={getSortOrderForField(sorters_initial, "material")}
/> />
<Table.Column <Table.Column
dataIndex="price" dataIndex="price"
title="Price" title="Price"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("price")} defaultSortOrder={getSortOrderForField(sorters_initial, "price")}
/> />
<Table.Column <Table.Column
dataIndex="density" dataIndex="density"
title="Density" title="Density"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("density")} defaultSortOrder={getSortOrderForField(sorters_initial, "density")}
render={(value) => ( render={(value) => (
<NumberFieldUnit <NumberFieldUnit
value={value} value={value}
@@ -135,7 +132,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="diameter" dataIndex="diameter"
title="Diameter" title="Diameter"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("diameter")} defaultSortOrder={getSortOrderForField(sorters_initial, "diameter")}
render={(value) => ( render={(value) => (
<NumberFieldUnit <NumberFieldUnit
value={value} value={value}
@@ -150,7 +147,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="weight" dataIndex="weight"
title="Weight" title="Weight"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("weight")} defaultSortOrder={getSortOrderForField(sorters_initial, "weight")}
render={(value) => { render={(value) => {
if (value === null || value === undefined) { if (value === null || value === undefined) {
return <></>; return <></>;
@@ -170,7 +167,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="spool_weight" dataIndex="spool_weight"
title="Spool Weight" title="Spool Weight"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("spool_weight")} defaultSortOrder={getSortOrderForField(
sorters_initial,
"spool_weight"
)}
render={(value) => { render={(value) => {
if (value === null || value === undefined) { if (value === null || value === undefined) {
return <></>; return <></>;
@@ -190,13 +190,16 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex="article_number" dataIndex="article_number"
title="Article Number" title="Article Number"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("article_number")} defaultSortOrder={getSortOrderForField(
sorters_initial,
"article_number"
)}
/> />
<Table.Column <Table.Column
dataIndex={["registered"]} dataIndex={["registered"]}
title="Registered" title="Registered"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("registered")} defaultSortOrder={getSortOrderForField(sorters_initial, "registered")}
render={(value) => ( render={(value) => (
<DateField <DateField
value={dayjs.utc(value).local()} value={dayjs.utc(value).local()}
@@ -209,7 +212,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["comment"]} dataIndex={["comment"]}
title="Comment" title="Comment"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("comment")} defaultSortOrder={getSortOrderForField(sorters_initial, "comment")}
/> />
<Table.Column <Table.Column
title="Actions" title="Actions"

View File

@@ -17,8 +17,7 @@ import { Table, Space } from "antd";
import { NumberFieldUnit } from "../../components/numberField"; import { NumberFieldUnit } from "../../components/numberField";
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
import { genericSorter } from "../../utils/sorting"; import { genericSorter, getSortOrderForField } from "../../utils/sorting";
import { SortOrder } from "antd/es/table/interface";
import { ISpool } from "./model"; import { ISpool } from "./model";
dayjs.extend(utc); dayjs.extend(utc);
@@ -70,15 +69,6 @@ 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 ( return (
<List> <List>
<Table <Table
@@ -91,19 +81,25 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id" dataIndex="id"
title="Id" title="Id"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("id")} defaultSortOrder={getSortOrderForField(sorters_initial, "id")}
/> />
<Table.Column <Table.Column
dataIndex="filament_name" dataIndex="filament_name"
title="Filament" title="Filament"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("filament_name")} defaultSortOrder={getSortOrderForField(
sorters_initial,
"filament_name"
)}
/> />
<Table.Column <Table.Column
dataIndex="used_weight" dataIndex="used_weight"
title="Used Weight" title="Used Weight"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("used_weight")} defaultSortOrder={getSortOrderForField(
sorters_initial,
"used_weight"
)}
render={(value) => { render={(value) => {
return ( return (
<NumberFieldUnit <NumberFieldUnit
@@ -120,7 +116,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="remaining_weight" dataIndex="remaining_weight"
title="Estimated Remaining Weight" title="Estimated Remaining Weight"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("remaining_weight")} defaultSortOrder={getSortOrderForField(
sorters_initial,
"remaining_weight"
)}
render={(value) => { render={(value) => {
if (value === null || value === undefined) { if (value === null || value === undefined) {
return <TextField value="Unknown" />; return <TextField value="Unknown" />;
@@ -140,19 +139,19 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex="location" dataIndex="location"
title="Location" title="Location"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("location")} defaultSortOrder={getSortOrderForField(sorters_initial, "location")}
/> />
<Table.Column <Table.Column
dataIndex="lot_nr" dataIndex="lot_nr"
title="Lot Nr" title="Lot Nr"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("lot_nr")} defaultSortOrder={getSortOrderForField(sorters_initial, "lot_nr")}
/> />
<Table.Column <Table.Column
dataIndex={["first_used"]} dataIndex={["first_used"]}
title="First Used" title="First Used"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("first_used")} defaultSortOrder={getSortOrderForField(sorters_initial, "first_used")}
render={(value) => ( render={(value) => (
<DateField <DateField
hidden={!value} hidden={!value}
@@ -166,7 +165,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["last_used"]} dataIndex={["last_used"]}
title="Last Used" title="Last Used"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("last_used")} defaultSortOrder={getSortOrderForField(sorters_initial, "last_used")}
render={(value) => ( render={(value) => (
<DateField <DateField
hidden={!value} hidden={!value}
@@ -180,7 +179,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["comment"]} dataIndex={["comment"]}
title="Comment" title="Comment"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("comment")} defaultSortOrder={getSortOrderForField(sorters_initial, "comment")}
/> />
<Table.Column <Table.Column
title="Actions" title="Actions"

View File

@@ -15,8 +15,7 @@ import {
import { Table, Space } from "antd"; import { Table, Space } from "antd";
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
import { genericSorter } from "../../utils/sorting"; import { genericSorter, getSortOrderForField } from "../../utils/sorting";
import { SortOrder } from "antd/es/table/interface";
import { IVendor } from "./model"; import { IVendor } from "./model";
dayjs.extend(utc); dayjs.extend(utc);
@@ -59,15 +58,6 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
// Sort dataSource by the sorters // Sort dataSource by the sorters
dataSource.sort(genericSorter(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 ( return (
<List> <List>
<Table <Table
@@ -80,19 +70,19 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
dataIndex="id" dataIndex="id"
title="Id" title="Id"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("id")} defaultSortOrder={getSortOrderForField(sorters_initial, "id")}
/> />
<Table.Column <Table.Column
dataIndex="name" dataIndex="name"
title="Name" title="Name"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("name")} defaultSortOrder={getSortOrderForField(sorters_initial, "name")}
/> />
<Table.Column <Table.Column
dataIndex={["registered"]} dataIndex={["registered"]}
title="Registered" title="Registered"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("registered")} defaultSortOrder={getSortOrderForField(sorters_initial, "registered")}
render={(value) => ( render={(value) => (
<DateField <DateField
value={dayjs.utc(value).local()} value={dayjs.utc(value).local()}
@@ -105,7 +95,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
dataIndex={["comment"]} dataIndex={["comment"]}
title="Comment" title="Comment"
sorter={true} sorter={true}
defaultSortOrder={defaultSortOrder("comment")} defaultSortOrder={getSortOrderForField(sorters_initial, "comment")}
/> />
<Table.Column <Table.Column
title="Actions" title="Actions"

View File

@@ -1,4 +1,5 @@
import { CrudSort } from "@refinedev/core"; import { CrudSort } from "@refinedev/core";
import { SortOrder } from "antd/es/table/interface";
interface IObj { interface IObj {
[key: string]: unknown; [key: string]: unknown;
@@ -59,3 +60,17 @@ export function genericSorter(sorters: CrudSort[]) {
return 0; return 0;
}; };
} }
/**
* Returns the sort order for a given field based on the provided sorters.
* @param sorters An array of `CrudSort` objects that define the sorting criteria.
* @param field The field to get the sort order for.
* @returns The sort order for the given field, or undefined if the field is not being sorted.
*/
export function getSortOrderForField(sorters: CrudSort[], field: string): SortOrder | undefined {
const sorter = sorters.find((s) => s.field === field);
if (sorter) {
return sorter.order === "asc" ? "ascend" : "descend";
}
return undefined;
}