Add basic print management
This commit is contained in:
mcarquigny
39
README.md
39
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
|
||||
|
||||
@ -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
|
||||
})
|
||||
})
|
||||
|
||||
103
src/pages/PrintSettings.vue
Normal file
103
src/pages/PrintSettings.vue
Normal file
@ -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>
|
||||
@ -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') }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user