This commit is contained in:
Thomas White
2023-08-31 14:12:43 +08:00
parent 754c57ef26
commit f9a987b196

View File

@@ -1,12 +1,12 @@
import React, {useState} from "react";
import {IResourceComponentsProps, useTranslate} from "@refinedev/core";
import {Create, useForm, useSelect} from "@refinedev/antd";
import {Form, Input, DatePicker, Select, InputNumber, Radio} 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, Radio } 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 { IFilament } from "../filaments/model";
import { ISpool } from "./model";
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 selectedFilament = filamentOptions?.find(obj => {
const selectedFilamentID = Form.useWatch("filament_id", form);
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(
{
used_weight: weight
});
}
form.setFieldsValue({
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
hidden={true}
name={["used_weight"]}
initialValue={0}
>
<InputNumber
value={usedWeight}
/>
<Form.Item hidden={true} 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 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.Button
value={1}
>
{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>