QR code on share url (#114)

* QR code on share url

* remove console
This commit is contained in:
Chirag Chhatrala 2023-04-12 16:47:39 +05:30 committed by GitHub
parent df68b20f82
commit abb2bbbaf7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 0 deletions

View File

@ -18,6 +18,7 @@
"js-sha256": "^0.9.0", "js-sha256": "^0.9.0",
"portal-vue": "^2.1.7", "portal-vue": "^2.1.7",
"prismjs": "^1.24.1", "prismjs": "^1.24.1",
"qrcode": "^1.5.1",
"query-builder-vue": "^1.2.0", "query-builder-vue": "^1.2.0",
"tinymotion": "^0.2.0", "tinymotion": "^0.2.0",
"vform": "^2.1.1", "vform": "^2.1.1",

View File

@ -0,0 +1,50 @@
<template>
<div>
<h3 class="font-semibold text-xl">QR Code</h3>
<p>Scan the QR code to open the form (Right click to copy the image)</p>
<div class="flex items-center">
<img v-if="QrUrl" :src="QrUrl" class="m-auto" />
</div>
</div>
</template>
<script>
import QRCode from 'qrcode'
export default {
name: 'FormQrCode',
props: {
form: { type: Object, required: true },
extraQueryParam: { type: String, default: '' }
},
data () {
return {
QrUrl: null
}
},
computed: {
shareUrl () {
return (this.extraQueryParam) ? this.form.share_url + "?" + this.extraQueryParam : this.form.share_url + this.extraQueryParam
}
},
watch: {
shareUrl () {
this.generateQR()
}
},
mounted () {
this.generateQR()
},
methods: {
generateQR () {
QRCode.toDataURL(this.shareUrl).then(url => {
this.QrUrl = url
})
}
}
}
</script>

View File

@ -4,6 +4,8 @@
<embed-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams" /> <embed-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams" />
<form-qr-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams" />
<advanced-form-url-settings :form="form" v-model="shareFormConfig" /> <advanced-form-url-settings :form="form" v-model="shareFormConfig" />
<div class="mt-6 pt-6 border-t w-full flex"> <div class="mt-6 pt-6 border-t w-full flex">
@ -17,6 +19,7 @@
<script> <script>
import ShareLink from '../../../components/pages/forms/show/ShareLink.vue' import ShareLink from '../../../components/pages/forms/show/ShareLink.vue'
import EmbedCode from '../../../components/pages/forms/show/EmbedCode.vue' import EmbedCode from '../../../components/pages/forms/show/EmbedCode.vue'
import FormQrCode from '../../../components/pages/forms/show/FormQrCode.vue'
import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill.vue' import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill.vue'
import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue' import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue'
import SeoMeta from '../../../mixins/seo-meta.js' import SeoMeta from '../../../mixins/seo-meta.js'
@ -26,6 +29,7 @@ export default {
components: { components: {
ShareLink, ShareLink,
EmbedCode, EmbedCode,
FormQrCode,
UrlFormPrefill, UrlFormPrefill,
RegenerateFormLink, RegenerateFormLink,
AdvancedFormUrlSettings AdvancedFormUrlSettings