Merge pull request #1820 from gradido/1812-Put-QR-Code-into-Popup-on-generate

1812 put qr code into popup on generate

frontend/src/components/ClipboardCopy.vue

@@ -3,9 +3,12 @@
     <b-input-group size="lg" class="mb-3" prepend="Link">
       <b-form-input :value="link" type="text" readonly></b-form-input>
       <b-input-group-append>
-        <b-button size="sm" text="Button" variant="success" @click="CopyLink">
+        <b-button size="sm" text="Button" variant="primary" @click="CopyLink">
           {{ $t('gdd_per_link.copy') }}
         </b-button>
+        <b-button variant="primary" class="text-light" @click="$emit('show-qr-code-button')">
+          <b-img src="img/svg/qr-code.svg" width="19" class="svg"></b-img>
+        </b-button>
       </b-input-group-append>
     </b-input-group>
   </div>
@@ -30,3 +33,8 @@ export default {
   },
 }
 </script>
+<style>
+.svg {
+  filter: brightness(0) invert(1);
+}
+</style>

frontend/src/components/GddSend/TransactionResultLink.vue

@@ -3,13 +3,12 @@
     <b-col>
       <b-card class="p-0 gradido-custom-background">
         <div class="h3 mb-4">{{ $t('gdd_per_link.created') }}</div>
-
-        <clipboard-copy :link="link" />
+        <clipboard-copy :link="link" @show-qr-code-button="showQrCodeButton" />
 
         <div class="text-center">
-          <figure-qr-code :text="link" />
+          <figure-qr-code v-if="showQrcode" :link="link" />
 
-          <b-button variant="success" @click="$emit('on-reset')" class="mt-4">
+          <b-button variant="secondary" @click="$emit('on-reset')" class="mt-4">
             {{ $t('form.close') }}
           </b-button>
         </div>
@@ -33,5 +32,15 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      showQrcode: false,
+    }
+  },
+  methods: {
+    showQrCodeButton() {
+      this.showQrcode = !this.showQrcode
+    },
+  },
 }
 </script>

frontend/src/components/GddSend/TransactionResultSendError.vue

@@ -22,7 +22,9 @@
             <div v-else>{{ errorResult }}</div>
           </div>
           <p class="text-center mt-3">
-            <b-button variant="success" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
+            <b-button variant="secondary" @click="$emit('on-reset')">
+              {{ $t('form.close') }}
+            </b-button>
           </p>
         </b-card>
       </b-col>

frontend/src/components/GddSend/TransactionResultSendSuccess.vue

@@ -9,7 +9,7 @@
             {{ $t('form.send_transaction_success') }}
           </div>
           <p class="text-center mt-3">
-            <b-button variant="success" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
+            <b-button variant="primary" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
           </p>
         </b-card>
       </b-col>

frontend/src/components/QrCode/FigureQrCode.spec.js

@@ -4,7 +4,7 @@ import FigureQrCode from './FigureQrCode'
 const localVue = global.localVue
 
 const propsData = {
-  text: '',
+  link: '',
 }
 
 describe('FigureQrCode', () => {

frontend/src/components/QrCode/FigureQrCode.vue

@@ -14,14 +14,14 @@ export default {
     QRCanvas,
   },
   props: {
-    text: { type: String, required: true },
+    link: { type: String, required: true },
   },
   data() {
     return {
       options: {
         cellSize: 8,
         correctLevel: 'H',
-        data: this.text,
+        data: this.link,
       },
     }
   },

frontend/src/components/TransactionLinks/TransactionLink.vue

@@ -50,7 +50,7 @@
         <template #header>
           <h6 class="mb-0">{{ $t('qrCode') }}</h6>
         </template>
-        <b-card-text><figure-qr-code class="text-center" :text="link" /></b-card-text>
+        <b-card-text><figure-qr-code class="text-center" :link="link" /></b-card-text>
         <template #footer>
           <em>{{ link }}</em>
         </template>

frontend/src/pages/Send.spec.js

@@ -253,7 +253,7 @@ describe('Send', () => {
 
         describe('close button click', () => {
           beforeEach(async () => {
-            await wrapper.findAll('button').at(1).trigger('click')
+            await wrapper.findAll('button').at(2).trigger('click')
           })
 
           it('Shows the TransactionForm', () => {