From 741c65a1c6751b5b5e7aea7e20865c590d68f602 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 23 Mar 2022 12:33:24 +0100
Subject: [PATCH] add show qr-code from transaction link

---
 .../TransactionLinks/TransactionLink.vue      | 50 +++++++++++++++++--
 1 file changed, 47 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/TransactionLinks/TransactionLink.vue b/frontend/src/components/TransactionLinks/TransactionLink.vue
index d9e88949f..749353f22 100644
--- a/frontend/src/components/TransactionLinks/TransactionLink.vue
+++ b/frontend/src/components/TransactionLinks/TransactionLink.vue
@@ -32,11 +32,25 @@
           <b-icon icon="trash"></b-icon>
         </b-button>
         <br />
-        <b-button class="p-2 mt-1" size="sm" variant="outline-success">
+        <b-button
+          @click="$bvModal.show('modalPopover-' + id)"
+          class="p-2 mt-1"
+          size="sm"
+          variant="outline-success"
+        >
           <b-img src="img/svg/qr-code.svg"></b-img>
         </b-button>
       </b-col>
     </b-row>
+    <b-modal :id="'modalPopover-' + id" title="QR-Code" ok-only>
+      <div class="text-center">
+        <figure class="qrcode">
+          <vue-qrcode :value="link" type="image/png" class="qrbox"></vue-qrcode>
+          <img class="qrcode__image" src="img/gdd-coin.png" alt="GDD" />
+        </figure>
+        <p>{{ link }}</p>
+      </div>
+    </b-modal>
   </div>
 </template>
 <script>
@@ -46,6 +60,7 @@ import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
 import MemoRow from '../TransactionRows/MemoRow'
 import DateRow from '../TransactionRows/DateRow'
 import DecayRow from '../TransactionRows/DecayRow'
+import VueQrcode from 'vue-qrcode'
 
 export default {
   name: 'TransactionLink',
@@ -55,6 +70,7 @@ export default {
     MemoRow,
     DateRow,
     DecayRow,
+    VueQrcode,
   },
   props: {
     amount: { type: String, required: true },
@@ -64,11 +80,15 @@ export default {
     memo: { type: String, required: true },
     validUntil: { type: String, required: true },
   },
+  data() {
+    return {
+      link: `${window.location.origin}/redeem/${this.code}`,
+    }
+  },
   methods: {
     copy() {
-      const link = `${window.location.origin}/redeem/${this.code}`
       navigator.clipboard
-        .writeText(link)
+        .writeText(this.link)
         .then(() => {
           this.toastSuccess(this.$t('gdd_per_link.link-copied'))
         })
@@ -103,3 +123,27 @@ export default {
   },
 }
 </script>
+<style scoped>
+.qrcode {
+  display: inline-block;
+  font-size: 0;
+  margin-bottom: 0;
+  position: relative;
+}
+.qrbox {
+  width: 400px;
+}
+.qrcode__image {
+  background-color: #fff;
+  border: 0.25rem solid #fff;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
+  height: 15%;
+  left: 50%;
+  overflow: hidden;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 15%;
+}
+</style>