From 166c6fa0d1615e80daa8c954ac52056ced8bcbb1 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Tue, 16 May 2023 21:50:09 +0200
Subject: [PATCH] Client: Improved the lists a bit

---
 client/src/pages/filaments/list.tsx | 54 +++++++++++++++-----------
 client/src/pages/spools/list.tsx    | 59 +++++++++++++++++++++--------
 2 files changed, 75 insertions(+), 38 deletions(-)

diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index 8fc3c3d..8461f0e 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -56,32 +56,42 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         <Table.Column
           dataIndex="weight"
           title="Weight"
-          render={(value) => (
-            <NumberField
-              value={value}
-              options={{
-                unitDisplay: "short",
-                unit: "gram",
-                style: "unit",
-                maximumFractionDigits: 1,
-              }}
-            />
-          )}
+          render={(value) => {
+            if (value === null || value === undefined) {
+              return <></>;
+            }
+            return (
+              <NumberField
+                value={value}
+                options={{
+                  unitDisplay: "short",
+                  unit: "gram",
+                  style: "unit",
+                  maximumFractionDigits: 1,
+                }}
+              />
+            );
+          }}
         />
         <Table.Column
           dataIndex="spool_weight"
           title="Spool Weight"
-          render={(value) => (
-            <NumberField
-              value={value}
-              options={{
-                unitDisplay: "short",
-                unit: "gram",
-                style: "unit",
-                maximumFractionDigits: 1,
-              }}
-            />
-          )}
+          render={(value) => {
+            if (value === null || value === undefined) {
+              return <></>;
+            }
+            return (
+              <NumberField
+                value={value}
+                options={{
+                  unitDisplay: "short",
+                  unit: "gram",
+                  style: "unit",
+                  maximumFractionDigits: 1,
+                }}
+              />
+            );
+          }}
         />
         <Table.Column dataIndex="article_number" title="Article Number" />
         <Table.Column
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index a39e118..71c481a 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -7,6 +7,7 @@ import {
   ShowButton,
   DateField,
   NumberField,
+  TextField,
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
 
@@ -15,30 +16,58 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
     syncWithLocation: true,
   });
 
+  tableProps.dataSource?.forEach((element) => {
+    if ("vendor" in element.filament) {
+      element.filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
+    } else {
+      element.filament_name = element.filament.name;
+    }
+  });
+
   return (
     <List>
       <Table {...tableProps} rowKey="id">
         <Table.Column dataIndex="id" title="Id" />
+        <Table.Column dataIndex="filament_name" title="Filament" />
         <Table.Column
-          dataIndex={["filament", "vendor", "name"]}
-          title="Vendor"
+          dataIndex="used_weight"
+          title="Used Weight"
+          render={(value) => {
+            return (
+              <NumberField
+                value={value}
+                options={{
+                  unitDisplay: "short",
+                  unit: "gram",
+                  style: "unit",
+                  maximumFractionDigits: 1,
+                }}
+              />
+            );
+          }}
         />
-        <Table.Column dataIndex={["filament", "name"]} title="Filament Name" />
         <Table.Column
           dataIndex="remaining_weight"
           title="Estimated Remaining Weight"
-          render={(value) => (
-            <NumberField
-              value={value}
-              options={{
-                unitDisplay: "short",
-                unit: "gram",
-                style: "unit",
-                maximumFractionDigits: 1,
-              }}
-            />
-          )}
+          render={(value) => {
+            if (value === null || value === undefined) {
+              return <TextField value="Unknown" />;
+            }
+            return (
+              <NumberField
+                value={Math.max(value, 0)}
+                options={{
+                  unitDisplay: "short",
+                  unit: "gram",
+                  style: "unit",
+                  maximumFractionDigits: 1,
+                }}
+              />
+            );
+          }}
         />
+        <Table.Column dataIndex="location" title="Location" />
+        <Table.Column dataIndex="lot_nr" title="Lot Nr" />
         <Table.Column
           dataIndex={["first_used"]}
           title="First Used"
@@ -53,8 +82,6 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             <DateField value={value} format="YYYY-MM-DD HH:mm:ss" />
           )}
         />
-        <Table.Column dataIndex="location" title="Location" />
-        <Table.Column dataIndex="lot_nr" title="Lot Nr" />
         <Table.Column dataIndex={["comment"]} title="Comment" />
         <Table.Column
           title="Actions"