Added dropdown of existing locations in spool edit

Resolves #119
This commit is contained in:
Donkie
2023-10-10 20:21:23 +02:00
parent 76e5450bea
commit 43168fc75e
3 changed files with 75 additions and 66 deletions

View File

@@ -1,12 +1,13 @@
import React, { useEffect, useState } from "react";
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { Edit, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, DatePicker, Select, InputNumber, Radio } from "antd";
import { Form, Input, DatePicker, Select, InputNumber, Radio, Divider } 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 { useSpoolmanLocations } from "../../components/otherModels";
export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
@@ -77,15 +78,23 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
});
};
const locations = useSpoolmanLocations(true);
const [newLocation, setNewLocation] = useState("");
const allLocations = [...(locations.data || [])];
if (newLocation.trim() && !allLocations.includes(newLocation)) {
allLocations.push(newLocation.trim());
}
if (formProps.initialValues) {
formProps.initialValues["filament_id"] = formProps.initialValues["filament"].id;
}
useEffect(() => {
if (formProps.initialValues && usedWeight != formProps.initialValues["used_weight"]) {
setUsedWeight(formProps.initialValues["used_weight"])
setUsedWeight(formProps.initialValues["used_weight"]);
}
}, []);
}, [formProps.initialValues, usedWeight]);
return (
<Edit saveButtonProps={saveButtonProps}>
@@ -166,7 +175,6 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
<Form.Item hidden={false} 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")}>
<Radio.Group
onChange={(value) => {
@@ -175,32 +183,16 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
defaultValue={1}
value={weightToEnter}
>
<Radio.Button
value={1}
>
{t("spool.fields.used_weight")}
</Radio.Button>
<Radio.Button
value={2}
disabled={!filamentWeight}
>
<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)}
>
<Radio.Button value={3} disabled={!(filamentWeight && spoolWeight)}>
{t("spool.fields.measured_weight")}
</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item
label={t("spool.fields.used_weight")}
help={t("spool.fields_help.used_weight")}
// name={["used_weight"]}
// initialValue={usedWeight}
>
<Form.Item label={t("spool.fields.used_weight")} help={t("spool.fields_help.used_weight")}>
<InputNumber
min={0}
addonAfter="g"
@@ -214,12 +206,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
}}
/>
</Form.Item>
<Form.Item
label={t("spool.fields.remaining_weight")}
help={t("spool.fields_help.remaining_weight")}
// name={["remaining_weight"]}
// initialValue={filamentWeight ? filamentWeight - usedWeight : 0}
>
<Form.Item label={t("spool.fields.remaining_weight")} help={t("spool.fields_help.remaining_weight")}>
<InputNumber
min={0}
addonAfter="g"
@@ -233,12 +220,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
}}
/>
</Form.Item>
<Form.Item
label={t("spool.fields.measured_weight")}
help={t("spool.fields_help.measured_weight")}
// name={["measured_weight"]}
// initialValue={filamentWeight && spoolWeight ? filamentWeight - usedWeight + spoolWeight : 0}
>
<Form.Item label={t("spool.fields.measured_weight")} help={t("spool.fields_help.measured_weight")}>
<InputNumber
min={0}
addonAfter="g"
@@ -262,7 +244,21 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
},
]}
>
<Input maxLength={64} />
<Select
dropdownRender={(menu) => (
<>
{menu}
<Divider style={{ margin: "8px 0" }} />
<Input
placeholder="Enter new location"
value={newLocation}
onChange={(event) => setNewLocation(event.target.value)}
/>
</>
)}
loading={locations.isLoading}
options={allLocations.map((item) => ({ label: item, value: item }))}
/>
</Form.Item>
<Form.Item
label={t("spool.fields.lot_nr")}