mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Merge pull request #1809 from gradido/1731-Fix-Startblock-Layouting
1731 style startDecayStartblock, style Adapted across pages
This commit is contained in:
Alexander Friedland
GitHub
commit
1576787e57
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="decayinformation-decay">
|
||||
<b-row>
|
||||
<b-col cols="1"></b-col>
|
||||
<b-col cols="11">
|
||||
<div class="d-flex">
|
||||
<div class="text-center pb-3 gradido-max-width">
|
||||
<b-col>
|
||||
<div class="text-center pb-3">
|
||||
<b-icon icon="droplet-half" class="mr-2" />
|
||||
<b>{{ $t('decay.calculation_decay') }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col offset="1" cols="11">
|
||||
<b-row>
|
||||
<b-col cols="5" class="text-right">
|
||||
<div>{{ $t('decay.decay') }}</div>
|
||||
|
||||
@ -1,11 +1,22 @@
|
||||
<template>
|
||||
<div class="decayinformation-startblock">
|
||||
<b-row>
|
||||
<b-col cols="12" class="text-center">
|
||||
<div>
|
||||
<div class="display-4">{{ $t('decay.Starting_block_decay') }}</div>
|
||||
<b-col cols="12">
|
||||
<div class="text-center pb-3">
|
||||
<b-icon icon="droplet-half" class="mr-2" />
|
||||
<b>{{ $t('decay.Starting_block_decay') }}</b>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col offset="1" cols="11">
|
||||
<b-row>
|
||||
<b-col cols="5">
|
||||
<div class="text-right">
|
||||
<div>{{ $t('decay.decay_introduced') }}</div>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="5">
|
||||
<div>
|
||||
<span v-if="decay.start">
|
||||
{{ $d(new Date(decay.start), 'long') }}
|
||||
@ -13,41 +24,55 @@
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<duration-row :decayStart="decay.start" :decayEnd="decay.end" />
|
||||
|
||||
<!-- Decay-->
|
||||
<b-row>
|
||||
<b-col cols="6" class="text-right">{{ $t('decay.decay') }}</b-col>
|
||||
<b-col cols="6">{{ decay.decay | GDD }}</b-col>
|
||||
<b-col cols="5" class="text-right">{{ $t('decay.decay') }}</b-col>
|
||||
<b-col cols="7">{{ decay.decay | GDD }}</b-col>
|
||||
</b-row>
|
||||
<hr class="mt-2 mb-2" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr class="mt-3 mb-3" />
|
||||
|
||||
<b-row>
|
||||
<b-col class="text-center pt-3 pb-2">
|
||||
<b-col class="text-center pb-3">
|
||||
<b>{{ $t('decay.calculation_total') }}</b>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<!-- Type-->
|
||||
<b-row>
|
||||
<b-col offset="1" cols="11">
|
||||
<b-row>
|
||||
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
|
||||
<b-col cols="6" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</b-col>
|
||||
<b-col cols="6">{{ amount | GDD }}</b-col>
|
||||
<b-col cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</b-col>
|
||||
<b-col cols="7">{{ amount | GDD }}</b-col>
|
||||
</b-row>
|
||||
<!-- Decay-->
|
||||
<b-row>
|
||||
<b-col cols="6" class="text-right">{{ $t('decay.decay') }}</b-col>
|
||||
<b-col cols="6">{{ decay.decay | GDD }}</b-col>
|
||||
<b-col cols="5" class="text-right">{{ $t('decay.decay') }}</b-col>
|
||||
<b-col cols="7">{{ decay.decay | GDD }}</b-col>
|
||||
</b-row>
|
||||
<!-- Total-->
|
||||
<b-row>
|
||||
<b-col cols="6" class="text-right">{{ $t('decay.total') }}</b-col>
|
||||
<b-col cols="6">
|
||||
<b-col cols="5" class="text-right">{{ $t('decay.total') }}</b-col>
|
||||
<b-col cols="7">
|
||||
<b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DurationRow from '@/components/TransactionRows/DurationRow.vue'
|
||||
|
||||
export default {
|
||||
name: 'DecayInformation-StartBlock',
|
||||
components: {
|
||||
DurationRow,
|
||||
},
|
||||
props: {
|
||||
balanceDate: { type: String },
|
||||
amount: {
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<template>
|
||||
<div class="decayinformation-long">
|
||||
<b-row>
|
||||
<b-col cols="1"></b-col>
|
||||
<b-col cols="11">
|
||||
<div class="d-flex">
|
||||
<div class="text-center pb-3 gradido-max-width">
|
||||
<b-col>
|
||||
<div>
|
||||
<div class="text-center pb-3">
|
||||
<b-icon icon="droplet-half" class="mr-2" />
|
||||
<b>{{ $t('decay.calculation_decay') }}</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col offset="1" cols="11">
|
||||
<b-row>
|
||||
<b-col cols="5" class="text-right">
|
||||
<div>{{ $t('decay.last_transaction') }}</div>
|
||||
@ -22,14 +24,7 @@
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="5" class="text-right">
|
||||
<div>{{ $t('decay.past_time') }}</div>
|
||||
</b-col>
|
||||
<b-col cols="7">
|
||||
<span v-if="duration">{{ durationText }}</span>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<duration-row :decayStart="decay.start" :decayEnd="decay.end" />
|
||||
|
||||
<!-- Decay-->
|
||||
<b-row>
|
||||
@ -38,13 +33,17 @@
|
||||
</b-col>
|
||||
<b-col cols="7">{{ decay.decay | GDD }}</b-col>
|
||||
</b-row>
|
||||
<hr class="mt-2 mb-2" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr class="mt-3 mb-3" />
|
||||
<b-row>
|
||||
<b-col class="text-center pt-3 pb-2">
|
||||
<b-col class="text-center pb-3">
|
||||
<b>{{ $t('decay.calculation_total') }}</b>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<!-- Type-->
|
||||
<b-row>
|
||||
<b-col offset="1" cols="11">
|
||||
<b-row>
|
||||
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
|
||||
<b-col cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</b-col>
|
||||
@ -69,8 +68,13 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DurationRow from '@/components/TransactionRows/DurationRow.vue'
|
||||
|
||||
export default {
|
||||
name: 'DecayInformation-Long',
|
||||
components: {
|
||||
DurationRow,
|
||||
},
|
||||
props: {
|
||||
amount: { type: String, default: '0' },
|
||||
typeId: { type: String, default: '' },
|
||||
@ -78,22 +82,5 @@ export default {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
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) {
|
||||
// eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys
|
||||
const locale = this.$t(`time.${timeSpan}`)
|
||||
result.push(`${this.duration[timeSpan]} ${locale}`)
|
||||
}
|
||||
})
|
||||
return result.join(', ')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -23,7 +23,7 @@ describe('GddTransactionList', () => {
|
||||
return mount(GddTransactionList, { localVue, mocks })
|
||||
}
|
||||
|
||||
const decayStartBlock = new Date(2001, 8, 9)
|
||||
const decayStartBlock = new Date('2021-05-13 17:46:31-0000')
|
||||
|
||||
describe('mount', () => {
|
||||
beforeEach(() => {
|
||||
@ -413,12 +413,16 @@ describe('GddTransactionList', () => {
|
||||
return {
|
||||
amount: '3.14',
|
||||
balanceDate: '2021-04-29T17:26:40+00:00',
|
||||
decay: {},
|
||||
decay: {
|
||||
decay: '-477.01',
|
||||
start: '2021-05-13T17:46:31.000Z',
|
||||
end: '2022-04-20T06:51:25.000Z',
|
||||
duration: 29509494,
|
||||
},
|
||||
memo: 'Kreiszahl PI',
|
||||
linkedUser: {
|
||||
firstName: 'Bibi',
|
||||
lastName: 'Bloxberg',
|
||||
__typename: 'User',
|
||||
},
|
||||
id: idx + 1,
|
||||
typeId: 'RECEIVE',
|
||||
@ -435,6 +439,7 @@ describe('GddTransactionList', () => {
|
||||
describe('next page button clicked', () => {
|
||||
beforeEach(async () => {
|
||||
jest.clearAllMocks()
|
||||
// await wrapper.vm.$nextTick()
|
||||
await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('input', 2)
|
||||
})
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="gdt-transaction-collapse p-2 pt-4 pb-4 mb-4 gradido-no-border gradido-background-f1">
|
||||
<div class="gdt-transaction-collapse p-2 pt-4 pb-4 mb-4 gradido-no-border bg-secondary">
|
||||
<b-row class="gdt-list-collapse-header-text text-center pb-3">
|
||||
<b-col class="collapse-headline">
|
||||
<b>{{ getLinesByType.headline }}</b>
|
||||
|
||||
44
frontend/src/components/TransactionRows/DurationRow.vue
Normal file
44
frontend/src/components/TransactionRows/DurationRow.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="duration-row">
|
||||
<b-row>
|
||||
<b-col cols="5" class="text-right">
|
||||
<div>{{ $t('decay.past_time') }}</div>
|
||||
</b-col>
|
||||
<b-col cols="7">
|
||||
<span v-if="duration">{{ durationText }}</span>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'DurationRow',
|
||||
props: {
|
||||
decayStart: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
decayEnd: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
duration() {
|
||||
return this.$moment.duration(new Date(this.decayEnd) - new Date(this.decayStart))._data
|
||||
},
|
||||
durationText() {
|
||||
const order = ['years', 'months', 'days', 'hours', 'minutes', 'seconds']
|
||||
const result = []
|
||||
order.forEach((timeSpan) => {
|
||||
if (this.duration[timeSpan] > 0) {
|
||||
// eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys
|
||||
const locale = this.$t(`time.${timeSpan}`)
|
||||
result.push(`${this.duration[timeSpan]} ${locale}`)
|
||||
}
|
||||
})
|
||||
return result.join(', ')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -20,7 +20,7 @@
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<b-collapse class="pb-4 pt-5" v-model="visible">
|
||||
<b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
|
||||
<decay-information-decay
|
||||
:balance="balance"
|
||||
:decay="decay.decay"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user