mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
gdt transaction with arrays and without slots
This commit is contained in:
ogerly
parent
c9337bf939
commit
9503c2a49a
134
frontend/src/components/Transaction.vue
Normal file
134
frontend/src/components/Transaction.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="list-group">
|
||||
<div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
|
||||
<!-- Icon -->
|
||||
<div class="text-right" style="position: absolute">
|
||||
<b-icon
|
||||
v-if="gdtEntryType"
|
||||
:icon="getLinesByType(gdtEntryType).icon"
|
||||
:class="getLinesByType(gdtEntryType).iconclasses"
|
||||
></b-icon>
|
||||
</div>
|
||||
|
||||
<!-- Collaps Button -->
|
||||
<div class="text-right" style="width: 96%; position: absolute">
|
||||
<b-button class="btn-sm">
|
||||
<b>i</b>
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<!-- type -->
|
||||
|
||||
<b-row>
|
||||
<div class="col-6 text-right">
|
||||
{{ getLinesByType(gdtEntryType).description }}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
{{ getLinesByType(gdtEntryType).descriptiontext }}
|
||||
</div>
|
||||
</b-row>
|
||||
|
||||
<!-- credit -->
|
||||
<b-row>
|
||||
<div class="col-6 text-right">
|
||||
{{ $t('gdt.credit') }}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
{{ getLinesByType(gdtEntryType).credittext }}
|
||||
</div>
|
||||
</b-row>
|
||||
|
||||
<!-- Nachricht-->
|
||||
<b-row v-if="comment && gdtEntryType !== 7">
|
||||
<div class="col-6 text-right">
|
||||
{{ $t('form.memo') }}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
{{ comment }}
|
||||
</div>
|
||||
</b-row>
|
||||
|
||||
<!-- Datum-->
|
||||
<b-row class="gdt-list-row text-header">
|
||||
<div class="col-6 text-right">
|
||||
{{ $t('form.date') }}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
{{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
|
||||
</div>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<b-collapse :id="'a' + date + ''" class="pb-4">
|
||||
<transaction-collaps
|
||||
:amount="amount"
|
||||
:gdtEntryType="gdtEntryType"
|
||||
:factor="factor"
|
||||
:gdt="gdt"
|
||||
></transaction-collaps>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TransactionCollaps from '../components/TransactionCollaps.vue'
|
||||
|
||||
export default {
|
||||
name: 'Transaction',
|
||||
components: {
|
||||
TransactionCollaps,
|
||||
},
|
||||
props: {
|
||||
amount: { type: Number, default: 0 },
|
||||
date: {
|
||||
type: Date,
|
||||
default: function () {
|
||||
return new Date()
|
||||
},
|
||||
},
|
||||
comment: { type: String, default: '' },
|
||||
gdtEntryType: { type: Number, default: 0 },
|
||||
factor: { type: Number, default: 0 },
|
||||
gdt: { type: Number, default: 0 },
|
||||
},
|
||||
methods: {
|
||||
getLinesByType(givenType) {
|
||||
const linesByType = {
|
||||
1: {
|
||||
icon: 'heart',
|
||||
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
|
||||
description: 'Beitrag',
|
||||
descriptiontext: this.$n(this.amount, 'decimal') + ' €',
|
||||
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
|
||||
},
|
||||
4: {
|
||||
icon: 'person-check',
|
||||
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
|
||||
description: 'Geworbenes Mitglied',
|
||||
descriptiontext: '5%',
|
||||
credittext: this.$n(this.amount, 'decimal') + ' GDT',
|
||||
},
|
||||
7: {
|
||||
icon: 'gift',
|
||||
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
|
||||
description: 'Aktion',
|
||||
descriptiontext: this.comment,
|
||||
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
|
||||
},
|
||||
}
|
||||
|
||||
const type = linesByType[givenType]
|
||||
|
||||
if (type)
|
||||
return {
|
||||
icon: type.icon,
|
||||
iconclasses: type.iconclasses,
|
||||
description: type.description,
|
||||
descriptiontext: type.descriptiontext,
|
||||
credittext: type.credittext,
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
78
frontend/src/components/TransactionCollaps.vue
Normal file
78
frontend/src/components/TransactionCollaps.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-row class="gdt-list-clooaps-header-text text-center pb-3">
|
||||
<div class="col h4">
|
||||
{{ getLinesByType(gdtEntryType).headline }}
|
||||
</div>
|
||||
</b-row>
|
||||
<b-row class="gdt-list-clooaps-box--all">
|
||||
<div class="col-6 text-right clooaps-col-left">
|
||||
<div>{{ getLinesByType(gdtEntryType).first }}</div>
|
||||
<div>{{ getLinesByType(gdtEntryType).second }}</div>
|
||||
</div>
|
||||
<div class="col-6 clooaps-col-right">
|
||||
<div>{{ getLinesByType(gdtEntryType).firstMath }}</div>
|
||||
<div>
|
||||
{{ getLinesByType(gdtEntryType).secondMath }}
|
||||
</div>
|
||||
</div>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TransactionCollaps',
|
||||
props: {
|
||||
amount: { type: Number, default: 0 },
|
||||
gdtEntryType: { type: Number, default: 0 },
|
||||
factor: { type: Number, default: 0 },
|
||||
gdt: { type: Number, default: 0 },
|
||||
},
|
||||
methods: {
|
||||
getLinesByType(givenType) {
|
||||
const linesByType = {
|
||||
1: {
|
||||
headline: this.$t('gdt.calculation'),
|
||||
first: this.$t('gdt.factor'),
|
||||
firstMath: this.factor + ' GDT pro €',
|
||||
second: this.$t('gdt.formula'),
|
||||
secondMath:
|
||||
this.$n(this.amount, 'decimal') +
|
||||
' € * ' +
|
||||
this.factor +
|
||||
' GDT / € = ' +
|
||||
this.$n(this.gdt, 'decimal') +
|
||||
' GDT',
|
||||
},
|
||||
4: {
|
||||
headline: this.$t('gdt.publisher'),
|
||||
},
|
||||
7: {
|
||||
headline: this.$t('gdt.conversion-gdt-euro'),
|
||||
first: this.$t('gdt.raise'),
|
||||
firstMath: this.factor * 100 + ' % ',
|
||||
second: this.$t('gdt.conversion'),
|
||||
secondMath:
|
||||
this.$n(this.amount, 'decimal') +
|
||||
' GDT * ' +
|
||||
this.factor * 100 +
|
||||
'% = ' +
|
||||
this.$n(this.gdt, 'decimal') +
|
||||
' GDT',
|
||||
},
|
||||
}
|
||||
|
||||
const type = linesByType[givenType]
|
||||
|
||||
if (type)
|
||||
return {
|
||||
headline: type.headline,
|
||||
first: type.first,
|
||||
firstMath: type.firstMath,
|
||||
second: type.second,
|
||||
secondMath: type.secondMath,
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="list-group">
|
||||
<div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
|
||||
<!-- Icon -->
|
||||
<div class="text-right" style="position: absolute">
|
||||
ICON
|
||||
<b-icon
|
||||
v-if="gdtEntryType"
|
||||
:icon="getIcon(gdtEntryType).icon"
|
||||
:class="getIcon(gdtEntryType).class"
|
||||
></b-icon>
|
||||
</div>
|
||||
|
||||
<!-- Collaps Button -->
|
||||
<div class="text-right" style="width: 96%; position: absolute">
|
||||
<b-button class="btn-sm">
|
||||
<b>i</b>
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<!-- Betrag -->
|
||||
|
||||
<b-row>
|
||||
<div class="col-6 text-right">
|
||||
text1Betrag
|
||||
<!-- <div>{{ $t('gdt.your-share') }}</div>
|
||||
<div>{{ $t('gdt.credit') }}</div> -->
|
||||
</div>
|
||||
<div class="col-6">
|
||||
text1Betrag
|
||||
<!-- <div><slot name="your-share"></slot></div>
|
||||
<div><slot name="credit"></slot></div> -->
|
||||
</div>
|
||||
</b-row>
|
||||
|
||||
<!-- Betrag ENDE-->
|
||||
|
||||
<!-- Nachricht-->
|
||||
<b-row v-if="comment">
|
||||
<div class="col-6 text-right">
|
||||
text2Memo
|
||||
<!-- {{ $t('form.memo') }} -->
|
||||
</div>
|
||||
<div class="col-6">
|
||||
text2Memo
|
||||
<slot name="memo"></slot>
|
||||
</div>
|
||||
</b-row>
|
||||
|
||||
<!-- Datum-->
|
||||
<b-row class="gdt-list-row text-header">
|
||||
<div class="col-6 text-right">
|
||||
text3Date
|
||||
<!-- {{ $t('form.date') }} -->
|
||||
</div>
|
||||
<div class="col-6">
|
||||
text3Data
|
||||
<!-- <slot name="date"></slot> -->
|
||||
</div>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<b-collapse :id="'a' + date + ''" class="pb-4">
|
||||
<b-row class="gdt-list-clooaps-header-text text-center pb-3">
|
||||
<div class="col h4"><!--{{ $t('gdt.publisher') }}--> CollapsData</div>
|
||||
</b-row>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
const iconsByType = {
|
||||
1: { icon: 'heart', classes: 'gradido-global-color-accent' },
|
||||
4: { icon: 'person-check', classes: 'gradido-global-color-accent' },
|
||||
7: { icon: 'gift', classes: 'gradido-global-color-accent' },
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date: {
|
||||
type: Date,
|
||||
default: function () {
|
||||
return new Date()
|
||||
},
|
||||
},
|
||||
comment: { type: String, default: '' },
|
||||
gdtEntryType: { type: Number, default: '' },
|
||||
},
|
||||
methods: {
|
||||
getIcon(givenType) {
|
||||
const type = iconsByType[givenType]
|
||||
if (type)
|
||||
return {
|
||||
icon: type.icon,
|
||||
class: type.classes + ' m-mb-1 font2em',
|
||||
}
|
||||
this.throwError('no icon to given type: ' + givenType)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -17,135 +17,14 @@
|
||||
} in transactionsGdt"
|
||||
:key="transactionId"
|
||||
>
|
||||
<transaktion :date="date" :comment="comment" :gdtEntryType="gdtEntryType"> </transaktion>
|
||||
<div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
|
||||
<!-- Icon -->
|
||||
<div class="text-right" style="position: absolute">
|
||||
<b-icon
|
||||
v-if="gdtEntryType"
|
||||
:icon="getIcon(gdtEntryType).icon"
|
||||
:class="getIcon(gdtEntryType).class"
|
||||
></b-icon>
|
||||
</div>
|
||||
|
||||
<!-- Collaps Button -->
|
||||
<div class="text-right" style="width: 96%; position: absolute">
|
||||
<b-button class="btn-sm">
|
||||
<b>i</b>
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<!-- Betrag -->
|
||||
|
||||
<!-- 7 nur GDT erhalten -->
|
||||
<b-row v-if="gdtEntryType === 7">
|
||||
<div class="col-6 text-right">
|
||||
<div>{{ $t('gdt.gdt-receive') }}</div>
|
||||
<div>{{ $t('gdt.credit') }}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div>{{ comment }}</div>
|
||||
<div>{{ $n(gdt, 'decimal') }} GDT</div>
|
||||
</div>
|
||||
</b-row>
|
||||
<!--4 publisher -->
|
||||
<b-row v-else-if="gdtEntryType === 4">
|
||||
<div class="col-6 text-right">
|
||||
<div>{{ $t('gdt.your-share') }}</div>
|
||||
<div>{{ $t('gdt.credit') }}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div>5%</div>
|
||||
<div>{{ $n(amount, 'decimal') }} GDT</div>
|
||||
</div>
|
||||
</b-row>
|
||||
<!-- 1, 2, 3, 5, 6 spenden in euro -->
|
||||
<b-row v-else>
|
||||
<div class="col-6 text-right">
|
||||
<div>{{ $t('gdt.contribution') }}</div>
|
||||
<div>{{ $t('gdt.credit') }}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div>{{ $n(amount, 'decimal') }} €</div>
|
||||
<div>{{ $n(gdt, 'decimal') }} GDT</div>
|
||||
</div>
|
||||
</b-row>
|
||||
|
||||
<!-- Betrag ENDE-->
|
||||
|
||||
<!-- Nachricht-->
|
||||
<b-row v-if="comment && gdtEntryType !== 7">
|
||||
<div class="col-6 text-right">
|
||||
{{ $t('form.memo') }}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
{{ comment }}
|
||||
</div>
|
||||
</b-row>
|
||||
|
||||
<!-- Datum-->
|
||||
<b-row v-if="date" class="gdt-list-row text-header">
|
||||
<div class="col-6 text-right">
|
||||
{{ $t('form.date') }}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
{{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
|
||||
</div>
|
||||
</b-row>
|
||||
</div>
|
||||
|
||||
<!-- Collaps START -->
|
||||
|
||||
<b-collapse v-if="gdtEntryType" :id="'a' + date + ''" class="pb-4">
|
||||
<div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
|
||||
<!-- Überschrift -->
|
||||
<b-row class="gdt-list-clooaps-header-text text-center pb-3">
|
||||
<div class="col h4" v-if="gdtEntryType === 7">
|
||||
{{ $t('gdt.conversion-gdt-euro') }}
|
||||
</div>
|
||||
<div class="col h4" v-else-if="gdtEntryType === 4">
|
||||
{{ $t('gdt.publisher') }}
|
||||
</div>
|
||||
<div class="col h4" v-else>{{ $t('gdt.calculation') }}</div>
|
||||
</b-row>
|
||||
|
||||
<!-- 7 nur GDT erhalten -->
|
||||
<b-row class="gdt-list-clooaps-box-7" v-if="gdtEntryType == 7">
|
||||
<div class="col-6 text-right clooaps-col-left">
|
||||
<div>{{ $t('gdt.raise') }}</div>
|
||||
<div>{{ $t('gdt.conversion') }}</div>
|
||||
</div>
|
||||
<div class="col-6 clooaps-col-right">
|
||||
<div>{{ factor * 100 }} %</div>
|
||||
<div>
|
||||
{{ $n(amount, 'decimal') }} GDT * {{ factor * 100 }} % =
|
||||
{{ $n(gdt, 'decimal') }} GDT
|
||||
</div>
|
||||
</div>
|
||||
</b-row>
|
||||
<!-- 4 publisher -->
|
||||
<b-row class="gdt-list-clooaps-box-4" v-else-if="gdtEntryType === 4">
|
||||
<div class="col-6 text-right clooaps-col-left"></div>
|
||||
<div class="col-6 clooaps-col-right"></div>
|
||||
</b-row>
|
||||
|
||||
<!-- 1, 2, 3, 5, 6 spenden in euro -->
|
||||
<b-row class="gdt-list-clooaps-box--all" v-else>
|
||||
<div class="col-6 text-right clooaps-col-left">
|
||||
<div>{{ $t('gdt.factor') }}</div>
|
||||
<div>{{ $t('gdt.formula') }}</div>
|
||||
</div>
|
||||
<div class="col-6 clooaps-col-right">
|
||||
<div>{{ factor }} GDT pro €</div>
|
||||
<div>
|
||||
{{ $n(amount, 'decimal') }} € * {{ factor }} GDT / € =
|
||||
{{ $n(gdt, 'decimal') }} GDT
|
||||
</div>
|
||||
</div>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-collapse>
|
||||
<!-- Collaps ENDE -->
|
||||
<transaction
|
||||
:amount="amount"
|
||||
:date="date"
|
||||
:comment="comment"
|
||||
:gdtEntryType="gdtEntryType"
|
||||
:factor="factor"
|
||||
:gdt="gdt"
|
||||
></transaction>
|
||||
</div>
|
||||
</div>
|
||||
<pagination-buttons
|
||||
@ -163,19 +42,13 @@
|
||||
<script>
|
||||
import { listGDTEntriesQuery } from '../../../graphql/queries'
|
||||
import PaginationButtons from '../../../components/PaginationButtons'
|
||||
import Transaktion from '../../../components/Transaktion.vue'
|
||||
|
||||
const iconsByType = {
|
||||
1: { icon: 'heart', classes: 'gradido-global-color-accent' },
|
||||
4: { icon: 'person-check', classes: 'gradido-global-color-accent' },
|
||||
7: { icon: 'gift', classes: 'gradido-global-color-accent' },
|
||||
}
|
||||
import Transaction from '../../../components/Transaction.vue'
|
||||
|
||||
export default {
|
||||
name: 'gdt-transaction-list',
|
||||
components: {
|
||||
PaginationButtons,
|
||||
Transaktion,
|
||||
Transaction,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -218,15 +91,7 @@ export default {
|
||||
this.$toasted.error(error.message)
|
||||
})
|
||||
},
|
||||
getIcon(givenType) {
|
||||
const type = iconsByType[givenType]
|
||||
if (type)
|
||||
return {
|
||||
icon: type.icon,
|
||||
class: type.classes + ' m-mb-1 font2em',
|
||||
}
|
||||
this.throwError('no icon to given type: ' + givenType)
|
||||
},
|
||||
|
||||
throwError(msg) {
|
||||
throw new Error(msg)
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user