From 437213c7d42efb9e7be4c20680abe289f11fc372 Mon Sep 17 00:00:00 2001 From: Donkie Date: Wed, 2 Aug 2023 21:00:36 +0200 Subject: [PATCH] Client: QR print updates * Added grid borders * Replaced row height with instead choosing number of rows * Added support for negative margins * New QR code content format * Added number inputs to all sliders --- client/public/locales/en/common.json | 10 +- client/public/locales/sv/common.json | 10 +- .../components/printing/printingDialog.tsx | 410 ++++++++++++------ .../printing/qrCodePrintingDialog.tsx | 41 +- .../src/components/selectAndPrintDialog.tsx | 5 +- 5 files changed, 335 insertions(+), 141 deletions(-) diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index 21abefa..b057d51 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -56,16 +56,22 @@ "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.", "print": "Print", "columns": "Columns", + "rows": "Rows", "paperSize": "Paper Size", - "rowHeight": "Row Height", "showBorder": "Show Border", "previewScale": "Preview Scale", "marginLeft": "Left Margin", "marginRight": "Right Margin", "marginTop": "Top Margin", - "marginBottom": "Bottom Margin" + "marginBottom": "Bottom Margin", + "borders": { + "none": "None", + "border": "Border", + "grid": "Grid" + } }, "qrcode": { "button": "Print QR Codes", diff --git a/client/public/locales/sv/common.json b/client/public/locales/sv/common.json index 37a25fb..70c7c5d 100644 --- a/client/public/locales/sv/common.json +++ b/client/public/locales/sv/common.json @@ -56,16 +56,22 @@ "printing": { "generic": { "title": "Utskrift", + "description": "Justera inställningarna nedan för att få önskat utskriftslayout. Kom ihåg att skrivare och ditt operativsystem kan tillämpa sina egna marginaler och skalning, så du kan behöva justera inställningarna därefter. Testa på ett vanligt papper innan du skriver ut på de faktiska etiketterna.", "print": "Skriv ut", "columns": "Kolumner", + "rows": "Rader", "paperSize": "Papperstyp", - "rowHeight": "Radhöjd", "showBorder": "Visa ram", "previewScale": "Skala förhandsgranskning", "marginLeft": "Marginal - vänster", "marginRight": "Marginal - höger", "marginTop": "Marginal - topp", - "marginBottom": "Marginal - botten" + "marginBottom": "Marginal - botten", + "borders": { + "none": "Ingen", + "border": "Ram", + "grid": "Rutnät" + } }, "qrcode": { "button": "Skriv ut QR-koder", diff --git a/client/src/components/printing/printingDialog.tsx b/client/src/components/printing/printingDialog.tsx index 2778d34..fd3eee4 100644 --- a/client/src/components/printing/printingDialog.tsx +++ b/client/src/components/printing/printingDialog.tsx @@ -8,7 +8,9 @@ import { Col, Form, Divider, - Switch, + RadioChangeEvent, + Radio, + InputNumber, } from "antd"; import ReactToPrint from "react-to-print"; import { useSavedState } from "../../utils/saveload"; @@ -73,72 +75,112 @@ const PrintingDialog: React.FC = ({ 10 ); const [itemsPerRow, setItemsPerRow] = useSavedState("print-itemsPerRow", 3); + const [rowsPerPage, setRowsPerPage] = useSavedState("print-rowsPerPage", 8); const [paperSize, setPaperSize] = useSavedState("print-paperSize", "A4"); - const [rowHeight, setRowHeight] = useSavedState("print-rowHeight", 70); const [previewScale, setPreviewScale] = useSavedState( "print-previewScale", 0.6 ); - const [showBorder, setShowBorder] = useSavedState("print-showBorder", true); + 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 itemsPerPage = - itemsPerRow * - Math.floor((paperHeight - marginTop - marginBottom) / rowHeight); - const pageBlocks = []; - for (let i = 0; i < items.length; i += 1) { - if (i % itemsPerPage === 0) { - pageBlocks.push(items.slice(i, i + itemsPerPage)); - } + const calculatedRowHeight = + (paperHeight - marginTop - marginBottom) / rowsPerPage; + + 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) + ); } - const rowBlocks = pageBlocks.map((pageBlock, idx) => ( -
- { + return ( + + {row.map((item, index) => ( + +
+ {item} +
+ + ))} + + ); + }); + + return ( +
- {pageBlock.map((item, index) => ( -
+ - {item} - - ))} - - - )); + {itemRows} +
+
+
+ ); + }); return ( = ({ content={() => printRef.current} />, ]} - width={1000} // Set the modal width to accommodate the preview + width={1200} // Set the modal width to accommodate the preview > - + {t("printing.generic.description")} +
= ({ margin-top: 10mm; } } + + .print-page td { + padding: 0; + } ${style ?? ""} `} - {rowBlocks} + {pages}
- +
- `${value} mm` }} - value={marginLeft} - onChange={(value) => { - setMarginLeft(value); - }} - /> + + + `${value} mm` }} + value={marginLeft} + onChange={(value) => { + setMarginLeft(value); + }} + /> + + + { + setMarginLeft(value ?? 0); + }} + /> + + - `${value} mm` }} - value={marginTop} - onChange={(value) => { - setMarginTop(value); - }} - /> + + + `${value} mm` }} + value={marginTop} + onChange={(value) => { + setMarginTop(value); + }} + /> + + + { + setMarginTop(value ?? 0); + }} + /> + + - `${value} mm` }} - value={marginRight} - onChange={(value) => { - setMarginRight(value); - }} - /> + + + `${value} mm` }} + value={marginRight} + onChange={(value) => { + setMarginRight(value); + }} + /> + + + { + setMarginRight(value ?? 0); + }} + /> + + - `${value} mm` }} - value={marginBottom} - onChange={(value) => { - setMarginBottom(value); - }} - /> + + + `${value} mm` }} + value={marginBottom} + onChange={(value) => { + setMarginBottom(value); + }} + /> + + + { + setMarginBottom(value ?? 0); + }} + /> + + - { - setItemsPerRow(value); - }} - /> + + + { + setItemsPerRow(value); + }} + /> + + + { + setItemsPerRow(value ?? 1); + }} + /> + + + + + + + { + setRowsPerPage(value); + }} + /> + + + { + setRowsPerPage(value ?? 1); + }} + /> + + - - `${value} mm` }} - value={rowHeight} - onChange={(value) => { - setRowHeight(value); - }} - /> - - setShowBorder(checked)} + { + setBorderShowMode(e.target.value); + }} + value={borderShowMode} + optionType="button" + buttonStyle="solid" /> {extraSettings && } {extraSettings} - { - setPreviewScale(value); - }} - /> + + + { + setPreviewScale(value); + }} + /> + + + { + setPreviewScale(value ?? 0.1); + }} + /> + + diff --git a/client/src/components/printing/qrCodePrintingDialog.tsx b/client/src/components/printing/qrCodePrintingDialog.tsx index 6e0dc2f..9ad30b2 100644 --- a/client/src/components/printing/qrCodePrintingDialog.tsx +++ b/client/src/components/printing/qrCodePrintingDialog.tsx @@ -1,4 +1,4 @@ -import { Form, QRCode, Slider, Switch } from "antd"; +import { Col, Form, InputNumber, QRCode, Row, Slider, Switch } from "antd"; import { useSavedState } from "../../utils/saveload"; import PrintingDialog from "./printingDialog"; import { useTranslate } from "@refinedev/core"; @@ -69,17 +69,34 @@ const QRCodePrintingDialog: React.FC = ({ /> - `${value} mm` }} - min={3} - max={15} - value={textSize} - step={0.1} - onChange={(value) => { - setTextSize(value); - }} - /> + + + `${value} mm` }} + min={3} + max={15} + value={textSize} + step={0.1} + onChange={(value) => { + setTextSize(value); + }} + /> + + + { + setTextSize(value ?? 5); + }} + /> + + { setStep(1); }} items={selectedSpools.map((spool) => ({ - value: `S:${spool.id}`, - // value: `https://spoolman.lan/spool/show/${spool.id}`, - // label: `hello`, + value: `web+spoolman:s-${spool.id}`, + label: `s-${spool.id}`, errorLevel: "H", }))} />