From d7ccd2425747951fa8ee9865543e38796ca391dd Mon Sep 17 00:00:00 2001 From: Donkie Date: Wed, 2 Aug 2023 21:55:46 +0200 Subject: [PATCH] Client: Add ability to block rows/columns in print Also fixed some issues with drawing the border --- client/public/locales/en/common.json | 4 + client/public/locales/sv/common.json | 4 + .../components/printing/printingDialog.tsx | 189 ++++++++++++++++-- 3 files changed, 182 insertions(+), 15 deletions(-) diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index b057d51..1e475ba 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -67,6 +67,10 @@ "marginRight": "Right Margin", "marginTop": "Top Margin", "marginBottom": "Bottom Margin", + "blockRowsTop": "Block Rows Top", + "blockRowsBottom": "Block Rows Bottom", + "blockColumnsLeft": "Block Columns Left", + "blockColumnsRight": "Block Columns Right", "borders": { "none": "None", "border": "Border", diff --git a/client/public/locales/sv/common.json b/client/public/locales/sv/common.json index 70c7c5d..28ee75d 100644 --- a/client/public/locales/sv/common.json +++ b/client/public/locales/sv/common.json @@ -67,6 +67,10 @@ "marginRight": "Marginal - höger", "marginTop": "Marginal - topp", "marginBottom": "Marginal - botten", + "blockRowsTop": "Blockera rader - topp", + "blockRowsBottom": "Blockera rader - botten", + "blockColumnsLeft": "Blockera kolumner - vänster", + "blockColumnsRight": "Blockera kolumner - höger", "borders": { "none": "Ingen", "border": "Ram", diff --git a/client/src/components/printing/printingDialog.tsx b/client/src/components/printing/printingDialog.tsx index fd3eee4..b95ed87 100644 --- a/client/src/components/printing/printingDialog.tsx +++ b/client/src/components/printing/printingDialog.tsx @@ -74,8 +74,24 @@ const PrintingDialog: React.FC = ({ "print-marginBottom", 10 ); - const [itemsPerRow, setItemsPerRow] = useSavedState("print-itemsPerRow", 3); - const [rowsPerPage, setRowsPerPage] = useSavedState("print-rowsPerPage", 8); + 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 [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", @@ -91,7 +107,10 @@ const PrintingDialog: React.FC = ({ const printRef = useRef(null); const calculatedRowHeight = - (paperHeight - marginTop - marginBottom) / rowsPerPage; + (paperHeight - marginTop - marginBottom) / paperRows; + + const itemsPerRow = paperColumns - blockColumnsLeft - blockColumnsRight; + const rowsPerPage = paperRows - blockRowsTop - blockRowsBottom; const rowsOfItems = []; for (let row_idx = 0; row_idx <= items.length / itemsPerRow; row_idx += 1) { @@ -112,9 +131,30 @@ const PrintingDialog: React.FC = ({ } 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) => ( + +
+ + ) + ); return ( + {itemColumnsBlockLeft} {row.map((item, index) => (
= ({ justifyContent: "center", alignItems: "center", width: `${ - (paperWidth - marginLeft - marginRight) / itemsPerRow + (paperWidth - marginLeft - marginRight) / paperColumns }mm`, height: `${calculatedRowHeight}mm`, flexDirection: "column", @@ -153,6 +193,9 @@ const PrintingDialog: React.FC = ({
= ({ > + {itemRowsBlockTop} {itemRows}
@@ -252,6 +293,7 @@ const PrintingDialog: React.FC = ({
@@ -369,9 +411,11 @@ const PrintingDialog: React.FC = ({ { - setItemsPerRow(value); + if (value - blockColumnsLeft - blockColumnsRight < 1) + return; + setPaperColumns(value); }} /> @@ -379,9 +423,14 @@ const PrintingDialog: React.FC = ({ { - setItemsPerRow(value ?? 1); + if ( + (value ?? 1) - blockColumnsLeft - blockColumnsRight < + 1 + ) + return; + setPaperColumns(value ?? 1); }} /> @@ -393,9 +442,10 @@ const PrintingDialog: React.FC = ({ { - setRowsPerPage(value); + if (value - blockRowsTop - blockRowsBottom < 1) return; + setPaperRows(value); }} /> @@ -403,9 +453,11 @@ const PrintingDialog: React.FC = ({ { - setRowsPerPage(value ?? 1); + if ((value ?? 1) - blockRowsTop - blockRowsBottom < 1) + return; + setPaperRows(value ?? 1); }} /> @@ -441,6 +493,113 @@ 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}