Client: Added spool clone button

client/src/pages/spools/clone.tsx

@@ -0,0 +1,130 @@
+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/index.ts

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

client/src/pages/spools/list.tsx

@@ -7,6 +7,7 @@ import {
   ShowButton,
   DateField,
   TextField,
+  CloneButton,
 } from "@refinedev/antd";
 import { Table, Space } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
@@ -100,6 +101,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             <Space>
               <EditButton hideText size="small" recordItemId={record.id} />
               <ShowButton hideText size="small" recordItemId={record.id} />
+              <CloneButton hideText size="small" recordItemId={record.id} />
             </Space>
           )}
         />