Add basic print management
This commit is contained in:
mcarquigny
39
README.md
39
README.md
@ -4,36 +4,17 @@ HFSPlay stock management
|
|||||||
|
|
||||||
## TODO
|
## TODO
|
||||||
- [ ] fix style
|
- [ ] fix style
|
||||||
- [ ] handle file upload
|
- [x] handle file upload
|
||||||
- [ ] editable categories
|
- [ ] 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).
|
|
||||||
|
|||||||
@ -14,12 +14,13 @@
|
|||||||
<img src="~assets/gyoza_logo_inline.jpg" style="width:100%">
|
<img src="~assets/gyoza_logo_inline.jpg" style="width:100%">
|
||||||
</div>
|
</div>
|
||||||
</q-toolbar-title>
|
</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
|
<q-btn
|
||||||
flat
|
flat
|
||||||
size="18px"
|
size="18px"
|
||||||
icon="logout"
|
icon="logout"
|
||||||
@click="unsetUser()"
|
@click="unsetUser()"
|
||||||
|
color="secondary"
|
||||||
/>
|
/>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
</q-header>
|
</q-header>
|
||||||
@ -61,6 +62,17 @@
|
|||||||
<!--<q-item-side avatar="statics/guy-avatar.png" />-->
|
<!--<q-item-side avatar="statics/guy-avatar.png" />-->
|
||||||
<!--<q-item-main label="Jack Doe" />-->
|
<!--<q-item-main label="Jack Doe" />-->
|
||||||
<!--</q-item>-->
|
<!--</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-list>
|
||||||
</q-drawer>
|
</q-drawer>
|
||||||
|
|
||||||
@ -144,7 +156,7 @@ export default {
|
|||||||
this.$q.notify({
|
this.$q.notify({
|
||||||
message: `Enchanté ${username} !`,
|
message: `Enchanté ${username} !`,
|
||||||
color: 'green',
|
color: 'green',
|
||||||
avatar: '/assets/gyoza_logo_nobg.png',
|
avatar: '/gyoza_logo_nobg.png',
|
||||||
timeout: 2000
|
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: [
|
children: [
|
||||||
{ path: 'dashboard', component: () => import('pages/Dashboard.vue') },
|
{ path: 'dashboard', component: () => import('pages/Dashboard.vue') },
|
||||||
{ path: 'category/:categoryCode', props: true, component: () => import('pages/StockItems.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