feat: support mm, cm and inches for label generation

sysadminsmedia · Nov 2, 2024 · 480f002 · 480f002
1 parent bf91e82
commit 480f002
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 28 deletions.
diff --git a/Taskfile.yml b/Taskfile.yml
@@ -53,6 +53,8 @@ tasks:
       - cp ./backend/app/api/static/docs/swagger.json docs/docs/api/openapi-2.0.json
 
   go:run:
+    env:
+      HBOX_DEMO: true
     desc: Starts the backend api server (depends on generate task)
     dir: backend
     deps:
@@ -63,13 +65,14 @@ tasks:
 
   go:run:postgresql:
     env:
-        HBOX_DATABASE_DRIVER: postgres
-        HBOX_DATABASE_USERNAME: homebox
-        HBOX_DATABASE_PASSWORD: homebox
-        HBOX_DATABASE_DATABASE: homebox
-        HBOX_DATABASE_HOST: localhost
-        HBOX_DATABASE_PORT: 5432
-        HBOX_DATABASE_SSL_MODE: disable
+      HBOX_DEMO: true
+      HBOX_DATABASE_DRIVER: postgres
+      HBOX_DATABASE_USERNAME: homebox
+      HBOX_DATABASE_PASSWORD: homebox
+      HBOX_DATABASE_DATABASE: homebox
+      HBOX_DATABASE_HOST: localhost
+      HBOX_DATABASE_PORT: 5432
+      HBOX_DATABASE_SSL_MODE: disable
     desc: Starts the backend api server with postgresql (depends on generate task)
     dir: backend
     deps:

diff --git a/frontend/pages/reports/label-generator.vue b/frontend/pages/reports/label-generator.vue
@@ -17,6 +17,7 @@
     baseURL: window.location.origin,
     assetRange: 1,
     assetRangeMax: 91,
+    measure: "in",
     gapY: 0.25,
     columns: 3,
     cardHeight: 1,
@@ -30,6 +31,7 @@
   });
 
   type Input = {
+    measure: string;
     page: {
       height: number;
       width: number;
@@ -43,6 +45,7 @@
   };
 
   type Output = {
+    measure: string;
     cols: number;
     rows: number;
     gapY: number;
@@ -66,6 +69,9 @@
   function calculateGridData(input: Input): Output {
     const { page, cardHeight, cardWidth } = input;
 
+    const measureRegex = /in|cm|mm/;
+    const measure = measureRegex.test(input.measure) ? input.measure : "in";
+
     const availablePageWidth = page.width - page.pageLeftPadding - page.pageRightPadding;
     const availablePageHeight = page.height - page.pageTopPadding - page.pageBottomPadding;
 
@@ -80,6 +86,7 @@
     const gapY = (page.height - rows * cardHeight) / (rows - 1);
 
     return {
+      measure,
       cols,
       rows,
       gapX,
@@ -115,6 +122,11 @@
         label: "Asset End",
         ref: "assetRangeMax",
       },
+      {
+        label: "Measure Type",
+        ref: "measure",
+        type: "text",
+      },
       {
         label: "Label Height",
         ref: "cardHeight",
@@ -242,6 +254,7 @@
   const pages = ref<Page[]>([]);
 
   const out = ref({
+    measure: "in",
     cols: 0,
     rows: 0,
     gapY: 0,
@@ -263,6 +276,7 @@
   function calcPages() {
     // Set Out Dimensions
     out.value = calculateGridData({
+      measure: displayProperties.measure,
       page: {
         height: displayProperties.pageHeight,
         width: displayProperties.pageWidth,
@@ -393,20 +407,20 @@
       :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`,
+        paddingTop: `${out.page.pt}${out.measure}`,
+        paddingBottom: `${out.page.pb}${out.measure}`,
+        paddingLeft: `${out.page.pl}${out.measure}`,
+        paddingRight: `${out.page.pr}${out.measure}`,
+        width: `${out.page.width}${out.measure}`,
       }"
     >
       <div
         v-for="(row, ri) in page.rows"
         :key="ri"
         class="flex break-inside-avoid"
         :style="{
-          columnGap: `${out.gapX}in`,
-          rowGap: `${out.gapY}in`,
+          columnGap: `${out.gapX}${out.measure}`,
+          rowGap: `${out.gapY}${out.measure}`,
         }"
       >
         <div
@@ -418,17 +432,17 @@
             'border-transparent': !bordered,
           }"
           :style="{
-            height: `${out.card.height}in`,
-            width: `${out.card.width}in`,
+            height: `${out.card.height}${out.measure}`,
+            width: `${out.card.width}${out.measure}`,
           }"
         >
           <div class="flex items-center">
             <img
               :src="item.url"
               :style="{
-                minWidth: `${out.card.height * 0.9}in`,
-                width: `${out.card.height * 0.9}in`,
-                height: `${out.card.height * 0.9}in`,
+                minWidth: `${out.card.height * 0.9}${out.measure}`,
+                width: `${out.card.height * 0.9}${out.measure}`,
+                height: `${out.card.height * 0.9}${out.measure}`,
               }"
             />
           </div>
@@ -442,12 +456,4 @@
       </div>
     </section>
   </div>
-</template>
-
-<style lang="css">
-  .letter-size {
-    width: 8.5in;
-    height: 11in;
-    padding: 0.5in;
-  }
-</style>
+</template>