From 1f90d7c3b112da72d056d626f6cdc59f265cd91d Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sun, 14 May 2023 22:07:46 +0200
Subject: [PATCH] Client: Better spool filament select

---
 client/src/pages/spools/create.tsx | 19 ++++++++++++++++---
 client/src/pages/spools/edit.tsx   | 19 ++++++++++++++++---
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/spools/create.tsx b/client/src/pages/spools/create.tsx
index 41b407b..66f12e2 100644
--- a/client/src/pages/spools/create.tsx
+++ b/client/src/pages/spools/create.tsx
@@ -9,9 +9,22 @@ import { IFilament } from "../filaments/model";
 export const SpoolCreate: React.FC<IResourceComponentsProps> = () => {
   const { formProps, saveButtonProps } = useForm();
 
-  const { selectProps } = useSelect<IFilament>({
+  const { queryResult } = useSelect<IFilament>({
     resource: "filament",
-    optionLabel: "name",
+  });
+
+  const filamentOptions = queryResult.data?.data.map((item) => {
+    let label;
+    if (item.vendor) {
+      label = `${item.vendor.name} - ${item.name}`;
+    } else {
+      label = item.name;
+    }
+
+    return {
+      label: label,
+      value: item.id,
+    };
   });
 
   return (
@@ -54,7 +67,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps> = () => {
             },
           ]}
         >
-          <Select {...selectProps} />
+          <Select options={filamentOptions} />
         </Form.Item>
         <Form.Item
           label="Used Weight"
diff --git a/client/src/pages/spools/edit.tsx b/client/src/pages/spools/edit.tsx
index 3a213cb..871cb3d 100644
--- a/client/src/pages/spools/edit.tsx
+++ b/client/src/pages/spools/edit.tsx
@@ -9,9 +9,22 @@ import { IFilament } from "../filaments/model";
 export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   const { formProps, saveButtonProps } = useForm();
 
-  const { selectProps } = useSelect<IFilament>({
+  const { queryResult } = useSelect<IFilament>({
     resource: "filament",
-    optionLabel: "name",
+  });
+
+  const filamentOptions = queryResult.data?.data.map((item) => {
+    let label;
+    if (item.vendor) {
+      label = `${item.vendor.name} - ${item.name}`;
+    } else {
+      label = item.name;
+    }
+
+    return {
+      label: label,
+      value: item.id,
+    };
   });
 
   if (formProps.initialValues) {
@@ -84,7 +97,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
             },
           ]}
         >
-          <Select {...selectProps} />
+          <Select options={filamentOptions} />
         </Form.Item>
         <Form.Item
           label="Used Weight"