Upload remade
Design fixes Qr code generation
This commit is contained in:
mcarquigny
@ -37,7 +37,7 @@
|
||||
:to="'/category/' + category.code"
|
||||
>
|
||||
<q-item-section>{{ category.name }}</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-section side>
|
||||
<q-chip square
|
||||
dense
|
||||
color="secondary"
|
||||
|
||||
@ -1,10 +1,28 @@
|
||||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<q-btn @click="generateQRCode" class="float-right" icon="qr_code"></q-btn>
|
||||
<q-chip class="float-right text-white" color="secondary">{{item.ref}}</q-chip>
|
||||
<q-chip v-if="item.deleted" class="float-right q-mr-md" color="red">Supprimé</q-chip>
|
||||
<h2 class="q-ma-none" :class="{'text-faded': !item.name}">{{item.name || '---- -- ----'}}</h2>
|
||||
<h4 class="q-ma-none q-pb-md text-grey">{{item.type}}</h4>
|
||||
|
||||
<q-dialog v-model="showQr">
|
||||
<q-card style="width: 500px">
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ item.name }}</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<q-img :src="qrCodeDataUrl" v-if="qrCodeDataUrl" alt="QR Code" class="" style="max-height:500px;max-width:500px" />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="OK" v-close-popup />
|
||||
<q-btn flat label="Print" @click="openQr"/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<div class="q-py-md">
|
||||
<q-input v-model="item.name"
|
||||
:disable="item.deleted"
|
||||
@ -118,20 +136,23 @@
|
||||
:max-height="100"
|
||||
rows="3"
|
||||
invertedd
|
||||
color="secondary"
|
||||
/>
|
||||
<q-input label="Date"
|
||||
v-model="pendingHistoryDate"
|
||||
type="datetime"
|
||||
format24h />
|
||||
<!-- <q-input label="Date"-->
|
||||
<!-- v-model="pendingHistoryDate"-->
|
||||
<!-- type="datetime"-->
|
||||
<!-- format24h />-->
|
||||
<br/>
|
||||
<q-uploader url=""
|
||||
:upload-factory="uploadFile"
|
||||
@add="hasFile = true"
|
||||
<q-uploader
|
||||
:accept="'.jpg,.png'"
|
||||
:factory="uploadFile"
|
||||
label="Uploader une photo"
|
||||
@added="hasFile = true"
|
||||
ref="uploader"
|
||||
:extensions="'.jpg,.png'"
|
||||
auto-expand
|
||||
hide-upload-button
|
||||
stack-label="Uploader une photo"
|
||||
no-thumbnails
|
||||
hide-upload-btn
|
||||
flat
|
||||
color="secondary"
|
||||
/>
|
||||
<br/>
|
||||
<q-btn flat color="faded" @click.stop="showHistoryForm = false">Annuler</q-btn>
|
||||
@ -141,8 +162,8 @@
|
||||
</q-timeline-entry>
|
||||
<q-timeline-entry
|
||||
v-for="event in history.slice().reverse()"
|
||||
:key="event.created"
|
||||
:subtitle="getDate(event.created)"
|
||||
:key="event.id"
|
||||
:subtitle="getDate(event.date)"
|
||||
:title="event.user"
|
||||
side="left"
|
||||
>
|
||||
@ -178,6 +199,9 @@
|
||||
|
||||
<script>
|
||||
import { date } from 'quasar'
|
||||
import imageCompression from 'browser-image-compression'
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
export default {
|
||||
name: 'StockItem',
|
||||
props: ['itemRef'],
|
||||
@ -185,10 +209,11 @@ export default {
|
||||
return {
|
||||
showHistoryForm: false,
|
||||
pendingHistory: null,
|
||||
pendingHistoryDate: null,
|
||||
changed: false,
|
||||
hasFile: false,
|
||||
username: null,
|
||||
qrCodeDataUrl: null,
|
||||
showQr: false,
|
||||
item: {}
|
||||
}
|
||||
},
|
||||
@ -229,15 +254,13 @@ export default {
|
||||
},
|
||||
openHistoryForm () {
|
||||
this.showHistoryForm = true
|
||||
this.pendingHistoryDate = Date.now()
|
||||
},
|
||||
async addHistory () {
|
||||
this.$q.loading.show()
|
||||
let url = null
|
||||
let date = new Date()
|
||||
let file = null
|
||||
if (this.hasFile) {
|
||||
let resp = await this.uploadFile(this.$refs.uploader.files[0])
|
||||
url = resp
|
||||
console.log(resp)
|
||||
file = await this.uploadFile(this.$refs.uploader.files[0])
|
||||
}
|
||||
this.$store.dispatch('core/addToCollection', {
|
||||
collection: 'history',
|
||||
@ -245,8 +268,8 @@ export default {
|
||||
ref: this.itemRef,
|
||||
text: this.pendingHistory,
|
||||
user: this.$store.state.core.username,
|
||||
image: url,
|
||||
timestamp: this.pendingHistoryDate
|
||||
image_file: file,
|
||||
date: date.toISOString()
|
||||
}
|
||||
}).then(response => {
|
||||
this.$store.dispatch('core/loadAppData').then(_ => {
|
||||
@ -299,10 +322,18 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
uploadFile (file) {
|
||||
return this.$store.dispatch('core/uploadFile', file).then(response => {
|
||||
return response.ref.getDownloadURL()
|
||||
})
|
||||
async uploadFile (file) {
|
||||
// Resize and compress the image before uploading
|
||||
const options = {
|
||||
maxSizeMB: 1,
|
||||
maxWidthOrHeight: 2000,
|
||||
useWebWorker: true
|
||||
}
|
||||
try {
|
||||
return await imageCompression(file, options)
|
||||
} catch (error) {
|
||||
console.error('Error compressing image:', error)
|
||||
}
|
||||
},
|
||||
getImageUrl (history, image) {
|
||||
return this.$pb.files.getURL(history, image, { thumb: '300x300f' })
|
||||
@ -312,6 +343,25 @@ export default {
|
||||
return (item) ? item.ref === this.itemRef : false
|
||||
}) || []
|
||||
this.item = { ...item }
|
||||
},
|
||||
async generateQRCode () {
|
||||
this.showQr = true
|
||||
try {
|
||||
const url = await QRCode.toDataURL(window.location.href, {
|
||||
errorCorrectionLevel: 'H',
|
||||
width: 800,
|
||||
margin: 1
|
||||
})
|
||||
this.qrCodeDataUrl = url
|
||||
} catch (error) {
|
||||
console.error('Error generating QR code:', error)
|
||||
}
|
||||
},
|
||||
openQr () {
|
||||
// Take the data url qr code and display it in a new tab
|
||||
const win = window.open()
|
||||
win.document.write(`<img src="${this.qrCodeDataUrl}" alt="QR Code" style="max-height:500px;max-width:500px" />`)
|
||||
win.document.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user