go back in the form

This commit is contained in:
ogerly 2023-01-12 10:22:17 +01:00
parent ddc1558ada
commit b64db8158a
6 changed files with 107 additions and 104 deletions

View File

@ -1,112 +1,114 @@
<template> <template>
<b-row class="transaction-form"> <div class="transaction-form">
<b-col cols="12"> <b-row>
<b-card class="appBoxShadow gradido-border-radius" body-class="p-3"> <b-col cols="12">
<validation-observer v-slot="{ handleSubmit }" ref="formValidator"> <b-card class="appBoxShadow gradido-border-radius" body-class="p-3">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset"> <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
<b-form-radio-group v-model="radioSelected" class="container"> <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
<b-row class="mb-4"> <b-form-radio-group v-model="radioSelected" class="container">
<b-col cols="12" lg="6"> <b-row class="mb-4">
<b-row class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2"> <b-col cols="12" lg="6">
<b-col cols="10" @click="radioSelected = sendTypes.send" class="pointer"> <b-row class="bg-248 gradido-border-radius pt-lg-2 mr-lg-2">
{{ $t('send_gdd') }} <b-col cols="10" @click="radioSelected = sendTypes.send" class="pointer">
</b-col> {{ $t('send_gdd') }}
<b-col cols="2"> </b-col>
<b-form-radio <b-col cols="2">
name="shipping" <b-form-radio
size="lg" name="shipping"
:value="sendTypes.send" size="lg"
stacked :value="sendTypes.send"
class="custom-radio-button pointer" stacked
></b-form-radio> class="custom-radio-button pointer"
</b-col> ></b-form-radio>
</b-row> </b-col>
</b-col> </b-row>
</b-col>
<b-col>
<b-row class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0">
<b-col cols="10" @click="radioSelected = sendTypes.link" class="pointer">
{{ $t('send_per_link') }}
</b-col>
<b-col cols="2" class="pointer">
<b-form-radio
name="shipping"
:value="sendTypes.link"
size="lg"
class="custom-radio-button"
></b-form-radio>
</b-col>
</b-row>
</b-col>
</b-row>
<div class="mt-4 mb-4" v-if="radioSelected === sendTypes.link">
<h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
<div>
{{ $t('gdd_per_link.choose-amount') }}
</div>
</div>
</b-form-radio-group>
<b-row>
<b-col> <b-col>
<b-row class="bg-248 gradido-border-radius pt-lg-2 ml-lg-2 mt-2 mt-lg-0"> <b-row>
<b-col cols="10" @click="radioSelected = sendTypes.link" class="pointer"> <b-col cols="12">
{{ $t('send_per_link') }} <div v-if="radioSelected === sendTypes.send">
<input-email
:name="$t('form.recipient')"
:label="$t('form.recipient')"
:placeholder="$t('form.email')"
v-model="form.email"
:disabled="isBalanceDisabled"
/>
</div>
</b-col> </b-col>
<b-col cols="2" class="pointer"> <b-col cols="12" lg="6">
<b-form-radio <input-amount
name="shipping" v-model="form.amount"
:value="sendTypes.link" :name="$t('form.amount')"
size="lg" :label="$t('form.amount')"
class="custom-radio-button" :placeholder="'0.01'"
></b-form-radio> :rules="{ required: true, gddSendAmount: [0.01, balance] }"
typ="TransactionForm"
:disabled="isBalanceDisabled"
></input-amount>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
</b-row> </b-row>
<div class="mt-4 mb-4" v-if="radioSelected === sendTypes.link"> <b-row>
<h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2> <b-col>
<div> <input-textarea
{{ $t('gdd_per_link.choose-amount') }} v-model="form.memo"
</div> :name="$t('form.message')"
:label="$t('form.message')"
:placeholder="$t('form.message')"
:rules="{ required: true, min: 5, max: 255 }"
:disabled="isBalanceDisabled"
/>
</b-col>
</b-row>
<div v-if="!!isBalanceDisabled" class="text-danger mt-5">
{{ $t('form.no_gdd_available') }}
</div> </div>
</b-form-radio-group> <b-row v-else class="test-buttons mt-5">
<b-row> <b-col>
<b-col> <b-button type="reset" variant="secondary" @click="onReset">
<b-row> {{ $t('form.reset') }}
<b-col cols="12"> </b-button>
<div v-if="radioSelected === sendTypes.send"> </b-col>
<input-email <b-col class="text-right">
:name="$t('form.recipient')" <b-button type="submit" variant="gradido">
:label="$t('form.recipient')" {{ $t('form.check_now') }}
:placeholder="$t('form.email')" </b-button>
v-model="form.email" </b-col>
:disabled="isBalanceDisabled" </b-row>
/> </b-form>
</div> </validation-observer>
</b-col> </b-card>
<b-col cols="12" lg="6"> </b-col>
<input-amount </b-row>
v-model="form.amount" </div>
:name="$t('form.amount')"
:label="$t('form.amount')"
:placeholder="'0.01'"
:rules="{ required: true, gddSendAmount: [0.01, balance] }"
typ="TransactionForm"
:disabled="isBalanceDisabled"
></input-amount>
</b-col>
</b-row>
</b-col>
</b-row>
<b-row>
<b-col>
<input-textarea
v-model="form.memo"
:name="$t('form.message')"
:label="$t('form.message')"
:placeholder="$t('form.message')"
:rules="{ required: true, min: 5, max: 255 }"
:disabled="isBalanceDisabled"
/>
</b-col>
</b-row>
<div v-if="!!isBalanceDisabled" class="text-danger mt-5">
{{ $t('form.no_gdd_available') }}
</div>
<b-row v-else class="test-buttons mt-5">
<b-col>
<b-button type="reset" variant="secondary" @click="onReset">
{{ $t('form.reset') }}
</b-button>
</b-col>
<b-col class="text-right">
<b-button type="submit" variant="gradido">
{{ $t('form.check_now') }}
</b-button>
</b-col>
</b-row>
</b-form>
</validation-observer>
</b-card>
</b-col>
</b-row>
</template> </template>
<script> <script>
import { SEND_TYPES } from '@/pages/Send.vue' import { SEND_TYPES } from '@/pages/Send.vue'

