Client: Added color edit

client/src/pages/filaments/create.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { IResourceComponentsProps } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, Select, InputNumber } from "antd";
+import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { IVendor } from "../vendors/model";
 
@@ -39,6 +39,20 @@ export const FilamentCreate: React.FC<IResourceComponentsProps> = () => {
         >
           <Select {...selectProps} allowClear />
         </Form.Item>
+        <Form.Item
+          label="Color"
+          name={["color_hex"]}
+          rules={[
+            {
+              required: false,
+            },
+          ]}
+          getValueFromEvent={(e) => {
+            return e?.toHex();
+          }}
+        >
+          <ColorPicker format="hex" />
+        </Form.Item>
         <Form.Item
           label="Material"
           help="E.g. PLA, ABS, PETG, etc."

client/src/pages/filaments/edit.tsx

@@ -1,7 +1,14 @@
 import React from "react";
 import { IResourceComponentsProps } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, DatePicker, Select, InputNumber } from "antd";
+import {
+  Form,
+  Input,
+  DatePicker,
+  Select,
+  InputNumber,
+  ColorPicker,
+} from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IVendor } from "../vendors/model";
@@ -77,6 +84,20 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
         >
           <Select {...selectProps} allowClear />
         </Form.Item>
+        <Form.Item
+          label="Color"
+          name={["color_hex"]}
+          rules={[
+            {
+              required: false,
+            },
+          ]}
+          getValueFromEvent={(e) => {
+            return e?.toHex();
+          }}
+        >
+          <ColorPicker format="hex" />
+        </Form.Item>
         <Form.Item
           label="Material"
           help="E.g. PLA, ABS, PETG, etc."

client/src/pages/filaments/model.tsx

@@ -15,4 +15,5 @@ export interface IFilament {
   comment?: string;
   settings_extruder_temp?: number;
   settings_bed_temp?: number;
+  color_hex?: string;
 }

client/src/pages/filaments/show.tsx

@@ -30,6 +30,8 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
       <TextField value={record?.name} />
       <Title level={5}>Vendor</Title>
       {/* {vendorIsLoading ? <>Loading...</> : <>{vendorData?.data?.id}</>} */}
+      <Title level={5}>Color</Title>
+      <TextField value={record?.color_hex} />
       <Title level={5}>Material</Title>
       <TextField value={record?.material} />
       <Title level={5}>Price</Title>
@@ -67,27 +69,20 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
         }}
       />
       <Title level={5}>Overridden Extruder Temperature</Title>
-      {
-        !record?.settings_extruder_temp ? (
+      {!record?.settings_extruder_temp ? (
         <TextField value="Not Set" />
       ) : (
         <NumberFieldUnit
           value={record?.settings_extruder_temp ?? ""}
           unit="°C"
         />
-        )
-      }
+      )}
       <Title level={5}>Overridden Bed Temperature</Title>
-      {
-        !record?.settings_bed_temp ? (
+      {!record?.settings_bed_temp ? (
         <TextField value="Not Set" />
       ) : (
-          <NumberFieldUnit
-            value={record?.settings_bed_temp ?? ""}
-            unit="°C"
-          />
-        )
-      }
+        <NumberFieldUnit value={record?.settings_bed_temp ?? ""} unit="°C" />
+      )}
       <Title level={5}>Article Number</Title>
       <TextField value={record?.article_number} />
       <Title level={5}>Comment</Title>