From 53da38e39696a119784b2e066cfe48d2dfd73cab Mon Sep 17 00:00:00 2001
From: Charalampos Tsachakis <htsachakis@gmail.com>
Date: Wed, 12 Feb 2025 11:31:11 +0200
Subject: [PATCH] Added adjust spool button

Added adjust spool button to spools/show page
---
 client/src/pages/spools/show.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/spools/show.tsx b/client/src/pages/spools/show.tsx
index d96a4e1..82a4fd7 100644
--- a/client/src/pages/spools/show.tsx
+++ b/client/src/pages/spools/show.tsx
@@ -1,4 +1,4 @@
-import { InboxOutlined, PrinterOutlined, ToTopOutlined } from "@ant-design/icons";
+import { InboxOutlined, PrinterOutlined, ToTopOutlined, ToolOutlined } from "@ant-design/icons";
 import { DateField, NumberField, Show, TextField } from "@refinedev/antd";
 import { IResourceComponentsProps, useInvalidate, useShow, useTranslate } from "@refinedev/core";
 import { Button, Modal, Typography } from "antd";
@@ -12,7 +12,7 @@ import { enrichText } from "../../utils/parsing";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { useCurrency } from "../../utils/settings";
 import { IFilament } from "../filaments/model";
-import { setSpoolArchived } from "./functions";
+import { setSpoolArchived, useSpoolAdjustModal } from "./functions";
 import { ISpool } from "./model";
 
 dayjs.extend(utc);
@@ -42,6 +42,9 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
     return item.price;
   };
 
+  // Provides the function to open the spool adjustment modal and the modal component itself
+  const { openSpoolAdjustModal, spoolAdjustModal } = useSpoolAdjustModal();
+
   // Function for opening an ant design modal that asks for confirmation for archiving a spool
   const archiveSpool = async (spool: ISpool, archive: boolean) => {
     await setSpoolArchived(spool, archive);
@@ -104,9 +107,9 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
 
   const colorObj = record?.filament.multi_color_hexes
     ? {
-        colors: record.filament.multi_color_hexes.split(","),
-        vertical: record.filament.multi_color_direction === "longitudinal",
-      }
+      colors: record.filament.multi_color_hexes.split(","),
+      vertical: record.filament.multi_color_direction === "longitudinal",
+    }
     : record?.filament.color_hex;
 
   return (
@@ -115,6 +118,13 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
       title={record ? formatTitle(record) : ""}
       headerButtons={({ defaultButtons }) => (
         <>
+          <Button
+            type="primary"
+            icon={<ToolOutlined />}
+            onClick={() => record && openSpoolAdjustModal(record)}
+          >
+            {t("spool.titles.adjust")}
+          </Button>
           <Button
             type="primary"
             icon={<PrinterOutlined />}
@@ -133,6 +143,7 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
           )}
 
           {defaultButtons}
+          {spoolAdjustModal}
         </>
       )}
     >