tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Recoded label printing settings to store in DB instead of in browser

Browse Source
This commit is contained in:
Donkie
2024-06-15 14:07:48 +02:00
parent 4d0e76b64f
commit 426496b4e5
7 changed files with 337 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
client/src/components/printing/printing.ts Normal file
View File

@@ -0,0 +1,58 @@
import { useGetSetting, useSetSetting } from "../../utils/querySettings";
export interface PrintSettings {
name?: string;
margin?: { top: number; bottom: number; left: number; right: number };
printerMargin?: { top: number; bottom: number; left: number; right: number };
spacing?: { horizontal: number; vertical: number };
columns?: number;
rows?: number;
skipItems?: number;
itemCopies?: number;
paperSize?: string;
customPaperSize?: { width: number; height: number };
borderShowMode?: "none" | "border" | "grid";
}
export interface QRCodePrintSettings {
showContent?: boolean;
textSize?: number;
showSpoolmanIcon?: boolean;
printSettings: PrintSettings;
}
export interface SpoolQRCodePrintSettings {
showVendor?: boolean;
showLotNr?: boolean;
showSpoolWeight?: boolean;
showTemperatures?: boolean;
showSpoolComment?: boolean;
showFilamentComment?: boolean;
showVendorComment?: boolean;
labelSettings: QRCodePrintSettings;
}
function defaultSpoolQRCodePrintSettings(): SpoolQRCodePrintSettings {
return {
labelSettings: {
printSettings: {},
},
};
}
export function useGetPrintSettings(): SpoolQRCodePrintSettings[] {
const { data } = useGetSetting("print_settings");
const parsed = data && data.value ? JSON.parse(data.value) : ([] as SpoolQRCodePrintSettings[]);
if (parsed.length === 0) {
parsed.push(defaultSpoolQRCodePrintSettings());
}
return parsed;
}
export function useSetPrintSettings(): (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => void {
const mut = useSetSetting("print_settings");
return (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => {
mut.mutate(spoolQRCodePrintSettings);
};
}

244
client/src/components/printing/printingDialog.tsx
View File

@@ -16,9 +16,12 @@ import {
import ReactToPrint from "react-to-print";
import { useSavedState } from "../../utils/saveload";
import { useTranslate } from "@refinedev/core";
import { PrintSettings } from "./printing";
interface PrintingDialogProps {
items: JSX.Element[];
printSettings: PrintSettings;
setPrintSettings: (setPrintSettings: PrintSettings) => void;
style?: string;
extraSettings?: JSX.Element;
visible: boolean;
@@ -58,37 +61,39 @@ const paperDimensions: { [key: string]: PaperDimensions } = {
},
};
const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSettings, visible, onCancel, title }) => {
const PrintingDialog: React.FC<PrintingDialogProps> = ({
items,
printSettings,
setPrintSettings,
style,
extraSettings,
visible,
onCancel,
title,
}) => {
const t = useTranslate();
const [collapseState, setCollapseState] = useSavedState<string[]>("print-collapseState", []);
const [marginLeft, setMarginLeft] = useSavedState("print-marginLeft", 10);
const [marginTop, setMarginTop] = useSavedState("print-marginTop", 10);
const [marginRight, setMarginRight] = useSavedState("print-marginRight", 10);
const [marginBottom, setMarginBottom] = useSavedState("print-marginBottom", 10);
const [horizontalSpacing, setHorizontalSpacing] = useSavedState("print-horizontalSpacing", 0);
const [verticalSpacing, setVerticalSpacing] = useSavedState("print-verticalSpacing", 0);
const [printerMarginLeft, setPrinterMarginLeft] = useSavedState("print-printerMarginLeft", 5);
const [printerMarginTop, setPrinterMarginTop] = useSavedState("print-printerMarginTop", 5);
const [printerMarginRight, setPrinterMarginRight] = useSavedState("print-printerMarginRight", 5);
const [printerMarginBottom, setPrinterMarginBottom] = useSavedState("print-printerMarginBottom", 5);
const [paperColumns, setPaperColumns] = useSavedState("print-itemsPerRow", 3);
const [paperRows, setPaperRows] = useSavedState("print-rowsPerPage", 8);
const [skipItems, setSkipItems] = useSavedState("print-skipItems", 0);
const [itemCopies, setItemCopies] = useSavedState("print-itemCopies", 1);
const [paperSize, setPaperSize] = useSavedState("print-paperSize", "A4");
const [customPaperWidth, setCustomPaperWidth] = useSavedState("print-customPaperWidth", 210);
const [customPaperHeight, setCustomPaperHeight] = useSavedState("print-customPaperHeight", 297);
const [previewScale, setPreviewScale] = useSavedState("print-previewScale", 0.6);
const [borderShowMode, setBorderShowMode] = useSavedState<"none" | "border" | "grid">("print-borderShowMode", "grid");
const paperWidth = paperSize === "custom" ? customPaperWidth : paperDimensions[paperSize].width;
const paperHeight = paperSize === "custom" ? customPaperHeight : paperDimensions[paperSize].height;
const margin = printSettings?.margin || { top: 10, bottom: 10, left: 10, right: 10 };
const printerMargin = printSettings?.printerMargin || { top: 5, bottom: 5, left: 5, right: 5 };
const spacing = printSettings?.spacing || { horizontal: 0, vertical: 0 };
const paperColumns = printSettings?.columns || 3;
const paperRows = printSettings?.rows || 8;
const skipItems = printSettings?.skipItems || 0;
const itemCopies = printSettings?.itemCopies || 1;
const paperSize = printSettings?.paperSize || "A4";
const customPaperSize = printSettings?.customPaperSize || { width: 210, height: 297 };
const borderShowMode = printSettings?.borderShowMode || "grid";
const paperWidth = paperSize === "custom" ? customPaperSize.width : paperDimensions[paperSize].width;
const paperHeight = paperSize === "custom" ? customPaperSize.height : paperDimensions[paperSize].height;
const printRef = useRef<HTMLDivElement>(null);
const itemWidth = (paperWidth - marginLeft - marginRight - horizontalSpacing) / paperColumns - horizontalSpacing;
const itemHeight = (paperHeight - marginTop - marginBottom - verticalSpacing) / paperRows - verticalSpacing;
const itemWidth = (paperWidth - margin.left - margin.right - spacing.horizontal) / paperColumns - spacing.horizontal;
const itemHeight = (paperHeight - margin.top - margin.bottom - spacing.vertical) / paperRows - spacing.vertical;
const itemsPerRow = paperColumns;
const rowsPerPage = paperRows;
@@ -123,12 +128,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
width: `${itemWidth}mm`,
height: `${itemHeight}mm`,
border: borderShowMode === "grid" ? "1px solid #000" : "none",
paddingLeft: colIdx === 0 ? `${Math.max(printerMarginLeft - marginLeft, 0)}mm` : 0,
paddingLeft: colIdx === 0 ? `${Math.max(printerMargin.left - margin.left, 0)}mm` : 0,
paddingRight:
colIdx === paperColumns - 1 ? `${Math.max(printerMarginRight - marginRight, 0)}mm` : 0,
paddingTop: rowIdx === 0 ? `${Math.max(printerMarginTop - marginTop, 0)}mm` : 0,
colIdx === paperColumns - 1 ? `${Math.max(printerMargin.right - margin.right, 0)}mm` : 0,
paddingTop: rowIdx === 0 ? `${Math.max(printerMargin.top - margin.top, 0)}mm` : 0,
paddingBottom:
rowIdx === paperRows - 1 ? `${Math.max(printerMarginBottom - marginBottom, 0)}mm` : 0,
rowIdx === paperRows - 1 ? `${Math.max(printerMargin.bottom - margin.bottom, 0)}mm` : 0,
}}
>
{item}
@@ -155,12 +160,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
className="print-page-area"
style={{
border: borderShowMode !== "none" ? "1px solid #000" : "none",
height: `${paperHeight - marginTop - marginBottom}mm`,
width: `${paperWidth - marginLeft - marginRight}mm`,
marginTop: `calc(${marginTop}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
marginLeft: `calc(${marginLeft}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
marginRight: `calc(${marginRight}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
marginBottom: `calc(${marginBottom}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
height: `${paperHeight - margin.top - margin.bottom}mm`,
width: `${paperWidth - margin.left - margin.right}mm`,
marginTop: `calc(${margin.top}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
marginLeft: `calc(${margin.left}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
marginRight: `calc(${margin.right}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
marginBottom: `calc(${margin.bottom}mm - ${borderShowMode !== "none" ? "1px" : "0px"})`,
}}
>
<table
@@ -238,7 +243,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
}
.print-page table {
border-spacing: ${horizontalSpacing}mm ${verticalSpacing}mm;
border-spacing: ${spacing.horizontal}mm ${spacing.vertical}mm;
border-collapse: separate;
}
@@ -262,7 +267,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={30}
value={skipItems}
onChange={(value) => {
setSkipItems(value);
printSettings.skipItems = value;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -272,7 +278,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
style={{ margin: "0 16px" }}
value={skipItems}
onChange={(value) => {
setSkipItems(value ?? 1);
printSettings.skipItems = value ?? 1;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -286,7 +293,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={3}
value={itemCopies}
onChange={(value) => {
setItemCopies(value);
printSettings.itemCopies = value;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -296,7 +304,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
style={{ margin: "0 16px" }}
value={itemCopies}
onChange={(value) => {
setItemCopies(value ?? 1);
printSettings.itemCopies = value ?? 1;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -313,7 +322,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
{ label: t("printing.generic.borders.grid"), value: "grid" },
]}
onChange={(e: RadioChangeEvent) => {
setBorderShowMode(e.target.value);
printSettings.borderShowMode = e.target.value;
setPrintSettings(printSettings);
}}
value={borderShowMode}
optionType="button"
@@ -363,7 +373,13 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
</Collapse.Panel>
<Collapse.Panel header={t("printing.generic.layoutSettings")} key="2">
<Form.Item label={t("printing.generic.paperSize")}>
<Select value={paperSize} onChange={(value) => setPaperSize(value)}>
<Select
value={paperSize}
onChange={(value) => {
printSettings.paperSize = value;
setPrintSettings(printSettings);
}}
>
{Object.keys(paperDimensions).map((key) => (
<Select.Option key={key} value={key}>
{key}
@@ -376,10 +392,14 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<Row align="middle">
<Col span={11}>
<InputNumber
value={customPaperWidth}
value={customPaperSize.width}
min={0.1}
addonAfter="mm"
onChange={(value) => setCustomPaperWidth(value ?? 0)}
onChange={(value) => {
customPaperSize.width = value ?? 0;
printSettings.customPaperSize = customPaperSize;
setPrintSettings(printSettings);
}}
/>
</Col>
<Col span={2} style={{ textAlign: "center" }}>
@@ -387,10 +407,14 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
</Col>
<Col span={11}>
<InputNumber
value={customPaperHeight}
value={customPaperSize.height}
min={0.1}
addonAfter="mm"
onChange={(value) => setCustomPaperHeight(value ?? 0)}
onChange={(value) => {
customPaperSize.height = value ?? 0;
printSettings.customPaperSize = customPaperSize;
setPrintSettings(printSettings);
}}
/>
</Col>
</Row>
@@ -403,7 +427,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={5}
value={paperColumns}
onChange={(value) => {
setPaperColumns(value);
printSettings.columns = value;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -413,7 +438,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
style={{ margin: "0 16px" }}
value={paperColumns}
onChange={(value) => {
setPaperColumns(value ?? 1);
printSettings.columns = value ?? 1;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -427,7 +453,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={15}
value={paperRows}
onChange={(value) => {
setPaperRows(value);
printSettings.rows = value;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -437,7 +464,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
style={{ margin: "0 16px" }}
value={paperRows}
onChange={(value) => {
setPaperRows(value ?? 1);
printSettings.rows = value ?? 1;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -453,9 +481,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={50}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={marginLeft}
value={margin.left}
onChange={(value) => {
setMarginLeft(value);
margin.left = value;
printSettings.margin = margin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -463,10 +493,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={marginLeft}
value={margin.left}
addonAfter="mm"
onChange={(value) => {
setMarginLeft(value ?? 0);
margin.left = value ?? 0;
printSettings.margin = margin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -480,9 +512,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={50}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={marginTop}
value={margin.top}
onChange={(value) => {
setMarginTop(value);
margin.top = value;
printSettings.margin = margin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -490,10 +524,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={marginTop}
value={margin.top}
addonAfter="mm"
onChange={(value) => {
setMarginTop(value ?? 0);
margin.top = value ?? 0;
printSettings.margin = margin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -507,9 +543,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={50}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={marginRight}
value={margin.right}
onChange={(value) => {
setMarginRight(value);
margin.right = value;
printSettings.margin = margin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -517,10 +555,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={marginRight}
value={margin.right}
addonAfter="mm"
onChange={(value) => {
setMarginRight(value ?? 0);
margin.right = value ?? 0;
printSettings.margin = margin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -534,9 +574,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={50}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={marginBottom}
value={margin.bottom}
onChange={(value) => {
setMarginBottom(value);
margin.bottom = value;
printSettings.margin = margin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -544,10 +586,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={marginBottom}
value={margin.bottom}
addonAfter="mm"
onChange={(value) => {
setMarginBottom(value ?? 0);
margin.bottom = value ?? 0;
printSettings.margin = margin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -563,9 +607,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={50}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={printerMarginLeft}
value={printerMargin.left}
onChange={(value) => {
setPrinterMarginLeft(value);
printerMargin.left = value;
printSettings.printerMargin = printerMargin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -573,10 +619,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={printerMarginLeft}
value={printerMargin.left}
addonAfter="mm"
onChange={(value) => {
setPrinterMarginLeft(value ?? 0);
printerMargin.left = value ?? 0;
printSettings.printerMargin = printerMargin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -590,9 +638,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={50}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={printerMarginTop}
value={printerMargin.top}
onChange={(value) => {
setPrinterMarginTop(value);
printerMargin.top = value;
printSettings.printerMargin = printerMargin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -600,10 +650,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={printerMarginTop}
value={printerMargin.top}
addonAfter="mm"
onChange={(value) => {
setPrinterMarginTop(value ?? 0);
printerMargin.top = value ?? 0;
printSettings.printerMargin = printerMargin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -617,9 +669,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={50}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={printerMarginRight}
value={printerMargin.right}
onChange={(value) => {
setPrinterMarginRight(value);
printerMargin.right = value;
printSettings.printerMargin = printerMargin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -627,10 +681,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={printerMarginRight}
value={printerMargin.right}
addonAfter="mm"
onChange={(value) => {
setPrinterMarginRight(value ?? 0);
printerMargin.right = value ?? 0;
printSettings.printerMargin = printerMargin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -644,9 +700,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={50}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={printerMarginBottom}
value={printerMargin.bottom}
onChange={(value) => {
setPrinterMarginBottom(value);
printerMargin.bottom = value;
printSettings.printerMargin = printerMargin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -654,10 +712,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={printerMarginBottom}
value={printerMargin.bottom}
addonAfter="mm"
onChange={(value) => {
setPrinterMarginBottom(value ?? 0);
printerMargin.bottom = value ?? 0;
printSettings.printerMargin = printerMargin;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -672,9 +732,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={20}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={horizontalSpacing}
value={spacing.horizontal}
onChange={(value) => {
setHorizontalSpacing(value);
spacing.horizontal = value;
printSettings.spacing = spacing;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -682,10 +744,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={horizontalSpacing}
value={spacing.horizontal}
addonAfter="mm"
onChange={(value) => {
setHorizontalSpacing(value ?? 0);
spacing.horizontal = value ?? 0;
printSettings.spacing = spacing;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -699,9 +763,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
max={20}
step={0.1}
tooltip={{ formatter: (value) => `${value} mm` }}
value={verticalSpacing}
value={spacing.vertical}
onChange={(value) => {
setVerticalSpacing(value);
spacing.vertical = value;
printSettings.spacing = spacing;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -709,10 +775,12 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
<InputNumber
step={0.1}
style={{ margin: "0 16px" }}
value={verticalSpacing}
value={spacing.vertical}
addonAfter="mm"
onChange={(value) => {
setVerticalSpacing(value ?? 0);
spacing.vertical = value ?? 0;
printSettings.spacing = spacing;
setPrintSettings(printSettings);
}}
/>
</Col>

45
client/src/components/printing/qrCodePrintingDialog.tsx
View File

@@ -2,6 +2,7 @@ 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";
interface QRCodeData {
value: string;
@@ -12,16 +13,25 @@ interface QRCodeData {
interface QRCodePrintingDialogProps {
visible: boolean;
items: QRCodeData[];
printSettings: QRCodePrintSettings;
setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
onCancel: () => void;
extraSettings?: JSX.Element;
}
const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, items, onCancel, extraSettings }) => {
const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
visible,
items,
printSettings,
setPrintSettings,
onCancel,
extraSettings,
}) => {
const t = useTranslate();
const [showContent, setShowContent] = useSavedState("print-showContent", true);
const [textSize, setTextSize] = useSavedState("print-textSize", 3);
const [showSpoolmanIcon, setShowSpoolmanIcon] = useSavedState("print-showSpoolmanIcon", true);
const showContent = printSettings?.showContent;
const textSize = printSettings?.textSize || 5;
const showSpoolmanIcon = printSettings?.showSpoolmanIcon;
const elements = items.map((item) => {
return (
@@ -46,10 +56,21 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, it
visible={visible}
title={t("printing.qrcode.title")}
items={elements}
printSettings={printSettings.printSettings}
setPrintSettings={(newSettings) => {
printSettings.printSettings = newSettings;
setPrintSettings(printSettings);
}}
extraSettings={
<>
<Form.Item label={t("printing.qrcode.showContent")}>
<Switch checked={showContent} onChange={(checked) => setShowContent(checked)} />
<Switch
checked={showContent}
onChange={(checked) => {
printSettings.showContent = checked;
setPrintSettings(printSettings);
}}
/>
</Form.Item>
<Form.Item label={t("printing.qrcode.textSize")}>
<Row>
@@ -62,7 +83,8 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, it
value={textSize}
step={0.1}
onChange={(value) => {
setTextSize(value);
printSettings.textSize = value;
setPrintSettings(printSettings);
}}
/>
</Col>
@@ -75,14 +97,21 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, it
value={textSize}
addonAfter="mm"
onChange={(value) => {
setTextSize(value ?? 5);
printSettings.textSize = value ?? 5;
setPrintSettings(printSettings);
}}
/>
</Col>
</Row>
</Form.Item>
<Form.Item label={t("printing.qrcode.showSpoolmanIcon")}>
<Switch checked={showSpoolmanIcon} onChange={(checked) => setShowSpoolmanIcon(checked)} />
<Switch
checked={showSpoolmanIcon}
onChange={(checked) => {
printSettings.showSpoolmanIcon = checked;
setPrintSettings(printSettings);
}}
/>
</Form.Item>
{extraSettings}
</>

78
client/src/components/printing/spoolQrCodePrintingDialog.tsx
View File

@@ -4,6 +4,7 @@ import { ISpool } from "../../pages/spools/model";
import QRCodePrintingDialog from "./qrCodePrintingDialog";
import { useSavedState } from "../../utils/saveload";
import { useTranslate } from "@refinedev/core";
import { useGetPrintSettings, useSetPrintSettings } from "./printing";
interface SpoolQRCodePrintingDialog {
visible: boolean;
@@ -13,14 +14,16 @@ interface SpoolQRCodePrintingDialog {
const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visible, items, onCancel }) => {
const t = useTranslate();
const printSettings = useGetPrintSettings()[0];
const setPrintSettings = useSetPrintSettings();
const [showVendor, setShowVendor] = useSavedState("print-showVendor", true);
const [showLotNr, setShowLotNr] = useSavedState("print-showLotNr", true);
const [showSpoolWeight, setShowSpoolWeight] = useSavedState("print-showSpoolWeight", true);
const [showTemperatures, setShowTemperatures] = useSavedState("print-showTemperatures", true);
const [showSpoolComment, setShowSpoolComment] = useSavedState("print-showSpoolComment", false);
const [showFilamentComment, setShowFilamentComment] = useSavedState("print-showFilamentComment", false);
const [showVendorComment, setShowVendorComment] = useSavedState("print-showVendorComment", false);
const showVendor = printSettings?.showVendor;
const showLotNr = printSettings?.showLotNr;
const showSpoolWeight = printSettings?.showSpoolWeight;
const showTemperatures = printSettings?.showTemperatures;
const showSpoolComment = printSettings?.showSpoolComment;
const showFilamentComment = printSettings?.showFilamentComment;
const showVendorComment = printSettings?.showVendorComment;
const formatFilament = (filament: IFilament) => {
let vendorPrefix = "";
@@ -38,6 +41,11 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
<QRCodePrintingDialog
visible={visible}
onCancel={onCancel}
printSettings={printSettings.labelSettings}
setPrintSettings={(newSettings) => {
printSettings.labelSettings = newSettings;
setPrintSettings([printSettings]);
}}
items={items.map(function (spool) {
const temps = [];
if (spool.filament.settings_extruder_temp) {
@@ -106,25 +114,67 @@ const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visibl
extraSettings={
<>
<Form.Item label={t("printing.qrcode.showVendor")}>
<Switch checked={showVendor} onChange={(checked) => setShowVendor(checked)} />
<Switch
checked={showVendor}
onChange={(checked) => {
printSettings.showVendor = checked;
setPrintSettings([printSettings]);
}}
/>
</Form.Item>
<Form.Item label={t("printing.qrcode.showSpoolWeight")}>
<Switch checked={showSpoolWeight} onChange={(checked) => setShowSpoolWeight(checked)} />
<Switch
checked={showSpoolWeight}
onChange={(checked) => {
printSettings.showSpoolWeight = checked;
setPrintSettings([printSettings]);
}}
/>
</Form.Item>
<Form.Item label={t("printing.qrcode.showTemperatures")}>
<Switch checked={showTemperatures} onChange={(checked) => setShowTemperatures(checked)} />
<Switch
checked={showTemperatures}
onChange={(checked) => {
printSettings.showTemperatures = checked;
setPrintSettings([printSettings]);
}}
/>
</Form.Item>
<Form.Item label={t("printing.qrcode.showLotNr")}>
<Switch checked={showLotNr} onChange={(checked) => setShowLotNr(checked)} />
<Switch
checked={showLotNr}
onChange={(checked) => {
printSettings.showLotNr = checked;
setPrintSettings([printSettings]);
}}
/>
</Form.Item>
<Form.Item label={t("printing.qrcode.showSpoolComment")}>
<Switch checked={showSpoolComment} onChange={(checked) => setShowSpoolComment(checked)} />
<Switch
checked={showSpoolComment}
onChange={(checked) => {
printSettings.showSpoolComment = checked;
setPrintSettings([printSettings]);
}}
/>
</Form.Item>
<Form.Item label={t("printing.qrcode.showFilamentComment")}>
<Switch checked={showFilamentComment} onChange={(checked) => setShowFilamentComment(checked)} />
<Switch
checked={showFilamentComment}
onChange={(checked) => {
printSettings.showFilamentComment = checked;
setPrintSettings([printSettings]);
}}
/>
</Form.Item>
<Form.Item label={t("printing.qrcode.showVendorComment")}>
<Switch checked={showVendorComment} onChange={(checked) => setShowVendorComment(checked)} />
<Switch
checked={showVendorComment}
onChange={(checked) => {
printSettings.showVendorComment = checked;
setPrintSettings([printSettings]);
}}
/>
</Form.Item>
</>
}