Add basic print management

3 months ago · 25e5dbe94a
4 changed files with 129 additions and 32 deletions
--- a/README.md
+++ b/README.md
@ -4,36 +4,17 @@ HFSPlay stock management

 ## TODO
 - [ ] fix style
- [ ] handle file upload
+- [x] handle file upload
 - [ ] editable categories
- [ ] qrcode generation
+- [x] qrcode generation
+- [ ] fix search to be persistent
+- [ ] fix comments to be more legible
+- [ ] fix comments to allow resolution
+- [ ] batch print QR codes
+- [ ] fix tables pagination

-## Install the dependencies
-```bash
-yarn
-# or
-npm install
-```
+## Ideas

-### Start the app in development mode (hot-code reloading, error reporting, etc.)
-```bash
-quasar dev
-```
+### For real production

-
-### Lint the files
-```bash
-yarn lint
-# or
-npm run lint
-```
-
-
-
-### Build the app for production
-```bash
-quasar build
-```
-
-### Customize the configuration
-See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).
+Add auto backup to a remote minio server
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@ -14,12 +14,13 @@
            <img src="~assets/gyoza_logo_inline.jpg" style="width:100%">
          </div>
        </q-toolbar-title>
-        <q-btn flat class="no-pointer-events">{{username}}</q-btn>
+        <q-btn flat class="no-pointer-events" color="secondary">{{username}}</q-btn>
        <q-btn
          flat
          size="18px"
          icon="logout"
          @click="unsetUser()"
+          color="secondary"
        />
      </q-toolbar>
    </q-header>
@ -61,6 +62,17 @@
            <!--<q-item-side avatar="statics/guy-avatar.png" />-->
            <!--<q-item-main label="Jack Doe" />-->
          <!--</q-item>-->
+
+          <!--          PRINT STUFF-->
+          <q-separator/>
+          <q-item-label header>Utilitaires</q-item-label>
+          <q-item :to="'/print-settings'"
+          >
+            <q-item-section>Impression</q-item-section>
+            <q-item-section side>
+              <q-icon name="print"></q-icon>
+            </q-item-section>
+          </q-item>
        </q-list>
    </q-drawer>

@ -144,7 +156,7 @@ export default {
        this.$q.notify({
          message: `Enchanté ${username} !`,
          color: 'green',
-          avatar: '/assets/gyoza_logo_nobg.png',
+          avatar: '/gyoza_logo_nobg.png',
          timeout: 2000
        })
      })
--- 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>
--- a/src/router/routes.js
+++ b/src/router/routes.js
@ -12,7 +12,8 @@ const routes = [
    children: [
      { path: 'dashboard', component: () => import('pages/Dashboard.vue') },
      { path: 'category/:categoryCode', props: true, component: () => import('pages/StockItems.vue') },
-      { path: 'item/:itemRef', props: true, component: () => import('pages/StockItem.vue') }
+      { path: 'item/:itemRef', props: true, component: () => import('pages/StockItem.vue') },
+      { path: 'print-settings', props: true, component: () => import('pages/PrintSettings.vue') }
    ]
  }
 ]