Recoded label printing settings to store in DB instead of in browser
This commit is contained in:
Donkie
58
client/src/components/printing/printing.ts
Normal file
58
client/src/components/printing/printing.ts
Normal 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);
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
</>
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
}
|
||||
|
||||
@@ -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() {
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
|
||||
<Button type="primary" htmlType="submit" loading={settings.isFetching || setSetting.isLoading}>
|
||||
<Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isLoading}>
|
||||
{t("buttons.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
@@ -31,17 +31,17 @@ export function useGetSetting(key: string) {
|
||||
});
|
||||
}
|
||||
|
||||
export function useSetSetting() {
|
||||
export function useSetSetting<T>(key: string) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation<SettingResponseValue, unknown, { key: string; value: unknown }>({
|
||||
mutationFn: async ({ key, value }) => {
|
||||
return useMutation<SettingResponseValue, unknown, T, SettingResponseValue | undefined>({
|
||||
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<SettingResponseValue>(["settings", key]);
|
||||
queryClient.setQueryData<SettingResponseValue>(["settings", key], (old) =>
|
||||
old ? { ...old, value: JSON.stringify(value) } : undefined
|
||||
);
|
||||
return previousValue;
|
||||
},
|
||||
onError: (_error, _value, context) => {
|
||||
queryClient.setQueryData<SettingResponseValue>(["settings", key], context);
|
||||
},
|
||||
onSuccess: (_data, _value) => {
|
||||
// Invalidate and refetch
|
||||
queryClient.invalidateQueries(["settings", key]);
|
||||
},
|
||||
|
||||
@@ -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([]))
|
||||
|
||||
Reference in New Issue
Block a user