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

Merge pull request #1600 from gradido/1599-components-for-transactionlist-types

Browse Source 
1599 components for transactionlist types
This commit is contained in:
Alexander Friedland 2022-03-11 17:30:10 +01:00 committed by GitHub
commit 93e70c0aac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 321 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/DecayInformations/DecayInformation.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="decay-information-box">
<decay-information-before-startblock v-if="decay.start === null" />
<decay-information-decay-startblock
v-else-if="isStartBlock"
:amount="amount"
:decay="decay"
:typeId="typeId"
/>
<decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
</div>
</template>
<script>
import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
import DecayInformationDecayStartblock from '../DecayInformations/DecayInformation-DecayStartblock'
export default {
components: {
DecayInformationLong,
DecayInformationBeforeStartblock,
DecayInformationDecayStartblock,
},
props: {
amount: {
type: String,
required: true,
},
decay: {
type: Object,
required: true,
},
typeId: {
type: String,
required: true,
},
decayStartBlock: {
type: Date,
required: true,
},
},
computed: {
isStartBlock() {
return new Date(this.decay.start).getTime() === this.decayStartBlock.getTime()
},
},
}
</script>

21
frontend/src/components/GddTransactionList.spec.js
View File

@ -256,7 +256,7 @@ describe('GddTransactionList', () => {
it('shows the date of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
'Mon Feb 28 2022 13:55:47 GMT+0000 (Coordinated Universal Time)',
'Mon Feb 28 2022 13:55:47',
)
})
@ -286,18 +286,23 @@ describe('GddTransactionList', () => {
it('has a bi-gift icon', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-gift',
'gradido-global-color-accent',
'm-mb-1',
'font2em',
'b-icon',
'bi',
'gradido-global-color-accent',
])
})
it('has gradido-global-color-accent color', () => {
expect(transaction.findAll('svg').at(1).classes()).toContain(
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-gift',
'm-mb-1',
'font2em',
'b-icon',
'bi',
'gradido-global-color-accent',
)
])
})
// operators are renderd by GDD filter
@ -321,7 +326,7 @@ describe('GddTransactionList', () => {
it('shows the date of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
'Fri Feb 25 2022 07:29:26 GMT+0000 (Coordinated Universal Time)',
'Fri Feb 25 2022 07:29:26',
)
})
})
@ -348,11 +353,11 @@ describe('GddTransactionList', () => {
it('has gradido-global-color-accent color', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-arrow-right-circle',
'gradido-global-color-accent',
'm-mb-1',
'font2em',
'b-icon',
'bi',
'gradido-global-color-accent',
])
})
@ -383,7 +388,7 @@ describe('GddTransactionList', () => {
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)',
'Wed Feb 23 2022 10:55:30',
)
})
@ -400,6 +405,7 @@ describe('GddTransactionList', () => {
return {
amount: '3.14',
balanceDate: '2021-04-29T17:26:40+00:00',
decay: {},
memo: 'Kreiszahl PI',
linkedUser: {
firstName: 'Bibi',
@ -418,6 +424,7 @@ describe('GddTransactionList', () => {
transactions,
transactionCount: 42,
showPagination: true,
decayStartBlock: new Date(),
})
paginationButtons = wrapper.find('div.pagination-buttons')
})

4
frontend/src/components/GddTransactionList.vue
View File

@ -108,6 +108,10 @@ export default {
}
</script>
<style>
collaps-icon {
width: 95%;
position: absolute;
}
.el-table .cell {
padding-left: 0px;
padding-right: 0px;

44
frontend/src/components/TransactionRows/AmountAndNameRow.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="amount-and-name-row">
<b-row>
<b-col cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-amount">
{{ amount | GDD }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{ itemText }}
</div>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'AmountAndNameRow',
props: {
amount: {
type: String,
required: true,
},
linkedUser: {
type: Object,
required: false,
},
text: {
type: String,
required: false,
},
},
computed: {
itemText() {
return this.linkedUser
? this.linkedUser.firstName + ' ' + this.linkedUser.lastName
: this.text
},
},
}
</script>

19
frontend/src/components/TransactionRows/CollapseIcon.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="collapse-icon">
<b-icon
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
:class="visible ? 'text-black' : 'text-muted'"
/>
</div>
</template>
<script>
export default {
name: 'CollapseIcon',
props: {
visible: {
type: Boolean,
required: true,
},
},
}
</script>

26
frontend/src/components/TransactionRows/DateRow.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="date-row">
<b-row>
<b-col cols="5">
<div class="text-right">{{ $t('form.date') }}</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-date">
{{ $d(new Date(balanceDate), 'long') }}
{{ $i18n.locale === 'de' ? 'Uhr' : '' }}
</div>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'DateRow',
props: {
balanceDate: {
type: String,
required: true,
},
},
}
</script>

31
frontend/src/components/TransactionRows/DecayRow.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="decay-row">
<b-row v-if="decay">
<b-col cols="5">
<div class="text-right">
<b-icon icon="droplet-half" height="15" class="mb-1" />
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-decay">
<decay-information-short decaytyp="short" :decay="decay" />
</div>
</b-col>
</b-row>
</div>
</template>
<script>
import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
export default {
name: 'DecayRow',
components: {
DecayInformationShort,
},
props: {
decay: {
type: Object,
required: false,
},
},
}
</script>

23
frontend/src/components/TransactionRows/MemoRow.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div class="memo-row">
<b-row>
<b-col cols="5">
<div class="text-right">{{ $t('form.memo') }}</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-message">{{ memo }}</div>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'MemoRow',
props: {
memo: {
type: String,
required: false,
},
},
}
</script>

