From abb2bbbaf763606460250c43da0582dd85a11918 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Wed, 12 Apr 2023 16:47:39 +0530
Subject: [PATCH] QR code on share url (#114)

* QR code on share url

* remove console
---
 package.json                                  |  1 +
 .../pages/forms/show/FormQrCode.vue           | 50 +++++++++++++++++++
 resources/js/pages/forms/show/share.vue       |  4 ++
 3 files changed, 55 insertions(+)
 create mode 100644 resources/js/components/pages/forms/show/FormQrCode.vue

diff --git a/package.json b/package.json
index f539701..f65c784 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "js-sha256": "^0.9.0",
     "portal-vue": "^2.1.7",
     "prismjs": "^1.24.1",
+    "qrcode": "^1.5.1",
     "query-builder-vue": "^1.2.0",
     "tinymotion": "^0.2.0",
     "vform": "^2.1.1",
diff --git a/resources/js/components/pages/forms/show/FormQrCode.vue b/resources/js/components/pages/forms/show/FormQrCode.vue
new file mode 100644
index 0000000..d01b25a
--- /dev/null
+++ b/resources/js/components/pages/forms/show/FormQrCode.vue
@@ -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>
diff --git a/resources/js/pages/forms/show/share.vue b/resources/js/pages/forms/show/share.vue
index 471d920..835e1e9 100644
--- a/resources/js/pages/forms/show/share.vue
+++ b/resources/js/pages/forms/show/share.vue
@@ -4,6 +4,8 @@
 
     <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" />
 
     <div class="mt-6 pt-6 border-t w-full flex">
@@ -17,6 +19,7 @@
 <script>
 import ShareLink from '../../../components/pages/forms/show/ShareLink.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 RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue'
 import SeoMeta from '../../../mixins/seo-meta.js'
@@ -26,6 +29,7 @@ export default {
   components: {
     ShareLink,
     EmbedCode,
+    FormQrCode,
     UrlFormPrefill,
     RegenerateFormLink,
     AdvancedFormUrlSettings