Added dropdown of existing locations in spool edit

Resolves #119

client/src/components/otherModels.tsx

@@ -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");

client/src/pages/spools/create.tsx

@@ -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
+            <Radio.Button value={1}>{t("spool.fields.used_weight")}</Radio.Button>
-              value={1}
+            <Radio.Button value={2} disabled={!filamentWeight}>
-            >
-              {t("spool.fields.used_weight")}
-            </Radio.Button>
-            <Radio.Button
-              value={2}
-              disabled={!filamentWeight}
-            >
               {t("spool.fields.remaining_weight")}
             </Radio.Button>
-            <Radio.Button
+            <Radio.Button value={3} disabled={!(filamentWeight && spoolWeight)}>
-              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")}

client/src/pages/spools/edit.tsx

@@ -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
+            <Radio.Button value={1}>{t("spool.fields.used_weight")}</Radio.Button>
-              value={1}
+            <Radio.Button value={2} disabled={!filamentWeight}>
-            >
-              {t("spool.fields.used_weight")}
-            </Radio.Button>
-            <Radio.Button
-              value={2}
-              disabled={!filamentWeight}
-            >
               {t("spool.fields.remaining_weight")}
             </Radio.Button>
-            <Radio.Button
+            <Radio.Button value={3} disabled={!(filamentWeight && spoolWeight)}>
-              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")}>
-        <Form.Item
-          label={t("spool.fields.used_weight")}
-          help={t("spool.fields_help.used_weight")}
-          // name={["used_weight"]}
-          // initialValue={usedWeight}
-        >
           <InputNumber
             min={0}
             addonAfter="g"
@@ -214,12 +206,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
             }}
           />
         </Form.Item>
-        <Form.Item
+        <Form.Item label={t("spool.fields.remaining_weight")} help={t("spool.fields_help.remaining_weight")}>
-          label={t("spool.fields.remaining_weight")}
-          help={t("spool.fields_help.remaining_weight")}
-          // name={["remaining_weight"]}
-          // initialValue={filamentWeight ? filamentWeight - usedWeight : 0}
-        >
           <InputNumber
             min={0}
             addonAfter="g"
@@ -233,12 +220,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
             }}
           />
         </Form.Item>
-        <Form.Item
+        <Form.Item label={t("spool.fields.measured_weight")} help={t("spool.fields_help.measured_weight")}>
-          label={t("spool.fields.measured_weight")}
-          help={t("spool.fields_help.measured_weight")}
-          // name={["measured_weight"]}
-          // initialValue={filamentWeight && spoolWeight ? filamentWeight - usedWeight + spoolWeight : 0}
-        >
           <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")}