From 7082c5206b966c38c2c6a0fe15fa7fc42add4bb5 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Wed, 7 Aug 2024 13:09:43 +0200
Subject: [PATCH] Added ability to hide qr code entirely when printing

Resolves #231
---
 client/public/locales/en/common.json          | 17 ++++--
 client/src/pages/printing/index.tsx           |  2 +-
 client/src/pages/printing/printing.tsx        |  2 +-
 .../pages/printing/qrCodePrintingDialog.tsx   | 61 ++++++++++++-------
 4 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json
index 8b5162d..be4c583 100644
--- a/client/public/locales/en/common.json
+++ b/client/public/locales/en/common.json
@@ -102,17 +102,22 @@
             "saveSetting": "Save Presets"
         },
         "qrcode": {
-            "button": "Print QR Codes",
-            "title": "QR Code Printing",
-            "template": "Template",
+            "button": "Print Labels",
+            "title": "Label Printing",
+            "template": "Label Template",
             "templateHelp": "Use {} to insert values of the spool object as text. For example {id} will be replaced with the spool id, or {filament.material} will be replaced with the material of the spool. Enclose text with double asterix ** to make it bold. Click the button to view a list of all available tags.",
-            "textSize": "Content Text Size",
+            "textSize": "Label Text Size",
             "showContent": "Print Label",
-            "showSpoolmanIcon": "Show Spoolman Icon"
+            "showQRCode": "Print QR Code",
+            "showQRCodeMode": {
+                "no": "No",
+                "simple": "Simple",
+                "withIcon": "With Icon"
+            }
         },
         "spoolSelect": {
             "title": "Select Spools",
-            "description": "Select spools to print QR codes for.",
+            "description": "Select spools to print labels for.",
             "showArchived": "Show Archived",
             "noSpoolsSelected": "You have not selected any spools.",
             "selectAll": "Select/Unselect All",
diff --git a/client/src/pages/printing/index.tsx b/client/src/pages/printing/index.tsx
index af9d944..0e553a0 100644
--- a/client/src/pages/printing/index.tsx
+++ b/client/src/pages/printing/index.tsx
@@ -25,7 +25,7 @@ export const Printing: React.FC<IResourceComponentsProps> = () => {
   return (
     <>
       <PageHeader
-        title="Print QR Codes"
+        title={t("printing.qrcode.button")}
         onBack={() => {
           const returnUrl = searchParams.get("return");
           if (returnUrl) {
diff --git a/client/src/pages/printing/printing.tsx b/client/src/pages/printing/printing.tsx
index 06c0d60..9f27b42 100644
--- a/client/src/pages/printing/printing.tsx
+++ b/client/src/pages/printing/printing.tsx
@@ -19,8 +19,8 @@ export interface PrintSettings {
 
 export interface QRCodePrintSettings {
   showContent?: boolean;
+  showQRCodeMode?: "no" | "simple" | "withIcon";
   textSize?: number;
-  showSpoolmanIcon?: boolean;
   printSettings: PrintSettings;
 }
 
diff --git a/client/src/pages/printing/qrCodePrintingDialog.tsx b/client/src/pages/printing/qrCodePrintingDialog.tsx
index 82ba255..bf2fd6f 100644
--- a/client/src/pages/printing/qrCodePrintingDialog.tsx
+++ b/client/src/pages/printing/qrCodePrintingDialog.tsx
@@ -1,5 +1,5 @@
 import { useTranslate } from "@refinedev/core";
-import { Col, Form, InputNumber, QRCode, Row, Slider, Switch } from "antd";
+import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch } from "antd";
 import { QRCodePrintSettings } from "./printing";
 import PrintingDialog from "./printingDialog";
 
@@ -29,23 +29,29 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
   const t = useTranslate();
 
   const showContent = printSettings?.showContent === undefined ? true : printSettings?.showContent;
+  const showQRCodeMode = printSettings?.showQRCodeMode || "withIcon";
   const textSize = printSettings?.textSize || 3;
-  const showSpoolmanIcon = printSettings?.showSpoolmanIcon === undefined ? true : printSettings?.showSpoolmanIcon;
 
   const elements = items.map((item) => {
     return (
       <div className="print-qrcode-item">
-        <div className="print-qrcode-container">
-          <QRCode
-            className="print-qrcode"
-            icon={showSpoolmanIcon ? "/favicon.svg" : undefined}
-            value={item.value}
-            errorLevel={item.errorLevel}
-            type="svg"
-            color="#000"
-          />
-        </div>
-        {showContent && <div className="print-qrcode-title">{item.label ?? item.value}</div>}
+        {showQRCodeMode !== "no" && (
+          <div className="print-qrcode-container">
+            <QRCode
+              className="print-qrcode"
+              icon={showQRCodeMode === "withIcon" ? "/favicon.svg" : undefined}
+              value={item.value}
+              errorLevel={item.errorLevel}
+              type="svg"
+              color="#000"
+            />
+          </div>
+        )}
+        {showContent && (
+          <div className="print-qrcode-title" style={showQRCodeMode === "no" ? { paddingLeft: "1mm" } : {}}>
+            {item.label ?? item.value}
+          </div>
+        )}
       </div>
     );
   });
@@ -62,6 +68,25 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
       extraSettingsStart={extraSettingsStart}
       extraSettings={
         <>
+          <Form.Item label={t("printing.qrcode.showQRCode")}>
+            <Radio.Group
+              options={[
+                { label: t("printing.qrcode.showQRCodeMode.no"), value: "no" },
+                {
+                  label: t("printing.qrcode.showQRCodeMode.simple"),
+                  value: "simple",
+                },
+                { label: t("printing.qrcode.showQRCodeMode.withIcon"), value: "withIcon" },
+              ]}
+              onChange={(e: RadioChangeEvent) => {
+                printSettings.showQRCodeMode = e.target.value;
+                setPrintSettings(printSettings);
+              }}
+              value={showQRCodeMode}
+              optionType="button"
+              buttonStyle="solid"
+            />
+          </Form.Item>
           <Form.Item label={t("printing.qrcode.showContent")}>
             <Switch
               checked={showContent}
@@ -103,15 +128,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
               </Col>
             </Row>
           </Form.Item>
-          <Form.Item label={t("printing.qrcode.showSpoolmanIcon")}>
-            <Switch
-              checked={showSpoolmanIcon}
-              onChange={(checked) => {
-                printSettings.showSpoolmanIcon = checked;
-                setPrintSettings(printSettings);
-              }}
-            />
-          </Form.Item>
+
           {extraSettings}
         </>
       }