Client: Merged clone spool into create spool page

client/src/App.tsx

@@ -19,13 +19,7 @@ import { useTranslation } from "react-i18next";
 import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
 import { Header } from "./components/header";
 import { ColorModeContextProvider } from "./contexts/color-mode";
-import {
+import { SpoolCreate, SpoolEdit, SpoolList, SpoolShow } from "./pages/spools";
-  SpoolClone,
-  SpoolCreate,
-  SpoolEdit,
-  SpoolList,
-  SpoolShow,
-} from "./pages/spools";
 import {
   FilamentCreate,
   FilamentEdit,
@@ -152,8 +146,14 @@ function App() {
                   />
                   <Route path="/spool">
                     <Route index element={<SpoolList />} />
-                    <Route path="create" element={<SpoolCreate />} />
+                    <Route
-                    <Route path="clone/:id" element={<SpoolClone />} />
+                      path="create"
+                      element={<SpoolCreate mode="create" />}
+                    />
+                    <Route
+                      path="clone/:id"
+                      element={<SpoolCreate mode="clone" />}
+                    />
                     <Route path="edit/:id" element={<SpoolEdit />} />
                     <Route path="show/:id" element={<SpoolShow />} />
                   </Route>

client/src/pages/spools/clone.tsx

@@ -1,130 +0,0 @@
-import React from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
-import { Create, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, DatePicker, Select, InputNumber } from "antd";
-import dayjs from "dayjs";
-import TextArea from "antd/es/input/TextArea";
-import { IFilament } from "../filaments/model";
-
-export const SpoolClone: React.FC<IResourceComponentsProps> = () => {
-  const { formProps, saveButtonProps, formLoading } = useForm();
-
-  if (formProps.initialValues) {
-    formProps.initialValues.first_used = null;
-    formProps.initialValues.last_used = null;
-    formProps.initialValues.used_weight = 0;
-    formProps.initialValues.filament_id = formProps.initialValues.filament.id;
-  }
-
-  const { queryResult } = useSelect<IFilament>({
-    resource: "filament",
-  });
-
-  const filamentOptions = queryResult.data?.data.map((item) => {
-    let label;
-    if (item.vendor) {
-      label = `${item.vendor.name} - ${item.name}`;
-    } else {
-      label = item.name;
-    }
-
-    return {
-      label: label,
-      value: item.id,
-    };
-  });
-
-  return (
-    <Create
-      title="Clone Spool"
-      isLoading={formLoading}
-      saveButtonProps={saveButtonProps}
-    >
-      <Form {...formProps} layout="vertical">
-        <Form.Item
-          label="First Used"
-          name={["first_used"]}
-          rules={[
-            {
-              required: false,
-            },
-          ]}
-          getValueProps={(value) => ({
-            value: value ? dayjs(value) : undefined,
-          })}
-        >
-          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
-        </Form.Item>
-        <Form.Item
-          label="Last Used"
-          name={["last_used"]}
-          rules={[
-            {
-              required: false,
-            },
-          ]}
-          getValueProps={(value) => ({
-            value: value ? dayjs(value) : undefined,
-          })}
-        >
-          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
-        </Form.Item>
-        <Form.Item
-          label="Filament"
-          name={["filament_id"]}
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Select options={filamentOptions} />
-        </Form.Item>
-        <Form.Item
-          label="Used Weight"
-          name={["used_weight"]}
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <InputNumber min={0} addonAfter="g" />
-        </Form.Item>
-        <Form.Item
-          label="Location"
-          name={["location"]}
-          rules={[
-            {
-              required: false,
-            },
-          ]}
-        >
-          <Input maxLength={64} />
-        </Form.Item>
-        <Form.Item
-          label="Lot Nr"
-          name={["lot_nr"]}
-          rules={[
-            {
-              required: false,
-            },
-          ]}
-        >
-          <Input maxLength={64} />
-        </Form.Item>
-        <Form.Item
-          label="Comment"
-          name={["comment"]}
-          rules={[
-            {
-              required: false,
-            },
-          ]}
-        >
-          <TextArea maxLength={1024} />
-        </Form.Item>
-      </Form>
-    </Create>
-  );
-};

client/src/pages/spools/create.tsx

@@ -6,8 +6,24 @@ import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IFilament } from "../filaments/model";
 
-export const SpoolCreate: React.FC<IResourceComponentsProps> = () => {
+interface CreateOrCloneProps {
-  const { formProps, saveButtonProps } = useForm();
+  mode: "create" | "clone";
+}
+
+export const SpoolCreate: React.FC<
+  IResourceComponentsProps & CreateOrCloneProps
+> = (props: IResourceComponentsProps & CreateOrCloneProps) => {
+  const { formProps, saveButtonProps, formLoading } = useForm();
+
+  if (props.mode === "clone" && formProps.initialValues) {
+    // Clear out the values that we don't want to clone
+    formProps.initialValues.first_used = null;
+    formProps.initialValues.last_used = null;
+    formProps.initialValues.used_weight = 0;
+
+    // Fix the filament_id
+    formProps.initialValues.filament_id = formProps.initialValues.filament.id;
+  }
 
   const { queryResult } = useSelect<IFilament>({
     resource: "filament",
@@ -28,7 +44,11 @@ export const SpoolCreate: React.FC<IResourceComponentsProps> = () => {
   });
 
   return (
-    <Create saveButtonProps={saveButtonProps}>
+    <Create
+      title={props.mode === "create" ? "Create Spool" : "Clone Spool"}
+      saveButtonProps={saveButtonProps}
+      isLoading={formLoading}
+    >
       <Form {...formProps} layout="vertical">
         <Form.Item
           label="First Used"

client/src/pages/spools/index.ts

@@ -1,4 +1,3 @@
-export { SpoolClone } from "./clone";
 export { SpoolCreate } from "./create";
 export { SpoolEdit } from "./edit";
 export { SpoolList } from "./list";