From ff75daf6b34d5af87a401c0120760341c7233371 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 12 Feb 2023 15:09:31 -0900
Subject: [PATCH] feat: mvp for label generation/printing (#274)

* initial label generator for QR codes

* use dynamic URL parameter
---
 frontend/pages/reports/label-generator.vue | 433 +++++++++++++++++++++
 frontend/pages/tools.vue                   |  22 +-
 2 files changed, 454 insertions(+), 1 deletion(-)
 create mode 100644 frontend/pages/reports/label-generator.vue

diff --git a/frontend/pages/reports/label-generator.vue b/frontend/pages/reports/label-generator.vue
new file mode 100644
index 0000000..0976be9
--- /dev/null
+++ b/frontend/pages/reports/label-generator.vue
@@ -0,0 +1,433 @@
+<script setup lang="ts">
+  definePageMeta({
+    middleware: ["auth"],
+    layout: false,
+  });
+  useHead({
+    title: "Homebox | Printer",
+  });
+
+  const bordered = ref(false);
+
+  const displayProperties = reactive({
+    baseURL: window.location.origin,
+    assetRange: 1,
+    assetRangeMax: 91,
+    gapY: 0.25,
+    columns: 3,
+    cardHeight: 1,
+    cardWidth: 2.63,
+    pageWidth: 8.5,
+    pageHeight: 11,
+    pageTopPadding: 0.52,
+    pageBottomPadding: 0.42,
+    pageLeftPadding: 0.25,
+    pageRightPadding: 0.1,
+  });
+
+  type Input = {
+    page: {
+      height: number;
+      width: number;
+      pageTopPadding: number;
+      pageBottomPadding: number;
+      pageLeftPadding: number;
+      pageRightPadding: number;
+    };
+    cardHeight: number;
+    cardWidth: number;
+  };
+
+  type Output = {
+    cols: number;
+    rows: number;
+    gapY: number;
+    gapX: number;
+    card: {
+      width: number;
+      height: number;
+    };
+    page: {
+      width: number;
+      height: number;
+      pt: number;
+      pb: number;
+      pl: number;
+      pr: number;
+    };
+  };
+
+  const notifier = useNotifier();
+
+  function calculateGridData(input: Input): Output {
+    const { page, cardHeight, cardWidth } = input;
+
+    const availablePageWidth = page.width - page.pageLeftPadding - page.pageRightPadding;
+    const availablePageHeight = page.height - page.pageTopPadding - page.pageBottomPadding;
+
+    if (availablePageWidth < cardWidth || availablePageHeight < cardHeight) {
+      notifier.error("Page size is too small for the card size");
+      return out.value;
+    }
+
+    const cols = Math.floor(availablePageWidth / cardWidth);
+    const rows = Math.floor(availablePageHeight / cardHeight);
+    const gapX = (availablePageWidth - cols * cardWidth) / (cols - 1);
+    const gapY = (page.height - rows * cardHeight) / (rows - 1);
+
+    return {
+      cols,
+      rows,
+      gapX,
+      gapY,
+      card: {
+        width: cardWidth,
+        height: cardHeight,
+      },
+      page: {
+        width: page.width,
+        height: page.height,
+        pt: page.pageTopPadding,
+        pb: page.pageBottomPadding,
+        pl: page.pageLeftPadding,
+        pr: page.pageRightPadding,
+      },
+    };
+  }
+
+  interface InputDef {
+    label: string;
+    ref: keyof typeof displayProperties;
+    type?: "number" | "text";
+  }
+
+  const propertyInputs = computed<InputDef[]>(() => {
+    return [
+      {
+        label: "Asset Start",
+        ref: "assetRange",
+      },
+      {
+        label: "Asset End",
+        ref: "assetRangeMax",
+      },
+      {
+        label: "Label Height",
+        ref: "cardHeight",
+      },
+      {
+        label: "Label Width",
+        ref: "cardWidth",
+      },
+      {
+        label: "Page Width",
+        ref: "pageWidth",
+      },
+      {
+        label: "Page Height",
+        ref: "pageHeight",
+      },
+      {
+        label: "Page Top Padding",
+        ref: "pageTopPadding",
+      },
+      {
+        label: "Page Bottom Padding",
+        ref: "pageBottomPadding",
+      },
+      {
+        label: "Page Left Padding",
+        ref: "pageLeftPadding",
+      },
+      {
+        label: "Page Right Padding",
+        ref: "pageRightPadding",
+      },
+      {
+        label: "Base URL",
+        ref: "baseURL",
+        type: "text",
+      },
+    ];
+  });
+
+  type LabelData = {
+    url: string;
+    name: string;
+    assetID: string;
+    location: string;
+  };
+
+  const api = useUserApi();
+
+  function fmtAssetID(aid: number | string) {
+    aid = aid.toString();
+
+    let aidStr = aid.toString().padStart(6, "0");
+    aidStr = aidStr.slice(0, 3) + "-" + aidStr.slice(3);
+    return aidStr;
+  }
+
+  function getQRCodeUrl(assetID: string): string {
+    let origin = displayProperties.baseURL.trim();
+
+    // remove trailing slash
+    if (origin.endsWith("/")) {
+      origin = origin.slice(0, -1);
+    }
+
+    const data = `${origin}/a/${assetID}`;
+
+    return `/api/v1/qrcode?data=${encodeURIComponent(data)}&access_token=${api.items.attachmentToken}`;
+  }
+
+  function getItem(n: number): LabelData {
+    // format n into - seperated string with leading zeros
+
+    const assetID = fmtAssetID(n);
+
+    return {
+      url: getQRCodeUrl(assetID),
+      assetID,
+      name: "_______________",
+      location: "_______________",
+    };
+  }
+
+  const items = computed(() => {
+    if (displayProperties.assetRange > displayProperties.assetRangeMax) {
+      return [];
+    }
+
+    const diff = displayProperties.assetRangeMax - displayProperties.assetRange;
+
+    if (diff > 999) {
+      return [];
+    }
+
+    const items: LabelData[] = [];
+    for (let i = displayProperties.assetRange; i < displayProperties.assetRangeMax; i++) {
+      items.push(getItem(i));
+    }
+    return items;
+  });
+
+  type Row = {
+    items: LabelData[];
+  };
+
+  type Page = {
+    rows: Row[];
+  };
+
+  const pages = ref<Page[]>([]);
+
+  const out = ref({
+    cols: 0,
+    rows: 0,
+    gapY: 0,
+    gapX: 0,
+    card: {
+      width: 0,
+      height: 0,
+    },
+    page: {
+      width: 0,
+      height: 0,
+      pt: 0,
+      pb: 0,
+      pl: 0,
+      pr: 0,
+    },
+  });
+
+  function calcPages() {
+    // Set Out Dimensions
+    out.value = calculateGridData({
+      page: {
+        height: displayProperties.pageHeight,
+        width: displayProperties.pageWidth,
+        pageTopPadding: displayProperties.pageTopPadding,
+        pageBottomPadding: displayProperties.pageBottomPadding,
+        pageLeftPadding: displayProperties.pageLeftPadding,
+        pageRightPadding: displayProperties.pageRightPadding,
+      },
+      cardHeight: displayProperties.cardHeight,
+      cardWidth: displayProperties.cardWidth,
+    });
+
+    const calc: Page[] = [];
+
+    const perPage = out.value.rows * out.value.cols;
+
+    const itemsCopy = [...items.value];
+
+    while (itemsCopy.length > 0) {
+      const page: Page = {
+        rows: [],
+      };
+
+      for (let i = 0; i < perPage; i++) {
+        const item = itemsCopy.shift();
+        if (!item) {
+          break;
+        }
+
+        if (i % out.value.cols === 0) {
+          page.rows.push({
+            items: [],
+          });
+        }
+
+        page.rows[page.rows.length - 1].items.push(item);
+      }
+
+      calc.push(page);
+    }
+
+    pages.value = calc;
+  }
+
+  onMounted(() => {
+    calcPages();
+  });
+</script>
+
+<template>
+  <div class="print:hidden">
+    <AppToast />
+    <div class="container max-w-4xl mx-auto p-4 pt-6 prose">
+      <h1>Homebox Label Generator</h1>
+      <p>
+        The Homebox Label Generator is a tool to help you print labels for your Homebox inventory. These are intended to
+        be print-ahead labels so you can print many labels and have them ready to apply
+      </p>
+      <p>
+        As such, these labels work by printing a URL QR Code and AssetID information on a label. If you've disabled
+        AssetID's in your Homebox settings, you can still use this tool, but the AssetID's won't reference any item
+      </p>
+      <p>
+        This feature is in early development stages and may change in future releases, if you have feedback please
+        provide it in the <a href="https://github.com/hay-kot/homebox/discussions/273">GitHub Discussion</a>
+      </p>
+      <h2>Tips</h2>
+      <ul>
+        <li>
+          The defaults here are setup for the
+          <a href="https://www.avery.com/templates/5260">Avery 5260 label sheets</a>. If you're using a different sheet,
+          you'll need to adjust the settings to match your sheet.
+        </li>
+        <li>
+          If you're customizing your sheet the dimensions are in inches. When building the 5260 sheet, I found that the
+          dimensions used in their template, did not match what was needed to print within the boxes.
+          <b>Be prepared for some trial and error</b>
+        </li>
+        <li>
+          When printing be sure to:
+          <ol>
+            <li>Set the margins to 0 or None</li>
+            <li>Set the scaling to 100%</li>
+            <li>Disable double-sided printing</li>
+            <li>Print a test page before printing multiple pages</li>
+          </ol>
+        </li>
+      </ul>
+      <div class="flex gap-2 flex-wrap">
+        <NuxtLink href="/tools">Tools</NuxtLink>
+        <NuxtLink href="/home">Home</NuxtLink>
+      </div>
+    </div>
+    <div class="divider max-w-4xl mx-auto"></div>
+    <div class="container max-w-4xl mx-auto p-4">
+      <div class="grid grid-cols-2 mx-auto gap-3">
+        <div v-for="(prop, i) in propertyInputs" :key="i" class="form-control w-full max-w-xs">
+          <label class="label">
+            <span class="label-text">{{ prop.label }}</span>
+          </label>
+          <input
+            v-model="displayProperties[prop.ref]"
+            :type="prop.type ? prop.type : 'number'"
+            step="0.01"
+            placeholder="Type here"
+            class="input input-bordered w-full max-w-xs"
+          />
+        </div>
+      </div>
+      <div class="max-w-xs">
+        <div class="form-control">
+          <label class="cursor-pointer label">
+            <input v-model="bordered" type="checkbox" class="checkbox checkbox-secondary" />
+            <span class="label-text">Bordered Labels</span>
+          </label>
+        </div>
+      </div>
+
+      <div>
+        <p>QR Code Example {{ displayProperties.baseURL }}/a/{asset_id}</p>
+        <BaseButton class="btn-block my-4" @click="calcPages"> Generate Page </BaseButton>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-col items-center print-show">
+    <section
+      v-for="(page, pi) in pages"
+      :key="pi"
+      class="border-2 print:border-none"
+      :style="{
+        paddingTop: `${out.page.pt}in`,
+        paddingBottom: `${out.page.pb}in`,
+        paddingLeft: `${out.page.pl}in`,
+        paddingRight: `${out.page.pr}in`,
+        width: `${out.page.width}in`,
+      }"
+    >
+      <div
+        v-for="(row, ri) in page.rows"
+        :key="ri"
+        class="flex break-inside-avoid"
+        :style="{
+          columnGap: `${out.gapX}in`,
+          rowGap: `${out.gapY}in`,
+        }"
+      >
+        <div
+          v-for="(item, idx) in row.items"
+          :key="idx"
+          class="flex border-2"
+          :class="{
+            'border-black': bordered,
+            'border-transparent': !bordered,
+          }"
+          :style="{
+            height: `${out.card.height}in`,
+            width: `${out.card.width}in`,
+          }"
+        >
+          <div class="flex items-center">
+            <img
+              :src="item.url"
+              :style="{
+                width: `${out.card.height * 0.9}in`,
+                height: `${out.card.height * 0.9}in`,
+              }"
+            />
+          </div>
+          <div class="ml-2 flex flex-col justify-center">
+            <div class="font-bold">{{ item.assetID }}</div>
+            <div class="text-xs font-light italic">Homebox</div>
+            <div>{{ item.name }}</div>
+            <div>{{ item.location }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="css">
+  .letter-size {
+    width: 8.5in;
+    height: 11in;
+    padding: 0.5in;
+  }
+</style>
diff --git a/frontend/pages/tools.vue b/frontend/pages/tools.vue
index 6825dcf..e1ba350 100644
--- a/frontend/pages/tools.vue
+++ b/frontend/pages/tools.vue
@@ -13,7 +13,7 @@
             </template>
           </BaseSectionHeader>
           <div class="border-t border-gray-300 divide-gray-300 divide-y">
-            <DetailAction @click="modals.import = true">
+            <DetailAction @action="modals.import = true">
               <template #title>Import Inventory</template>
               Imports the standard CSV format for Homebox. This will <b>not</b> overwrite any existing items in your
               inventory. It will only add new items.
@@ -25,6 +25,26 @@
           </div>
         </template>
       </BaseCard>
+      <BaseCard>
+        <template #title>
+          <BaseSectionHeader>
+            <Icon name="mdi-file-chart" class="mr-2 -mt-1" />
+            <span> Reports </span>
+            <template #description> Generate different reports for your inventory. </template>
+          </BaseSectionHeader>
+          <div class="border-t border-gray-300 divide-gray-300 divide-y">
+            <DetailAction @action="navigateTo('/reports/label-generator')">
+              <template #title>Asset ID Labels</template>
+              Generates a printable PDF of labels for a range of Asset ID. These are not specific to your invetory so
+              your are able to print labels ahead of time and apply them to your inventory when you receive them.
+              <template #button>
+                Label Generator
+                <Icon name="mdi-arrow-right" class="ml-2" />
+              </template>
+            </DetailAction>
+          </div>
+        </template>
+      </BaseCard>
       <BaseCard>
         <template #title>
           <BaseSectionHeader>