add components FigureQrCode.vue for show qr code image with gradido coin

frontend/src/components/GddSend/TransactionResultLink.vue

@@ -4,9 +4,17 @@
       <b-col>
         <b-card class="p-0 gradido-custom-background">
           <div class="p-4">
-            <div class="h3 mb-5">{{ $t('gdd_per_link.created') }}</div>
+            <div class="h3">{{ $t('gdd_per_link.created') }}</div>
+          </div>
+          <b-row>
+            <b-col class="text-center">
+              <figure-qr-code :text="link" />
+            </b-col>
+          </b-row>
+          <div class="p-4">
             <clipboard-copy :code="code" />
           </div>
+
           <p class="text-center mt-3">
             <b-button variant="success" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
           </p>
@@ -17,11 +25,13 @@
 </template>
 <script>
 import ClipboardCopy from '../ClipboardCopy.vue'
+import FigureQrCode from '../QrCode/FigureQrCode.vue'
 
 export default {
   name: 'TransactionResultLink',
   components: {
     ClipboardCopy,
+    FigureQrCode,
   },
   props: {
     code: {
@@ -29,5 +39,10 @@ export default {
       required: true,
     },
   },
+  computed: {
+    link() {
+      return `${window.location.origin}/redeem/${this.code}`
+    },
+  },
 }
 </script>

frontend/src/components/TransactionLinks/TransactionLink.vue

@@ -22,6 +22,15 @@
           <b-icon icon="clipboard"></b-icon>
         </b-button>
         <br />
+        <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>
+        <br />
         <b-button
           class="p-2 mt-1"
           size="sm"
@@ -31,23 +40,11 @@
         >
           <b-icon icon="trash"></b-icon>
         </b-button>
-        <br />
-        <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 :hideHeaderClose="false">
+    <b-modal :id="'modalPopover-' + id" title="QR-Code" ok-only hide-header-close>
       <div class="text-center">
-        <figure class="qrcode">
+        <figure-qr-code :text="link" />
-          <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>
@@ -60,7 +57,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'
+import FigureQrCode from '@/components/QrCode/FigureQrCode.vue'
 
 export default {
   name: 'TransactionLink',
@@ -70,7 +67,7 @@ export default {
     MemoRow,
     DateRow,
     DecayRow,
-    VueQrcode,
+    FigureQrCode,
   },
   props: {
     amount: { type: String, required: true },
@@ -80,11 +77,6 @@ export default {
     memo: { type: String, required: true },
     validUntil: { type: String, required: true },
   },
-  data() {
-    return {
-      link: `${window.location.origin}/redeem/${this.code}`,
-    }
-  },
   methods: {
     copy() {
       navigator.clipboard
@@ -120,30 +112,9 @@ export default {
     decay() {
       return `${this.amount - this.holdAvailableAmount}`
     },
+    link() {
+      return `${window.location.origin}/redeem/${this.code}`
+    },
   },
 }
 </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>