interim status of the revised transaction list

This commit is contained in:
ogerly 2022-03-01 21:33:02 +01:00
parent da9fccb78f
commit ae75ba7487
7 changed files with 715 additions and 261 deletions

View File

@ -5,6 +5,20 @@
</span> </span>
<div v-if="decaytyp === 'new' || decaytyp === 'decayLastTransaction'"> <div v-if="decaytyp === 'new' || decaytyp === 'decayLastTransaction'">
<!-- if decay.start === null - Wenn kein decay angegeben dan ist es die erste Transaktion -->
<div v-if="decay.start === null" class="mt-3 mb-3 text-center">
<b>{{ $t('decay.first_transaction') }}</b>
</div>
<!-- if balanceDate < decayStartBlock - Wenn die transaktion vor dem einführen der dacay function liegt. -->
<div
v-else-if="new Date(balanceDate).getTime() < new Date(decayStartBlock).getTime()"
class="mt-3 mb-3 text-center"
>
<b>{{ $t('decay.befor_startblock_transaction') }}</b>
</div>
<div v-else>
<div class="d-flex"> <div class="d-flex">
<div style="width: 100%" class="text-center pb-3"> <div style="width: 100%" class="text-center pb-3">
<b-icon icon="droplet-half" height="12" class="mb-2" /> <b-icon icon="droplet-half" height="12" class="mb-2" />
@ -34,7 +48,9 @@
<b-col cols="6"> <b-col cols="6">
<span v-if="duration"> <span v-if="duration">
<span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span> <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.months > 0">
{{ duration.months }} {{ $t('decay.months') }},
</span>
<span v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</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.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</span>
<span v-if="duration.minutes > 0"> <span v-if="duration.minutes > 0">
@ -105,6 +121,7 @@
</b-row> </b-row>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
@ -112,6 +129,8 @@ export default {
props: { props: {
amount: { type: String, default: '0' }, amount: { type: String, default: '0' },
typeId: { type: String, default: '' }, typeId: { type: String, default: '' },
balanceDate: { type: String },
decayStartBlock: { type: String },
decay: { decay: {
decay: '', decay: '',
start: 0, start: 0,

View File

@ -0,0 +1,147 @@
<template>
<div>
<div @click="visible = !visible">
{{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
{{ memo }}, {{ properties }}
<!-- Collaps Icon -->
<div class="text-right" style="width: 95%; position: absolute">
<b-icon
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
:class="visible ? 'text-black' : 'text-muted'"
/>
</div>
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<div class="gdd-transaction-list-item-icon">
<b-icon :icon="properties.icon" :class="properties.class" />
</div>
</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-operator">
{{ properties.operator }}
</span>
<span class="gdd-transaction-list-item-amount">
{{ $n(amount, 'decimal') }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{
typeId !== 'DECAY'
? linkedUser.firstName + ' ' + linkedUser.lastName
: $t('decay.decay_since_last_transaction')
}}
</div>
</b-col>
</b-row>
<!-- 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>
<!-- Datum -->
<b-row v-if="typeId !== 'DECAY'">
<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>
<!-- Decay -->
<b-row v-if="decay">
<b-col cols="5">
<div class="text-right">
<b-icon v-if="typeId != 'DECAY'" icon="droplet-half" height="15" class="mb-1" />
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-decay">
<decay-information v-if="decay" decaytyp="short" :decay="decay" />
</div>
</b-col>
</b-row>
</b-col>
</b-row>
</div>
<b-collapse class="pb-4" v-model="visible">
<decay-information
decaytyp="new"
:amount="amount"
:decay="decay"
:typeId="typeId"
:balanceDate="balanceDate"
/>
</b-collapse>
</div>
</div>
</template>
<script>
import DecayInformation from '../DecayInformation'
export default {
name: 'slot-creation',
components: {
DecayInformation,
},
props: {
amount: {
type: String,
},
balance: {
type: String,
},
balanceDate: {
type: String,
},
decay: {
type: Object,
},
id: {
type: Number,
},
linkedUser: {
type: Object,
},
memo: {
type: String,
},
typeId: {
type: String,
},
properties: {
type: Object,
},
getCollapseState: {
type: Boolean,
},
decayStartBlock: { type: Date },
},
data() {
return {
visible: false,
}
},
}
</script>

View File

@ -0,0 +1,116 @@
<template>
<div>
<div @click="visible = !visible">
<!-- Collaps Icon -->
<div class="text-right" style="width: 95%; position: absolute">
<b-icon
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
:class="visible ? 'text-black' : 'text-muted'"
/>
</div>
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<div class="gdd-transaction-list-item-icon">
<b-icon :icon="properties.icon" :class="properties.class" />
</div>
</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">
{{ $n(amount, 'decimal') }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{
typeId !== 'DECAY'
? linkedUser.firstName + ' ' + linkedUser.lastName
: $t('decay.decay_since_last_transaction')
}}
</div>
</b-col>
</b-row>
</b-col>
</b-row>
</div>
<b-collapse class="pb-4 pt-5" v-model="visible">
<div class="d-flex">
<div style="width: 100%" class="text-center pb-3">
<b-icon icon="droplet-half" height="12" class="mb-2" />
<b>{{ $t('decay.calculation_decay') }}</b>
</div>
</div>
<b-row>
<b-col cols="6" class="text-right">
<div>{{ $t('decay.decay') }}</div>
</b-col>
<b-col cols="6">
<div>
{{ Number(balance) + Number(decay.decay) * -1 }} :::: {{ Number(decay.decay) }} :::::
{{ $n(Number(balance) + Number(decay.decay) * -1, 'decimal') }}
GDD - {{ $n(Number(decay.decay) * -1, 'decimal') }} GDD =
<b>{{ $n(Number(balance), 'decimal') }} GDD</b>
</div>
</b-col>
</b-row>
<hr />
{{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
{{ memo }}, {{ properties }},, {{ visible }}
</b-collapse>
</div>
</div>
</template>
<script>
// import DecayInformation from '../DecayInformation'
export default {
name: 'slot-decay',
components: {
// DecayInformation,
},
props: {
amount: {
type: String,
},
balance: {
type: String,
},
balanceDate: {
type: String,
},
decay: {
type: Object,
},
id: {
type: Number,
},
linkedUser: {
type: Object,
},
memo: {
type: String,
},
typeId: {
type: String,
},
properties: {
type: Object,
},
},
data() {
return {
visible: false,
}
},
}
</script>

View File

@ -0,0 +1,147 @@
<template>
<div>
<div @click="visible = !visible">
<!-- Collaps Icon -->
<div class="text-right" style="width: 95%; position: absolute">
<b-icon
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
:class="visible ? 'text-black' : 'text-muted'"
/>
</div>
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<div class="gdd-transaction-list-item-icon">
<b-icon :icon="properties.icon" :class="properties.class" />
</div>
</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-operator">
{{ properties.operator }}
</span>
<span class="gdd-transaction-list-item-amount">
{{ $n(amount, 'decimal') }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{
typeId !== 'DECAY'
? linkedUser.firstName + ' ' + linkedUser.lastName
: $t('decay.decay_since_last_transaction')
}}
</div>
</b-col>
</b-row>
<!-- 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>
<!-- Datum -->
<b-row v-if="typeId !== 'DECAY'">
<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>
<!-- Decay -->
<b-row v-if="decay">
<b-col cols="5">
<div class="text-right">
<b-icon v-if="typeId != 'DECAY'" icon="droplet-half" height="15" class="mb-1" />
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-decay">
<decay-information v-if="decay" decaytyp="short" :decay="decay" />
</div>
</b-col>
</b-row>
</b-col>
</b-row>
</div>
<b-collapse class="pb-4" v-model="visible">
<decay-information
decaytyp="new"
:amount="amount"
:decay="decay"
:typeId="typeId"
:balanceDate="balanceDate"
/>
<hr />
{{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
{{ memo }}, {{ properties }}
</b-collapse>
</div>
</div>
</template>
<script>
import DecayInformation from '../DecayInformation'
export default {
name: 'slot-receive',
components: {
DecayInformation,
},
props: {
amount: {
type: String,
},
balance: {
type: String,
},
balanceDate: {
type: String,
},
decay: {
type: Object,
},
id: {
type: Number,
},
linkedUser: {
type: Object,
},
memo: {
type: String,
},
typeId: {
type: String,
},
properties: {
type: Object,
},
getCollapseState: {
type: Boolean,
},
decayStartBlock: { type: Date },
},
data() {
return {
visible: false,
}
},
}
</script>

View File

@ -0,0 +1,147 @@
<template>
<div>
<div @click="visible = !visible">
<!-- Collaps Icon -->
<div class="text-right" style="width: 95%; position: absolute">
<b-icon
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
:class="visible ? 'text-black' : 'text-muted'"
/>
</div>
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<div class="gdd-transaction-list-item-icon">
<b-icon :icon="properties.icon" :class="properties.class" />
</div>
</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-operator">
{{ properties.operator }}
</span>
<span class="gdd-transaction-list-item-amount">
{{ $n(amount, 'decimal') }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{
typeId !== 'DECAY'
? linkedUser.firstName + ' ' + linkedUser.lastName
: $t('decay.decay_since_last_transaction')
}}
</div>
</b-col>
</b-row>
<!-- 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>
<!-- Datum -->
<b-row v-if="typeId !== 'DECAY'">
<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>
<!-- Decay -->
<b-row v-if="decay">
<b-col cols="5">
<div class="text-right">
<b-icon v-if="typeId != 'DECAY'" icon="droplet-half" height="15" class="mb-1" />
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-decay">
<decay-information v-if="decay" decaytyp="short" :decay="decay" />
</div>
</b-col>
</b-row>
</b-col>
</b-row>
</div>
<b-collapse class="pb-4" v-model="visible">
<decay-information
decaytyp="new"
:amount="amount"
:decay="decay"
:typeId="typeId"
:balanceDate="balanceDate"
/>
<hr />
{{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
{{ memo }}, {{ properties }}
</b-collapse>
</div>
</div>
</template>
<script>
import DecayInformation from '../DecayInformation'
export default {
name: 'slot-send',
components: {
DecayInformation,
},
props: {
amount: {
type: String,
},
balance: {
type: String,
},
balanceDate: {
type: String,
},
decay: {
type: Object,
},
id: {
type: Number,
},
linkedUser: {
type: Object,
},
memo: {
type: String,
},
typeId: {
type: String,
},
properties: {
type: Object,
},
getCollapseState: {
type: Boolean,
},
decayStartBlock: { type: Date },
},
data() {
return {
visible: false,
}
},
}
</script>

View File

@ -63,6 +63,7 @@ export const transactionsQuery = gql`
id id
typeId typeId
amount amount
balance
balanceDate balanceDate
memo memo
linkedUser { linkedUser {

View File

@ -13,154 +13,38 @@
</div> </div>
<div <div
v-for="{ amount, balanceDate, decay, id, linkedUser, memo, typeId } in transactions" v-for="({ id, typeId }, index) in transactions"
:key="id" :key="id"
:style="typeId === 'DECAY' ? 'background-color:#f1e0ae3d' : ''" :style="typeId === 'DECAY' ? 'background-color:#f1e0ae3d' : ''"
> >
<div <transaction-decay
class="list-group-item gdd-transaction-list-item" class="list-group-item gdd-transaction-list-item"
:class="getCollapseState(id) ? 'bg-secondary' : ''" v-if="typeId === 'DECAY'"
v-b-toggle="'decay-' + id" v-bind="transactions[index]"
> :properties="getProperties(typeId)"
<!-- Collaps Icon -->
<div class="text-right" style="width: 95%; position: absolute">
<b-icon
:icon="getCollapseState(id) ? 'caret-up-square' : 'caret-down-square'"
:class="getCollapseState(id) ? 'text-black' : 'text-muted'"
/>
</div>
<!-- TransactionList Row-->
<div>
<b-row>
<!-- ICON -->
<b-col cols="1">
<div class="gdd-transaction-list-item-icon">
<b-icon :icon="getProperties(typeId).icon" :class="getProperties(typeId).class" />
</div>
</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-operator">
{{ getProperties(typeId).operator }}
</span>
<span class="gdd-transaction-list-item-amount">
{{ $n(amount, 'decimal') }}
</span>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-name">
{{
typeId !== 'DECAY'
? linkedUser.firstName + ' ' + linkedUser.lastName
: $t('decay.decay_since_last_transaction')
}}
</div>
</b-col>
</b-row>
<!-- Nachricht Memo -->
<b-row v-if="typeId !== 'DECAY'">
<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>
<!-- Datum -->
<b-row v-if="typeId !== 'DECAY'">
<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>
<!-- Decay -->
<b-row v-if="decay">
<b-col cols="5">
<div class="text-right">
<b-icon
v-if="typeId != 'DECAY'"
icon="droplet-half"
height="15"
class="mb-1"
/>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-decay">
<decay-information v-if="decay" decaytyp="short" :decay="decay" />
</div>
</b-col>
</b-row>
<!-- <b-row v-if="decay && decayStartBlock">
<b-col cols="5">
<div class="text-right">
<b-icon
v-if="typeId != 'decay'"
icon="droplet-half"
height="15"
class="mb-1"
/>
</div>
</b-col>
<b-col cols="7">
<div class="gdd-transaction-list-item-decay">
<b>{{ $t('decay.Starting_block_decay') }}</b>
</div>
</b-col>
</b-row> -->
</b-col>
</b-row>
</div>
<!-- Collaps Start -->
<b-collapse class="pb-4" :id="'decay-' + id">
<div class="pt-4 pb-4 bg-white border border-muted">
<decay-information
v-if="decay.start !== null"
decaytyp="new"
:amount="amount"
:decay="decay"
:typeId="typeId"
/> />
<!-- if decay.start === null - Wenn kein decay angegeben dan ist es die erste Transaktion--> <transaction-send
<div v-if="decay.start === null" class="mt-3 mb-3 text-center"> class="list-group-item gdd-transaction-list-item"
<b>{{ $t('decay.first_transaction') }}</b> v-if="typeId === 'SEND'"
</div> v-bind="transactions[index]"
:decayStartBlock="decayStartBlock"
<!-- if balanceDate < decayStartBlock - Wenn die transaktion vor dem einführen der dacay function liegt. --> :properties="getProperties(typeId)"
<div />
v-if="new Date(balanceDate).getTime() < new Date(decayStartBlock).getTime()" <transaction-receive
class="mt-3 mb-3 text-center" class="list-group-item gdd-transaction-list-item"
> v-if="typeId === 'RECEIVE'"
<b>{{ $t('decay.befor_startblock_transaction') }}</b> v-bind="transactions[index]"
</div> :decayStartBlock="decayStartBlock"
:properties="getProperties(typeId)"
<div v-if="typeId === 'DECAY'" class="mt-3 mb-3"> />
<decay-information <transaction-creation
decaytyp="decayLastTransaction" class="list-group-item gdd-transaction-list-item"
:amount="amount" v-if="typeId === 'CREATION'"
:decay="decay" v-bind="transactions[index]"
:typeId="typeId" :decayStartBlock="decayStartBlock"
:properties="getProperties(typeId)"
/> />
</div>
</div>
</b-collapse>
<!-- Collaps End -->
</div> </div>
</div> </div>
<pagination-buttons <pagination-buttons
@ -173,12 +57,14 @@
<span>{{ $t('transaction.nullTransactions') }}</span> <span>{{ $t('transaction.nullTransactions') }}</span>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import PaginationButtons from '../../../components/PaginationButtons' import PaginationButtons from '../../../components/PaginationButtons'
import DecayInformation from '../../../components/DecayInformation' import TransactionDecay from '../../../components/transaction-slots/TransactionDecay'
import TransactionSend from '../../../components/transaction-slots/TransactionSend'
import TransactionReceive from '../../../components/transaction-slots/TransactionReceive'
import TransactionCreation from '../../../components/transaction-slots/TransactionCreation'
const iconsByType = { const iconsByType = {
SEND: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '' }, SEND: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '' },
@ -191,7 +77,10 @@ export default {
name: 'gdd-transaction-list', name: 'gdd-transaction-list',
components: { components: {
PaginationButtons, PaginationButtons,
DecayInformation, TransactionDecay,
TransactionSend,
TransactionReceive,
TransactionCreation,
}, },
data() { data() {
return { return {
@ -228,18 +117,6 @@ export default {
throwError(msg) { throwError(msg) {
throw new Error(msg) throw new Error(msg)
}, },
getCollapseState(id) {
return this.collapseStatus.includes('decay-' + id)
},
},
mounted() {
this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
if (isJustShown) {
this.collapseStatus.push(collapseId)
} else {
this.collapseStatus = this.collapseStatus.filter((id) => id !== collapseId)
}
})
}, },
watch: { watch: {
currentPage() { currentPage() {