diff --git a/client/.prettierrc b/client/.prettierrc new file mode 100644 index 0000000..963354f --- /dev/null +++ b/client/.prettierrc @@ -0,0 +1,3 @@ +{ + "printWidth": 120 +} diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index ea1e272..1cfeecc 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -56,7 +56,7 @@ "printing": { "generic": { "title": "Printing", - "description": "Tune in the settings below to get the desired print layout. Keep in mind that printers and your OS may apply it's own margins and scaling, so you may need to adjust the settings accordingly. Test it on a piece of regular paper before printing on the actual labels.", + "description": "Tune in the settings below to get the desired print layout. Keep in mind that printers and your OS may apply it's own margins and scaling, so you may need to perform some trial-and-error before it's all correct. Test it on a piece of regular paper before printing on the actual labels.\nThe \"Margin\" fields should be configured to match your label paper and printer, changing these will affect the size of the entire grid.\nThe \"Safe-Zone\" fields should be set to how close to the paper edge your printer can print, changing these will not affect the entire grid.", "print": "Print", "columns": "Columns", "rows": "Rows", @@ -67,6 +67,10 @@ "marginRight": "Right Margin", "marginTop": "Top Margin", "marginBottom": "Bottom Margin", + "printerMarginLeft": "Safe-Zone Left", + "printerMarginRight": "Safe-Zone Right", + "printerMarginTop": "Safe-Zone Top", + "printerMarginBottom": "Safe-Zone Bottom", "blockRowsTop": "Block Rows Top", "blockRowsBottom": "Block Rows Bottom", "blockColumnsLeft": "Block Columns Left", diff --git a/client/src/components/printing/printingDialog.tsx b/client/src/components/printing/printingDialog.tsx index 674c884..256c3c3 100644 --- a/client/src/components/printing/printingDialog.tsx +++ b/client/src/components/printing/printingDialog.tsx @@ -1,17 +1,5 @@ import React, { useRef } from "react"; -import { - Modal, - Slider, - Button, - Select, - Row, - Col, - Form, - Divider, - RadioChangeEvent, - Radio, - InputNumber, -} from "antd"; +import { Modal, Slider, Button, Select, Row, Col, Form, Divider, RadioChangeEvent, Radio, InputNumber } from "antd"; import ReactToPrint from "react-to-print"; import { useSavedState } from "../../utils/saveload"; import { useTranslate } from "@refinedev/core"; @@ -57,120 +45,69 @@ const paperDimensions: { [key: string]: PaperDimensions } = { }, }; -const PrintingDialog: React.FC = ({ - items, - style, - extraSettings, - visible, - onCancel, - title, -}) => { +const PrintingDialog: React.FC = ({ items, style, extraSettings, visible, onCancel, title }) => { const t = useTranslate(); 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 [blockRowsTop, setBlockRowsTop] = useSavedState( - "print-blockRowsTop", - 0 - ); - const [blockRowsBottom, setBlockRowsBottom] = useSavedState( - "print-blockRowsBottom", - 0 - ); - const [blockColumnsLeft, setBlockColumnsLeft] = useSavedState( - "print-blockColumnsLeft", - 0 - ); - const [blockColumnsRight, setBlockColumnsRight] = useSavedState( - "print-blockColumnsRight", - 0 - ); + const [marginBottom, setMarginBottom] = useSavedState("print-marginBottom", 10); + 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 [paperSize, setPaperSize] = useSavedState("print-paperSize", "A4"); - const [previewScale, setPreviewScale] = useSavedState( - "print-previewScale", - 0.6 - ); - const [borderShowMode, setBorderShowMode] = useSavedState< - "none" | "border" | "grid" - >("print-borderShowMode", "grid"); + const [previewScale, setPreviewScale] = useSavedState("print-previewScale", 0.6); + const [borderShowMode, setBorderShowMode] = useSavedState<"none" | "border" | "grid">("print-borderShowMode", "grid"); const paperWidth = paperDimensions[paperSize].width; const paperHeight = paperDimensions[paperSize].height; const printRef = useRef(null); - const calculatedRowHeight = - (paperHeight - marginTop - marginBottom) / paperRows; + const calculatedRowHeight = (paperHeight - marginTop - marginBottom) / paperRows; - const itemsPerRow = paperColumns - blockColumnsLeft - blockColumnsRight; - const rowsPerPage = paperRows - blockRowsTop - blockRowsBottom; + const itemsPerRow = paperColumns; + const rowsPerPage = paperRows; const rowsOfItems = []; for (let row_idx = 0; row_idx <= items.length / itemsPerRow; row_idx += 1) { - rowsOfItems.push( - items.slice(row_idx * itemsPerRow, (row_idx + 1) * itemsPerRow) - ); + rowsOfItems.push(items.slice(row_idx * itemsPerRow, (row_idx + 1) * itemsPerRow)); } const pageBlocks = []; - for ( - let page_idx = 0; - page_idx <= rowsOfItems.length / rowsPerPage; - page_idx += 1 - ) { - pageBlocks.push( - rowsOfItems.slice(page_idx * rowsPerPage, (page_idx + 1) * rowsPerPage) - ); + for (let page_idx = 0; page_idx <= rowsOfItems.length / rowsPerPage; page_idx += 1) { + pageBlocks.push(rowsOfItems.slice(page_idx * rowsPerPage, (page_idx + 1) * rowsPerPage)); } - const pages = pageBlocks.map(function (rows, idx) { - const itemRowsBlockTop = [...Array(blockRowsTop).keys()].map((row) => ( - - -
- - - )); - const itemRows = rows.map((row, idx) => { - const itemColumnsBlockLeft = [...Array(blockColumnsLeft).keys()].map( - (col) => ( - -
- - ) - ); + const pages = pageBlocks.map(function (rows, pageIdx) { + const itemRows = rows.map((row, rowIdx) => { return ( - - {itemColumnsBlockLeft} - {row.map((item, index) => ( - -
- {item} -
- - ))} + + {row.map(function (item, colIdx) { + return ( + +
+ {item} +
+ + ); + })} ); }); @@ -178,7 +115,7 @@ const PrintingDialog: React.FC = ({ return (
= ({ 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" - })`, + 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"})`, }} > = ({ alignContent: "flex-start", }} > - {itemRowsBlockTop} {itemRows}
@@ -227,16 +155,22 @@ const PrintingDialog: React.FC = ({ footer={[ ( - - )} + trigger={() => } content={() => printRef.current} />, ]} width={1200} // Set the modal width to accommodate the preview > - {t("printing.generic.description")} + + {t("printing.generic.description")} +
= ({
-
+ @@ -401,6 +329,114 @@ const PrintingDialog: React.FC = ({ + + + + `${value} mm` }} + value={printerMarginLeft} + onChange={(value) => { + setPrinterMarginLeft(value); + }} + /> + + + { + setPrinterMarginLeft(value ?? 0); + }} + /> + + + + + + + `${value} mm` }} + value={printerMarginTop} + onChange={(value) => { + setPrinterMarginTop(value); + }} + /> + + + { + setPrinterMarginTop(value ?? 0); + }} + /> + + + + + + + `${value} mm` }} + value={printerMarginRight} + onChange={(value) => { + setPrinterMarginRight(value); + }} + /> + + + { + setPrinterMarginRight(value ?? 0); + }} + /> + + + + + + + `${value} mm` }} + value={printerMarginBottom} + onChange={(value) => { + setPrinterMarginBottom(value); + }} + /> + + + { + setPrinterMarginBottom(value ?? 0); + }} + /> + + + @@ -409,8 +445,6 @@ const PrintingDialog: React.FC = ({ max={5} value={paperColumns} onChange={(value) => { - if (value - blockColumnsLeft - blockColumnsRight < 1) - return; setPaperColumns(value); }} /> @@ -421,11 +455,6 @@ const PrintingDialog: React.FC = ({ style={{ margin: "0 16px" }} value={paperColumns} onChange={(value) => { - if ( - (value ?? 1) - blockColumnsLeft - blockColumnsRight < - 1 - ) - return; setPaperColumns(value ?? 1); }} /> @@ -440,7 +469,6 @@ const PrintingDialog: React.FC = ({ max={15} value={paperRows} onChange={(value) => { - if (value - blockRowsTop - blockRowsBottom < 1) return; setPaperRows(value); }} /> @@ -451,8 +479,6 @@ const PrintingDialog: React.FC = ({ style={{ margin: "0 16px" }} value={paperRows} onChange={(value) => { - if ((value ?? 1) - blockRowsTop - blockRowsBottom < 1) - return; setPaperRows(value ?? 1); }} /> @@ -460,10 +486,7 @@ const PrintingDialog: React.FC = ({ - setPaperSize(value)}> {Object.keys(paperDimensions).map((key) => ( {key} @@ -489,113 +512,6 @@ const PrintingDialog: React.FC = ({ buttonStyle="solid" /> - - - - { - if (paperRows - value - blockRowsBottom < 1) return; - setBlockRowsTop(value); - }} - /> - - - { - if (paperRows - (value ?? 0) - blockRowsBottom < 1) - return; - setBlockRowsTop(value ?? 0); - }} - /> - - - - - - - { - if (paperRows - value - blockRowsTop < 1) return; - setBlockRowsBottom(value); - }} - /> - - - { - if (paperRows - (value ?? 0) - blockRowsTop < 1) return; - setBlockRowsBottom(value ?? 0); - }} - /> - - - - - - - { - if (paperColumns - value - blockColumnsRight < 1) return; - setBlockColumnsLeft(value); - }} - /> - - - { - if (paperColumns - (value ?? 0) - blockColumnsRight < 1) - return; - setBlockColumnsLeft(value ?? 0); - }} - /> - - - - - - - { - if (paperColumns - value - blockColumnsLeft < 1) return; - setBlockColumnsRight(value); - }} - /> - - - { - if (paperColumns - (value ?? 0) - blockColumnsLeft < 1) - return; - setBlockColumnsRight(value ?? 0); - }} - /> - - - {extraSettings && } {extraSettings} diff --git a/client/src/components/printing/qrCodePrintingDialog.tsx b/client/src/components/printing/qrCodePrintingDialog.tsx index 0983a44..900d83b 100644 --- a/client/src/components/printing/qrCodePrintingDialog.tsx +++ b/client/src/components/printing/qrCodePrintingDialog.tsx @@ -15,50 +15,27 @@ interface QRCodePrintingDialogProps { onCancel: () => void; } -const QRCodePrintingDialog: React.FC = ({ - visible, - items, - onCancel, -}) => { +const QRCodePrintingDialog: React.FC = ({ visible, items, onCancel }) => { const t = useTranslate(); - const [showContent, setShowContent] = useSavedState( - "print-showContent", - true - ); + const [showContent, setShowContent] = useSavedState("print-showContent", true); const [textSize, setTextSize] = useSavedState("print-textSize", 3); - const [showSpoolmanIcon, setShowSpoolmanIcon] = useSavedState( - "print-showSpoolmanIcon", - true - ); + const [showSpoolmanIcon, setShowSpoolmanIcon] = useSavedState("print-showSpoolmanIcon", true); const elements = items.map((item) => { return ( -
- - {showContent && ( -
- {item.label ?? item.value} -
- )} +
+
+ +
+ {showContent &&
{item.label ?? item.value}
}
); }); @@ -71,10 +48,7 @@ const QRCodePrintingDialog: React.FC = ({ extraSettings={ <> - setShowContent(checked)} - /> + setShowContent(checked)} /> @@ -107,28 +81,41 @@ const QRCodePrintingDialog: React.FC = ({ - setShowSpoolmanIcon(checked)} - /> + setShowSpoolmanIcon(checked)} /> } style={` + .print-page .print-qrcode-item { + display: flex; + width: 100%; + max-height: 100%; + } + + .print-page .print-qrcode-container { + max-width: 50%; + display: flex; + } + .print-page .print-qrcode { - height: 100% !important; - width: 100% !important; + width: auto !important; + height: auto !important; } .print-page .print-qrcode-title { - width: 100%; - font-size: ${textSize}mm; + flex: 1 1 auto; + font-size: ${textSize}mm; + color: #000; + overflow: hidden; } - .print-page svg { - display: block; - height: 100%; - width: auto; + .print-page canvas, .print-page svg { + /* display: block; */ + object-fit: contain; + height: 100% !important; + width: 100% !important; + max-height: 100%; + max-width: 100%; } `} onCancel={onCancel}