Implemented extra fields for spools and vendors as well

client/src/pages/vendors/create.tsx

@@ -1,9 +1,15 @@
 import React from "react";
-import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
+import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm } from "@refinedev/antd";
-import { Button, Form, Input } from "antd";
+import { Button, Form, Input, Typography } from "antd";
 import TextArea from "antd/es/input/TextArea";
-import { IVendor } from "./model";
+import { IVendor, IVendorParsedExtras } from "./model";
+import { EntityType, useGetFields } from "../../utils/queryFields";
+import { ExtraFieldFormItem, StringifiedExtras } from "../../components/extraFields";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
 
 interface CreateOrCloneProps {
   mode: "create" | "clone";
@@ -11,15 +17,36 @@ interface CreateOrCloneProps {
 
 export const VendorCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
   const t = useTranslate();
+  const extraFields = useGetFields(EntityType.vendor);
 
-  const { form, formProps, formLoading, onFinish, redirect } = useForm<IVendor>();
+  const { form, formProps, formLoading, onFinish, redirect } = useForm<
+    IVendor,
+    HttpError,
+    IVendorParsedExtras,
+    IVendorParsedExtras
+  >();
+
+  if (!formProps.initialValues) {
+    formProps.initialValues = {};
+  }
 
   const handleSubmit = async (redirectTo: "list" | "edit" | "create") => {
-    const values = await form.validateFields();
+    const values = StringifiedExtras(await form.validateFields());
     await onFinish(values);
     redirect(redirectTo, (values as IVendor).id);
   };
 
+  // Use useEffect to update the form's initialValues when the extra fields are loaded
+  // This is necessary because the form is rendered before the extra fields are loaded
+  React.useEffect(() => {
+    extraFields.data?.forEach((field) => {
+      if (formProps.initialValues && field.default_value) {
+        const parsedValue = JSON.parse(field.default_value as string);
+        form.setFieldsValue({ extra: { [field.key]: parsedValue } });
+      }
+    });
+  }, [form, extraFields.data, formProps.initialValues]);
+
   return (
     <Create
       title={props.mode === "create" ? t("vendor.titles.create") : t("vendor.titles.clone")}
@@ -58,6 +85,10 @@ export const VendorCreate: React.FC<IResourceComponentsProps & CreateOrCloneProp
         >
           <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>
     </Create>
   );

client/src/pages/vendors/edit.tsx

@@ -1,25 +1,52 @@
 import React, { useState } from "react";
-import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
+import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm } from "@refinedev/antd";
-import { Form, Input, DatePicker, message, Alert } from "antd";
+import { Form, Input, DatePicker, message, Alert, Typography } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
-import { IVendor } from "./model";
+import { IVendor, IVendorParsedExtras } from "./model";
+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 VendorEdit: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
   const [messageApi, contextHolder] = message.useMessage();
   const [hasChanged, setHasChanged] = useState(false);
+  const extraFields = useGetFields(EntityType.vendor);
 
-  const { formProps, saveButtonProps } = useForm<IVendor>({
+  const { formProps, saveButtonProps } = useForm<IVendor, HttpError, IVendorParsedExtras, IVendorParsedExtras>({
     liveMode: "manual",
     onLiveEvent() {
       // Warn the user if the vendor has been updated since the form was opened
       messageApi.warning(t("vendor.form.vendor_updated"));
       setHasChanged(true);
     },
+    queryOptions: {
+      select(data) {
+        return {
+          data: ParsedExtras(data.data),
+        };
+      },
+    },
   });
 
+  // Override the form's onFinish method to stringify the extra fields
+  const originalOnFinish = formProps.onFinish;
+  formProps.onFinish = (allValues: IVendorParsedExtras) => {
+    if (allValues !== undefined && allValues !== null) {
+      allValues = StringifiedExtras(allValues);
+    }
+    originalOnFinish?.(allValues);
+  };
+
   return (
     <Edit saveButtonProps={saveButtonProps}>
       {contextHolder}
@@ -71,6 +98,10 @@ export const VendorEdit: 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("vendor.form.vendor_updated")} type="warning" showIcon />}
     </Edit>

client/src/pages/vendors/list.tsx

@@ -7,9 +7,11 @@ import utc from "dayjs/plugin/utc";
 import { IVendor } from "./model";
 import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
 import { EditOutlined, EyeOutlined, FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
-import { DateColumn, RichColumn, SortedColumn, ActionsColumn } from "../../components/column";
+import { DateColumn, RichColumn, SortedColumn, ActionsColumn, CustomFieldColumn } from "../../components/column";
 import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";
+import { EntityType, useGetFields } from "../../utils/queryFields";
+import { useNavigate } from "react-router-dom";
 
 dayjs.extend(utc);
 
@@ -20,6 +22,10 @@ const allColumns: (keyof IVendor & string)[] = ["id", "name", "registered", "com
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
   const invalidate = useInvalidate();
+  const navigate = useNavigate();
+  const extraFields = useGetFields(EntityType.vendor);
+
+  const allColumnsWithExtraFields = [...allColumns, ...(extraFields.data?.map((field) => "extra." + field.key) ?? [])];
 
   // Load initial state
   const initialState = useInitialTableState(namespace);
@@ -82,6 +88,15 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
     { name: t("buttons.clone"), icon: <PlusSquareOutlined />, link: cloneUrl("vendor", record.id) },
   ];
 
+  const commonProps = {
+    t,
+    navigate,
+    actions,
+    dataSource,
+    tableState,
+    sorter: true,
+  };
+
   return (
     <List
       headerButtons={({ defaultButtons }) => (
@@ -100,10 +115,20 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
           <Dropdown
             trigger={["click"]}
             menu={{
-              items: allColumns.map((column) => ({
-                key: column,
-                label: t(`vendor.fields.${column}`),
-              })),
+              items: allColumnsWithExtraFields.map((column_id) => {
+                if (column_id.indexOf("extra.") === 0) {
+                  const extraField = extraFields.data?.find((field) => "extra." + field.key === column_id);
+                  return {
+                    key: column_id,
+                    label: extraField?.name ?? column_id,
+                  };
+                }
+
+                return {
+                  key: column_id,
+                  label: t(`vendor.fields.${column_id}`),
+                };
+              }),
               selectedKeys: showColumns,
               selectable: true,
               multiple: true,
@@ -132,35 +157,31 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
         rowKey="id"
         columns={removeUndefined([
           SortedColumn({
+            ...commonProps,
             id: "id",
             i18ncat: "vendor",
-            actions,
-            dataSource,
-            tableState,
             width: 70,
           }),
           SortedColumn({
+            ...commonProps,
             id: "name",
             i18ncat: "vendor",
-            actions,
-            dataSource,
-            tableState,
           }),
           DateColumn({
+            ...commonProps,
             id: "registered",
             i18ncat: "vendor",
-            actions,
-            dataSource,
-            tableState,
-            sorter: true,
           }),
+          ...(extraFields.data?.map((field) => {
+            return CustomFieldColumn({
+              ...commonProps,
+              field,
+            });
+          }) ?? []),
           RichColumn({
+            ...commonProps,
             id: "comment",
             i18ncat: "vendor",
-            actions,
-            dataSource,
-            tableState,
-            sorter: true,
           }),
           ActionsColumn<IVendor>(actions),
         ])}

client/src/pages/vendors/model.tsx

@@ -3,4 +3,8 @@ export interface IVendor {
   registered: string;
   name: string;
   comment?: string;
+  extra: { [key: string]: string };
 }
+
+// IVendorParsedExtras is the same as IVendor, but with the extra field parsed into its real types
+export type IVendorParsedExtras = Omit<IVendor, "extra"> & { extra?: { [key: string]: unknown } };

client/src/pages/vendors/show.tsx

@@ -6,6 +6,8 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { IVendor } from "./model";
 import { enrichText } from "../../utils/parsing";
+import { EntityType, useGetFields } from "../../utils/queryFields";
+import { ExtraFieldDisplay } from "../../components/extraFields";
 
 dayjs.extend(utc);
 
@@ -13,6 +15,7 @@ const { Title } = Typography;
 
 export const VendorShow: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
+  const extraFields = useGetFields(EntityType.vendor);
 
   const { queryResult } = useShow<IVendor>({
     liveMode: "auto",
@@ -39,6 +42,10 @@ export const VendorShow: React.FC<IResourceComponentsProps> = () => {
       <TextField value={record?.name} />
       <Title level={5}>{t("vendor.fields.comment")}</Title>
       <TextField value={enrichText(record?.comment)} />
+      <Title level={4}>{t("settings.extra_fields.tab")}</Title>
+      {extraFields?.data?.map((field, index) => (
+        <ExtraFieldDisplay key={index} field={field} value={record?.extra[field.key]} />
+      ))}
     </Show>
   );
 };