diff --git a/client/src/pages/spools/create.tsx b/client/src/pages/spools/create.tsx index aea54e7..ecdd65a 100644 --- a/client/src/pages/spools/create.tsx +++ b/client/src/pages/spools/create.tsx @@ -29,6 +29,7 @@ import utc from "dayjs/plugin/utc"; import { getCurrencySymbol, useCurrency } from "../../utils/settings"; import { ExternalFilament, useGetExternalDBFilaments } from "../../utils/queryExternalDB"; import { createFilamentFromExternal } from "../filaments/functions"; +import { formatFilamentLabel, useGetFilamentSelectOptions } from "./functions"; dayjs.extend(utc); @@ -40,23 +41,6 @@ type ISpoolRequest = Omit & { filament_id: number | string; }; -function formatFilamentLabel(name: string, diameter: number, vendorName?: string, material?: string, weight?: number) { - const portions = []; - if (vendorName) { - portions.push(vendorName); - } - portions.push(name); - const extras = []; - if (material) { - extras.push(material); - } - extras.push(formatLength(diameter)); - if (weight) { - extras.push(formatWeight(weight)); - } - return `${portions.join(" - ")} (${extras.join(", ")})`; -} - /** * Performs a case-insensitive search for the given query in the given string. * The query is broken down into words and the search is performed on each word. @@ -70,7 +54,6 @@ export const SpoolCreate: React.FC { const values = StringifiedExtras(await form.validateFields()); - if (typeof values.filament_id === "string") { + const selectOption = getById(values.filament_id); + if (selectOption?.is_internal === false) { // Filament ID being a string indicates its an external filament. // If so, we should first create the internal filament version, then create the spool(s) - const externalFilament = externalFilaments.data?.find((f) => f.id === values.filament_id); + const externalFilament = allExternalFilaments?.find((f) => f.id === values.filament_id); if (!externalFilament) { throw new Error("Unknown external filament"); } @@ -131,10 +127,6 @@ export const SpoolCreate: React.FC({ - resource: "filament", - }); - // Use useEffect to update the form's initialValues when the extra fields are loaded // This is necessary because the form is rendered before the extra fields are loaded React.useEffect(() => { @@ -146,72 +138,6 @@ export const SpoolCreate: React.FC { - return { - label: formatFilamentLabel( - item.name ?? `ID ${item.id}`, - item.diameter, - item.vendor?.name, - item.material, - item.weight - ), - value: item.id, - weight: item.weight, - spool_weight: item.spool_weight, - is_internal: true, - }; - }); - filamentSelectInternal?.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" })); - - const filamentSelectExternal: SelectOption[] | undefined = externalFilaments.data?.map((item) => { - return { - label: formatFilamentLabel(item.name, item.diameter, item.manufacturer, item.material, item.weight), - value: item.id, - weight: item.weight, - spool_weight: item.spool_weight || undefined, - is_internal: false, - }; - }); - filamentSelectExternal?.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" })); - - const filamentSelectOptions = [ - { - label: {t("spool.fields.filament_internal")}, - options: filamentSelectInternal ?? [], - }, - { - label: {t("spool.fields.filament_external")}, - options: filamentSelectExternal ?? [], - }, - ]; - - const selectedFilamentID: number | string | undefined = Form.useWatch("filament_id", form); - let selectedFilament: SelectOption | null = null; - // selectedFilamentID is a number of it's an internal filament, and a string of it's an external filament. - if (typeof selectedFilamentID === "number") { - selectedFilament = - filamentSelectInternal?.find((obj) => { - return obj.value === selectedFilamentID; - }) ?? null; - } else if (typeof selectedFilamentID === "string") { - selectedFilament = - filamentSelectExternal?.find((obj) => { - return obj.value === selectedFilamentID; - }) ?? null; - } - // // Weight calculations // @@ -220,17 +146,11 @@ export const SpoolCreate: React.FC { - const initial_weight = initialWeightValue ?? 0; - const spool_weight = spoolWeightValue ?? 0; - const newFilamentWeight = selectedFilament?.weight || 0; const newSpoolWeight = selectedFilament?.spool_weight || 0; - - const currentCalculatedFilamentWeight = selectedFilament ? calcTotalWeight(selectedFilament) : 0; if (newFilamentWeight > 0) { form.setFieldValue("initial_weight", newFilamentWeight); } - if (newSpoolWeight > 0) { form.setFieldValue("spool_weight", newSpoolWeight); } @@ -274,10 +194,6 @@ export const SpoolCreate: React.FC { const grossWeight = getGrossWeight(); @@ -390,7 +306,7 @@ export const SpoolCreate: React.FC