add extra order for QrCode components, add component FigureQrCode.vue

frontend/src/components/QrCode/FigureQrCode.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="figure-qr-code">
+    <figure class="qrcode">
+      <vue-qrcode :value="text" type="image/png" class="qrbox"></vue-qrcode>
+      <img class="qrcode__image" src="img/gdd-coin.png" alt="GDD" />
+    </figure>
+  </div>
+</template>
+<script>
+import VueQrcode from 'vue-qrcode'
+
+export default {
+  name: 'FigureQrCode',
+  components: {
+    VueQrcode,
+  },
+  props: {
+    text: { type: String, required: true },
+  },
+}
+</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>

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

@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils'
+import QrCodeReader from './QrCodeReader'
+
+const localVue = global.localVue
+
+describe('QrCodeReader', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+  }
+
+  const stubs = {
+    QrcodeStream: true,
+    QrcodeCapture: true,
+  }
+
+  const Wrapper = () => {
+    return mount(QrCodeReader, { localVue, mocks, stubs })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.alert').exists()).toBeTruthy()
+    })
+
+    describe('scanning', () => {
+      beforeEach(async () => {
+        wrapper.find('a').trigger('click')
+      })
+
+      it('has a scanning stream', () => {
+        expect(wrapper.findComponent({ name: 'QrcodeStream' }).exists()).toBeTruthy()
+      })
+
+      describe('decode', () => {
+        beforeEach(async () => {
+          await wrapper
+            .findComponent({ name: 'QrcodeStream' })
+            .vm.$emit('decode', '[{"email": "user@example.org", "amount": 10.0}]')
+        })
+
+        it('emits set transaction', () => {
+          expect(wrapper.emitted()['set-transaction']).toEqual([
+            [
+              {
+                email: 'user@example.org',
+                amount: 10,
+              },
+            ],
+          ])
+        })
+      })
+
+      describe('detect', () => {
+        beforeEach(async () => {
+          await wrapper.find('div.row > *').vm.$emit('detect')
+        })
+
+        it('calls onDetect', () => {
+          expect(wrapper.vm.detect).toBeTruthy()
+        })
+      })
+    })
+  })
+})

frontend/src/components/QrCode/QrCodeReader.vue

@@ -0,0 +1,72 @@
+<template>
+  <b-alert show variant="secondary">
+    <!-- eslint-disable-next-line @intlify/vue-i18n/no-v-html -->
+    <span class="alert-text" v-html="$t('form.scann_code')"></span>
+    <b-col v-show="!scan" lg="12" class="text-right">
+      <a @click="toggle" class="nav-link pointer">
+        <img src="img/icons/gradido/qr-scan-pure.png" height="50" />
+      </a>
+    </b-col>
+
+    <div v-if="scan">
+      <b-row>
+        <qrcode-capture @detect="onDetect" capture="user"></qrcode-capture>
+      </b-row>
+
+      <qrcode-stream class="mt-3" @decode="onDecode" @detect="onDetect"></qrcode-stream>
+
+      <b-container>
+        <b-row>
+          <b-col lg="8">
+            <b-alert show variant="secondary">
+              <!-- eslint-disable-next-line @intlify/vue-i18n/no-v-html -->
+              <span class="alert-text" v-html="$t('form.scann_code')"></span>
+            </b-alert>
+          </b-col>
+        </b-row>
+      </b-container>
+    </div>
+    <div @click="toggle">
+      <b-alert v-show="scan" show variant="primary" class="pointer text-center">
+        <span class="alert-text">
+          <strong>{{ $t('form.cancel') }}</strong>
+        </span>
+      </b-alert>
+    </div>
+  </b-alert>
+</template>
+<script>
+import { QrcodeStream } from 'vue-qrcode-reader'
+
+export default {
+  name: 'QrCode',
+  components: {
+    QrcodeStream,
+  },
+  data() {
+    return {
+      scan: false,
+      detect: false,
+    }
+  },
+  methods: {
+    toggle() {
+      this.scan = !this.scan
+    },
+    async onDecode(decodedString) {
+      const arr = JSON.parse(decodedString)
+      this.$emit('set-transaction', { email: arr[0].email, amount: arr[0].amount })
+      this.scan = false
+    },
+    async onDetect() {
+      // TODO: what is this for? I added the detect data to test that the method is called
+      this.detect = !this.detect
+    },
+  },
+}
+</script>
+<style>
+.pointer {
+  cursor: pointer;
+}
+</style>