From 23a3b3bbe1b34e5ff0ff6bfd5ab55a57f50c6420 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Thu, 6 Jul 2023 15:40:07 +0200
Subject: [PATCH] Client: Vendor table is now sortable

---
 client/src/pages/vendors/list.tsx  | 32 +++++++++++++++++++++++++-----
 client/src/pages/vendors/model.tsx |  2 +-
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/vendors/list.tsx b/client/src/pages/vendors/list.tsx
index 3ec1f1c..ff7d057 100644
--- a/client/src/pages/vendors/list.tsx
+++ b/client/src/pages/vendors/list.tsx
@@ -11,26 +11,48 @@ import {
 import { Table, Space } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { genericSorter } from "../../utils/sorting";
 
 dayjs.extend(utc);
 
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
-  const { tableProps } = useTable({
+  const { tableProps, sorters } = useTable({
     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="name" title="Name" />
+      <Table {...tableProps} dataSource={dataSource} rowKey="id">
+        <Table.Column
+          dataIndex="id"
+          title="Id"
+          sorter={true}
+          defaultSortOrder="ascend"
+        />
+        <Table.Column dataIndex="name" title="Name" sorter={true} />
         <Table.Column
           dataIndex={["registered"]}
           title="Registered"
+          sorter={true}
           render={(value) => (
             <DateField
               value={dayjs.utc(value).local()}
@@ -39,7 +61,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
             />
           )}
         />
-        <Table.Column dataIndex={["comment"]} title="Comment" />
+        <Table.Column dataIndex={["comment"]} title="Comment" sorter={true} />
         <Table.Column
           title="Actions"
           dataIndex="actions"
diff --git a/client/src/pages/vendors/model.tsx b/client/src/pages/vendors/model.tsx
index d516248..59335a9 100644
--- a/client/src/pages/vendors/model.tsx
+++ b/client/src/pages/vendors/model.tsx
@@ -1,5 +1,5 @@
 export interface IVendor {
-  id: string;
+  id: number;
   registered: string;
   name: string;
   comment?: string;