From 2b489a386630eaea8cd76dc3cd7d476ce860b3ca Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Thu, 10 Aug 2023 21:46:38 +0200
Subject: [PATCH] Client: Added ability to skip X items

---
 client/public/locales/en/common.json          |  1 +
 .../components/printing/printingDialog.tsx    | 31 +++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json
index 1cfeecc..0213a8a 100644
--- a/client/public/locales/en/common.json
+++ b/client/public/locales/en/common.json
@@ -63,6 +63,7 @@
       "paperSize": "Paper Size",
       "showBorder": "Show Border",
       "previewScale": "Preview Scale",
+      "skipItems": "Skip Items",
       "marginLeft": "Left Margin",
       "marginRight": "Right Margin",
       "marginTop": "Top Margin",
diff --git a/client/src/components/printing/printingDialog.tsx b/client/src/components/printing/printingDialog.tsx
index 256c3c3..b91f0fe 100644
--- a/client/src/components/printing/printingDialog.tsx
+++ b/client/src/components/printing/printingDialog.tsx
@@ -58,6 +58,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
   const [printerMarginBottom, setPrinterMarginBottom] = useSavedState("print-printerMarginBottom", 5);
   const [paperColumns, setPaperColumns] = useSavedState("print-itemsPerRow", 3);
   const [paperRows, setPaperRows] = useSavedState("print-rowsPerPage", 8);
+  const [skipItems, setSkipItems] = useSavedState("print-skipItems", 0);
   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");
@@ -72,9 +73,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
   const itemsPerRow = paperColumns;
   const rowsPerPage = paperRows;
 
+  const itemsIncludingSkipped = [...Array(skipItems).fill(<></>), ...items];
+
   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));
+  for (let row_idx = 0; row_idx <= itemsIncludingSkipped.length / itemsPerRow; row_idx += 1) {
+    rowsOfItems.push(itemsIncludingSkipped.slice(row_idx * itemsPerRow, (row_idx + 1) * itemsPerRow));
   }
 
   const pageBlocks = [];
@@ -485,6 +488,30 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({ items, style, extraSett
                 </Col>
               </Row>
             </Form.Item>
+            <Form.Item label={t("printing.generic.skipItems")}>
+              <Row>
+                <Col span={12}>
+                  <Slider
+                    min={0}
+                    max={30}
+                    value={skipItems}
+                    onChange={(value) => {
+                      setSkipItems(value);
+                    }}
+                  />
+                </Col>
+                <Col span={12}>
+                  <InputNumber
+                    min={0}
+                    style={{ margin: "0 16px" }}
+                    value={skipItems}
+                    onChange={(value) => {
+                      setSkipItems(value ?? 1);
+                    }}
+                  />
+                </Col>
+              </Row>
+            </Form.Item>
             <Form.Item label={t("printing.generic.paperSize")}>
               <Select value={paperSize} onChange={(value) => setPaperSize(value)}>
                 {Object.keys(paperDimensions).map((key) => (