Merge pull request #1576 from gradido/use-filter-to-display-amounts

feat: Use Vue Filter to Display Gradido Amounts
This commit is contained in:
Moriz Wahl 2022-03-09 10:50:46 +01:00 committed by GitHub
commit 7ddfeed97d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 125 additions and 115 deletions

View File

@ -13,9 +13,9 @@
</b-col>
<b-col cols="6">
<div>
{{ $n(Number(balance) - Number(decay.decay), 'decimal') }}
GDD {{ $n(Number(decay.decay) * -1, 'decimal') }} GDD =
<b>{{ $n(Number(balance), 'decimal') }} GDD</b>
{{ (Number(balance) - Number(decay.decay)) | GDD }}
{{ decay.decay | GDD }} =
<b>{{ balance | GDD }}</b>
</div>
</b-col>
</b-row>

View File

@ -17,12 +17,8 @@
<!-- Decay-->
<b-row>
<b-col cols="6" class="text-right">
<div>{{ $t('decay.decay') }}</div>
</b-col>
<b-col cols="6">
<div> {{ $n(decay.decay * -1, 'decimal') }}</div>
</b-col>
<b-col cols="6" class="text-right">{{ $t('decay.decay') }}</b-col>
<b-col cols="6">{{ decay.decay | GDD }}</b-col>
</b-row>
<hr class="mt-2 mb-2" />
<b-row>
@ -32,39 +28,19 @@
</b-row>
<!-- Type-->
<b-row>
<b-col cols="6" class="text-right">
<div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
<div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
</b-col>
<b-col cols="6">
<div v-if="typeId === 'SEND'"> {{ $n(amount * -1, 'decimal') }}</div>
<div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
</b-col>
<b-col cols="6" class="text-right">{{ $t(`decay.${typeId.toLowerCase()}`) }}</b-col>
<b-col cols="6">{{ amount | GDD }}</b-col>
</b-row>
<!-- Decay-->
<b-row>
<b-col cols="6" class="text-right">
<div>{{ $t('decay.decay') }}</div>
</b-col>
<b-col cols="6">
<div> {{ $n(decay.decay * -1, 'decimal') }}</div>
</b-col>
<b-col cols="6" class="text-right">{{ $t('decay.decay') }}</b-col>
<b-col cols="6">{{ decay.decay | GDD }}</b-col>
</b-row>
<!-- Total-->
<b-row>
<b-col cols="6" class="text-right">
<div>{{ $t('decay.total') }}</div>
</b-col>
<b-col cols="6" class="text-right">{{ $t('decay.total') }}</b-col>
<b-col cols="6">
<div v-if="typeId === 'SEND'">
<b> {{ $n((Number(amount) + Number(decay.decay)) * -1, 'decimal') }}</b>
</div>
<div v-if="typeId === 'RECEIVE'">
<b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
</div>
<div v-if="typeId === 'CREATION'">
<b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
</div>
<b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b>
</b-col>
</b-row>
</div>

View File

