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={{
+      <PageHeader
-        padding: 20,
+        title="Print QR Codes"
-        minHeight: 280,
+        onBack={() => {
-        margin: "0 auto",
+          const returnUrl = searchParams.get("return");
-        backgroundColor: token.colorBgContainer,
+          if (returnUrl) {
-        borderRadius: token.borderRadiusLG,
+            navigate(returnUrl, { relative: "path" });
-        color: token.colorText,
+          } else {
-        fontFamily: token.fontFamily,
+            navigate("/spool");
-        fontSize: token.fontSizeLG,
+          }
-        lineHeight: 1.5,
+        }}
-      }}
+      >
-    >
+        <Content
-      {step === 0 && (
+          style={{
-        <SpoolSelectModal
+            padding: 20,
-          description={t("printing.spoolSelect.description")}
+            minHeight: 280,
-          onContinue={(spools) => {
+            margin: "0 auto",
-            setSearchParams((prev) => {
+            backgroundColor: token.colorBgContainer,
-              const newParams = new URLSearchParams(prev);
+            borderRadius: token.borderRadiusLG,
-              newParams.delete("spools");
+            color: token.colorText,
-              spools.forEach((spool) => newParams.append("spools", spool.id.toString()));
+            fontFamily: token.fontFamily,
-              return newParams;
+            fontSize: token.fontSizeLG,
-            });
+            lineHeight: 1.5,
           }}
-        />
+        >
-      )}
+          {step === 0 && (
-      {step === 1 && <SpoolQRCodePrintingDialog spoolIds={spoolIds} />}
+            <SpoolSelectModal
-    </Content>
+              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";

client/src/pages/spools/list.tsx

@@ -12,6 +12,7 @@ import {
   FilterOutlined,
   InboxOutlined,
   PlusSquareOutlined,
+  PrinterOutlined,
   ToTopOutlined,
 } from "@ant-design/icons";
 import {
@@ -253,6 +254,15 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
     <List
       headerButtons={({ defaultButtons }) => (
         <>
+          <Button
+            type="primary"
+            icon={<PrinterOutlined />}
+            onClick={() => {
+              navigate("print");
+            }}
+          >
+            {t("printing.qrcode.button")}
+          </Button>
           <Button
             type="primary"
             icon={<InboxOutlined />}

client/src/pages/spools/show.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { IResourceComponentsProps, useShow, useTranslate } from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
-import { Typography } from "antd";
+import { Button, Typography } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -12,6 +12,7 @@ import { EntityType, useGetFields } from "../../utils/queryFields";
 import { ExtraFieldDisplay } from "../../components/extraFields";
 import { useCurrency } from "../../utils/settings";
 import SpoolIcon from "../../components/spoolIcon";
+import { PrinterOutlined } from "@ant-design/icons";
 
 dayjs.extend(utc);
 
@@ -75,7 +76,22 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
     : record?.filament.color_hex;
 
   return (
-    <Show isLoading={isLoading} title={record ? formatTitle(record) : ""}>
+    <Show
+      isLoading={isLoading}
+      title={record ? formatTitle(record) : ""}
+      headerButtons={({ defaultButtons }) => (
+        <>
+          <Button
+            type="primary"
+            icon={<PrinterOutlined />}
+            href={"/spool/print?spools=" + record?.id + "&return=" + encodeURIComponent(window.location.pathname)}
+          >
+            {t("printing.qrcode.button")}
+          </Button>
+          {defaultButtons}
+        </>
+      )}
+    >
       <Title level={5}>{t("spool.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>{t("spool.fields.filament")}</Title>