22
frontend/src/components/TransactionRows/TypeIcon.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div class="type-icon">
<div class="gdd-transaction-list-item-icon">
<b-icon :icon="icon" :class="color" class="m-mb-1 font2em" />
</div>
</div>
</template>
<script>
export default {
name: 'TypeIcon',
props: {
icon: {
type: String,
required: true,
},
color: {
type: String,
required: true,
},
},
}
</script>

95
frontend/src/components/Transactions/TransactionCreation.vue
View File

@ -2,105 +2,60 @@
<div class="transaction-slot-creation">
<div @click="visible = !visible">
<!-- Collaps Icon -->
<div class="text-right gradido-width-95-absolute">
<b-icon
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
:class="visible ? 'text-black' : 'text-muted'"
/>
</div>
<collapse-icon class="text-right" :visible="visible" />
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<div class="gdd-transaction-list-item-icon">
<b-icon icon="gift" class="gradido-global-color-accent m-mb-1 font2em" />
</div>
<type-icon color="gradido-global-color-accent" icon="gift" />
</b-col>
<b-col cols="11">
<!-- Betrag / Name Email -->
<b-row>
<b-col cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-amount">
{{ amount | GDD }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{ linkedUser.firstName + ' ' + linkedUser.lastName }}
</div>
</b-col>
</b-row>
<!-- Amount / Name || Text -->
<amount-and-name-row :amount="amount" :linkedUser="linkedUser" />
<!-- Nachricht Memo -->
<b-row>
<b-col cols="5">
<div class="text-right">{{ $t('form.memo') }}</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-message">{{ memo }}</div>
</b-col>
</b-row>
<memo-row :memo="memo" />
<!-- Datum -->
<b-row>
<b-col cols="5">
<div class="text-right">{{ $t('form.date') }}</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-date">
{{ $d(new Date(balanceDate), 'long') }}
{{ $i18n.locale === 'de' ? 'Uhr' : '' }}
</div>
</b-col>
</b-row>
<date-row :balanceDate="balanceDate" />
<!-- Decay -->
<b-row v-if="decay">
<b-col cols="5">
<div class="text-right">
<b-icon icon="droplet-half" height="15" class="mb-1" />
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-decay">
<decay-information-short decaytyp="short" :decay="decay" />
</div>
</b-col>
</b-row>
<decay-row :decay="decay" />
</b-col>
</b-row>
</div>
<b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
<decay-information-before-startblock v-if="decay.start === null" />
<decay-information-decay-startblock
v-else-if="isStartBlock"
:amount="amount"
:decay="decay"
<decay-information
:typeId="typeId"
:decay="decay"
:amount="amount"
:decayStartBlock="decayStartBlock"
/>
<decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
</b-collapse>
</div>
</div>
</template>
<script>
import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
import DecayInformationDecayStartblock from '../DecayInformations/DecayInformation-DecayStartblock'
import CollapseIcon from '../TransactionRows/CollapseIcon'
import TypeIcon from '../TransactionRows/TypeIcon'
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
import MemoRow from '../TransactionRows/MemoRow'
import DateRow from '../TransactionRows/DateRow'
import DecayRow from '../TransactionRows/DecayRow'
import DecayInformation from '../DecayInformations/DecayInformation'
export default {
name: 'slot-creation',
components: {
DecayInformationShort,
DecayInformationLong,
DecayInformationBeforeStartblock,
DecayInformationDecayStartblock,
CollapseIcon,
TypeIcon,
AmountAndNameRow,
MemoRow,
DateRow,
DecayRow,
DecayInformation,
},
props: {
amount: {

47
frontend/src/components/Transactions/TransactionDecay.vue
View File

@ -2,38 +2,20 @@
<div class="transaction-slot-decay">
<div @click="visible = !visible">
<!-- Collaps Icon -->
<div class="text-right gradido-width-95-absolute">
<b-icon
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
:class="visible ? 'text-black' : 'text-muted'"
/>
</div>
<collapse-icon class="text-right" :visible="visible" />
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<div class="gdd-transaction-list-item-icon">
<b-icon icon="droplet-half" class="gradido-global-color-gray m-mb-1 font2em" />
</div>
<type-icon color="gradido-global-color-gray" icon="droplet-half" />
</b-col>
<b-col cols="11">
<!-- Betrag / Name Email -->
<b-row>
<b-col cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-amount">
{{ amount | GDD }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{ $t('decay.decay_since_last_transaction') }}
</div>
</b-col>
</b-row>
<!-- Amount / Name || Text -->
<amount-and-name-row
:amount="amount"
:text="$t('decay.decay_since_last_transaction')"
/>
</b-col>
</b-row>
</div>
@ -45,11 +27,17 @@
</div>
</template>
<script>
import CollapseIcon from '../TransactionRows/CollapseIcon'
import TypeIcon from '../TransactionRows/TypeIcon'
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
export default {
name: 'slot-decay',
components: {
CollapseIcon,
TypeIcon,
AmountAndNameRow,
DecayInformationDecay,
},
props: {
@ -59,18 +47,9 @@ export default {
balance: {
type: String,
},
balanceDate: {
type: String,
},
decay: {
type: Object,
},
id: {
type: Number,
},
typeId: {
type: String,
},
},
data() {
return {

97
frontend/src/components/Transactions/TransactionReceive.vue
View File

@ -2,108 +2,61 @@
<div class="transaction-slot-receive">
<div @click="visible = !visible">
<!-- Collaps Icon -->
<div class="text-right gradido-width-95-absolute">
<b-icon
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
:class="visible ? 'text-black' : 'text-muted'"
/>
</div>
<collapse-icon class="text-right" :visible="visible" />
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<div class="gdd-transaction-list-item-icon">
<b-icon
icon="arrow-right-circle"
class="gradido-global-color-accent m-mb-1 font2em"
/>
</div>
<type-icon color="gradido-global-color-accent" icon="arrow-right-circle" />
</b-col>
<b-col cols="11">
<!-- Betrag / Name Email -->
<b-row>
<b-col cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-amount">
{{ amount | GDD }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{ linkedUser.firstName + ' ' + linkedUser.lastName }}
</div>
</b-col>
</b-row>
<!-- Amount / Name || Text -->
<amount-and-name-row :amount="amount" :linkedUser="linkedUser" />
<!-- Nachricht Memo -->
<b-row>
<b-col cols="5">
<div class="text-right">{{ $t('form.memo') }}</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-message">{{ memo }}</div>
</b-col>
</b-row>
<memo-row :memo="memo" />
<!-- Datum -->
<b-row>
<b-col cols="5">
<div class="text-right">{{ $t('form.date') }}</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-date">
{{ $d(new Date(balanceDate), 'long') }}
{{ $i18n.locale === 'de' ? 'Uhr' : '' }}
</div>
</b-col>
</b-row>
<date-row :balanceDate="balanceDate" />
<!-- Decay -->
<b-row v-if="decay">
<b-col cols="5">
<div class="text-right">
<b-icon icon="droplet-half" height="15" class="mb-1" />
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-decay">
<decay-information-short decaytyp="short" :decay="decay" />
</div>
</b-col>
</b-row>
<decay-row :decay="decay" />
</b-col>
</b-row>
</div>
<b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
<decay-information-before-startblock v-if="decay.start === null" />
<decay-information-decay-startblock
v-else-if="isStartBlock"
:amount="amount"
:decay="decay"
<decay-information
:typeId="typeId"
:decay="decay"
:amount="amount"
:decayStartBlock="decayStartBlock"
/>
<decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
</b-collapse>
</div>
</div>
</template>
<script>
import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
import DecayInformationDecayStartblock from '../DecayInformations/DecayInformation-DecayStartblock'
import CollapseIcon from '../TransactionRows/CollapseIcon'
import TypeIcon from '../TransactionRows/TypeIcon'
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
import MemoRow from '../TransactionRows/MemoRow'
import DateRow from '../TransactionRows/DateRow'
import DecayRow from '../TransactionRows/DecayRow'
import DecayInformation from '../DecayInformations/DecayInformation'
export default {
name: 'slot-receive',
components: {
DecayInformationShort,
DecayInformationLong,
DecayInformationBeforeStartblock,
DecayInformationDecayStartblock,
CollapseIcon,
TypeIcon,
AmountAndNameRow,
MemoRow,
DateRow,
DecayRow,
DecayInformation,
},
props: {
amount: {

102
frontend/src/components/Transactions/TransactionSend.vue
View File

@ -2,104 +2,61 @@
<div class="transaction-slot-send">
<div @click="visible = !visible">
<!-- Collaps Icon -->
<div class="text-right gradido-width-95-absolute">
<b-icon
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
:class="visible ? 'text-black' : 'text-muted'"
/>
</div>
<collapse-icon class="text-right" :visible="visible" />
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<div class="gdd-transaction-list-item-icon">
<b-icon icon="arrow-left-circle" class="text-danger m-mb-1 font2em" />
</div>
<type-icon color="text-danger" icon="arrow-left-circle" />
</b-col>
<b-col cols="11">
<!-- Betrag / Name Email -->
<b-row>
<b-col cols="5">
<div class="text-right">
<span class="gdd-transaction-list-item-amount">
{{ amount | GDD }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{ linkedUser.firstName + ' ' + linkedUser.lastName }}
</div>
</b-col>
</b-row>
<!-- Amount / Name -->
<amount-and-name-row :amount="amount" :linkedUser="linkedUser" />
<!-- Nachricht Memo -->
<b-row>
<b-col cols="5">
<div class="text-right">{{ $t('form.memo') }}</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-message">{{ memo }}</div>
</b-col>
</b-row>
<!-- Memo -->
<memo-row :memo="memo" />
<!-- Datum -->
<b-row>
<b-col cols="5">
<div class="text-right">{{ $t('form.date') }}</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-date">
{{ $d(new Date(balanceDate), 'long') }}
{{ $i18n.locale === 'de' ? 'Uhr' : '' }}
</div>
</b-col>
</b-row>
<date-row :balanceDate="balanceDate" />
<!-- Decay -->
<b-row v-if="decay">
<b-col cols="5">
<div class="text-right">
<b-icon icon="droplet-half" height="15" class="mb-1" />
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-decay">
<decay-information-short decaytyp="short" :decay="decay" />
</div>
</b-col>
</b-row>
<decay-row :decay="decay" />
</b-col>
</b-row>
</div>
<b-collapse :class="visible ? 'bg-secondary' : ''" class="pb-4 pt-5" v-model="visible">
<decay-information-before-startblock v-if="decay.start === null" />
<decay-information-decay-startblock
v-else-if="isStartBlock"
:amount="amount"
:decay="decay"
<decay-information
:typeId="typeId"
:decay="decay"
:amount="amount"
:decayStartBlock="decayStartBlock"
/>
<decay-information-long v-else :amount="amount" :decay="decay" :typeId="typeId" />
</b-collapse>
</div>
</div>
</template>
<script>
import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
import DecayInformationDecayStartblock from '../DecayInformations/DecayInformation-DecayStartblock'
import CollapseIcon from '../TransactionRows/CollapseIcon'
import TypeIcon from '../TransactionRows/TypeIcon'
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
import MemoRow from '../TransactionRows/MemoRow'
import DateRow from '../TransactionRows/DateRow'
import DecayRow from '../TransactionRows/DecayRow'
import DecayInformation from '../DecayInformations/DecayInformation'
export default {
name: 'slot-send',
components: {
DecayInformationShort,
DecayInformationLong,
DecayInformationBeforeStartblock,
DecayInformationDecayStartblock,
CollapseIcon,
TypeIcon,
AmountAndNameRow,
MemoRow,
DateRow,
DecayRow,
DecayInformation,
},
props: {
amount: {
@ -133,10 +90,5 @@ export default {
visible: false,
}
},
computed: {
isStartBlock() {
return new Date(this.decay.start).getTime() === this.decayStartBlock.getTime()
},
},
}
</script>