reformat

client/src/pages/spools/create.tsx

@@ -1,12 +1,12 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {IResourceComponentsProps, useTranslate} from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
-import {Create, useForm, useSelect} from "@refinedev/antd";
+import { Create, useForm, useSelect } from "@refinedev/antd";
-import {Form, Input, DatePicker, Select, InputNumber, Radio} from "antd";
+import { Form, Input, DatePicker, Select, InputNumber, Radio } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
-import {IFilament} from "../filaments/model";
+import { IFilament } from "../filaments/model";
-import {ISpool} from "./model";
+import { ISpool } from "./model";
-import {numberFormatter, numberParser} from "../../utils/parsing";
+import { numberFormatter, numberParser } from "../../utils/parsing";
 
 interface CreateOrCloneProps {
   mode: "create" | "clone";
@@ -15,7 +15,7 @@ interface CreateOrCloneProps {
 export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
   const t = useTranslate();
 
-  const {form, formProps, saveButtonProps, formLoading} = useForm<ISpool>();
+  const { form, formProps, saveButtonProps, formLoading } = useForm<ISpool>();
 
   if (props.mode === "clone" && formProps.initialValues) {
     // Clear out the values that we don't want to clone
@@ -27,7 +27,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
     formProps.initialValues.filament_id = formProps.initialValues.filament.id;
   }
 
-  const {queryResult} = useSelect<IFilament>({
+  const { queryResult } = useSelect<IFilament>({
     resource: "filament",
   });
 
@@ -50,16 +50,16 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
       label: label,
       value: item.id,
       weight: item.weight,
-      spool_weight: item.spool_weight
+      spool_weight: item.spool_weight,
     };
   });
-  filamentOptions?.sort((a, b) => a.label.localeCompare(b.label, undefined, {sensitivity: "base"}));
+  filamentOptions?.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
 
   const [weightToEnter, setWeightToEnter] = useState(1);
   const [usedWeight, setUsedWeight] = useState(0);
 
-  const selectedFilamentID = Form.useWatch('filament_id', form);
+  const selectedFilamentID = Form.useWatch("filament_id", form);
-  const selectedFilament = filamentOptions?.find(obj => {
+  const selectedFilament = filamentOptions?.find((obj) => {
     return obj.value === selectedFilamentID;
   });
   const filamentWeight = selectedFilament?.weight || 0;
@@ -82,11 +82,10 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
 
   const weightChange = (weight: number) => {
     setUsedWeight(weight);
-    form.setFieldsValue(
+    form.setFieldsValue({
-      {
+      used_weight: weight,
-        used_weight: weight
+    });
-      });
+  };
-  }
 
   return (
     <Create
@@ -107,7 +106,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             value: value ? dayjs(value) : undefined,
           })}
         >
-          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
+          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
         </Form.Item>
         <Form.Item
           label={t("spool.fields.last_used")}
@@ -121,7 +120,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             value: value ? dayjs(value) : undefined,
           })}
         >
-          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
+          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
         </Form.Item>
         <Form.Item
           label={t("spool.fields.filament")}
@@ -144,14 +143,8 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
           />
         </Form.Item>
 
-        <Form.Item
+        <Form.Item hidden={true} name={["used_weight"]} initialValue={0}>
-          hidden={true}
+          <InputNumber value={usedWeight} />
-          name={["used_weight"]}
-          initialValue={0}
-        >
-          <InputNumber
-            value={usedWeight}
-          />
         </Form.Item>
 
         <Form.Item label={t("spool.fields.weight_to_use")} help={t("spool.fields_help.weight_to_use")}>
@@ -162,9 +155,23 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             defaultValue={1}
             value={weightToEnter}
           >
-            <Radio.Button value={1}>{t("spool.fields.used_weight")}</Radio.Button>
+            <Radio.Button
-            <Radio.Button value={2} disabled={!filamentWeight}>{t("spool.fields.remaining_weight")}</Radio.Button>
+              value={1}
-            <Radio.Button value={3} disabled={!(filamentWeight && spoolWeight)}>{t("spool.fields.measured_weight")}</Radio.Button>
+            >
+              {t("spool.fields.used_weight")}
+            </Radio.Button>
+            <Radio.Button
+              value={2}
+              disabled={!filamentWeight}
+            >
+              {t("spool.fields.remaining_weight")}
+            </Radio.Button>
+            <Radio.Button
+              value={3}
+              disabled={!(filamentWeight && spoolWeight)}
+            >
+              {t("spool.fields.measured_weight")}
+            </Radio.Button>
           </Radio.Group>
         </Form.Item>
 
@@ -219,7 +226,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             formatter={numberFormatter}
             parser={numberParser}
             disabled={weightToEnter != 3}
-            value={(filamentWeight && spoolWeight) ? filamentWeight - usedWeight + spoolWeight : 0}
+            value={filamentWeight && spoolWeight ? filamentWeight - usedWeight + spoolWeight : 0}
             onChange={(value) => {
               weightChange(filamentWeight - ((value ?? 0) - spoolWeight));
             }}
@@ -235,7 +242,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             },
           ]}
         >
-          <Input maxLength={64}/>
+          <Input maxLength={64} />
         </Form.Item>
         <Form.Item
           label={t("spool.fields.lot_nr")}
@@ -247,7 +254,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             },
           ]}
         >
-          <Input maxLength={64}/>
+          <Input maxLength={64} />
         </Form.Item>
         <Form.Item
           label={t("spool.fields.comment")}
@@ -258,7 +265,7 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             },
           ]}
         >
-          <TextArea maxLength={1024}/>
+          <TextArea maxLength={1024} />
         </Form.Item>
       </Form>
     </Create>