@ -25,14 +25,7 @@
<div>{{ $t('decay.past_time') }}</div>
</b-col>
<b-col cols="6">
<span v-if="duration">
<span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span>
<span v-if="duration.months > 0">{{ duration.months }} {{ $t('decay.months') }},</span>
<span v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</span>
<span v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</span>
<span v-if="duration.minutes > 0">{{ duration.minutes }} {{ $t('decay.minutes') }},</span>
<span v-if="duration.seconds > 0">{{ duration.seconds }} {{ $t('decay.seconds') }}</span>
</span>
<span v-if="duration">{{ durationText }}</span>
</b-col>
</b-row>
@ -41,9 +34,7 @@
<b-col cols="6" class="text-right">
<div>{{ $t('decay.decay') }}</div>
</b-col>
<b-col cols="6">
<div> {{ $n(decay.decay * -1, 'decimal') }}</div>
</b-col>
<b-col cols="6">{{ decay.decay | GDD }}</b-col>
</b-row>
<hr class="mt-2 mb-2" />
<b-row>
@ -53,23 +44,13 @@
</b-row>
<!-- Type-->
<b-row>
<b-col cols="6" class="text-right">
<div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
<div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
</b-col>
<b-col cols="6">
<div v-if="typeId === 'SEND'"> {{ $n(amount * -1, 'decimal') }}</div>
<div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
</b-col>
<b-col cols="6" class="text-right">{{ $t(`decay.${typeId.toLowerCase()}`) }}</b-col>
<b-col cols="6">{{ amount | GDD }}</b-col>
</b-row>
<!-- Decay-->
<b-row>
<b-col cols="6" class="text-right">
<div>{{ $t('decay.decay') }}</div>
</b-col>
<b-col cols="6">
<div> {{ $n(decay.decay * -1, 'decimal') }}</div>
</b-col>
<b-col cols="6" class="text-right">{{ $t('decay.decay') }}</b-col>
<b-col cols="6">{{ decay.decay | GDD }}</b-col>
</b-row>
<!-- Total-->
<b-row>
@ -77,15 +58,7 @@
<div>{{ $t('decay.total') }}</div>
</b-col>
<b-col cols="6">
<div v-if="typeId === 'SEND'">
<b> {{ $n((Number(amount) + Number(decay.decay)) * -1, 'decimal') }}</b>
</div>
<div v-if="typeId === 'RECEIVE'">
<b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
</div>
<div v-if="typeId === 'CREATION'">
<b>{{ $n(Number(amount) + Number(decay.decay), 'decimal') }}</b>
</div>
<b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b>
</b-col>
</b-row>
</div>
@ -104,6 +77,17 @@ export default {
duration() {
return this.$moment.duration(new Date(this.decay.end) - new Date(this.decay.start))._data
},
durationText() {
const order = ['years', 'months', 'days', 'hours', 'minutes', 'seconds']
const result = []
order.forEach((timeSpan) => {
if (this.duration[timeSpan] > 0) {
const locale = this.$t(`decay.${timeSpan}`)
result.push(`${this.duration[timeSpan]} ${locale}`)
}
})
return result.join(', ')
},
},
}
</script>

View File

@ -1,6 +1,6 @@
<template>
<div class="decayinformation-short">
<span> {{ decay ? $n(Number(decay.decay) * -1, 'decimal') : '' }}</span>
<span v-if="decay.decay">{{ decay.decay | amount }}</span>
</div>
</template>
<script>

View File

