Added client edit support for multi colors

client/src/pages/filaments/edit.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, DatePicker, Select, InputNumber, ColorPicker, message, Alert, Typography } from "antd";
+import { Form, Input, DatePicker, Select, InputNumber, ColorPicker, message, Alert, Typography, Radio } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { numberFormatter, numberParser } from "../../utils/parsing";
@@ -11,6 +11,7 @@ import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldFormItem, StringifiedExtras } from "../../components/extraFields";
 import { ParsedExtras } from "../../components/extraFields";
 import { getCurrencySymbol, useCurrency } from "../../utils/settings";
+import { MultiColorPicker } from "../../components/multiColorPicker";
 
 /*
 The API returns the extra fields as JSON values, but we need to parse them into their real types
@@ -25,6 +26,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
   const [hasChanged, setHasChanged] = useState(false);
   const extraFields = useGetFields(EntityType.filament);
   const currency = useCurrency();
+  const [colorType, setColorType] = React.useState<"single" | "multi">("single");
 
   const { formProps, saveButtonProps } = useForm<IFilament, HttpError, IFilament, IFilament>({
     liveMode: "manual",
@@ -49,6 +51,16 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
     formProps.initialValues = ParsedExtras(formProps.initialValues);
   }
 
+  // Update colorType state
+  React.useEffect(() => {
+    console.log(formProps.initialValues?.multi_color_hexes);
+    if (formProps.initialValues?.multi_color_hexes) {
+      setColorType("multi");
+    } else {
+      setColorType("single");
+    }
+  }, [formProps.initialValues?.multi_color_hexes]);
+
   // Override the form's onFinish method to stringify the extra fields
   const originalOnFinish = formProps.onFinish;
   formProps.onFinish = (allValues: IFilamentParsedExtras) => {
@@ -132,9 +144,21 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
             }
           />
         </Form.Item>
+        <Form.Item label={t("filament.fields.color_hex")}>
+          <Radio.Group
+            onChange={(value) => {
+              setColorType(value.target.value);
+            }}
+            defaultValue={colorType}
+            value={colorType}
+          >
+            <Radio.Button value={"single"}>{t("filament.fields.single_color")}</Radio.Button>
+            <Radio.Button value={"multi"}>{t("filament.fields.multi_color")}</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        {colorType == "single" && (
           <Form.Item
-          label={t("filament.fields.color_hex")}
-          name={["color_hex"]}
+            name={"color_hex"}
             rules={[
               {
                 required: false,
@@ -146,6 +170,36 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           >
             <ColorPicker format="hex" />
           </Form.Item>
+        )}
+        {colorType == "multi" && (
+          <Form.Item
+            name={"multi_color_direction"}
+            help={t("filament.fields_help.multi_color_direction")}
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+            initialValue={"coaxial"}
+          >
+            <Radio.Group>
+              <Radio.Button value={"coaxial"}>{t("filament.fields.coaxial")}</Radio.Button>
+              <Radio.Button value={"longitudinal"}>{t("filament.fields.longitudinal")}</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+        )}
+        {colorType == "multi" && (
+          <Form.Item
+            name={"multi_color_hexes"}
+            rules={[
+              {
+                required: false,
+              },
+            ]}
+          >
+            <MultiColorPicker min={2} max={14} />
+          </Form.Item>
+        )}
         <Form.Item
           label={t("filament.fields.material")}
           help={t("filament.fields_help.material")}