Added print page header and back functionality

client/src/pages/printing/index.tsx

@@ -6,8 +6,8 @@ import { Content } from "antd/es/layout/layout";
 import { theme } from "antd";
 import SpoolQRCodePrintingDialog from "./spoolQrCodePrintingDialog";
 import SpoolSelectModal from "./spoolSelectModal";
-import { ISpool } from "../spools/model";
 import { useNavigate, useSearchParams } from "react-router-dom";
+import { PageHeader } from "@refinedev/antd";
 
 dayjs.extend(utc);
 
@@ -17,39 +17,55 @@ export const Printing: React.FC<IResourceComponentsProps> = () => {
   const { token } = useToken();
   const t = useTranslate();
   const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
 
   const spoolIds = searchParams.getAll("spools").map(Number);
   const step = spoolIds.length > 0 ? 1 : 0;
 
   return (
-    <Content
-      style={{
-        padding: 20,
-        minHeight: 280,
-        margin: "0 auto",
-        backgroundColor: token.colorBgContainer,
-        borderRadius: token.borderRadiusLG,
-        color: token.colorText,
-        fontFamily: token.fontFamily,
-        fontSize: token.fontSizeLG,
-        lineHeight: 1.5,
-      }}
-    >
-      {step === 0 && (
-        <SpoolSelectModal
-          description={t("printing.spoolSelect.description")}
-          onContinue={(spools) => {
-            setSearchParams((prev) => {
-              const newParams = new URLSearchParams(prev);
-              newParams.delete("spools");
-              spools.forEach((spool) => newParams.append("spools", spool.id.toString()));
-              return newParams;
-            });
+    <>
+      <PageHeader
+        title="Print QR Codes"
+        onBack={() => {
+          const returnUrl = searchParams.get("return");
+          if (returnUrl) {
+            navigate(returnUrl, { relative: "path" });
+          } else {
+            navigate("/spool");
+          }
+        }}
+      >
+        <Content
+          style={{
+            padding: 20,
+            minHeight: 280,
+            margin: "0 auto",
+            backgroundColor: token.colorBgContainer,
+            borderRadius: token.borderRadiusLG,
+            color: token.colorText,
+            fontFamily: token.fontFamily,
+            fontSize: token.fontSizeLG,
+            lineHeight: 1.5,
           }}
-        />
-      )}
-      {step === 1 && <SpoolQRCodePrintingDialog spoolIds={spoolIds} />}
-    </Content>
+        >
+          {step === 0 && (
+            <SpoolSelectModal
+              description={t("printing.spoolSelect.description")}
+              onContinue={(spools) => {
+                setSearchParams((prev) => {
+                  const newParams = new URLSearchParams(prev);
+                  newParams.delete("spools");
+                  spools.forEach((spool) => newParams.append("spools", spool.id.toString()));
+                  newParams.set("return", "/spool/print");
+                  return newParams;
+                });
+              }}
+            />
+          )}
+          {step === 1 && <SpoolQRCodePrintingDialog spoolIds={spoolIds} />}
+        </Content>
+      </PageHeader>
+    </>
   );
 };
 

client/src/pages/printing/printing.tsx

@@ -1,4 +1,3 @@
-import React, { ReactNode } from "react";
 import { ISpool } from "../spools/model";
 import { useGetSetting, useSetSetting } from "../../utils/querySettings";
 import { v4 as uuidv4 } from "uuid";

client/src/pages/printing/printingDialog.tsx

@@ -1,6 +1,5 @@
 import React, { useRef } from "react";
 import {
-  Modal,
   Slider,
   Button,
   Select,

client/src/pages/printing/qrCodePrintingDialog.tsx

@@ -1,5 +1,4 @@
 import { Col, Form, InputNumber, QRCode, Row, Slider, Switch } from "antd";
-import { useSavedState } from "../../utils/saveload";
 import PrintingDialog from "./printingDialog";
 import { useTranslate } from "@refinedev/core";
 import { QRCodePrintSettings } from "./printing";

client/src/pages/printing/spoolSelectModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Modal, Table, Checkbox, Space, Row, Col, message, Button } from "antd";
+import { Table, Checkbox, Space, Row, Col, message, Button } from "antd";
 import { ISpool } from "../spools/model";
 import { FilteredQueryColumn, SortedColumn, SpoolIconColumn } from "../../components/column";
 import { TableState } from "../../utils/saveload";