@ -88,6 +88,7 @@ describe('GddTransactionList', () => {
describe('with transactions', () => {
beforeEach(async () => {
const decayStartBlock = new Date(2001, 8, 9)
await wrapper.setProps({
transactions: [
{
@ -103,9 +104,7 @@ describe('GddTransactionList', () => {
start: '2022-02-28T13:55:47.000Z',
end: '2022-03-03T08:54:54.020Z',
duration: 241147.02,
__typename: 'Decay',
},
__typename: 'Transaction',
},
{
id: 9,
@ -117,16 +116,13 @@ describe('GddTransactionList', () => {
linkedUser: {
firstName: 'Bibi',
lastName: 'Bloxberg',
__typename: 'User',
},
decay: {
decay: '-0.2038314055482643084',
start: '2022-02-25T07:29:26.000Z',
end: '2022-02-28T13:55:47.000Z',
duration: 282381,
__typename: 'Decay',
},
__typename: 'Transaction',
},
{
id: 8,
@ -138,16 +134,13 @@ describe('GddTransactionList', () => {
linkedUser: {
firstName: 'Gradido',
lastName: 'Akademie',
__typename: 'User',
},
decay: {
decay: '-0.03517768386652623868',
start: '2022-02-23T10:55:30.000Z',
end: '2022-02-25T07:29:26.000Z',
duration: 160436,
__typename: 'Decay',
},
__typename: 'Transaction',
},
{
id: 6,
@ -159,24 +152,22 @@ describe('GddTransactionList', () => {
linkedUser: {
firstName: 'Bibi',
lastName: 'Bloxberg',
__typename: 'User',
},
decay: {
decay: '0',
start: null,
end: null,
duration: null,
__typename: 'Decay',
},
__typename: 'Transaction',
},
],
count: 12,
decayStartBlock,
})
})
it('renders 4 transactions', () => {
expect(wrapper.findAll('div.list-group-item')).toHaveLength(3)
expect(wrapper.findAll('div.list-group-item')).toHaveLength(4)
})
describe('decay transactions', () => {
@ -238,11 +229,12 @@ describe('GddTransactionList', () => {
expect(transaction.findAll('svg').at(1).classes()).toContain('text-danger')
})
// it('has a minus operator', () => {
// expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
// '-',
// )
// })
// operators are renderd by GDD filter
it.skip('has a minus operator', () => {
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
'-',
)
})
it('shows the amount of transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
@ -270,7 +262,7 @@ describe('GddTransactionList', () => {
it('shows the decay calculation', () => {
expect(transaction.findAll('div.gdd-transaction-list-item-decay').at(0).text()).toContain(
' 0.20383140554826432',
' 0.2038314055482643084',
)
})
})
@ -293,7 +285,7 @@ describe('GddTransactionList', () => {
it('has a bi-gift icon', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-arrow-right-circle',
'bi-gift',
'gradido-global-color-accent',
'm-mb-1',
'font2em',
@ -308,7 +300,8 @@ describe('GddTransactionList', () => {
)
})
it('has a plus operator', () => {
// operators are renderd by GDD filter
it.skip('has a plus operator', () => {
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
'+',
)
@ -316,19 +309,19 @@ describe('GddTransactionList', () => {
it('shows the amount of transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
'10',
'1000',
)
})
it('shows the name of the receiver', () => {
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
'Bibi Bloxberg',
'Gradido Akademie',
)
})
it('shows the date of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
'Wed Feb 23 2022 10:55:30 GMT+0000 (Coordinated Universal Time)',
'Fri Feb 25 2022 07:29:26 GMT+0000 (Coordinated Universal Time)',
)
})
})
@ -336,7 +329,7 @@ describe('GddTransactionList', () => {
describe('receive transactions', () => {
let transaction
beforeEach(() => {
transaction = wrapper.findAll('div.list-group-item').at(2)
transaction = wrapper.findAll('div.list-group-item').at(3)
})
it('has a bi-caret-down-square icon', () => {
@ -363,7 +356,8 @@ describe('GddTransactionList', () => {
])
})
it('has a plus operator', () => {
// operators are renderd by GDD filter
it.skip('has a plus operator', () => {
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
'+',
)

View File

@ -21,7 +21,6 @@ const mocks = {
isAdmin: true,
},
},
$n: jest.fn((n) => n),
}
describe('Navbar', () => {

View File

@ -10,7 +10,7 @@
</div>
<b-navbar-nav class="ml-auto" is-nav>
<b-nav-item>{{ pending ? '—' : $n(balance, 'decimal') }} GDD</b-nav-item>
<b-nav-item>{{ pending ? '—' : balance | amount }} GDD</b-nav-item>
<b-nav-item to="/profile" right class="d-none d-sm-none d-md-none d-lg-flex shadow-lg">
<small>
{{ $store.state.firstName }} {{ $store.state.lastName }},

View File

@ -7,7 +7,6 @@ const mocks = {
$i18n: {
locale: 'en',
},
$n: jest.fn((n) => n),
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
}

View File

@ -23,9 +23,8 @@
<b-row>
<b-col cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-operator">+</span>
<span class="gdd-transaction-list-item-amount">
{{ $n(amount, 'decimal') }}
{{ amount | GDD }}
</span>
</div>
</b-col>

View File

@ -7,7 +7,6 @@ const mocks = {
$i18n: {
locale: 'en',
},
$n: jest.fn((n) => n),
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
}

View File

@ -23,9 +23,8 @@
<b-row>
<b-col cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-operator"></span>
<span class="gdd-transaction-list-item-amount">
{{ $n(Number(amount) * -1, 'decimal') }}
{{ amount | GDD }}
</span>
</div>
</b-col>

View File

@ -7,7 +7,6 @@ const mocks = {
$i18n: {
locale: 'en',
},
$n: jest.fn((n) => n),
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
}

View File

@ -26,9 +26,8 @@
<b-row>
<b-col cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-operator">+</span>
<span class="gdd-transaction-list-item-amount">
{{ $n(amount, 'decimal') }}
{{ amount | GDD }}
</span>
</div>
</b-col>

View File

@ -7,7 +7,6 @@ const mocks = {
$i18n: {
locale: 'en',
},
$n: jest.fn((n) => n),
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
}

View File

@ -23,9 +23,8 @@
<b-row>
<b-col cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-operator"></span>
<span class="gdd-transaction-list-item-amount">
{{ $n(Number(amount) * -1, 'decimal') }}
{{ amount | GDD }}
</span>
</div>
</b-col>
@ -79,7 +78,7 @@
<b-collapse class="pb-4 pt-5" v-model="visible">
<decay-information-before-startblock v-if="decay.start === null" />
<decay-information-decay-startblock
v-else-if="true"
v-else-if="isStartBlock"
:amount="amount"
:decay="decay"
:typeId="typeId"

View File

@ -0,0 +1,18 @@
let i18n
export const loadFilters = (_i18n) => {
i18n = _i18n
return { amount, GDD }
}
const amount = (value) => {
if (!value && value !== 0) return ''
return i18n.n(value.toString(), 'decimal').replace('-', ' ')
}
const GDD = (value) => {
value = amount(value)
if (value === '') return ''
if (!value.match(/^ /)) value = '+ ' + value
return value + ' GDD'
}

View File

@ -0,0 +1,37 @@
import { loadFilters } from './amount'
const i18nMock = {
n: jest.fn((n) => n),
}
const { amount, GDD } = loadFilters(i18nMock)
describe('amount filters', () => {
describe('amount', () => {
it('returns empty string when called with null', () => {
expect(amount(null)).toBe('')
})
it('returns 0 when called with 0', () => {
expect(amount(0)).toBe('0')
})
it('returns a leading proper minus sign when called with negative value', () => {
expect(amount(-1)).toBe(' 1')
})
})
describe('GDD', () => {
it('returns empty string when called with null', () => {
expect(GDD(null)).toBe('')
})
it('returns "+ 0 GDD" when called with 0', () => {
expect(GDD(0)).toBe('+ 0 GDD')
})
it('returns a leading proper minus sign when called with negative value', () => {
expect(GDD(-1)).toBe(' 1 GDD')
})
})
})

View File

@ -37,9 +37,9 @@
"months": "Monate",
"noDecay": "Keine Vergänglichkeit",
"past_time": "Vergangene Zeit",
"received": "Empfangen",
"receive": "Empfangen",
"seconds": "Sekunden",
"sent": "Gesendet",
"send": "Gesendet",
"since_introduction": "seit Einführung der Vergänglichkeit",
"Starting_block_decay": "Startblock Vergänglichkeit",
"toCommunity": "An die Gemeinschaft",

View File

@ -37,9 +37,9 @@
"months": "Months",
"noDecay": "No Decay",
"past_time": "Time passed",
"received": "Received",
"receive": "Received",
"seconds": "Seconds",
"sent": "Sent",
"send": "Sent",
"since_introduction": "Since the introduction of Decay",
"Starting_block_decay": "Starting Block Decay",
"toCommunity": "To the community",

View File

@ -4,6 +4,7 @@ import App from './App.vue'
import i18n from './i18n.js'
import { loadAllRules } from './validation-rules'
import { toasters } from './mixins/toaster'
import { loadFilters } from './filters/amount'
import 'regenerator-runtime'
@ -20,6 +21,9 @@ Vue.use(DashboardPlugin)
Vue.config.productionTip = false
Vue.mixin(toasters)
const filters = loadFilters(i18n)
Vue.filter('amount', filters.amount)
Vue.filter('GDD', filters.GDD)
loadAllRules(i18n)

View File

@ -17,7 +17,9 @@ import { focus } from 'vue-focus'
import { loadAllRules } from '../src/validation-rules'
import { toasters } from '../src/mixins/toaster'
import { loadFilters } from '@/filters/amount'
import { toasters } from '@/mixins/toaster'
export const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
export const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
@ -53,6 +55,10 @@ global.localVue.directive('focus', focus)
global.localVue.mixin(toasters)
const filters = loadFilters(i18nMock)
global.localVue.filter('amount', filters.amount)
global.localVue.filter('GDD', filters.GDD)
// Filter the warnings for portal vue
// https://github.com/BeniRupp/bug_portal-vue-target-already-exists
const consoleWarn = global.console.warn