mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Merge pull request #491 from gradido/gdd-amount-input-field
fix: GDD Send Amount Input Field
This commit is contained in:
Moriz Wahl
GitHub
commit
5807fc2eee
@ -64,6 +64,7 @@
|
||||
"vue-clickaway": "^2.2.2",
|
||||
"vue-clipboard2": "^0.3.0",
|
||||
"vue-flatpickr-component": "^8.1.2",
|
||||
"vue-focus": "^2.1.0",
|
||||
"vue-good-table": "^2.21.3",
|
||||
"vue-i18n": "^8.22.4",
|
||||
"vue-jest": "^3.0.7",
|
||||
|
||||
@ -56,8 +56,8 @@
|
||||
"send_transaction_success":"Deine Transaktion wurde erfolgreich ausgeführt",
|
||||
"send_transaction_error":"Leider konnte die Transaktion nicht ausgeführt werden!",
|
||||
"validation": {
|
||||
"double": "Das Feld {field} muss eine Dezimalzahl mit zwei Nachkommastellen sein",
|
||||
"is-not": "Du kannst Dir selbst keine Gradidos überweisen"
|
||||
"gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",
|
||||
"is-not": "Du kannst dir selbst keine Gradidos überweisen"
|
||||
},
|
||||
"change_username_info": "Das ändern des Usernamens bedarf mehrerer Schritte."
|
||||
},
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
"send_transaction_success":"Your transaction was successfully completed",
|
||||
"send_transaction_error":"Unfortunately, the transaction could not be executed!",
|
||||
"validation": {
|
||||
"double": "The {field} field must be a decimal with two digits",
|
||||
"gddSendAmount": "The {_field_} field must be a number between {min} and {max} with at most two digits",
|
||||
"is-not": "You cannot send Gradidos to yourself"
|
||||
},
|
||||
"change_username_info": "Changing the username requires several steps."
|
||||
|
||||
@ -4,7 +4,7 @@ import App from './App.vue'
|
||||
import i18n from './i18n.js'
|
||||
import { configure, extend } from 'vee-validate'
|
||||
// eslint-disable-next-line camelcase
|
||||
import { required, email, min, between, double, is_not } from 'vee-validate/dist/rules'
|
||||
import { required, email, min, max, is_not } from 'vee-validate/dist/rules'
|
||||
|
||||
// store
|
||||
import { store } from './store/store'
|
||||
@ -46,14 +46,18 @@ extend('min', {
|
||||
message: (_, values) => i18n.t('validations.messages.min', values),
|
||||
})
|
||||
|
||||
extend('double', {
|
||||
...double,
|
||||
message: (_, values) => i18n.t('form.validation.double', values),
|
||||
extend('max', {
|
||||
...max,
|
||||
message: (_, values) => i18n.t('validations.messages.max', values),
|
||||
})
|
||||
|
||||
extend('between', {
|
||||
...between,
|
||||
message: (_, values) => i18n.t('validations.messages.between', values),
|
||||
extend('gddSendAmount', {
|
||||
validate(value, { min, max }) {
|
||||
value = value.replace(',', '.')
|
||||
return value.match(/^[0-9]+(\.[0-9]{1,2})?$/) && Number(value) >= min && Number(value) <= max
|
||||
},
|
||||
params: ['min', 'max'],
|
||||
message: (_, values) => i18n.t('form.validation.gddSendAmount', values),
|
||||
})
|
||||
|
||||
// eslint-disable-next-line camelcase
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import clickOutside from '@/directives/click-ouside.js'
|
||||
import { focus } from 'vue-focus'
|
||||
|
||||
/**
|
||||
* You can register global directives here and use them as a plugin in your main Vue instance
|
||||
@ -7,6 +8,7 @@ import clickOutside from '@/directives/click-ouside.js'
|
||||
const GlobalDirectives = {
|
||||
install(Vue) {
|
||||
Vue.directive('click-outside', clickOutside)
|
||||
Vue.directive('focus', focus)
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
methods: {
|
||||
setTransaction(data) {
|
||||
data.target_date = new Date(Date.now()).toISOString()
|
||||
this.transactionData = { ...data }
|
||||
this.transactionData = data
|
||||
this.currentTransactionStep = 1
|
||||
},
|
||||
async sendTransaction() {
|
||||
|
||||
@ -1,44 +1,46 @@
|
||||
<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">
|
||||
{{ $d($moment(date), 'long') }}
|
||||
<b-badge variant="primary" pill>{{ $t('form.date') }}</b-badge>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
<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" :disabled="loading" @click="$emit('send-transaction')">
|
||||
{{ $t('form.send_now') }}
|
||||
</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div>
|
||||
<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">
|
||||
{{ $n(amount, 'decimal') }} 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">
|
||||
{{ $d($moment(date), 'long') }}
|
||||
<b-badge variant="primary" pill>{{ $t('form.date') }}</b-badge>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<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')">
|
||||
{{ $t('form.send_now') }}
|
||||
</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TransactionConfirmation',
|
||||
props: {
|
||||
email: { type: String, default: '' },
|
||||
amount: { type: String, default: '' },
|
||||
amount: { type: Number, default: 0 },
|
||||
memo: { type: String, default: '' },
|
||||
date: { type: String, default: '' },
|
||||
loading: { type: Boolean, default: false },
|
||||
|
||||
@ -56,8 +56,8 @@ describe('GddSend', () => {
|
||||
})
|
||||
|
||||
describe('ammount field', () => {
|
||||
it('has an input field of type number', () => {
|
||||
expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('number')
|
||||
it('has an input field of type text', () => {
|
||||
expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('text')
|
||||
})
|
||||
|
||||
it('has an GDD text icon', () => {
|
||||
|
||||
@ -53,10 +53,9 @@
|
||||
:name="$t('form.amount')"
|
||||
:rules="{
|
||||
required: true,
|
||||
double: [2, $i18n.locale === 'de' ? ',' : '.'],
|
||||
between: [0.01, balance],
|
||||
gddSendAmount: [0.01, balance],
|
||||
}"
|
||||
v-slot="{ errors }"
|
||||
v-slot="{ errors, valid }"
|
||||
>
|
||||
<b-row>
|
||||
<b-col class="text-left p-3 p-sm-1">{{ $t('form.amount') }}</b-col>
|
||||
@ -77,10 +76,11 @@
|
||||
<b-form-input
|
||||
id="input-2"
|
||||
v-model="form.amount"
|
||||
type="number"
|
||||
:lang="$i18n.locale"
|
||||
type="text"
|
||||
v-focus="amountFocused"
|
||||
@focus="amountFocused = !amountFocused"
|
||||
@blur="normalizeAmount(valid)"
|
||||
:placeholder="$n(0.01)"
|
||||
step="0.01"
|
||||
style="font-size: xx-large; padding-left: 20px"
|
||||
></b-form-input>
|
||||
</b-input-group>
|
||||
@ -152,18 +152,21 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
amountFocused: false,
|
||||
form: {
|
||||
email: '',
|
||||
amount: '',
|
||||
memo: '',
|
||||
amountValue: 0.0,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.normalizeAmount()
|
||||
this.$emit('set-transaction', {
|
||||
email: this.form.email,
|
||||
amount: this.form.amount,
|
||||
amount: this.form.amountValue,
|
||||
memo: this.form.memo,
|
||||
})
|
||||
},
|
||||
@ -177,6 +180,12 @@ export default {
|
||||
this.form.email = data.email
|
||||
this.form.amount = data.amount
|
||||
},
|
||||
normalizeAmount(isValid) {
|
||||
this.amountFocused = !this.amountFocused
|
||||
if (!isValid) return
|
||||
this.form.amountValue = Number(this.form.amount.replace(',', '.'))
|
||||
this.form.amount = this.$n(this.form.amountValue, 'decimal')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -19,6 +19,7 @@ import StatsCard from '@/components/Cards/StatsCard.vue'
|
||||
import VueMoment from 'vue-moment'
|
||||
|
||||
import clickOutside from '@/directives/click-ouside.js'
|
||||
import { focus } from 'vue-focus'
|
||||
|
||||
global.localVue = createLocalVue()
|
||||
|
||||
@ -47,3 +48,4 @@ global.localVue.component(BaseHeader.name, BaseHeader)
|
||||
global.localVue.component(StatsCard.name, StatsCard)
|
||||
|
||||
global.localVue.directive('click-outside', clickOutside)
|
||||
global.localVue.directive('focus', focus)
|
||||
|
||||
@ -13342,6 +13342,13 @@ vue-flatpickr-component@^8.1.2:
|
||||
dependencies:
|
||||
flatpickr "^4.6.6"
|
||||
|
||||
vue-focus@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-focus/-/vue-focus-2.1.0.tgz#7a0337ce9074d5ef03d15a4b5b862cf45e5e04e3"
|
||||
integrity sha1-egM3zpB01e8D0VpLW4Ys9F5eBOM=
|
||||
dependencies:
|
||||
loose-envify "^1.2.0"
|
||||
|
||||
vue-functional-data-merge@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user