Basic preview & print settings

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
+## Ideas
-```bash
-yarn
-# or
-npm install
-```
 
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
+### For real production
-```bash
-quasar dev
-```
 
-
+Add auto backup to a remote minio server
-### 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).

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
         })
       })

src/pages/PrintSettings.vue

@@ -0,0 +1,144 @@
+<template>
+  <q-page padding class="main-grid">
+    <q-toolbar class="print-settings">
+      <q-btn @click="openPrintPage">Open Print Page</q-btn>
+      <q-input type="number" v-model="itemsW" min="1" label="Colonnes"></q-input>
+      <q-input type="number" v-model="itemsH" min="1" label="Lignes"></q-input>
+      <q-slider v-model="pageGap" :min="1" label></q-slider>
+    </q-toolbar>
+    <div class="print-preview">
+      <div class="grid-container" :style="{gridTemplateColumns: `repeat(${itemsW}, 1fr)`, gridTemplateRows: `repeat(${itemsH}, 1fr)`, gap: `${pageGap/10}% ${pageGap*1.414/10}%`, padding: `${pageGap/10}% ${pageGap*1.414/10}%`}">
+        <div v-for="i in (itemsW*itemsH)" :key="i" class="grid-item">
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script>
+import QRCode from 'qrcode'
+
+export default {
+  name: 'PrintSettingsPage',
+  data () {
+    return {
+      items: null,
+      qrCodes: [],
+      itemsW: 3,
+      itemsH: 4,
+      pageGap: 10
+    }
+  },
+  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>
+
+<style scoped>
+.main-grid {
+  display: grid;
+  gap: 10px;
+  height: 100%;
+  max-height: 100vh;
+}
+.print-preview {
+  height: 50vh;
+  aspect-ratio: 1/1.414;
+  position: relative;
+}
+.grid-container {
+  display: grid;
+  gap: 10px;
+  height: 100%;
+  width:100%;
+  page-break-after: always;
+  border: 1px solid gray;
+}
+.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>

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') }
     ]
   }
 ]