mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
add components CollapsIcon, TypeIcon, AmountAndName, Memo, Date
This commit is contained in:
ogerly
parent
d5ff360b18
commit
0ca944e40a
34
frontend/src/components/TransactionRows/AmountAndName.vue
Normal file
34
frontend/src/components/TransactionRows/AmountAndName.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="amount-and-name">
|
||||
<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 ? linkedUser.firstName + ' ' + linkedUser.lastName : text }}
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'AmountAndName',
|
||||
props: {
|
||||
amount: {
|
||||
type: Number,
|
||||
},
|
||||
linkedUser: {
|
||||
type: Object,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
25
frontend/src/components/TransactionRows/Date.vue
Normal file
25
frontend/src/components/TransactionRows/Date.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="transaction-rows-date">
|
||||
<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: 'Transaction-Rows-Date',
|
||||
props: {
|
||||
balanceDate: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
22
frontend/src/components/TransactionRows/Memo.vue
Normal file
22
frontend/src/components/TransactionRows/Memo.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Memo',
|
||||
props: {
|
||||
memo: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
20
frontend/src/components/TransactionRows/TypeIcon.vue
Normal file
20
frontend/src/components/TransactionRows/TypeIcon.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<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: 'Type-Icon',
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -2,56 +2,24 @@
|
||||
<div class="transaction-slot-creation">
|
||||
<div @click="visible = !visible">
|
||||
<!-- Collaps Icon -->
|
||||
<collaps-icon class="text-right" :visible="visible" />
|
||||
<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 :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="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 :balanceDate="balanceDate" />
|
||||
|
||||
<!-- Decay -->
|
||||
<b-row v-if="decay">
|
||||
@ -84,7 +52,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CollapsIcon from '../TransactionRows/CollapsIcon'
|
||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||
import TypeIcon from '../TransactionRows/TypeIcon'
|
||||
import AmountAndName from '../TransactionRows/AmountAndName.vue'
|
||||
import Memo from '../TransactionRows/Memo.vue'
|
||||
import Date from '../TransactionRows/Date.vue'
|
||||
import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
|
||||
import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
|
||||
import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
|
||||
@ -93,7 +65,11 @@ import DecayInformationDecayStartblock from '../DecayInformations/DecayInformati
|
||||
export default {
|
||||
name: 'slot-creation',
|
||||
components: {
|
||||
CollapsIcon,
|
||||
CollapseIcon,
|
||||
TypeIcon,
|
||||
AmountAndName,
|
||||
Memo,
|
||||
Date,
|
||||
DecayInformationShort,
|
||||
DecayInformationLong,
|
||||
DecayInformationBeforeStartblock,
|
||||
|
||||
@ -2,33 +2,18 @@
|
||||
<div class="transaction-slot-decay">
|
||||
<div @click="visible = !visible">
|
||||
<!-- Collaps Icon -->
|
||||
<collaps-icon class="text-right" :visible="visible" />
|
||||
<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 :amount="amount" :text="$t('decay.decay_since_last_transaction')" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
@ -40,13 +25,17 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CollapsIcon from '../TransactionRows/CollapsIcon'
|
||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||
import TypeIcon from '../TransactionRows/TypeIcon'
|
||||
import AmountAndName from '../TransactionRows/AmountAndName.vue'
|
||||
import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
|
||||
|
||||
export default {
|
||||
name: 'slot-decay',
|
||||
components: {
|
||||
CollapsIcon,
|
||||
CollapseIcon,
|
||||
TypeIcon,
|
||||
AmountAndName,
|
||||
DecayInformationDecay,
|
||||
},
|
||||
props: {
|
||||
@ -56,18 +45,9 @@ export default {
|
||||
balance: {
|
||||
type: String,
|
||||
},
|
||||
balanceDate: {
|
||||
type: String,
|
||||
},
|
||||
decay: {
|
||||
type: Object,
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
},
|
||||
typeId: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -2,59 +2,24 @@
|
||||
<div class="transaction-slot-receive">
|
||||
<div @click="visible = !visible">
|
||||
<!-- Collaps Icon -->
|
||||
<collaps-icon class="text-right" :visible="visible" />
|
||||
<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 :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="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 :balanceDate="balanceDate" />
|
||||
|
||||
<!-- Decay -->
|
||||
<b-row v-if="decay">
|
||||
@ -87,7 +52,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CollapsIcon from '../TransactionRows/CollapsIcon'
|
||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||
import TypeIcon from '../TransactionRows/TypeIcon'
|
||||
import AmountAndName from '../TransactionRows/AmountAndName.vue'
|
||||
import Memo from '../TransactionRows/Memo.vue'
|
||||
import Date from '../TransactionRows/Date.vue'
|
||||
import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
|
||||
import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
|
||||
import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
|
||||
@ -96,7 +65,11 @@ import DecayInformationDecayStartblock from '../DecayInformations/DecayInformati
|
||||
export default {
|
||||
name: 'slot-receive',
|
||||
components: {
|
||||
CollapsIcon,
|
||||
CollapseIcon,
|
||||
TypeIcon,
|
||||
AmountAndName,
|
||||
Memo,
|
||||
Date,
|
||||
DecayInformationShort,
|
||||
DecayInformationLong,
|
||||
DecayInformationBeforeStartblock,
|
||||
|
||||
@ -2,56 +2,24 @@
|
||||
<div class="transaction-slot-send">
|
||||
<div @click="visible = !visible">
|
||||
<!-- Collaps Icon -->
|
||||
<collaps-icon class="text-right" :visible="visible" />
|
||||
<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 :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 :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 :balanceDate="balanceDate" />
|
||||
|
||||
<!-- Decay -->
|
||||
<b-row v-if="decay">
|
||||
@ -84,7 +52,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CollapsIcon from '../TransactionRows/CollapsIcon'
|
||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||
import TypeIcon from '../TransactionRows/TypeIcon'
|
||||
import AmountAndName from '../TransactionRows/AmountAndName.vue'
|
||||
import Memo from '../TransactionRows/Memo.vue'
|
||||
import Date from '../TransactionRows/Date.vue'
|
||||
import DecayInformationShort from '../DecayInformations/DecayInformation-Short'
|
||||
import DecayInformationLong from '../DecayInformations/DecayInformation-Long'
|
||||
import DecayInformationBeforeStartblock from '../DecayInformations/DecayInformation-BeforeStartblock'
|
||||
@ -92,7 +64,11 @@ import DecayInformationDecayStartblock from '../DecayInformations/DecayInformati
|
||||
export default {
|
||||
name: 'slot-send',
|
||||
components: {
|
||||
CollapsIcon,
|
||||
CollapseIcon,
|
||||
TypeIcon,
|
||||
AmountAndName,
|
||||
Memo,
|
||||
Date,
|
||||
DecayInformationShort,
|
||||
DecayInformationLong,
|
||||
DecayInformationBeforeStartblock,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user