IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

yarn lint --fix

Browse Source
This commit is contained in:
ogerly 2022-03-14 10:13:30 +01:00
parent f15fe1d7cb
commit 15f8ed3ca0
5 changed files with 61 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/GddSend.vue
View File

@ -8,7 +8,14 @@ export default {
name: 'GddSend',
data() {
return {
transactionSteps: ['transaction-form', 'transaction-confirmation', 'transaction-result'],
transactionSteps: [
'transaction-form',
'transaction-confirmation-send',
'transaction-confirmation-link',
'transaction-result-send-success',
'transaction-result-send-error',
'transaction-result-link',
],
}
},
props: {

2
frontend/src/components/GddSend/TransactionConfirmation.spec.js
View File

@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils'
import TransactionConfirmation from './TransactionConfirmation'
import TransactionConfirmation from './TransactionConfirmationLink'
const localVue = global.localVue

108
frontend/src/components/GddSend/TransactionConfirmation.vue
View File

@ -1,108 +0,0 @@
<template>
<div class="transaction-confirm">
<b-row v-if="selected === 'link'" class="confirm-box-link">
<b-col class="text-right mt-4 mb-3">
<div class="alert-heading text-left h3">{{ $t('gdd_per_link.header') }}</div>
<h1>{{ amount | GDD }}</h1>
<b class="mt-2">{{ memo }}</b>
</b-col>
</b-row>
<b-row v-else class="confirm-box-send">
<b-col>
<div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
<b-list-group class="">
<label class="input-1" for="input-1">{{ $t('form.recipient') }}</label>
<b-input-group id="input-group-1" class="borderbottom" size="lg">
<b-input-group-prepend class="d-none d-md-block gray-background">
<b-icon icon="envelope" class="display-4 m-3"></b-icon>
</b-input-group-prepend>
<div class="p-3">{{ email }}</div>
</b-input-group>
<br />
<label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
<b-input-group id="input-group-2" class="borderbottom" size="lg">
<b-input-group-prepend class="p-2 d-none d-md-block gray-background">
<div class="m-1 mt-2">GDD</div>
</b-input-group-prepend>
<div class="p-3">{{ amount | GDD }}</div>
</b-input-group>
<br />
<label class="input-3" for="input-3">{{ $t('form.message') }}</label>
<b-input-group id="input-group-3" class="borderbottom">
<b-input-group-prepend class="d-none d-md-block gray-background">
<b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
</b-input-group-prepend>
<div class="p-3">{{ memo ? memo : '-' }}</div>
</b-input-group>
</b-list-group>
</b-col>
</b-row>
<b-container class="bv-example-row mt-3 mb-3 gray-background p-2">
<div class="alert-heading text-left h3">{{ $t('advanced-calculation') }}</div>
<b-row class="pr-3">
<b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
<b-col class="text-right">{{ balance | GDD }}</b-col>
</b-row>
<b-row class="pr-3">
<b-col class="text-right">
<strong>{{ $t('form.your_amount') }}</strong>
</b-col>
<b-col class="text-right">
<strong>- {{ amount | GDD }}</strong>
</b-col>
</b-row>
<b-row class="pr-3">
<b-col class="text-right">
<strong>Vergänglichkeit für 14 Tage</strong>
</b-col>
<b-col class="text-right borderbottom">
<strong>~ {{ $n(amount * 0.028, 'decimal') }}</strong>
</b-col>
</b-row>
<b-row class="pr-3">
<b-col class="text-right">{{ $t('form.new_balance') }}</b-col>
<b-col v-if="selected === 'link'" class="text-right">
~ {{ $n(balance - amount - amount * 0.028, 'decimal') }}
</b-col>
<b-col v-else class="text-right">~ {{ $n(balance - amount, 'decimal') }}</b-col>
</b-row>
</b-container>
<b-row class="mt-4">
<b-col>
<b-button @click="$emit('on-reset')">{{ $t('form.cancel') }}</b-button>
</b-col>
<b-col class="text-right">
<b-button variant="success" :disabled="loading" @click="$emit('send-transaction')">
{{ selected === 'send' ? $t('form.send_now') : $t('form.generate_now') }}
</b-button>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'TransactionConfirmation',
props: {
balance: { type: Number, required: true },
email: { type: String, required: false, default: '' },
amount: { type: Number, required: true },
memo: { type: String, required: true },
loading: { type: Boolean, required: true },
selected: { type: String, required: true },
},
}
</script>
<style>
.gray-background {
background-color: #ecebe6a3 !important;
}
.borderbottom {
border-bottom: 1px solid rgb(70, 65, 65);
border-bottom-style: double;
}
</style>

80
frontend/src/components/GddSend/TransactionResult.vue
View File

@ -1,80 +0,0 @@
<template>
<b-container>
<b-row v-if="error">
<b-col>
<b-card class="p-0 gradido-custom-background">
<div class="p-4 gradido-font-15rem">
<div>{{ $t('form.sorry') }}</div>
<hr />
<div class="test-send_transaction_error">{{ $t('form.send_transaction_error') }}</div>
<hr />
<div class="test-receiver-not-found" v-if="errorResult === 'recipient not known'">
{{ $t('transaction.receiverNotFound') }}
</div>
<div
class="test-receiver-not-found"
v-if="errorResult === 'GraphQL error: The recipient account was deleted'"
>
{{ $t('transaction.receiverDeleted') }}
</div>
<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>
</p>
</b-card>
</b-col>
</b-row>
<b-row v-if="linkResult.code">
<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>
<clipboard-copy :code="linkResult.code" />
</div>
<p class="text-center mt-3">
<b-button variant="success" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
</p>
</b-card>
</b-col>
</b-row>
<b-row v-if="!error && !linkResult.code">
<b-col>
<b-card class="p-0 gradido-custom-background">
<div class="p-4">
{{ $t('form.thx') }}
<hr />
{{ $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>
</p>
</b-card>
</b-col>
</b-row>
</b-container>
</template>
<script>
import ClipboardCopy from '../ClipboardCopy.vue'
export default {
name: 'TransactionResult',
components: {
ClipboardCopy,
},
props: {
selected: { type: String },
linkResult: {
type: Object,
required: false,
default() {
return {}
},
},
error: { type: Boolean, default: false },
errorResult: { type: String, default: '' },
},
}
</script>

64
frontend/src/pages/Send.vue
View File

@ -5,8 +5,8 @@
<template #transaction-form>
<transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
</template>
<template #transaction-confirmation>
<transaction-confirmation
<template #transaction-confirmation-send>
<transaction-confirmation-send
:balance="balance"
:selected="transactionData.selected"
:email="transactionData.email"
@ -15,15 +15,40 @@
:loading="loading"
@send-transaction="sendTransaction"
@on-reset="onReset"
></transaction-confirmation>
></transaction-confirmation-send>
</template>
<template #transaction-result>
<transaction-result
<template #transaction-confirmation-link>
<transaction-confirmation-link
:balance="balance"
:selected="transactionData.selected"
:email="transactionData.email"
:amount="transactionData.amount"
:memo="transactionData.memo"
:loading="loading"
@send-transaction="sendTransaction"
@on-reset="onReset"
></transaction-confirmation-link>
</template>
<template #transaction-result-send-success>
<transaction-result-send-success
:linkResult="linkResult"
@on-reset="onReset"
></transaction-result-send-success>
</template>
<template #transaction-result-send-error>
<transaction-result-send-error
:error="error"
:errorResult="errorResult"
@on-reset="onReset"
></transaction-result-send-error>
</template>
<template #transaction-result-link>
<transaction-result-link
:linkResult="linkResult"
:error="error"
:errorResult="errorResult"
@on-reset="onReset"
></transaction-result>
></transaction-result-link>
</template>
</gdd-send>
<hr />
@ -33,8 +58,11 @@
<script>
import GddSend from '@/components/GddSend.vue'
import TransactionForm from '@/components/GddSend/TransactionForm.vue'
import TransactionConfirmation from '@/components/GddSend/TransactionConfirmation.vue'
import TransactionResult from '@/components/GddSend/TransactionResult.vue'
import TransactionConfirmationSend from '@/components/GddSend/TransactionConfirmationSend.vue'
import TransactionConfirmationLink from '@/components/GddSend/TransactionConfirmationLink.vue'
import TransactionResultSendSuccess from '@/components/GddSend/TransactionResultSendSuccess.vue'
import TransactionResultSendError from '@/components/GddSend/TransactionResultSendError.vue'
import TransactionResultLink from '@/components/GddSend/TransactionResultLink.vue'
import { sendCoins, createTransactionLink } from '@/graphql/mutations.js'
const EMPTY_TRANSACTION_DATA = {
@ -48,8 +76,11 @@ export default {
components: {
GddSend,
TransactionForm,
TransactionConfirmation,
TransactionResult,
TransactionConfirmationSend,
TransactionConfirmationLink,
TransactionResultSendSuccess,
TransactionResultSendError,
TransactionResultLink,
},
data() {
return {
@ -76,7 +107,14 @@ export default {
methods: {
setTransaction(data) {
this.transactionData = { ...data }
this.currentTransactionStep = 1
switch (data.selected) {
case 'send':
this.currentTransactionStep = 1
break
case 'link':
this.currentTransactionStep = 2
break
}
},
async sendTransaction() {
this.loading = true
@ -91,10 +129,12 @@ export default {
.then(() => {
this.error = false
this.$emit('update-balance', this.transactionData.amount)
this.currentTransactionStep = 3
})
.catch((err) => {
this.errorResult = err.message
this.error = true
this.currentTransactionStep = 4
})
break
case 'link':
@ -105,6 +145,7 @@ export default {
})
.then((result) => {
this.linkResult = result.data.createTransactionLink
this.currentTransactionStep = 5
})
.catch((error) => {
this.toastError(error)
@ -113,7 +154,6 @@ export default {
default:
throw new Error(`undefined transactionData.selected : ${this.transactionData.selected}`)
}
this.currentTransactionStep = 2
this.loading = false
},
onReset() {