Client: Added clone button for filaments

client/src/pages/filaments/create.tsx

@@ -5,8 +5,19 @@ import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import { IVendor } from "../vendors/model";
 
-export const FilamentCreate: React.FC<IResourceComponentsProps> = () => {
-  const { formProps, saveButtonProps } = useForm();
+interface CreateOrCloneProps {
+  mode: "create" | "clone";
+}
+
+export const FilamentCreate: React.FC<
+  IResourceComponentsProps & CreateOrCloneProps
+> = (props) => {
+  const { formProps, saveButtonProps, formLoading } = useForm();
+
+  if (props.mode === "clone" && formProps.initialValues) {
+    // Fix the filament_id
+    formProps.initialValues.vendor_id = formProps.initialValues.vendor.id;
+  }
 
   const { selectProps } = useSelect<IVendor>({
     resource: "vendor",
@@ -14,7 +25,11 @@ export const FilamentCreate: React.FC<IResourceComponentsProps> = () => {
   });
 
   return (
-    <Create saveButtonProps={saveButtonProps}>
+    <Create
+      title={props.mode === "create" ? "Create Filament" : "Clone Filament"}
+      isLoading={formLoading}
+      saveButtonProps={saveButtonProps}
+    >
       <Form {...formProps} layout="vertical">
         <Form.Item
           label="Name"

client/src/pages/filaments/list.tsx

@@ -6,6 +6,7 @@ import {
   EditButton,
   ShowButton,
   DateField,
+  CloneButton,
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
@@ -107,8 +108,24 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="actions"
           render={(_, record: BaseRecord) => (
             <Space>
-              <EditButton hideText size="small" recordItemId={record.id} />
-              <ShowButton hideText size="small" recordItemId={record.id} />
+              <EditButton
+                hideText
+                title="Edit"
+                size="small"
+                recordItemId={record.id}
+              />
+              <ShowButton
+                hideText
+                title="Show"
+                size="small"
+                recordItemId={record.id}
+              />
+              <CloneButton
+                hideText
+                title="Clone"
+                size="small"
+                recordItemId={record.id}
+              />
             </Space>
           )}
         />

client/src/pages/spools/create.tsx

@@ -12,7 +12,7 @@ interface CreateOrCloneProps {
 
 export const SpoolCreate: React.FC<
   IResourceComponentsProps & CreateOrCloneProps
-> = (props: IResourceComponentsProps & CreateOrCloneProps) => {
+> = (props) => {
   const { formProps, saveButtonProps, formLoading } = useForm();
 
   if (props.mode === "clone" && formProps.initialValues) {

client/src/pages/spools/list.tsx

@@ -99,9 +99,24 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           dataIndex="actions"
           render={(_, record: BaseRecord) => (
             <Space>
-              <EditButton hideText size="small" recordItemId={record.id} />
-              <ShowButton hideText size="small" recordItemId={record.id} />
-              <CloneButton hideText size="small" recordItemId={record.id} />
+              <EditButton
+                hideText
+                title="Edit"
+                size="small"
+                recordItemId={record.id}
+              />
+              <ShowButton
+                hideText
+                title="Show"
+                size="small"
+                recordItemId={record.id}
+              />
+              <CloneButton
+                hideText
+                title="Clone"
+                size="small"
+                recordItemId={record.id}
+              />
             </Space>
           )}
         />