diff --git a/client/src/pages/spools/create.tsx b/client/src/pages/spools/create.tsx index 4a1dd44..02f36ae 100644 --- a/client/src/pages/spools/create.tsx +++ b/client/src/pages/spools/create.tsx @@ -1,13 +1,12 @@ -import React from "react"; -import { IResourceComponentsProps, useTranslate } from "@refinedev/core"; -import { Create, useForm, useSelect } from "@refinedev/antd"; -import { Form, Input, DatePicker, Select, InputNumber } from "antd"; +import React, {useState} from "react"; +import {IResourceComponentsProps, useTranslate} 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"; -import { ISpool } from "./model"; -import { numberFormatter, numberParser } from "../../utils/parsing"; -import { useSavedState } from "../../utils/saveload"; +import {IFilament} from "../filaments/model"; +import {ISpool} from "./model"; +import {numberFormatter, numberParser} from "../../utils/parsing"; interface CreateOrCloneProps { mode: "create" | "clone"; @@ -16,7 +15,7 @@ interface CreateOrCloneProps { export const SpoolCreate: React.FC = (props) => { const t = useTranslate(); - const { form, formProps, saveButtonProps, formLoading } = useForm(); + const {form, formProps, saveButtonProps, formLoading} = useForm(); if (props.mode === "clone" && formProps.initialValues) { // Clear out the values that we don't want to clone @@ -28,7 +27,7 @@ export const SpoolCreate: React.FC({ + const {queryResult} = useSelect({ resource: "filament", }); @@ -50,16 +49,28 @@ export const SpoolCreate: React.FC a.label.localeCompare(b.label, undefined, { sensitivity: "base" })); + filamentOptions?.sort((a, b) => a.label.localeCompare(b.label, undefined, {sensitivity: "base"})); - const [used_weight, set_used_weight] = useSavedState("create-used_weight", 0); + const [usedWeight, setUsedWeight] = useState(0); - const selected_filament_id = Form.useWatch('filament_id', form); - const selected_filament = filamentOptions?.find(obj => {return obj.value === selected_filament_id}); + const selectedFilamentID = Form.useWatch('filament_id', form); + const selectedFilament = filamentOptions?.find(obj => { + return obj.value === selectedFilamentID; + }); + const filamentWeight = selectedFilament?.weight || 0; + const spoolWeight = selectedFilament?.spool_weight || 0; + + const weightChange = (weight: number) => { + setUsedWeight(weight); + form.setFieldsValue( + { + used_weight: weight + }); + } return ( - + - + @@ -135,17 +146,13 @@ export const SpoolCreate: React.FC { - set_used_weight(value ?? 0); - form.setFieldsValue( - { - used_weight: value ?? 0 - }); + weightChange(value ?? 0); }} /> - { - set_used_weight((selected_filament?.weight || 0) - (value ?? 0)); - form.setFieldsValue( - { - used_weight: (selected_filament?.weight || 0) - (value ?? 0) - }); + weightChange(filamentWeight - (value ?? 0)); }} /> - { - set_used_weight((selected_filament?.weight || 0) - ((value ?? 0) - (selected_filament?.spool_weight || 0))); - form.setFieldsValue( - { - used_weight: (selected_filament?.weight || 0) - ((value ?? 0) - (selected_filament?.spool_weight || 0)) - }); + weightChange(filamentWeight - ((value ?? 0) - spoolWeight)); }} /> @@ -201,7 +200,7 @@ export const SpoolCreate: React.FC - + - + -