From 1be10b1511e4e1f1a5e4c8c53c39e529a1802f75 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sun, 26 Nov 2023 18:20:15 -0700
Subject: [PATCH] add ability to copy the QR code (even though we don't have a
 way to read it in yet)

---
 src/views/ContactQRScanShowView.vue | 40 +++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index f7a2999..7b42337 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -20,16 +20,18 @@
       </h1>
     </div>
 
-    <!--
-      Play with display options: https://qr-code-styling.com/
-      See docs: https://www.npmjs.com/package/qr-code-generator-vue3
-    -->
-    <QRCodeVue3
-      :value="this.qrValue"
-      :cornersSquareOptions="{ type: 'extra-rounded' }"
-      :dotsOptions="{ type: 'square' }"
-      class="flex justify-center"
-    />
+    <div @click="onCopyToClipboard()">
+      <!--
+        Play with display options: https://qr-code-styling.com/
+        See docs: https://www.npmjs.com/package/qr-code-generator-vue3
+      -->
+      <QRCodeVue3
+        :value="this.qrValue"
+        :cornersSquareOptions="{ type: 'extra-rounded' }"
+        :dotsOptions="{ type: 'square' }"
+        class="flex justify-center"
+      />
+    </div>
 
     <h1 class="text-4xl text-center font-light pt-4">Scan Contact Info</h1>
     <qrcode-stream @detect="onScanDetect" @error="onScanError" />
@@ -40,6 +42,7 @@
 import QRCodeVue3 from "qr-code-generator-vue3";
 import { Component, Vue } from "vue-facing-decorator";
 import { QrcodeStream } from "vue-qrcode-reader";
+import { useClipboard } from "@vueuse/core";
 
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
@@ -179,5 +182,22 @@ export default class ContactQRScanShow extends Vue {
       -1,
     );
   }
+
+  onCopyToClipboard() {
+    useClipboard()
+      .copy(this.qrValue)
+      .then(() => {
+        console.log("Contact URL:", this.qrValue);
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "Copied",
+            text: "Contact URL was copied to clipboard.",
+          },
+          2000,
+        );
+      });
+  }
 }
 </script>