Added ability to hide qr code entirely when printing

Resolves #231

client/public/locales/en/common.json

@@ -102,17 +102,22 @@
             "saveSetting": "Save Presets"
         },
         "qrcode": {
-            "button": "Print QR Codes",
+            "button": "Print Labels",
-            "title": "QR Code Printing",
+            "title": "Label Printing",
-            "template": "Template",
+            "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",

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) {

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;
 }
 

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">
+        {showQRCodeMode !== "no" && (
           <div className="print-qrcode-container">
             <QRCode
               className="print-qrcode"
-            icon={showSpoolmanIcon ? "/favicon.svg" : undefined}
+              icon={showQRCodeMode === "withIcon" ? "/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>}
+        )}
+        {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}
         </>
       }