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", }))} />