From 426496b4e5b102c27e40ac58a4ee1398b6e71a4f Mon Sep 17 00:00:00 2001 From: Donkie Date: Sat, 15 Jun 2024 14:07:48 +0200 Subject: [PATCH] Recoded label printing settings to store in DB instead of in browser --- client/src/components/printing/printing.ts | 58 +++++ .../components/printing/printingDialog.tsx | 244 +++++++++++------- .../printing/qrCodePrintingDialog.tsx | 45 +++- .../printing/spoolQrCodePrintingDialog.tsx | 78 +++++- client/src/pages/settings/generalSettings.tsx | 10 +- client/src/utils/querySettings.ts | 21 +- spoolman/settings.py | 1 + 7 files changed, 337 insertions(+), 120 deletions(-) create mode 100644 client/src/components/printing/printing.ts diff --git a/client/src/components/printing/printing.ts b/client/src/components/printing/printing.ts new file mode 100644 index 0000000..52c8e8b --- /dev/null +++ b/client/src/components/printing/printing.ts @@ -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); + }; +} diff --git a/client/src/components/printing/printingDialog.tsx b/client/src/components/printing/printingDialog.tsx index fcccb44..01581ba 100644 --- a/client/src/components/printing/printingDialog.tsx +++ b/client/src/components/printing/printingDialog.tsx @@ -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 = ({ items, style, extraSettings, visible, onCancel, title }) => { +const PrintingDialog: React.FC = ({ + items, + printSettings, + setPrintSettings, + style, + extraSettings, + visible, + onCancel, + title, +}) => { const t = useTranslate(); const [collapseState, setCollapseState] = useSavedState("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(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 = ({ 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 = ({ 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"})`, }} > = ({ 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 = ({ items, style, extraSett max={30} value={skipItems} onChange={(value) => { - setSkipItems(value); + printSettings.skipItems = value; + setPrintSettings(printSettings); }} /> @@ -272,7 +278,8 @@ const PrintingDialog: React.FC = ({ items, style, extraSett style={{ margin: "0 16px" }} value={skipItems} onChange={(value) => { - setSkipItems(value ?? 1); + printSettings.skipItems = value ?? 1; + setPrintSettings(printSettings); }} /> @@ -286,7 +293,8 @@ const PrintingDialog: React.FC = ({ items, style, extraSett max={3} value={itemCopies} onChange={(value) => { - setItemCopies(value); + printSettings.itemCopies = value; + setPrintSettings(printSettings); }} /> @@ -296,7 +304,8 @@ const PrintingDialog: React.FC = ({ items, style, extraSett style={{ margin: "0 16px" }} value={itemCopies} onChange={(value) => { - setItemCopies(value ?? 1); + printSettings.itemCopies = value ?? 1; + setPrintSettings(printSettings); }} /> @@ -313,7 +322,8 @@ const PrintingDialog: React.FC = ({ 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 = ({ items, style, extraSett - { + printSettings.paperSize = value; + setPrintSettings(printSettings); + }} + > {Object.keys(paperDimensions).map((key) => ( {key} @@ -376,10 +392,14 @@ const PrintingDialog: React.FC = ({ items, style, extraSett setCustomPaperWidth(value ?? 0)} + onChange={(value) => { + customPaperSize.width = value ?? 0; + printSettings.customPaperSize = customPaperSize; + setPrintSettings(printSettings); + }} /> @@ -387,10 +407,14 @@ const PrintingDialog: React.FC = ({ items, style, extraSett setCustomPaperHeight(value ?? 0)} + onChange={(value) => { + customPaperSize.height = value ?? 0; + printSettings.customPaperSize = customPaperSize; + setPrintSettings(printSettings); + }} /> @@ -403,7 +427,8 @@ const PrintingDialog: React.FC = ({ items, style, extraSett max={5} value={paperColumns} onChange={(value) => { - setPaperColumns(value); + printSettings.columns = value; + setPrintSettings(printSettings); }} /> @@ -413,7 +438,8 @@ const PrintingDialog: React.FC = ({ items, style, extraSett style={{ margin: "0 16px" }} value={paperColumns} onChange={(value) => { - setPaperColumns(value ?? 1); + printSettings.columns = value ?? 1; + setPrintSettings(printSettings); }} /> @@ -427,7 +453,8 @@ const PrintingDialog: React.FC = ({ items, style, extraSett max={15} value={paperRows} onChange={(value) => { - setPaperRows(value); + printSettings.rows = value; + setPrintSettings(printSettings); }} /> @@ -437,7 +464,8 @@ const PrintingDialog: React.FC = ({ items, style, extraSett style={{ margin: "0 16px" }} value={paperRows} onChange={(value) => { - setPaperRows(value ?? 1); + printSettings.rows = value ?? 1; + setPrintSettings(printSettings); }} /> @@ -453,9 +481,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -463,10 +493,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setMarginLeft(value ?? 0); + margin.left = value ?? 0; + printSettings.margin = margin; + setPrintSettings(printSettings); }} /> @@ -480,9 +512,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -490,10 +524,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setMarginTop(value ?? 0); + margin.top = value ?? 0; + printSettings.margin = margin; + setPrintSettings(printSettings); }} /> @@ -507,9 +543,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -517,10 +555,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setMarginRight(value ?? 0); + margin.right = value ?? 0; + printSettings.margin = margin; + setPrintSettings(printSettings); }} /> @@ -534,9 +574,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -544,10 +586,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setMarginBottom(value ?? 0); + margin.bottom = value ?? 0; + printSettings.margin = margin; + setPrintSettings(printSettings); }} /> @@ -563,9 +607,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -573,10 +619,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setPrinterMarginLeft(value ?? 0); + printerMargin.left = value ?? 0; + printSettings.printerMargin = printerMargin; + setPrintSettings(printSettings); }} /> @@ -590,9 +638,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -600,10 +650,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setPrinterMarginTop(value ?? 0); + printerMargin.top = value ?? 0; + printSettings.printerMargin = printerMargin; + setPrintSettings(printSettings); }} /> @@ -617,9 +669,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -627,10 +681,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setPrinterMarginRight(value ?? 0); + printerMargin.right = value ?? 0; + printSettings.printerMargin = printerMargin; + setPrintSettings(printSettings); }} /> @@ -644,9 +700,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -654,10 +712,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setPrinterMarginBottom(value ?? 0); + printerMargin.bottom = value ?? 0; + printSettings.printerMargin = printerMargin; + setPrintSettings(printSettings); }} /> @@ -672,9 +732,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -682,10 +744,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setHorizontalSpacing(value ?? 0); + spacing.horizontal = value ?? 0; + printSettings.spacing = spacing; + setPrintSettings(printSettings); }} /> @@ -699,9 +763,11 @@ const PrintingDialog: React.FC = ({ 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); }} /> @@ -709,10 +775,12 @@ const PrintingDialog: React.FC = ({ items, style, extraSett { - setVerticalSpacing(value ?? 0); + spacing.vertical = value ?? 0; + printSettings.spacing = spacing; + setPrintSettings(printSettings); }} /> diff --git a/client/src/components/printing/qrCodePrintingDialog.tsx b/client/src/components/printing/qrCodePrintingDialog.tsx index db87814..fd2a47f 100644 --- a/client/src/components/printing/qrCodePrintingDialog.tsx +++ b/client/src/components/printing/qrCodePrintingDialog.tsx @@ -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 = ({ visible, items, onCancel, extraSettings }) => { +const QRCodePrintingDialog: React.FC = ({ + 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 = ({ visible, it visible={visible} title={t("printing.qrcode.title")} items={elements} + printSettings={printSettings.printSettings} + setPrintSettings={(newSettings) => { + printSettings.printSettings = newSettings; + setPrintSettings(printSettings); + }} extraSettings={ <> - setShowContent(checked)} /> + { + printSettings.showContent = checked; + setPrintSettings(printSettings); + }} + /> @@ -62,7 +83,8 @@ const QRCodePrintingDialog: React.FC = ({ visible, it value={textSize} step={0.1} onChange={(value) => { - setTextSize(value); + printSettings.textSize = value; + setPrintSettings(printSettings); }} /> @@ -75,14 +97,21 @@ const QRCodePrintingDialog: React.FC = ({ visible, it value={textSize} addonAfter="mm" onChange={(value) => { - setTextSize(value ?? 5); + printSettings.textSize = value ?? 5; + setPrintSettings(printSettings); }} /> - setShowSpoolmanIcon(checked)} /> + { + printSettings.showSpoolmanIcon = checked; + setPrintSettings(printSettings); + }} + /> {extraSettings} diff --git a/client/src/components/printing/spoolQrCodePrintingDialog.tsx b/client/src/components/printing/spoolQrCodePrintingDialog.tsx index b4ad9c3..b2720c8 100644 --- a/client/src/components/printing/spoolQrCodePrintingDialog.tsx +++ b/client/src/components/printing/spoolQrCodePrintingDialog.tsx @@ -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 = ({ 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 = ({ visibl { + 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 = ({ visibl extraSettings={ <> - setShowVendor(checked)} /> + { + printSettings.showVendor = checked; + setPrintSettings([printSettings]); + }} + /> - setShowSpoolWeight(checked)} /> + { + printSettings.showSpoolWeight = checked; + setPrintSettings([printSettings]); + }} + /> - setShowTemperatures(checked)} /> + { + printSettings.showTemperatures = checked; + setPrintSettings([printSettings]); + }} + /> - setShowLotNr(checked)} /> + { + printSettings.showLotNr = checked; + setPrintSettings([printSettings]); + }} + /> - setShowSpoolComment(checked)} /> + { + printSettings.showSpoolComment = checked; + setPrintSettings([printSettings]); + }} + /> - setShowFilamentComment(checked)} /> + { + printSettings.showFilamentComment = checked; + setPrintSettings([printSettings]); + }} + /> - setShowVendorComment(checked)} /> + { + printSettings.showVendorComment = checked; + setPrintSettings([printSettings]); + }} + /> } diff --git a/client/src/pages/settings/generalSettings.tsx b/client/src/pages/settings/generalSettings.tsx index c8c2f42..4ae832f 100644 --- a/client/src/pages/settings/generalSettings.tsx +++ b/client/src/pages/settings/generalSettings.tsx @@ -5,7 +5,7 @@ import { useGetSettings, useSetSetting } from "../../utils/querySettings"; export function GeneralSettings() { const settings = useGetSettings(); - const setSetting = useSetSetting(); + const setCurrency = useSetSetting("currency"); const [form] = Form.useForm(); const [messageApi, contextHolder] = message.useMessage(); const t = useTranslate(); @@ -21,16 +21,16 @@ export function GeneralSettings() { // Popup message if setSetting is successful React.useEffect(() => { - if (setSetting.isSuccess) { + if (setCurrency.isSuccess) { messageApi.success(t("notifications.saveSuccessful")); } - }, [setSetting.isSuccess, messageApi, t]); + }, [setCurrency.isSuccess, messageApi, t]); // Handle form submit const onFinish = (values: { currency: string }) => { // Check if the currency has changed if (settings.data?.currency.value !== JSON.stringify(values.currency)) { - setSetting.mutate({ + setCurrency.mutate({ key: "currency", value: JSON.stringify(values.currency), }); @@ -68,7 +68,7 @@ export function GeneralSettings() { - diff --git a/client/src/utils/querySettings.ts b/client/src/utils/querySettings.ts index dc5b1b8..28c9bcc 100644 --- a/client/src/utils/querySettings.ts +++ b/client/src/utils/querySettings.ts @@ -31,17 +31,17 @@ export function useGetSetting(key: string) { }); } -export function useSetSetting() { +export function useSetSetting(key: string) { const queryClient = useQueryClient(); - return useMutation({ - mutationFn: async ({ key, value }) => { + return useMutation({ + mutationFn: async (value) => { const response = await fetch(`${getAPIURL()}/setting/${key}`, { method: "POST", headers: { "Content-Type": "application/json", }, - body: JSON.stringify(value), + body: JSON.stringify(JSON.stringify(value)), }); // Throw error if response is not ok @@ -51,7 +51,18 @@ export function useSetSetting() { return response.json(); }, - onSuccess: (_data, { key }) => { + onMutate: async (value) => { + await queryClient.cancelQueries(["settings", key]); + const previousValue = queryClient.getQueryData(["settings", key]); + queryClient.setQueryData(["settings", key], (old) => + old ? { ...old, value: JSON.stringify(value) } : undefined + ); + return previousValue; + }, + onError: (_error, _value, context) => { + queryClient.setQueryData(["settings", key], context); + }, + onSuccess: (_data, _value) => { // Invalidate and refetch queryClient.invalidateQueries(["settings", key]); }, diff --git a/spoolman/settings.py b/spoolman/settings.py index b3600bc..be9cd1f 100644 --- a/spoolman/settings.py +++ b/spoolman/settings.py @@ -62,6 +62,7 @@ def parse_setting(key: str) -> SettingDefinition: register_setting("currency", SettingType.STRING, json.dumps("EUR")) +register_setting("print_settings", SettingType.ARRAY, json.dumps([])) register_setting("extra_fields_vendor", SettingType.ARRAY, json.dumps([])) register_setting("extra_fields_filament", SettingType.ARRAY, json.dumps([]))