View File

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

View File

@ -22,6 +22,7 @@
@focus="amountFocused = true" @focus="amountFocused = true"
@blur="normalizeAmount(true)" @blur="normalizeAmount(true)"
:disabled="disabled" :disabled="disabled"
autocomplete="off"
></b-form-input> ></b-form-input>
<b-form-invalid-feedback v-bind="ariaMsg"> <b-form-invalid-feedback v-bind="ariaMsg">
@ -63,7 +64,7 @@ export default {
}, },
data() { data() {
return { return {
currentValue: '', currentValue: this.value,
amountValue: 0.0, amountValue: 0.0,
amountFocused: false, amountFocused: false,
} }

View File

@ -21,6 +21,7 @@
@focus="emailFocused = true" @focus="emailFocused = true"
@blur="normalizeEmail()" @blur="normalizeEmail()"
:disabled="disabled" :disabled="disabled"
autocomplete="off"
></b-form-input> ></b-form-input>
<b-form-invalid-feedback v-bind="ariaMsg"> <b-form-invalid-feedback v-bind="ariaMsg">
{{ errors[0] }} {{ errors[0] }}

View File

@ -41,7 +41,7 @@ export default {
}, },
data() { data() {
return { return {
currentValue: '', currentValue: this.value,
} }
}, },
computed: { computed: {

View File

@ -171,7 +171,6 @@ export default {
}, },
onBack() { onBack() {
this.currentTransactionStep = TRANSACTION_STEPS.transactionForm this.currentTransactionStep = TRANSACTION_STEPS.transactionForm
this.$mount()
}, },
updateTransactions(pagination) { updateTransactions(pagination) {
this.$emit('update-transactions', pagination) this.$emit('update-transactions', pagination)