Merge remote-tracking branch 'upstream/master'
This commit is contained in:
samturner3
72
client/src/pages/printing/index.tsx
Normal file
72
client/src/pages/printing/index.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { PageHeader } from "@refinedev/antd";
|
||||
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
|
||||
import { theme } from "antd";
|
||||
import { Content } from "antd/es/layout/layout";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import React from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import SpoolQRCodePrintingDialog from "./spoolQrCodePrintingDialog";
|
||||
import SpoolSelectModal from "./spoolSelectModal";
|
||||
|
||||
dayjs.extend(utc);
|
||||
|
||||
const { useToken } = theme;
|
||||
|
||||
export const Printing: React.FC<IResourceComponentsProps> = () => {
|
||||
const { token } = useToken();
|
||||
const t = useTranslate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const spoolIds = searchParams.getAll("spools").map(Number);
|
||||
const step = spoolIds.length > 0 ? 1 : 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={t("printing.qrcode.button")}
|
||||
onBack={() => {
|
||||
const returnUrl = searchParams.get("return");
|
||||
if (returnUrl) {
|
||||
navigate(returnUrl, { relative: "path" });
|
||||
} else {
|
||||
navigate("/spool");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Content
|
||||
style={{
|
||||
padding: 20,
|
||||
minHeight: 280,
|
||||
margin: "0 auto",
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
color: token.colorText,
|
||||
fontFamily: token.fontFamily,
|
||||
fontSize: token.fontSizeLG,
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
{step === 0 && (
|
||||
<SpoolSelectModal
|
||||
description={t("printing.spoolSelect.description")}
|
||||
onContinue={(spools) => {
|
||||
setSearchParams((prev) => {
|
||||
const newParams = new URLSearchParams(prev);
|
||||
newParams.delete("spools");
|
||||
spools.forEach((spool) => newParams.append("spools", spool.id.toString()));
|
||||
newParams.set("return", "/spool/print");
|
||||
return newParams;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{step === 1 && <SpoolQRCodePrintingDialog spoolIds={spoolIds} />}
|
||||
</Content>
|
||||
</PageHeader>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Printing;
|
||||
106
client/src/pages/printing/printing.tsx
Normal file
106
client/src/pages/printing/printing.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { useGetSetting, useSetSetting } from "../../utils/querySettings";
|
||||
import { ISpool } from "../spools/model";
|
||||
|
||||
export interface PrintSettings {
|
||||
id: string;
|
||||
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;
|
||||
showQRCodeMode?: "no" | "simple" | "withIcon";
|
||||
textSize?: number;
|
||||
printSettings: PrintSettings;
|
||||
}
|
||||
|
||||
export interface SpoolQRCodePrintSettings {
|
||||
template?: string;
|
||||
labelSettings: QRCodePrintSettings;
|
||||
}
|
||||
|
||||
export function useGetPrintSettings(): SpoolQRCodePrintSettings[] | undefined {
|
||||
const { data } = useGetSetting("print_presets");
|
||||
if (!data) return;
|
||||
const parsed: SpoolQRCodePrintSettings[] =
|
||||
data && data.value ? JSON.parse(data.value) : ([] as SpoolQRCodePrintSettings[]);
|
||||
// Loop through all parsed and generate a new ID field if it's not set
|
||||
return parsed.map((settings) => {
|
||||
if (!settings.labelSettings.printSettings.id) {
|
||||
settings.labelSettings.printSettings.id = uuidv4();
|
||||
}
|
||||
return settings;
|
||||
});
|
||||
}
|
||||
|
||||
export function useSetPrintSettings(): (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => void {
|
||||
const mut = useSetSetting("print_presets");
|
||||
|
||||
return (spoolQRCodePrintSettings: SpoolQRCodePrintSettings[]) => {
|
||||
mut.mutate(spoolQRCodePrintSettings);
|
||||
};
|
||||
}
|
||||
|
||||
interface GenericObject {
|
||||
[key: string]: any;
|
||||
extra: { [key: string]: string };
|
||||
}
|
||||
|
||||
function getTagValue(tag: string, obj: GenericObject): any {
|
||||
// Split tag by .
|
||||
const tagParts = tag.split(".");
|
||||
if (tagParts[0] === "extra") {
|
||||
const extraValue = obj.extra[tagParts[1]];
|
||||
if (extraValue === undefined) {
|
||||
return "?";
|
||||
}
|
||||
return JSON.parse(extraValue);
|
||||
}
|
||||
|
||||
const value = obj[tagParts[0]] ?? "?";
|
||||
// check if value is itself an object. If so, recursively call this and remove the first part of the tag
|
||||
if (typeof value === "object") {
|
||||
return getTagValue(tagParts.slice(1).join("."), value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function applyNewline(text: string): JSX.Element[] {
|
||||
return text.split("\n").map((line, idx, arr) => (
|
||||
<span key={idx}>
|
||||
{line}
|
||||
{idx < arr.length - 1 && <br />}
|
||||
</span>
|
||||
));
|
||||
}
|
||||
|
||||
function applyTextFormatting(text: string): JSX.Element[] {
|
||||
const regex = /\*\*([\w\W]*?)\*\*/g;
|
||||
const parts = text.split(regex);
|
||||
// Map over the parts and wrap matched text with <b> tags
|
||||
const elements = parts.map((part, index) => {
|
||||
// Even index: outside asterisks, odd index: inside asterisks (to be bolded)
|
||||
const node = applyNewline(part);
|
||||
return index % 2 === 0 ? <span key={index}>{node}</span> : <b key={index}>{node}</b>;
|
||||
});
|
||||
return elements;
|
||||
}
|
||||
export function renderLabelContents(template: string, spool: ISpool): JSX.Element {
|
||||
// Find all {tags} in the template string and loop over them
|
||||
let result = template.replace(/\{(.*?)\}/g, function (_, tag) {
|
||||
return getTagValue(tag, spool);
|
||||
});
|
||||
|
||||
// Split string on \n into individual lines
|
||||
return <>{applyTextFormatting(result)}</>;
|
||||
}
|
||||
836
client/src/pages/printing/printingDialog.tsx
Normal file
836
client/src/pages/printing/printingDialog.tsx
Normal file
@@ -0,0 +1,836 @@
|
||||
import { FileImageOutlined, PrinterOutlined } from "@ant-design/icons";
|
||||
import { useTranslate } from "@refinedev/core";
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Collapse,
|
||||
Divider,
|
||||
Form,
|
||||
InputNumber,
|
||||
Radio,
|
||||
RadioChangeEvent,
|
||||
Row,
|
||||
Select,
|
||||
Slider,
|
||||
Space,
|
||||
} from "antd";
|
||||
import * as htmlToImage from "html-to-image";
|
||||
import React, { useRef } from "react";
|
||||
import ReactToPrint from "react-to-print";
|
||||
import { useSavedState } from "../../utils/saveload";
|
||||
import { PrintSettings } from "./printing";
|
||||
|
||||
interface PrintingDialogProps {
|
||||
items: JSX.Element[];
|
||||
printSettings: PrintSettings;
|
||||
setPrintSettings: (setPrintSettings: PrintSettings) => void;
|
||||
style?: string;
|
||||
extraSettings?: JSX.Element;
|
||||
extraSettingsStart?: JSX.Element;
|
||||
extraButtons?: JSX.Element;
|
||||
}
|
||||
|
||||
interface PaperDimensions {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
const paperDimensions: { [key: string]: PaperDimensions } = {
|
||||
A3: {
|
||||
width: 297,
|
||||
height: 420,
|
||||
},
|
||||
A4: {
|
||||
width: 210,
|
||||
height: 297,
|
||||
},
|
||||
A5: {
|
||||
width: 148,
|
||||
height: 210,
|
||||
},
|
||||
Letter: {
|
||||
width: 216,
|
||||
height: 279,
|
||||
},
|
||||
Legal: {
|
||||
width: 216,
|
||||
height: 356,
|
||||
},
|
||||
Tabloid: {
|
||||
width: 279,
|
||||
height: 432,
|
||||
},
|
||||
};
|
||||
|
||||
const PrintingDialog: React.FC<PrintingDialogProps> = ({
|
||||
items,
|
||||
printSettings,
|
||||
setPrintSettings,
|
||||
style,
|
||||
extraSettings,
|
||||
extraSettingsStart,
|
||||
extraButtons,
|
||||
}) => {
|
||||
const t = useTranslate();
|
||||
|
||||
const [collapseState, setCollapseState] = useSavedState<string[]>("print-collapseState", []);
|
||||
const [previewScale, setPreviewScale] = useSavedState("print-previewScale", 0.6);
|
||||
|
||||
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 - 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 itemsPerPage = itemsPerRow * paperRows;
|
||||
|
||||
const itemsIncludingSkipped = [...Array(skipItems).fill(<></>)];
|
||||
for (const item of items) {
|
||||
for (let i = 0; i < itemCopies; i += 1) {
|
||||
itemsIncludingSkipped.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
const pageBlocks = [];
|
||||
for (let page_idx = 0; page_idx < itemsIncludingSkipped.length / itemsPerPage; page_idx += 1) {
|
||||
pageBlocks.push(itemsIncludingSkipped.slice(page_idx * itemsPerPage, (page_idx + 1) * itemsPerPage));
|
||||
}
|
||||
|
||||
const pages = pageBlocks.map(function (items, pageIdx) {
|
||||
const itemDivs = items.map((item, itemIdx) => {
|
||||
const isFirstColumn = itemIdx % itemsPerRow === 0;
|
||||
const isLastColumn = (itemIdx + 1) % itemsPerRow === 0;
|
||||
const isFirstRow = itemIdx < itemsPerRow;
|
||||
const isLastRow = itemsPerPage - itemIdx <= itemsPerRow;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={itemIdx}
|
||||
className="print-page-item"
|
||||
style={{
|
||||
width: `${itemWidth}mm`,
|
||||
height: `${itemHeight}mm`,
|
||||
border: borderShowMode === "grid" ? "1px solid #000" : "none",
|
||||
paddingLeft: isFirstColumn ? `${Math.max(printerMargin.left - margin.left, 0)}mm` : 0,
|
||||
paddingRight: isLastColumn ? `${Math.max(printerMargin.right - margin.right, 0)}mm` : 0,
|
||||
paddingTop: isFirstRow ? `${Math.max(printerMargin.top - margin.top, 0)}mm` : 0,
|
||||
paddingBottom: isLastRow ? `${Math.max(printerMargin.bottom - margin.bottom, 0)}mm` : 0,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="print-page"
|
||||
key={pageIdx}
|
||||
style={{
|
||||
width: `${paperWidth}mm`,
|
||||
height: `${paperHeight}mm`,
|
||||
backgroundColor: "#FFF",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="print-page-area"
|
||||
style={{
|
||||
outline: borderShowMode !== "none" ? "1px solid #000" : "none",
|
||||
outlineOffset: "-1px",
|
||||
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"})`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
rowGap: `${spacing.vertical}mm`,
|
||||
columnGap: `${spacing.horizontal}mm`,
|
||||
paddingTop: `${spacing.vertical}mm`,
|
||||
paddingLeft: `${spacing.horizontal}mm`,
|
||||
}}
|
||||
>
|
||||
{itemDivs}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const saveAsImage = () => {
|
||||
const hasPrinted: Element[] = [];
|
||||
|
||||
Array.from(document.getElementsByClassName("print-qrcode-item")).forEach(async (item) => {
|
||||
// Prevent printing copies
|
||||
for (let i = 0; i < hasPrinted.length; i += 1) {
|
||||
if (item.isEqualNode(hasPrinted[i])) return;
|
||||
}
|
||||
hasPrinted.push(item);
|
||||
|
||||
// Generate png image
|
||||
const url = await htmlToImage.toPng(item as HTMLElement, {
|
||||
backgroundColor: "#FFF",
|
||||
cacheBust: true,
|
||||
});
|
||||
|
||||
// Download image
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = "spoolmanlabel.png";
|
||||
link.click();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row gutter={16}>
|
||||
<Col
|
||||
span={14}
|
||||
style={{
|
||||
// This magic makes this column take the height of the sibling column
|
||||
// https://stackoverflow.com/a/49065029/2911165
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
transform: "translateZ(0)",
|
||||
overflow: "auto",
|
||||
flexBasis: "0px",
|
||||
flexGrow: "1",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="print-container"
|
||||
ref={printRef}
|
||||
style={{
|
||||
transform: `scale(${previewScale})`,
|
||||
transformOrigin: "top left",
|
||||
}}
|
||||
>
|
||||
<style>
|
||||
{`
|
||||
@media print {
|
||||
html, body {
|
||||
height: initial !important;
|
||||
overflow: initial !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
@page {
|
||||
size: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.print-container {
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
.print-page {
|
||||
page-break-before: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
.print-page {
|
||||
margin-top: 10mm;
|
||||
}
|
||||
}
|
||||
|
||||
.print-page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.print-page * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
${style ?? ""}
|
||||
`}
|
||||
</style>
|
||||
{pages}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={10}>
|
||||
<Form labelAlign="left" colon={false} labelWrap={true} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
|
||||
{extraSettingsStart}
|
||||
<Divider />
|
||||
<Form.Item label={t("printing.generic.skipItems")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={30}
|
||||
value={skipItems}
|
||||
onChange={(value) => {
|
||||
printSettings.skipItems = value;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
min={0}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={skipItems}
|
||||
onChange={(value) => {
|
||||
printSettings.skipItems = value ?? 1;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.itemCopies")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={1}
|
||||
max={3}
|
||||
value={itemCopies}
|
||||
onChange={(value) => {
|
||||
printSettings.itemCopies = value;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
min={1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={itemCopies}
|
||||
onChange={(value) => {
|
||||
printSettings.itemCopies = value ?? 1;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.showBorder")}>
|
||||
<Radio.Group
|
||||
options={[
|
||||
{ label: t("printing.generic.borders.none"), value: "none" },
|
||||
{
|
||||
label: t("printing.generic.borders.border"),
|
||||
value: "border",
|
||||
},
|
||||
{ label: t("printing.generic.borders.grid"), value: "grid" },
|
||||
]}
|
||||
onChange={(e: RadioChangeEvent) => {
|
||||
printSettings.borderShowMode = e.target.value;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
value={borderShowMode}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.previewScale")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={0.1}
|
||||
max={3}
|
||||
step={0.01}
|
||||
value={previewScale}
|
||||
onChange={(value) => {
|
||||
setPreviewScale(value);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
min={0.1}
|
||||
max={3}
|
||||
step={0.01}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={previewScale}
|
||||
onChange={(value) => {
|
||||
setPreviewScale(value ?? 0.1);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Divider />
|
||||
<Collapse
|
||||
defaultActiveKey={collapseState}
|
||||
bordered={false}
|
||||
ghost
|
||||
onChange={(key) => {
|
||||
if (Array.isArray(key)) {
|
||||
setCollapseState(key);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Collapse.Panel header={t("printing.generic.contentSettings")} key="1">
|
||||
{extraSettings}
|
||||
</Collapse.Panel>
|
||||
<Collapse.Panel header={t("printing.generic.layoutSettings")} key="2">
|
||||
{t("printing.generic.description")}
|
||||
<Divider />
|
||||
<Form.Item label={t("printing.generic.paperSize")}>
|
||||
<Select
|
||||
value={paperSize}
|
||||
onChange={(value) => {
|
||||
printSettings.paperSize = value;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
>
|
||||
{Object.keys(paperDimensions).map((key) => (
|
||||
<Select.Option key={key} value={key}>
|
||||
{key}
|
||||
</Select.Option>
|
||||
))}
|
||||
<Select.Option value="custom">{t("printing.generic.customSize")}</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.dimensions")} hidden={paperSize !== "custom"}>
|
||||
<Row align="middle">
|
||||
<Col span={11}>
|
||||
<InputNumber
|
||||
value={customPaperSize.width}
|
||||
min={0.1}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
customPaperSize.width = value ?? 0;
|
||||
printSettings.customPaperSize = customPaperSize;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={2} style={{ textAlign: "center" }}>
|
||||
x
|
||||
</Col>
|
||||
<Col span={11}>
|
||||
<InputNumber
|
||||
value={customPaperSize.height}
|
||||
min={0.1}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
customPaperSize.height = value ?? 0;
|
||||
printSettings.customPaperSize = customPaperSize;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.columns")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={1}
|
||||
max={5}
|
||||
value={paperColumns}
|
||||
onChange={(value) => {
|
||||
printSettings.columns = value;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
min={1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={paperColumns}
|
||||
onChange={(value) => {
|
||||
printSettings.columns = value ?? 1;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.rows")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={1}
|
||||
max={15}
|
||||
value={paperRows}
|
||||
onChange={(value) => {
|
||||
printSettings.rows = value;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
min={1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={paperRows}
|
||||
onChange={(value) => {
|
||||
printSettings.rows = value ?? 1;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Divider />
|
||||
<p>{t("printing.generic.helpMargin")}</p>
|
||||
<Form.Item label={t("printing.generic.marginLeft")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={-20}
|
||||
max={50}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={margin.left}
|
||||
onChange={(value) => {
|
||||
margin.left = value;
|
||||
printSettings.margin = margin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={margin.left}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
margin.left = value ?? 0;
|
||||
printSettings.margin = margin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.marginTop")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={-20}
|
||||
max={50}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={margin.top}
|
||||
onChange={(value) => {
|
||||
margin.top = value;
|
||||
printSettings.margin = margin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={margin.top}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
margin.top = value ?? 0;
|
||||
printSettings.margin = margin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.marginRight")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={-20}
|
||||
max={50}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={margin.right}
|
||||
onChange={(value) => {
|
||||
margin.right = value;
|
||||
printSettings.margin = margin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={margin.right}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
margin.right = value ?? 0;
|
||||
printSettings.margin = margin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.marginBottom")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={-20}
|
||||
max={50}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={margin.bottom}
|
||||
onChange={(value) => {
|
||||
margin.bottom = value;
|
||||
printSettings.margin = margin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={margin.bottom}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
margin.bottom = value ?? 0;
|
||||
printSettings.margin = margin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Divider />
|
||||
<p>{t("printing.generic.helpPrinterMargin")}</p>
|
||||
<Form.Item label={t("printing.generic.printerMarginLeft")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={50}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={printerMargin.left}
|
||||
onChange={(value) => {
|
||||
printerMargin.left = value;
|
||||
printSettings.printerMargin = printerMargin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={printerMargin.left}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
printerMargin.left = value ?? 0;
|
||||
printSettings.printerMargin = printerMargin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.printerMarginTop")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={50}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={printerMargin.top}
|
||||
onChange={(value) => {
|
||||
printerMargin.top = value;
|
||||
printSettings.printerMargin = printerMargin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={printerMargin.top}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
printerMargin.top = value ?? 0;
|
||||
printSettings.printerMargin = printerMargin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.printerMarginRight")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={50}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={printerMargin.right}
|
||||
onChange={(value) => {
|
||||
printerMargin.right = value;
|
||||
printSettings.printerMargin = printerMargin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={printerMargin.right}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
printerMargin.right = value ?? 0;
|
||||
printSettings.printerMargin = printerMargin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.printerMarginBottom")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={50}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={printerMargin.bottom}
|
||||
onChange={(value) => {
|
||||
printerMargin.bottom = value;
|
||||
printSettings.printerMargin = printerMargin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={printerMargin.bottom}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
printerMargin.bottom = value ?? 0;
|
||||
printSettings.printerMargin = printerMargin;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Divider />
|
||||
<Form.Item label={t("printing.generic.horizontalSpacing")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={20}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={spacing.horizontal}
|
||||
onChange={(value) => {
|
||||
spacing.horizontal = value;
|
||||
printSettings.spacing = spacing;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={spacing.horizontal}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
spacing.horizontal = value ?? 0;
|
||||
printSettings.spacing = spacing;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.verticalSpacing")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={20}
|
||||
step={0.1}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
value={spacing.vertical}
|
||||
onChange={(value) => {
|
||||
spacing.vertical = value;
|
||||
printSettings.spacing = spacing;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={spacing.vertical}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
spacing.vertical = value ?? 0;
|
||||
printSettings.spacing = spacing;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row justify={"end"}>
|
||||
<Col>
|
||||
<Space>
|
||||
{extraButtons}
|
||||
<Button type="primary" icon={<FileImageOutlined />} size="large" onClick={saveAsImage}>
|
||||
{t("printing.generic.saveAsImage")}
|
||||
</Button>
|
||||
<ReactToPrint
|
||||
key="print-button"
|
||||
trigger={() => (
|
||||
<Button type="primary" icon={<PrinterOutlined />} size="large">
|
||||
{t("printing.generic.print")}
|
||||
</Button>
|
||||
)}
|
||||
content={() => printRef.current}
|
||||
/>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrintingDialog;
|
||||
174
client/src/pages/printing/qrCodePrintingDialog.tsx
Normal file
174
client/src/pages/printing/qrCodePrintingDialog.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useTranslate } from "@refinedev/core";
|
||||
import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch } from "antd";
|
||||
import { QRCodePrintSettings } from "./printing";
|
||||
import PrintingDialog from "./printingDialog";
|
||||
|
||||
interface QRCodeData {
|
||||
value: string;
|
||||
label?: JSX.Element;
|
||||
errorLevel?: "L" | "M" | "Q" | "H";
|
||||
}
|
||||
|
||||
interface QRCodePrintingDialogProps {
|
||||
items: QRCodeData[];
|
||||
printSettings: QRCodePrintSettings;
|
||||
setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
|
||||
extraSettings?: JSX.Element;
|
||||
extraSettingsStart?: JSX.Element;
|
||||
extraButtons?: JSX.Element;
|
||||
}
|
||||
|
||||
const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
|
||||
items,
|
||||
printSettings,
|
||||
setPrintSettings,
|
||||
extraSettings,
|
||||
extraSettingsStart,
|
||||
extraButtons,
|
||||
}) => {
|
||||
const t = useTranslate();
|
||||
|
||||
const showContent = printSettings?.showContent === undefined ? true : printSettings?.showContent;
|
||||
const showQRCodeMode = printSettings?.showQRCodeMode || "withIcon";
|
||||
const textSize = printSettings?.textSize || 3;
|
||||
|
||||
const elements = items.map((item) => {
|
||||
return (
|
||||
<div className="print-qrcode-item">
|
||||
{showQRCodeMode !== "no" && (
|
||||
<div className="print-qrcode-container">
|
||||
<QRCode
|
||||
className="print-qrcode"
|
||||
icon={showQRCodeMode === "withIcon" ? "/favicon.svg" : undefined}
|
||||
value={item.value}
|
||||
errorLevel={item.errorLevel}
|
||||
type="svg"
|
||||
color="#000"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{showContent && (
|
||||
<div className="print-qrcode-title" style={showQRCodeMode === "no" ? { paddingLeft: "1mm" } : {}}>
|
||||
{item.label ?? item.value}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<PrintingDialog
|
||||
items={elements}
|
||||
printSettings={printSettings.printSettings}
|
||||
setPrintSettings={(newSettings) => {
|
||||
printSettings.printSettings = newSettings;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
extraButtons={extraButtons}
|
||||
extraSettingsStart={extraSettingsStart}
|
||||
extraSettings={
|
||||
<>
|
||||
<Form.Item label={t("printing.qrcode.showQRCode")}>
|
||||
<Radio.Group
|
||||
options={[
|
||||
{ label: t("printing.qrcode.showQRCodeMode.no"), value: "no" },
|
||||
{
|
||||
label: t("printing.qrcode.showQRCodeMode.simple"),
|
||||
value: "simple",
|
||||
},
|
||||
{ label: t("printing.qrcode.showQRCodeMode.withIcon"), value: "withIcon" },
|
||||
]}
|
||||
onChange={(e: RadioChangeEvent) => {
|
||||
printSettings.showQRCodeMode = e.target.value;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
value={showQRCodeMode}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.qrcode.showContent")}>
|
||||
<Switch
|
||||
checked={showContent}
|
||||
onChange={(checked) => {
|
||||
printSettings.showContent = checked;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.qrcode.textSize")}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Slider
|
||||
disabled={!showContent}
|
||||
tooltip={{ formatter: (value) => `${value} mm` }}
|
||||
min={2}
|
||||
max={7}
|
||||
value={textSize}
|
||||
step={0.1}
|
||||
onChange={(value) => {
|
||||
printSettings.textSize = value;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<InputNumber
|
||||
disabled={!showContent}
|
||||
min={0.01}
|
||||
step={0.1}
|
||||
style={{ margin: "0 16px" }}
|
||||
value={textSize}
|
||||
addonAfter="mm"
|
||||
onChange={(value) => {
|
||||
printSettings.textSize = value ?? 5;
|
||||
setPrintSettings(printSettings);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
|
||||
{extraSettings}
|
||||
</>
|
||||
}
|
||||
style={`
|
||||
.print-page .print-qrcode-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.print-page .print-qrcode-container {
|
||||
max-width: ${showContent ? "50%" : "100%"};
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.print-page .print-qrcode {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
padding: 2mm;
|
||||
}
|
||||
|
||||
.print-page .print-qrcode-title {
|
||||
flex: 1 1 auto;
|
||||
font-size: ${textSize}mm;
|
||||
color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.print-page canvas, .print-page svg {
|
||||
/* display: block; */
|
||||
object-fit: contain;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default QRCodePrintingDialog;
|
||||
367
client/src/pages/printing/spoolQrCodePrintingDialog.tsx
Normal file
367
client/src/pages/printing/spoolQrCodePrintingDialog.tsx
Normal file
@@ -0,0 +1,367 @@
|
||||
import { CopyOutlined, DeleteOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons";
|
||||
import { useGetSetting } from "../../utils/querySettings";
|
||||
import { useTranslate } from "@refinedev/core";
|
||||
import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Table, Typography, message, Switch } from "antd";
|
||||
import TextArea from "antd/es/input/TextArea";
|
||||
import { useState } from "react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { EntityType, useGetFields } from "../../utils/queryFields";
|
||||
import { useSavedState } from "../../utils/saveload";
|
||||
import { useGetSpoolsByIds } from "../spools/functions";
|
||||
import { ISpool } from "../spools/model";
|
||||
import {
|
||||
SpoolQRCodePrintSettings,
|
||||
renderLabelContents,
|
||||
useGetPrintSettings as useGetPrintPresets,
|
||||
useSetPrintSettings as useSetPrintPresets,
|
||||
} from "./printing";
|
||||
import QRCodePrintingDialog from "./qrCodePrintingDialog";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
interface SpoolQRCodePrintingDialog {
|
||||
spoolIds: number[];
|
||||
}
|
||||
|
||||
const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolIds }) => {
|
||||
const t = useTranslate();
|
||||
const baseUrlSetting = useGetSetting("qr_code_url");
|
||||
const baseUrlRoot =
|
||||
baseUrlSetting.data?.value !== undefined && JSON.parse(baseUrlSetting.data?.value) !== ""
|
||||
? JSON.parse(baseUrlSetting.data?.value)
|
||||
: window.location.origin;
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [useHTTPUrl, setUseHTTPUrl] = useSavedState("print-useHTTPUrl", baseUrlSetting.data?.value !== "");
|
||||
|
||||
const itemQueries = useGetSpoolsByIds(spoolIds);
|
||||
const items = itemQueries
|
||||
.map((itemQuery) => {
|
||||
return itemQuery.data ?? null;
|
||||
})
|
||||
.filter((item) => item !== null) as ISpool[];
|
||||
|
||||
// Selected preset state
|
||||
const [selectedPresetState, setSelectedPresetState] = useSavedState<string | undefined>("selectedPreset", undefined);
|
||||
|
||||
// Keep a local copy of the settings which is what's actually displayed. Use the remote state only for saving.
|
||||
// This decouples the debounce stuff from the UI
|
||||
const [localPresets, setLocalPresets] = useState<SpoolQRCodePrintSettings[] | undefined>();
|
||||
const remotePresets = useGetPrintPresets();
|
||||
const setRemotePresets = useSetPrintPresets();
|
||||
|
||||
const localOrRemotePresets = localPresets ?? remotePresets;
|
||||
|
||||
const savePresetsRemote = () => {
|
||||
if (!localPresets) return;
|
||||
setRemotePresets(localPresets);
|
||||
};
|
||||
|
||||
// Functions to update settings
|
||||
const addNewPreset = () => {
|
||||
if (!localOrRemotePresets) return;
|
||||
const newId = uuidv4();
|
||||
const newPreset = {
|
||||
labelSettings: {
|
||||
printSettings: {
|
||||
id: newId,
|
||||
name: t("printing.generic.newSetting"),
|
||||
},
|
||||
},
|
||||
};
|
||||
setLocalPresets([...localOrRemotePresets, newPreset]);
|
||||
setSelectedPresetState(newId);
|
||||
return newPreset;
|
||||
};
|
||||
const duplicateCurrentPreset = () => {
|
||||
if (!localOrRemotePresets) return;
|
||||
const newPreset = {
|
||||
...curPreset,
|
||||
labelSettings: { ...curPreset.labelSettings, printSettings: { ...curPreset.labelSettings.printSettings } },
|
||||
};
|
||||
newPreset.labelSettings.printSettings.id = uuidv4();
|
||||
setLocalPresets([...localOrRemotePresets, newPreset]);
|
||||
setSelectedPresetState(newPreset.labelSettings.printSettings.id);
|
||||
};
|
||||
const updateCurrentPreset = (newSettings: SpoolQRCodePrintSettings) => {
|
||||
if (!localOrRemotePresets) return;
|
||||
setLocalPresets(
|
||||
localOrRemotePresets.map((presets) =>
|
||||
presets.labelSettings.printSettings.id === newSettings.labelSettings.printSettings.id ? newSettings : presets
|
||||
)
|
||||
);
|
||||
};
|
||||
const deleteCurrentPreset = () => {
|
||||
if (!localOrRemotePresets) return;
|
||||
setLocalPresets(
|
||||
localOrRemotePresets.filter((qPreset) => qPreset.labelSettings.printSettings.id !== selectedPresetState)
|
||||
);
|
||||
setSelectedPresetState(undefined);
|
||||
};
|
||||
|
||||
// Initialize presets
|
||||
let curPreset: SpoolQRCodePrintSettings;
|
||||
if (localOrRemotePresets === undefined) {
|
||||
// DB not loaded yet, use a temporary one
|
||||
curPreset = {
|
||||
labelSettings: {
|
||||
printSettings: {
|
||||
id: "TEMP",
|
||||
name: t("printing.generic.newSetting"),
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
// DB is loaded, find the selected setting
|
||||
if (localOrRemotePresets.length === 0) {
|
||||
// DB loaded, but no settings found, add a new one and select it
|
||||
const newSetting = addNewPreset();
|
||||
if (!newSetting) {
|
||||
console.error("Error adding new setting, this should never happen");
|
||||
return;
|
||||
}
|
||||
|
||||
// Mutate the allPrintSettings list so that the rest of the UI will work fine
|
||||
localOrRemotePresets.push(newSetting);
|
||||
curPreset = newSetting;
|
||||
} else {
|
||||
// DB loaded and at least 1 setting exists
|
||||
if (!selectedPresetState) {
|
||||
// No setting has been selected, select the first one
|
||||
curPreset = localOrRemotePresets[0];
|
||||
setSelectedPresetState(localOrRemotePresets[0].labelSettings.printSettings.id);
|
||||
} else {
|
||||
// A setting has been selected, find it
|
||||
const foundSetting = localOrRemotePresets.find(
|
||||
(settings) => settings.labelSettings.printSettings.id === selectedPresetState
|
||||
);
|
||||
if (foundSetting) {
|
||||
curPreset = foundSetting;
|
||||
} else {
|
||||
// Selected setting not found, select a temp one
|
||||
curPreset = {
|
||||
labelSettings: {
|
||||
printSettings: {
|
||||
id: "TEMP",
|
||||
name: t("printing.generic.newSetting"),
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const [templateHelpOpen, setTemplateHelpOpen] = useState(false);
|
||||
const template =
|
||||
curPreset.template ??
|
||||
`**{filament.vendor.name} - {filament.name}
|
||||
#{id} - {filament.material}**
|
||||
Spool Weight: {filament.spool_weight} g
|
||||
ET: {filament.settings_extruder_temp} °C
|
||||
BT: {filament.settings_bed_temp} °C
|
||||
Lot Nr: {lot_nr}
|
||||
{comment}
|
||||
{filament.comment}
|
||||
{filament.vendor.comment}`;
|
||||
|
||||
const spoolTags = [
|
||||
{ tag: "id" },
|
||||
{ tag: "registered" },
|
||||
{ tag: "first_used" },
|
||||
{ tag: "last_used" },
|
||||
{ tag: "price" },
|
||||
{ tag: "initial_weight" },
|
||||
{ tag: "spool_weight" },
|
||||
{ tag: "remaining_weight" },
|
||||
{ tag: "used_weight" },
|
||||
{ tag: "remaining_length" },
|
||||
{ tag: "used_length" },
|
||||
{ tag: "location" },
|
||||
{ tag: "lot_nr" },
|
||||
{ tag: "comment" },
|
||||
{ tag: "archived" },
|
||||
];
|
||||
const spoolFields = useGetFields(EntityType.spool);
|
||||
if (spoolFields.data !== undefined) {
|
||||
spoolFields.data.forEach((field) => {
|
||||
spoolTags.push({ tag: `extra.${field.key}` });
|
||||
});
|
||||
}
|
||||
const filamentTags = [
|
||||
{ tag: "filament.id" },
|
||||
{ tag: "filament.registered" },
|
||||
{ tag: "filament.name" },
|
||||
{ tag: "filament.material" },
|
||||
{ tag: "filament.price" },
|
||||
{ tag: "filament.density" },
|
||||
{ tag: "filament.diameter" },
|
||||
{ tag: "filament.weight" },
|
||||
{ tag: "filament.spool_weight" },
|
||||
{ tag: "filament.article_number" },
|
||||
{ tag: "filament.comment" },
|
||||
{ tag: "filament.settings_extruder_temp" },
|
||||
{ tag: "filament.settings_bed_temp" },
|
||||
{ tag: "filament.color_hex" },
|
||||
{ tag: "filament.multi_color_hexes" },
|
||||
{ tag: "filament.multi_color_direction" },
|
||||
{ tag: "filament.external_id" },
|
||||
];
|
||||
const filamentFields = useGetFields(EntityType.filament);
|
||||
if (filamentFields.data !== undefined) {
|
||||
filamentFields.data.forEach((field) => {
|
||||
filamentTags.push({ tag: `filament.extra.${field.key}` });
|
||||
});
|
||||
}
|
||||
const vendorTags = [
|
||||
{ tag: "filament.vendor.id" },
|
||||
{ tag: "filament.vendor.registered" },
|
||||
{ tag: "filament.vendor.name" },
|
||||
{ tag: "filament.vendor.comment" },
|
||||
{ tag: "filament.vendor.empty_spool_weight" },
|
||||
{ tag: "filament.vendor.external_id" },
|
||||
];
|
||||
const vendorFields = useGetFields(EntityType.vendor);
|
||||
if (vendorFields.data !== undefined) {
|
||||
vendorFields.data.forEach((field) => {
|
||||
vendorTags.push({ tag: `filament.vendor.extra.${field.key}` });
|
||||
});
|
||||
}
|
||||
|
||||
const templateTags = [...spoolTags, ...filamentTags, ...vendorTags];
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<QRCodePrintingDialog
|
||||
printSettings={curPreset.labelSettings}
|
||||
setPrintSettings={(newSettings) => {
|
||||
curPreset.labelSettings = newSettings;
|
||||
updateCurrentPreset(curPreset);
|
||||
}}
|
||||
extraSettingsStart={
|
||||
<>
|
||||
<Form.Item label={t("printing.generic.settings")}>
|
||||
<Flex gap={8}>
|
||||
<Select
|
||||
value={selectedPresetState}
|
||||
onChange={(value) => {
|
||||
setSelectedPresetState(value);
|
||||
}}
|
||||
options={
|
||||
localOrRemotePresets &&
|
||||
localOrRemotePresets.map((settings) => ({
|
||||
label: settings.labelSettings.printSettings?.name || t("printing.generic.defaultSettings"),
|
||||
value: settings.labelSettings.printSettings.id,
|
||||
}))
|
||||
}
|
||||
></Select>
|
||||
<Button
|
||||
style={{ width: "3em" }}
|
||||
icon={<PlusOutlined />}
|
||||
title={t("printing.generic.addSettings")}
|
||||
onClick={addNewPreset}
|
||||
/>
|
||||
<Button
|
||||
style={{ width: "3em" }}
|
||||
icon={<CopyOutlined />}
|
||||
title={t("printing.generic.duplicateSettings")}
|
||||
onClick={duplicateCurrentPreset}
|
||||
/>
|
||||
{localOrRemotePresets && localOrRemotePresets.length > 1 && (
|
||||
<Popconfirm
|
||||
title={t("printing.generic.deleteSettings")}
|
||||
description={t("printing.generic.deleteSettingsConfirm")}
|
||||
onConfirm={deleteCurrentPreset}
|
||||
okText={t("buttons.delete")}
|
||||
cancelText={t("buttons.cancel")}
|
||||
>
|
||||
<Button
|
||||
style={{ width: "3em" }}
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
title={t("printing.generic.deleteSettings")}
|
||||
/>
|
||||
</Popconfirm>
|
||||
)}
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.generic.settingsName")}>
|
||||
<Input
|
||||
value={curPreset.labelSettings.printSettings?.name}
|
||||
onChange={(e) => {
|
||||
curPreset.labelSettings.printSettings.name = e.target.value;
|
||||
updateCurrentPreset(curPreset);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
}
|
||||
items={items.map((spool) => ({
|
||||
value: useHTTPUrl ? `${baseUrlRoot}/spool/show/${spool.id}` : `web+spoolman:s-${spool.id}`,
|
||||
label: (
|
||||
<p
|
||||
style={{
|
||||
padding: "1mm 1mm 1mm 0",
|
||||
margin: 0,
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{renderLabelContents(template, spool)}
|
||||
</p>
|
||||
),
|
||||
errorLevel: "H",
|
||||
}))}
|
||||
extraSettings={
|
||||
<>
|
||||
<Form.Item label={t("printing.qrcode.template")}>
|
||||
<TextArea
|
||||
value={template}
|
||||
rows={8}
|
||||
onChange={(newValue) => {
|
||||
curPreset.template = newValue.target.value;
|
||||
updateCurrentPreset(curPreset);
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label={t("printing.qrcode.useHTTPUrl.label")} tooltip={t("printing.qrcode.useHTTPUrl.tooltip")}>
|
||||
<Switch checked={useHTTPUrl} onChange={(checked) => setUseHTTPUrl(checked)} />
|
||||
</Form.Item>
|
||||
<Modal open={templateHelpOpen} footer={null} onCancel={() => setTemplateHelpOpen(false)}>
|
||||
<Table
|
||||
size="small"
|
||||
showHeader={false}
|
||||
pagination={false}
|
||||
scroll={{ y: 400 }}
|
||||
columns={[{ dataIndex: "tag" }]}
|
||||
dataSource={templateTags}
|
||||
/>
|
||||
</Modal>
|
||||
<Text type="secondary">
|
||||
{t("printing.qrcode.templateHelp")}{" "}
|
||||
<Button size="small" onClick={() => setTemplateHelpOpen(true)}>
|
||||
{t("actions.show")}
|
||||
</Button>
|
||||
</Text>
|
||||
</>
|
||||
}
|
||||
extraButtons={
|
||||
<>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
icon={<SaveOutlined />}
|
||||
onClick={() => {
|
||||
savePresetsRemote();
|
||||
messageApi.success(t("notifications.saveSuccessful"));
|
||||
}}
|
||||
>
|
||||
{t("printing.generic.saveSetting")}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpoolQRCodePrintingDialog;
|
||||
221
client/src/pages/printing/spoolSelectModal.tsx
Normal file
221
client/src/pages/printing/spoolSelectModal.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
import { RightOutlined } from "@ant-design/icons";
|
||||
import { useTable } from "@refinedev/antd";
|
||||
import { Button, Checkbox, Col, message, Row, Space, Table } from "antd";
|
||||
import { t } from "i18next";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { FilteredQueryColumn, SortedColumn, SpoolIconColumn } from "../../components/column";
|
||||
import { useSpoolmanFilamentFilter, useSpoolmanMaterials } from "../../components/otherModels";
|
||||
import { removeUndefined } from "../../utils/filtering";
|
||||
import { TableState } from "../../utils/saveload";
|
||||
import { ISpool } from "../spools/model";
|
||||
|
||||
interface Props {
|
||||
description?: string;
|
||||
onContinue: (selectedSpools: ISpool[]) => void;
|
||||
}
|
||||
|
||||
interface ISpoolCollapsed extends ISpool {
|
||||
"filament.combined_name": string;
|
||||
"filament.id": number;
|
||||
"filament.material"?: string;
|
||||
}
|
||||
|
||||
function collapseSpool(element: ISpool): ISpoolCollapsed {
|
||||
let filament_name: string;
|
||||
if (element.filament.vendor && "name" in element.filament.vendor) {
|
||||
filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
|
||||
} else {
|
||||
filament_name = element.filament.name ?? element.filament.id.toString();
|
||||
}
|
||||
return {
|
||||
...element,
|
||||
"filament.combined_name": filament_name,
|
||||
"filament.id": element.filament.id,
|
||||
"filament.material": element.filament.material,
|
||||
};
|
||||
}
|
||||
|
||||
const SpoolSelectModal: React.FC<Props> = ({ description, onContinue }) => {
|
||||
const [selectedItems, setSelectedItems] = useState<number[]>([]);
|
||||
const [showArchived, setShowArchived] = useState(false);
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { tableProps, sorters, filters, current, pageSize } = useTable<ISpoolCollapsed>({
|
||||
resource: "spool",
|
||||
meta: {
|
||||
queryParams: {
|
||||
["allow_archived"]: showArchived,
|
||||
},
|
||||
},
|
||||
syncWithLocation: false,
|
||||
pagination: {
|
||||
mode: "off",
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
sorters: {
|
||||
mode: "server",
|
||||
},
|
||||
filters: {
|
||||
mode: "server",
|
||||
},
|
||||
queryOptions: {
|
||||
select(data) {
|
||||
return {
|
||||
total: data.total,
|
||||
data: data.data.map(collapseSpool),
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Store state in local storage
|
||||
const tableState: TableState = {
|
||||
sorters,
|
||||
filters,
|
||||
pagination: { current, pageSize },
|
||||
};
|
||||
|
||||
// Collapse the dataSource to a mutable list and add a filament_name field
|
||||
const dataSource: ISpoolCollapsed[] = useMemo(
|
||||
() => (tableProps.dataSource || []).map((record) => ({ ...record })),
|
||||
[tableProps.dataSource]
|
||||
);
|
||||
|
||||
// Function to add/remove all filtered items from selected items
|
||||
const selectUnselectFiltered = (select: boolean) => {
|
||||
setSelectedItems((prevSelected) => {
|
||||
const filtered = dataSource.map((spool) => spool.id).filter((spool) => !prevSelected.includes(spool));
|
||||
return select ? [...prevSelected, ...filtered] : filtered;
|
||||
});
|
||||
};
|
||||
|
||||
// Handler for selecting/unselecting individual items
|
||||
const handleSelectItem = (item: number) => {
|
||||
setSelectedItems((prevSelected) =>
|
||||
prevSelected.includes(item) ? prevSelected.filter((selected) => selected !== item) : [...prevSelected, item]
|
||||
);
|
||||
};
|
||||
|
||||
// State for the select/unselect all checkbox
|
||||
const isAllFilteredSelected = dataSource.every((spool) => selectedItems.includes(spool.id));
|
||||
const isSomeButNotAllFilteredSelected =
|
||||
dataSource.some((spool) => selectedItems.includes(spool.id)) && !isAllFilteredSelected;
|
||||
|
||||
const commonProps = {
|
||||
t,
|
||||
navigate,
|
||||
actions: () => {
|
||||
return [];
|
||||
},
|
||||
dataSource,
|
||||
tableState,
|
||||
sorter: true,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
{description && <div>{description}</div>}
|
||||
<Table
|
||||
{...tableProps}
|
||||
rowKey="id"
|
||||
tableLayout="auto"
|
||||
dataSource={dataSource}
|
||||
pagination={false}
|
||||
scroll={{ y: 200 }}
|
||||
columns={removeUndefined([
|
||||
{
|
||||
width: 50,
|
||||
render: (_, item: ISpool) => (
|
||||
<Checkbox checked={selectedItems.includes(item.id)} onChange={() => handleSelectItem(item.id)} />
|
||||
),
|
||||
},
|
||||
SortedColumn({
|
||||
...commonProps,
|
||||
id: "id",
|
||||
i18ncat: "spool",
|
||||
width: 80,
|
||||
}),
|
||||
SpoolIconColumn({
|
||||
...commonProps,
|
||||
id: "filament.combined_name",
|
||||
dataId: "filament.combined_name",
|
||||
i18nkey: "spool.fields.filament_name",
|
||||
color: (record: ISpoolCollapsed) => record.filament.color_hex,
|
||||
filterValueQuery: useSpoolmanFilamentFilter(),
|
||||
}),
|
||||
FilteredQueryColumn({
|
||||
...commonProps,
|
||||
id: "filament.material",
|
||||
i18nkey: "spool.fields.material",
|
||||
filterValueQuery: useSpoolmanMaterials(),
|
||||
}),
|
||||
])}
|
||||
/>
|
||||
<Row gutter={[10, 10]}>
|
||||
<Col span={12}>
|
||||
<Checkbox
|
||||
checked={isAllFilteredSelected}
|
||||
indeterminate={isSomeButNotAllFilteredSelected}
|
||||
onChange={(e) => {
|
||||
selectUnselectFiltered(e.target.checked);
|
||||
}}
|
||||
>
|
||||
{t("printing.spoolSelect.selectAll")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div style={{ float: "right" }}>
|
||||
{t("printing.spoolSelect.selectedTotal", {
|
||||
count: selectedItems.length,
|
||||
})}
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Checkbox
|
||||
checked={showArchived}
|
||||
onChange={(e) => {
|
||||
setShowArchived(e.target.checked);
|
||||
if (!e.target.checked) {
|
||||
// Remove archived spools from selected items
|
||||
setSelectedItems((prevSelected) =>
|
||||
prevSelected.filter(
|
||||
(selected) => dataSource.find((spool) => spool.id === selected)?.archived !== true
|
||||
)
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t("printing.spoolSelect.showArchived")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<RightOutlined />}
|
||||
iconPosition="end"
|
||||
onClick={() => {
|
||||
if (selectedItems.length === 0) {
|
||||
messageApi.open({
|
||||
type: "error",
|
||||
content: t("printing.spoolSelect.noSpoolsSelected"),
|
||||
});
|
||||
return;
|
||||
}
|
||||
onContinue(dataSource.filter((spool) => selectedItems.includes(spool.id)));
|
||||
}}
|
||||
>
|
||||
{t("buttons.continue")}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpoolSelectModal;
|
||||
Reference in New Issue
Block a user