tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added dropdown of existing locations in spool edit

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/otherModels.tsx
View File

@@ -3,10 +3,10 @@ import { IFilament } from "../pages/filaments/model";
import { IVendor } from "../pages/vendors/model";
import { ColumnFilterItem } from "antd/es/table/interface";
export function useSpoolmanFilamentFilter() {
export function useSpoolmanFilamentFilter(enabled: boolean = false) {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<IFilament[], unknown, ColumnFilterItem[]>({
enabled: false,
enabled: enabled,
queryKey: ["filaments"],
queryFn: async () => {
const response = await fetch(apiEndpoint + "/filament");
@@ -44,10 +44,10 @@ export function useSpoolmanFilamentFilter() {
});
}
export function useSpoolmanFilamentNames() {
export function useSpoolmanFilamentNames(enabled: boolean = false) {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<IFilament[], unknown, string[]>({
enabled: false,
enabled: enabled,
queryKey: ["filaments"],
queryFn: async () => {
const response = await fetch(apiEndpoint + "/filament");
@@ -73,10 +73,10 @@ export function useSpoolmanFilamentNames() {
});
}
export function useSpoolmanVendors() {
export function useSpoolmanVendors(enabled: boolean = false) {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<IVendor[], unknown, string[]>({
enabled: false,
enabled: enabled,
queryKey: ["vendors"],
queryFn: async () => {
const response = await fetch(apiEndpoint + "/vendor");
@@ -95,10 +95,10 @@ export function useSpoolmanVendors() {
});
}
export function useSpoolmanMaterials() {
export function useSpoolmanMaterials(enabled: boolean = false) {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<string[]>({
enabled: false,
enabled: enabled,
queryKey: ["materials"],
queryFn: async () => {
const response = await fetch(apiEndpoint + "/material");
@@ -113,10 +113,10 @@ export function useSpoolmanMaterials() {
});
}
export function useSpoolmanArticleNumbers() {
export function useSpoolmanArticleNumbers(enabled: boolean = false) {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<string[]>({
enabled: false,
enabled: enabled,
queryKey: ["articleNumbers"],
queryFn: async () => {
const response = await fetch(apiEndpoint + "/article-number");
@@ -131,10 +131,10 @@ export function useSpoolmanArticleNumbers() {
});
}
export function useSpoolmanLotNumbers() {
export function useSpoolmanLotNumbers(enabled: boolean = false) {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<string[]>({
enabled: false,
enabled: enabled,
queryKey: ["lotNumbers"],
queryFn: async () => {
const response = await fetch(apiEndpoint + "/lot-number");
@@ -149,10 +149,10 @@ export function useSpoolmanLotNumbers() {
});
}
export function useSpoolmanLocations() {
export function useSpoolmanLocations(enabled: boolean = false) {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<string[]>({
enabled: false,
enabled: enabled,
queryKey: ["locations"],
queryFn: async () => {
const response = await fetch(apiEndpoint + "/location");

43
client/src/pages/spools/create.tsx
View File

@@ -1,12 +1,13 @@
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 { 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";
interface CreateOrCloneProps {
mode: "create" | "clone";
@@ -91,6 +92,14 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
});
};
const locations = useSpoolmanLocations(true);
const [newLocation, setNewLocation] = useState("");
const allLocations = [...(locations.data || [])];
if (newLocation.trim() && !allLocations.includes(newLocation)) {
allLocations.push(newLocation.trim());
}
return (
<Create
title={props.mode === "create" ? t("spool.titles.create") : t("spool.titles.clone")}
@@ -159,21 +168,11 @@ 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}
>
<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>
@@ -246,7 +245,21 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
},
]}
>
<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")}

70
client/src/pages/spools/edit.tsx
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")}