Client: Moved defaultSortOrder func to utils

2023-07-06 18:59:26 +02:00
parent f76c18ea3a
commit 391d38a3a5
4 changed files with 64 additions and 57 deletions
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -17,8 +17,10 @@ import { NumberFieldUnit } from "../../components/numberField";
 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";
+import {
+  genericSorter,
+  getSortOrderForField,
+} from "../../utils/sorting";

 dayjs.extend(utc);

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

 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 (
    <List>
      <Table
@@ -91,19 +81,25 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
          dataIndex="id"
          title="Id"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("id")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "id")}
        />
        <Table.Column
          dataIndex="filament_name"
          title="Filament"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("filament_name")}
+          defaultSortOrder={getSortOrderForField(
+            sorters_initial,
+            "filament_name"
+          )}
        />
        <Table.Column
          dataIndex="used_weight"
          title="Used Weight"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("used_weight")}
+          defaultSortOrder={getSortOrderForField(
+            sorters_initial,
+            "used_weight"
+          )}
          render={(value) => {
            return (
              <NumberFieldUnit
@@ -120,7 +116,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
          dataIndex="remaining_weight"
          title="Estimated Remaining Weight"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("remaining_weight")}
+          defaultSortOrder={getSortOrderForField(
+            sorters_initial,
+            "remaining_weight"
+          )}
          render={(value) => {
            if (value === null || value === undefined) {
              return <TextField value="Unknown" />;
@@ -140,19 +139,19 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
          dataIndex="location"
          title="Location"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("location")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "location")}
        />
        <Table.Column
          dataIndex="lot_nr"
          title="Lot Nr"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("lot_nr")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "lot_nr")}
        />
        <Table.Column
          dataIndex={["first_used"]}
          title="First Used"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("first_used")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "first_used")}
          render={(value) => (
            <DateField
              hidden={!value}
@@ -166,7 +165,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
          dataIndex={["last_used"]}
          title="Last Used"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("last_used")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "last_used")}
          render={(value) => (
            <DateField
              hidden={!value}
@@ -180,7 +179,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
          dataIndex={["comment"]}
          title="Comment"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("comment")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "comment")}
        />
        <Table.Column
          title="Actions"
--- a/client/src/pages/vendors/list.tsx
+++ b/client/src/pages/vendors/list.tsx
@@ -15,8 +15,7 @@ import {
 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";
+import { genericSorter, getSortOrderForField } from "../../utils/sorting";
 import { IVendor } from "./model";

 dayjs.extend(utc);
@@ -59,15 +58,6 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
  // 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
@@ -80,19 +70,19 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
          dataIndex="id"
          title="Id"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("id")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "id")}
        />
        <Table.Column
          dataIndex="name"
          title="Name"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("name")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "name")}
        />
        <Table.Column
          dataIndex={["registered"]}
          title="Registered"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("registered")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "registered")}
          render={(value) => (
            <DateField
              value={dayjs.utc(value).local()}
@@ -105,7 +95,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
          dataIndex={["comment"]}
          title="Comment"
          sorter={true}
-          defaultSortOrder={defaultSortOrder("comment")}
+          defaultSortOrder={getSortOrderForField(sorters_initial, "comment")}
        />
        <Table.Column
          title="Actions"
--- a/client/src/utils/sorting.ts
+++ b/client/src/utils/sorting.ts
@@ -1,4 +1,5 @@
 import { CrudSort } from "@refinedev/core";
+import { SortOrder } from "antd/es/table/interface";

 interface IObj {
    [key: string]: unknown;
@@ -59,3 +60,17 @@ export function genericSorter(sorters: CrudSort[]) {
        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;
+}