Add basic print management

2025-03-29 12:49:12 +01:00
parent 93b26908f1
commit 25e5dbe94a
4 changed files with 129 additions and 32 deletions
--- a/src/pages/PrintSettings.vue
+++ b/src/pages/PrintSettings.vue
@ -0,0 +1,103 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+    PRINT SETTINGS
+    <q-btn @click="openPrintPage">Open Print Page</q-btn>
+    <pre>
+      {{items}}
+    </pre>
+  </q-page>
+</template>
+
+<script>
+import QRCode from 'qrcode'
+
+export default {
+  name: 'PrintSettingsPage',
+  data () {
+    return {
+      items: null,
+      qrCodes: []
+    }
+  },
+  computed: {
+    urls () {
+      // get root url of current page
+      let rootUrl = window.location.origin
+      return this.items.map(item => {
+        return {
+          url: `${rootUrl}/item/${item.ref}`,
+          name: item.name,
+          ref: item.ref
+        }
+      })
+    }
+  },
+  async created () {
+    let items = await this.$pb.collection('stock').getList(1, 24, {
+      fields: 'ref,name',
+      filter: 'deleted = false',
+      sort: '-created'
+    })
+    this.items = items.items
+  },
+  methods: {
+    async openPrintPage () {
+      for (let url of this.urls) {
+        this.qrCodes.push(
+          { qr: await QRCode.toDataURL(url.url, { width: 200, margin: 0, border: 0 }), name: url.name, ref: url.ref }
+        )
+      }
+      const printWindow = window.open('', '_blank')
+      const printContent = `
+        <html>
+          <head>
+            <style>
+              @page { size: A4; margin: 1cm; }
+              body { margin: 1cm; }
+              .grid-container {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                grid-template-rows: repeat(4, 1fr);
+                gap: 10px;
+                height: 100%;
+                page-break-after: always;
+              }
+              .grid-item {
+                border: 1px solid gray;
+                border-radius: 8px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 10px;
+                box-sizing: border-box;
+              }
+            </style>
+          </head>
+          <body>
+            ${this.qrCodes.reduce((acc, qr, index) => {
+              if (index % 12 === 0) {
+                acc.push([])
+              }
+              acc[acc.length - 1].push(qr)
+              return acc
+            }, []).map((group, groupIndex) => `
+              <div class="grid-container">
+                ${group.map(qr => `
+                  <div class="grid-item">
+                    <img src="${qr.qr}"/>
+                    <span>${qr.name}</span>
+                  </div>
+                `).join('')}
+              </div>
+            `).join('')}
+           </body>
+        </html>
+      `
+      printWindow.document.write(printContent)
+      printWindow.document.close()
+    }
+  }
+}
+</script>