Added button to adjust filament

Resolves #428
Resolves #30

client/src/pages/spools/functions.tsx

@@ -4,8 +4,10 @@ import { getAPIURL } from "../../utils/url";
 import { ISpool } from "./model";
 import { IFilament } from "../filaments/model";
 import { SpoolType, useGetExternalDBFilaments } from "../../utils/queryExternalDB";
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useQueries } from "@tanstack/react-query";
+import { Button, Form, InputNumber, Modal, Radio } from "antd";
+import { useForm } from "antd/es/form/Form";
 
 export async function setSpoolArchived(spool: ISpool, archived: boolean) {
   const init: RequestInit = {
@@ -21,6 +23,27 @@ export async function setSpoolArchived(spool: ISpool, archived: boolean) {
   await fetch(request, init);
 }
 
+/**
+ * Use some spool filament from this spool. Either specify length or weight.
+ * @param spool The spool
+ * @param length The length to add/subtract from the spool, in mm
+ * @param weight The weight to add/subtract from the spool, in g
+ */
+export async function useSpoolFilament(spool: ISpool, length?: number, weight?: number) {
+  const init: RequestInit = {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      use_length: length,
+      use_weight: weight,
+    }),
+  };
+  const request = new Request(`${getAPIURL()}/spool/${spool.id}/use`);
+  await fetch(request, init);
+}
+
 /**
  * Returns an array of queries using the useQueries hook from @tanstack/react-query.
  * Each query fetches a spool by its ID from the server.
@@ -149,3 +172,67 @@ export function useGetFilamentSelectOptions() {
     allExternalFilaments: externalFilaments.data,
   };
 }
+
+type MeasurementType = "length" | "weight";
+
+export function useSpoolAdjustModal() {
+  const t = useTranslate();
+  const [form] = useForm();
+
+  const [curSpool, setCurSpool] = useState<ISpool | null>(null);
+  const [measurementType, setMeasurementType] = useState<MeasurementType>("length");
+
+  const openSpoolAdjustModal = useCallback((spool: ISpool) => {
+    setCurSpool(spool);
+  }, []);
+
+  const spoolAdjustModal = useMemo(() => {
+    if (curSpool === null) {
+      return null;
+    }
+
+    const onSubmit = async () => {
+      if (curSpool === null) {
+        return;
+      }
+
+      const value = form.getFieldValue("filament_value");
+      if (value === undefined || value === null) {
+        return;
+      }
+
+      if (measurementType === "length") {
+        await useSpoolFilament(curSpool, value, undefined);
+      } else {
+        await useSpoolFilament(curSpool, undefined, value);
+      }
+
+      setCurSpool(null);
+    };
+
+    return (
+      <Modal title={t("spool.titles.adjust")} open onCancel={() => setCurSpool(null)} onOk={form.submit}>
+        <p>{t("spool.form.adjust_filament_help")}</p>
+        <Form form={form} initialValues={{ measurement_type: measurementType }} onFinish={onSubmit}>
+          <Form.Item label={t("spool.form.measurement_type_label")} name="measurement_type">
+            <Radio.Group
+              value={measurementType}
+              onChange={({ target: { value } }) => setMeasurementType(value as MeasurementType)}
+            >
+              <Radio.Button value="length">{t("spool.form.measurement_type.length")}</Radio.Button>
+              <Radio.Button value="weight">{t("spool.form.measurement_type.weight")}</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item label={t("spool.form.adjust_filament_value")} name="filament_value">
+            <InputNumber precision={1} addonAfter={measurementType === "length" ? "mm" : "g"} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    );
+  }, [curSpool, measurementType, t]);
+
+  return {
+    openSpoolAdjustModal,
+    spoolAdjustModal,
+  };
+}

client/src/pages/spools/list.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { IResourceComponentsProps, useInvalidate, useNavigation, useTranslate } from "@refinedev/core";
 import { useTable, List } from "@refinedev/antd";
 import { Table, Button, Dropdown, Modal } from "antd";
@@ -13,6 +13,7 @@ import {
   InboxOutlined,
   PlusSquareOutlined,
   PrinterOutlined,
+  ToolOutlined,
   ToTopOutlined,
 } from "@ant-design/icons";
 import {
@@ -26,7 +27,7 @@ import {
   ActionsColumn,
   CustomFieldColumn,
 } from "../../components/column";
-import { setSpoolArchived } from "./functions";
+import { setSpoolArchived, useSpoolAdjustModal } from "./functions";
 import {
   useSpoolmanFilamentFilter,
   useSpoolmanLocations,
@@ -102,6 +103,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const navigate = useNavigate();
   const extraFields = useGetFields(EntityType.spool);
   const currency = useCurrency();
+  const { openSpoolAdjustModal, spoolAdjustModal } = useSpoolAdjustModal();
 
   const allColumnsWithExtraFields = [...allColumns, ...(extraFields.data?.map((field) => "extra." + field.key) ?? [])];
 
@@ -208,23 +210,27 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   }
 
   const { editUrl, showUrl, cloneUrl } = useNavigation();
-  const actions = (record: ISpoolCollapsed) => {
-    const actions: Action[] = [
-      { name: t("buttons.show"), icon: <EyeOutlined />, link: showUrl("spool", record.id) },
-      { name: t("buttons.edit"), icon: <EditOutlined />, link: editUrl("spool", record.id) },
-      { name: t("buttons.clone"), icon: <PlusSquareOutlined />, link: cloneUrl("spool", record.id) },
-    ];
-    if (record.archived) {
-      actions.push({
-        name: t("buttons.unArchive"),
-        icon: <ToTopOutlined />,
-        onClick: () => archiveSpool(record, false),
-      });
-    } else {
-      actions.push({ name: t("buttons.archive"), icon: <InboxOutlined />, onClick: () => archiveSpoolPopup(record) });
-    }
-    return actions;
-  };
+  const actions = useCallback(
+    (record: ISpoolCollapsed) => {
+      const actions: Action[] = [
+        { name: t("buttons.show"), icon: <EyeOutlined />, link: showUrl("spool", record.id) },
+        { name: t("buttons.edit"), icon: <EditOutlined />, link: editUrl("spool", record.id) },
+        { name: t("buttons.clone"), icon: <PlusSquareOutlined />, link: cloneUrl("spool", record.id) },
+        { name: t("spool.titles.adjust"), icon: <ToolOutlined />, onClick: () => openSpoolAdjustModal(record) },
+      ];
+      if (record.archived) {
+        actions.push({
+          name: t("buttons.unArchive"),
+          icon: <ToTopOutlined />,
+          onClick: () => archiveSpool(record, false),
+        });
+      } else {
+        actions.push({ name: t("buttons.archive"), icon: <InboxOutlined />, onClick: () => archiveSpoolPopup(record) });
+      }
+      return actions;
+    },
+    [t, editUrl, showUrl, cloneUrl, openSpoolAdjustModal, archiveSpool, archiveSpoolPopup]
+  );
 
   const originalOnChange = tableProps.onChange;
   tableProps.onChange = (pagination, filters, sorter, extra) => {
@@ -319,6 +325,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
         </>
       )}
     >
+      {spoolAdjustModal}
       <Table
         {...tableProps}
         sticky