Client: Added some info to qr code printing label

client/src/components/printing/printingDialog.tsx

@@ -160,14 +160,10 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
               <div
                 key={index}
                 style={{
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
                   width: `${
                     (paperWidth - marginLeft - marginRight) / paperColumns
                   }mm`,
                   height: `${calculatedRowHeight}mm`,
-                  flexDirection: "column",
                   border: borderShowMode === "grid" ? "1px solid #000" : "none",
                 }}
               >

client/src/components/printing/qrCodePrintingDialog.tsx

@@ -5,7 +5,7 @@ import { useTranslate } from "@refinedev/core";
 
 interface QRCodeData {
   value: string;
-  label?: string;
+  label?: JSX.Element;
   errorLevel?: "L" | "M" | "Q" | "H";
 }
 
@@ -26,7 +26,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
     "print-showContent",
     true
   );
-  const [textSize, setTextSize] = useSavedState("print-textSize", 5);
+  const [textSize, setTextSize] = useSavedState("print-textSize", 3);
   const [showSpoolmanIcon, setShowSpoolmanIcon] = useSavedState(
     "print-showSpoolmanIcon",
     true
@@ -34,7 +34,15 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
 
   const elements = items.map((item) => {
     return (
-      <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          width: "100%",
+          maxHeight: "100%",
+          flexDirection: "row",
+        }}
+      >
         <QRCode
           className="print-qrcode"
           icon={showSpoolmanIcon ? "/favicon.ico" : undefined}
@@ -46,12 +54,12 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
         {showContent && (
           <div
             className="print-qrcode-title"
-            style={{ textAlign: "center", color: "#000" }}
+            style={{ textAlign: "left", color: "#000", overflow: "hidden" }}
           >
             {item.label ?? item.value}
           </div>
         )}
-      </>
+      </div>
     );
   });
 
@@ -74,8 +82,8 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
                 <Slider
                   disabled={!showContent}
                   tooltip={{ formatter: (value) => `${value} mm` }}
-                  min={3}
-                  max={15}
+                  min={2}
+                  max={7}
                   value={textSize}
                   step={0.1}
                   onChange={(value) => {
@@ -113,6 +121,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
             }
 
             .print-page .print-qrcode-title {
+                width: 100%;
                 font-size: ${textSize}mm;
             }
 

client/src/components/selectAndPrintDialog.tsx

@@ -7,12 +7,26 @@ import { Button } from "antd";
 import { ISpool } from "../pages/spools/model";
 import { PrinterOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
+import { IFilament } from "../pages/filaments/model";
 
 const SelectAndPrint: React.FC = () => {
   const t = useTranslate();
 
   const [step, setStep] = React.useState(0);
   const [selectedSpools, setSelectedSpools] = React.useState<ISpool[]>([]);
+
+  const formatFilament = (filament: IFilament) => {
+    let vendorPrefix = "";
+    if (filament.vendor) {
+      vendorPrefix = `${filament.vendor.name} - `;
+    }
+    let name = filament.name;
+    if (!name) {
+      name = `ID: ${filament.id}`;
+    }
+    return `${vendorPrefix}${name}`;
+  };
+
   return (
     <>
       <Button
@@ -40,11 +54,53 @@ const SelectAndPrint: React.FC = () => {
         onCancel={() => {
           setStep(1);
         }}
-        items={selectedSpools.map((spool) => ({
-          value: `web+spoolman:s-${spool.id}`,
-          label: `s-${spool.id}`,
-          errorLevel: "H",
-        }))}
+        items={selectedSpools.map(function (spool) {
+          const temps = [];
+          if (spool.filament.settings_extruder_temp) {
+            temps.push(`ET: ${spool.filament.settings_extruder_temp} °C`);
+          }
+          if (spool.filament.settings_bed_temp) {
+            temps.push(`BT: ${spool.filament.settings_bed_temp} °C`);
+          }
+          const tempLine = temps.join(" - ");
+
+          return {
+            value: `web+spoolman:s-${spool.id}`,
+            label: (
+              <p
+                style={{
+                  padding: "1mm 1mm 1mm 0",
+                }}
+              >
+                <b>{formatFilament(spool.filament)}</b>
+                <br />
+                <b>
+                  #{spool.id}
+                  {spool.filament.material && <> - {spool.filament.material}</>}
+                </b>
+                {spool.filament.spool_weight && (
+                  <>
+                    <br />
+                    Spool Weight: {spool.filament.spool_weight ?? "?"} g
+                  </>
+                )}
+                {tempLine && (
+                  <>
+                    <br />
+                    {tempLine}
+                  </>
+                )}
+                {spool.lot_nr && (
+                  <>
+                    <br />
+                    Lot Nr: {spool.lot_nr}
+                  </>
+                )}
+              </p>
+            ),
+            errorLevel: "H",
+          };
+        })}
       />
     </>
   );