Implemented extra fields for spools and vendors as well

client/src/pages/spools/edit.tsx

@@ -1,33 +1,61 @@
 import React, { useEffect, useState } from "react";
-import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
+import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider, Alert } from "antd";
+import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider, Alert, Typography } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IFilament } from "../filaments/model";
-import { ISpool } from "./model";
+import { ISpool, ISpoolParsedExtras } from "./model";
 import { numberFormatter, numberParser } from "../../utils/parsing";
 import { useSpoolmanLocations } from "../../components/otherModels";
 import { message } from "antd/lib";
+import { EntityType, useGetFields } from "../../utils/queryFields";
+import { ExtraFieldFormItem, StringifiedExtras } from "../../components/extraFields";
+import { ParsedExtras } from "../../components/extraFields";
+
+/*
+The API returns the extra fields as JSON values, but we need to parse them into their real types
+in order for Ant design's form to work properly. ParsedExtras does this for us.
+We also need to stringify them again before sending them back to the API, which is done by overriding
+the form's onFinish method. Form.Item's normalize should do this, but it doesn't seem to work.
+*/
 
 export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
   const [messageApi, contextHolder] = message.useMessage();
   const [hasChanged, setHasChanged] = useState(false);
+  const extraFields = useGetFields(EntityType.spool);
 
-  const { form, formProps, saveButtonProps } = useForm<ISpool>({
+  const { form, formProps, saveButtonProps } = useForm<ISpool, HttpError, ISpoolParsedExtras, ISpoolParsedExtras>({
     liveMode: "manual",
     onLiveEvent() {
       // Warn the user if the spool has been updated since the form was opened
       messageApi.warning(t("spool.form.spool_updated"));
       setHasChanged(true);
     },
+    queryOptions: {
+      select(data) {
+        return {
+          data: ParsedExtras(data.data),
+        };
+      },
+    },
   });
 
+  // Get filament selection options
   const { queryResult } = useSelect<IFilament>({
     resource: "filament",
   });
 
+  // Override the form's onFinish method to stringify the extra fields
+  const originalOnFinish = formProps.onFinish;
+  formProps.onFinish = (allValues: ISpoolParsedExtras) => {
+    if (allValues !== undefined && allValues !== null) {
+      allValues = StringifiedExtras(allValues);
+    }
+    originalOnFinish?.(allValues);
+  };
+
   const filamentOptions = queryResult.data?.data.map((item) => {
     let vendorPrefix = "";
     if (item.vendor) {
@@ -306,6 +334,10 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
         >
           <TextArea maxLength={1024} />
         </Form.Item>
+        <Typography.Title level={5}>{t("settings.extra_fields.tab")}</Typography.Title>
+        {extraFields.data?.map((field, index) => (
+          <ExtraFieldFormItem key={index} field={field} />
+        ))}
       </Form>
       {hasChanged && <Alert description={t("spool.form.spool_updated")} type="warning" showIcon />}
     </Edit>