transaction confirmation as component

frontend/src/views/Pages/AccountOverview/GddSend.vue

@@ -5,43 +5,15 @@
       :balance="balance"
       @set-transaction="setTransaction"
     ></transaction-form>
-    <b-row v-show="row_check">
+    <transaction-confirmation
-      <b-col>
+      v-if="row_check"
-        <div class="display-4 p-4">{{ $t('form.send_check') }}</div>
+      :email="transactionData.email"
-
+      :amount="transactionData.amount"
-        <b-list-group>
+      :memo="transactionData.memo"
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
+      :date="transactionData.target_date"
-            {{ ajaxCreateData.email }}
+      @send-transaction="sendTransaction"
-            <b-badge variant="primary" pill>{{ $t('form.receiver') }}</b-badge>
+      @on-reset="onReset"
-          </b-list-group-item>
+    ></transaction-confirmation>
-
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
-            {{ ajaxCreateData.amount }} GDD
-            <b-badge variant="primary" pill>{{ $t('form.amount') }}</b-badge>
-          </b-list-group-item>
-
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
-            {{ ajaxCreateData.memo ? ajaxCreateData.memo : '-' }}
-            <b-badge variant="primary" pill>{{ $t('form.message') }}</b-badge>
-          </b-list-group-item>
-          <b-list-group-item class="d-flex justify-content-between align-items-center">
-            {{ $moment(ajaxCreateData.target_date).format('DD.MM.YYYY - HH:mm:ss') }}
-            <b-badge variant="primary" pill>{{ $t('form.date') }}</b-badge>
-          </b-list-group-item>
-        </b-list-group>
-        <hr />
-        <b-row>
-          <b-col>
-            <b-button @click="onReset">{{ $t('form.cancel') }}</b-button>
-          </b-col>
-          <b-col class="text-right">
-            <b-button variant="success" @click="sendTransaction">
-              {{ $t('form.send_now') }}
-            </b-button>
-          </b-col>
-        </b-row>
-      </b-col>
-    </b-row>
     <b-row v-show="row_thx">
       <b-col>
         <b-card class="p-0 p-md-3" style="background-color: #ebebeba3 !important">
@@ -77,6 +49,7 @@
 <script>
 // import { QrcodeDropZone } from 'vue-qrcode-reader'
 import TransactionForm from './GddSend/TransactionForm.vue'
+import TransactionConfirmation from './GddSend/TransactionConfirmation.vue'
 import communityAPI from '../../../apis/communityAPI.js'
 
 export default {
@@ -84,6 +57,7 @@ export default {
   components: {
     // QrcodeDropZone,
     TransactionForm,
+    TransactionConfirmation,
     //    QrCode,
   },
   props: {
@@ -92,12 +66,11 @@ export default {
   },
   data() {
     return {
-      ajaxCreateData: {
+      transactionData: {
         email: '',
         amount: 0,
         target_date: '',
         memo: '',
-        auto_sign: true,
       },
       send: false,
       row_check: false,
@@ -115,17 +88,17 @@ export default {
     async sendTransaction() {
       const result = await communityAPI.send(
         this.$store.state.sessionId,
-        this.ajaxCreateData.email,
+        this.transactionData.email,
-        this.ajaxCreateData.amount,
+        this.transactionData.amount,
-        this.ajaxCreateData.memo,
+        this.transactionData.memo,
-        this.ajaxCreateData.target_date,
+        this.transactionData.target_date,
       )
       if (result.success) {
         this.$emit('toggle-show-list', false)
         this.row_check = false
         this.row_thx = true
         this.row_error = false
-        this.$emit('update-balance', { ammount: this.ajaxCreateData.amount })
+        this.$emit('update-balance', { ammount: this.transactionData.amount })
       } else {
         this.$emit('toggle-show-list', true)
         this.row_check = false
@@ -133,25 +106,19 @@ export default {
         this.row_error = true
       }
     },
-    onReset(event) {
+    onReset() {
-      event.preventDefault()
       this.$emit('toggle-show-list', true)
       this.row_check = false
       this.row_thx = false
       this.row_error = false
     },
     setTransaction(data) {
-      this.ajaxCreateData.email = data.email
+      this.transactionData.email = data.email
-      this.ajaxCreateData.amount = data.amount
+      this.transactionData.amount = data.amount
-      this.ajaxCreateData.memo = data.memo
+      this.transactionData.memo = data.memo
-      this.ajaxCreateData.target_date = new Date(Date.now()).toISOString()
+      this.transactionData.target_date = new Date(Date.now()).toISOString()
       this.onSubmit()
     },
   },
 }
 </script>
-<style>
-span.errors {
-  color: red;
-}
-</style>

frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue

@@ -0,0 +1,48 @@
+<template>
+  <b-row>
+    <b-col>
+      <div class="display-4 p-4">{{ $t('form.send_check') }}</div>
+      <b-list-group>
+        <b-list-group-item class="d-flex justify-content-between align-items-center">
+          {{ email }}
+          <b-badge variant="primary" pill>{{ $t('form.receiver') }}</b-badge>
+        </b-list-group-item>
+        <b-list-group-item class="d-flex justify-content-between align-items-center">
+          {{ amount }} GDD
+          <b-badge variant="primary" pill>{{ $t('form.amount') }}</b-badge>
+        </b-list-group-item>
+        <b-list-group-item class="d-flex justify-content-between align-items-center">
+          {{ memo ? memo : '-' }}
+          <b-badge variant="primary" pill>{{ $t('form.message') }}</b-badge>
+        </b-list-group-item>
+        <b-list-group-item class="d-flex justify-content-between align-items-center">
+          {{ date }}
+          {{ $moment(date).format('DD.MM.YYYY - HH:mm:ss') }}
+          <b-badge variant="primary" pill>{{ $t('form.date') }}</b-badge>
+        </b-list-group-item>
+      </b-list-group>
+      <hr />
+      <b-row>
+        <b-col>
+          <b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
+        </b-col>
+        <b-col class="text-right">
+          <b-button variant="success" @click="$emit('send-transaction')">
+            {{ $t('form.send_now') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </b-col>
+  </b-row>
+</template>
+<script>
+export default {
+  name: 'TransactionConfirmation',
+  props: {
+    email: { type: String, default: '' },
+    amount: { type: String, default: '' },
+    memo: { type: String, default: '' },
+    date: { type: String, default: '' },
+  },
+}
+</script>

frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue

@@ -166,3 +166,8 @@ export default {
   },
 }
 </script>
+<style>
+span.errors {
+  color: red;
+}
+</style>