Client: Added spool clone button

client/src/App.tsx

@@ -19,7 +19,13 @@ 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 { SpoolCreate, SpoolEdit, SpoolList, SpoolShow } from "./pages/spools";
+import {
+  SpoolClone,
+  SpoolCreate,
+  SpoolEdit,
+  SpoolList,
+  SpoolShow,
+} from "./pages/spools";
 import {
   FilamentCreate,
   FilamentEdit,
@@ -82,6 +88,7 @@ function App() {
                   name: "spool",
                   list: "/spool",
                   create: "/spool/create",
+                  clone: "/spool/clone/:id",
                   edit: "/spool/edit/:id",
                   show: "/spool/show/:id",
                   meta: {
@@ -146,6 +153,7 @@ function App() {
                   <Route path="/spool">
                     <Route index element={<SpoolList />} />
                     <Route path="create" element={<SpoolCreate />} />
+                    <Route path="clone/:id" element={<SpoolClone />} />
                     <Route path="edit/:id" element={<SpoolEdit />} />
                     <Route path="show/:id" element={<SpoolShow />} />
                   </Route>

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>
           )}
         />