Extra fields now finished for filaments

client/src/pages/filaments/create.tsx

@@ -1,11 +1,20 @@
 import React from "react";
-import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
+import { HttpError, IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
 import { Form, Input, Select, InputNumber, ColorPicker, Button } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { numberFormatter, numberParser } from "../../utils/parsing";
 import { IVendor } from "../vendors/model";
 import { IFilament } from "./model";
+import { EntityType, FieldType, useGetFields } from "../../utils/queryFields";
+import { ExtraFieldFormItem, StringifiedExtras } from "../../components/extraFields";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
+
+// IFilamentParsedExtras is the same as IFilament, but with the extra field parsed into its real types
+type IFilamentParsedExtras = Omit<IFilament, "extra"> & { extra?: { [key: string]: unknown } };
 
 interface CreateOrCloneProps {
   mode: "create" | "clone";
@@ -13,10 +22,20 @@ interface CreateOrCloneProps {
 
 export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
   const t = useTranslate();
+  const extraFields = useGetFields(EntityType.filament);
 
-  const { form, formProps, formLoading, onFinish, redirect } = useForm<IFilament>();
+  const { form, formProps, formLoading, onFinish, redirect } = useForm<
+    IFilament,
+    HttpError,
+    IFilamentParsedExtras,
+    IFilamentParsedExtras
+  >();
 
-  if (props.mode === "clone" && formProps.initialValues) {
+  if (!formProps.initialValues) {
+    formProps.initialValues = {};
+  }
+
+  if (props.mode === "clone") {
     // Fix the vendor_id
     if (formProps.initialValues.vendor) {
       formProps.initialValues.vendor_id = formProps.initialValues.vendor.id;
@@ -24,7 +43,7 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
   }
 
   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 IFilament).id);
   };
@@ -34,6 +53,21 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
     optionLabel: "name",
   });
 
+  // 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) {
+        let parsedValue = JSON.parse(field.default_value as string);
+        if (field.field_type === FieldType.datetime) {
+          parsedValue = dayjs(parsedValue);
+        }
+
+        form.setFieldsValue({ extra: { [field.key]: parsedValue } });
+      }
+    });
+  }, [form, extraFields.data, formProps.initialValues]);
+
   return (
     <Create
       title={props.mode === "create" ? t("filament.titles.create") : t("filament.titles.clone")}
@@ -229,6 +263,9 @@ export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrClonePr
         >
           <TextArea maxLength={1024} />
         </Form.Item>
+        {extraFields.data?.map((field, index) => (
+          <ExtraFieldFormItem key={index} field={field} />
+        ))}
       </Form>
     </Create>
   );