mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
style transactions list, style plugins
This commit is contained in:
ogerly
parent
e9ba63d0ec
commit
f8e1514bb2
@ -56,4 +56,8 @@ export default {
|
|||||||
);
|
);
|
||||||
height: 13px;
|
height: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-color-gdd-yellow {
|
||||||
|
color: rgb(197 141 56);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -178,6 +178,9 @@ a:hover,
|
|||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.zindex1 {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
.zindex10 {
|
.zindex10 {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
@ -198,6 +201,13 @@ a:hover,
|
|||||||
z-index: 100000;
|
z-index: 100000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.opacity-1 {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.opacity-05 {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
.gradido-global-color-blue {
|
.gradido-global-color-blue {
|
||||||
color: #0e79bc;
|
color: #0e79bc;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,142 +1,155 @@
|
|||||||
<template>
|
<template>
|
||||||
<b-row class="transaction-form">
|
<b-row class="transaction-form">
|
||||||
<b-col xl="12" md="12" class="p-0">
|
<b-col xl="12" md="12" class="p-0">
|
||||||
<b-card class="p-0 m-0 gradido-custom-background">
|
<b-card class="p-0 m-0 appBoxShadow gradido-border-radius">
|
||||||
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
|
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
|
||||||
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
|
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col>
|
<b-col>
|
||||||
<b-form-radio
|
<b-row>
|
||||||
v-model="radioSelected"
|
<b-col cols="12">
|
||||||
name="radios"
|
<div v-if="radioSelected === sendTypes.send">
|
||||||
:value="sendTypes.send"
|
<validation-provider
|
||||||
size="lg"
|
name="Email"
|
||||||
>
|
:rules="{
|
||||||
{{ $t('send_gdd') }}
|
required: radioSelected === sendTypes.send ? true : false,
|
||||||
</b-form-radio>
|
email: true,
|
||||||
|
is_not: $store.state.email,
|
||||||
|
}"
|
||||||
|
v-slot="{ errors }"
|
||||||
|
>
|
||||||
|
<label class="input-1 mt-4" for="input-1">{{ $t('form.recipient') }}</label>
|
||||||
|
<b-input-group
|
||||||
|
id="input-group-1"
|
||||||
|
class="border border-default border-radius"
|
||||||
|
description="We'll never share your email with anyone else."
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
<b-input-group-prepend class="d-none d-md-block">
|
||||||
|
<b-icon icon="envelope" class="display-4 m-3"></b-icon>
|
||||||
|
</b-input-group-prepend>
|
||||||
|
<b-form-input
|
||||||
|
id="input-1"
|
||||||
|
v-model="form.email"
|
||||||
|
v-focus="emailFocused"
|
||||||
|
@focus="emailFocused = true"
|
||||||
|
@blur="normalizeEmail()"
|
||||||
|
type="email"
|
||||||
|
placeholder="E-Mail"
|
||||||
|
class="pl-3 gradido-font-large"
|
||||||
|
:disabled="isBalanceDisabled"
|
||||||
|
></b-form-input>
|
||||||
|
</b-input-group>
|
||||||
|
<b-col v-if="errors">
|
||||||
|
<span v-for="error in errors" :key="error" class="errors">
|
||||||
|
{{ error }}
|
||||||
|
</span>
|
||||||
|
</b-col>
|
||||||
|
</validation-provider>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="12">
|
||||||
|
<validation-provider
|
||||||
|
:name="$t('form.amount')"
|
||||||
|
:rules="{
|
||||||
|
required: true,
|
||||||
|
gddSendAmount: [0.01, balance],
|
||||||
|
}"
|
||||||
|
v-slot="{ errors, valid }"
|
||||||
|
>
|
||||||
|
<label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
|
||||||
|
<b-input-group
|
||||||
|
id="input-group-2"
|
||||||
|
class="border border-default border-radius"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
<b-input-group-prepend class="p-2 d-none d-md-block">
|
||||||
|
<div class="m-1 mt-2">{{ $t('GDD') }}</div>
|
||||||
|
</b-input-group-prepend>
|
||||||
|
|
||||||
|
<b-form-input
|
||||||
|
id="input-2"
|
||||||
|
v-model="form.amount"
|
||||||
|
type="text"
|
||||||
|
v-focus="amountFocused"
|
||||||
|
@focus="amountFocused = true"
|
||||||
|
@blur="normalizeAmount(valid)"
|
||||||
|
:placeholder="$n(0.01)"
|
||||||
|
class="pl-3 gradido-font-large"
|
||||||
|
:disabled="isBalanceDisabled"
|
||||||
|
></b-form-input>
|
||||||
|
</b-input-group>
|
||||||
|
<b-col v-if="errors">
|
||||||
|
<span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
|
||||||
|
</b-col>
|
||||||
|
</validation-provider>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col>
|
<b-col>
|
||||||
<b-form-radio
|
<div class="h3">Versandart</div>
|
||||||
v-model="radioSelected"
|
<b-form-radio-group v-model="radioSelected">
|
||||||
name="radios"
|
<b-row>
|
||||||
:value="sendTypes.link"
|
<b-col cols="9">Gdd versenden</b-col>
|
||||||
size="lg"
|
<b-col cols="3">
|
||||||
>
|
<b-form-radio
|
||||||
{{ $t('send_per_link') }}
|
name="shipping"
|
||||||
</b-form-radio>
|
size="lg"
|
||||||
|
:value="sendTypes.send"
|
||||||
|
stacked
|
||||||
|
></b-form-radio>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="9">Gdd versenden per Link</b-col>
|
||||||
|
<b-col cols="3">
|
||||||
|
<b-form-radio
|
||||||
|
name="shipping"
|
||||||
|
:value="sendTypes.link"
|
||||||
|
size="lg"
|
||||||
|
></b-form-radio>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<div class="mt-4" v-if="radioSelected === sendTypes.link">
|
||||||
|
<h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
|
||||||
|
<div>
|
||||||
|
{{ $t('gdd_per_link.choose-amount') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-form-radio-group>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<div class="mt-4" v-if="radioSelected === sendTypes.link">
|
|
||||||
<h2 class="alert-heading">{{ $t('gdd_per_link.header') }}</h2>
|
|
||||||
<div>
|
|
||||||
{{ $t('gdd_per_link.choose-amount') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="radioSelected === sendTypes.send">
|
<b-row>
|
||||||
<validation-provider
|
<b-col>
|
||||||
name="Email"
|
<validation-provider
|
||||||
:rules="{
|
:rules="{
|
||||||
required: radioSelected === sendTypes.send ? true : false,
|
required: true,
|
||||||
email: true,
|
min: 5,
|
||||||
is_not: $store.state.email,
|
max: 255,
|
||||||
}"
|
}"
|
||||||
v-slot="{ errors }"
|
:name="$t('form.message')"
|
||||||
>
|
v-slot="{ errors }"
|
||||||
<label class="input-1 mt-4" for="input-1">{{ $t('form.recipient') }}</label>
|
|
||||||
<b-input-group
|
|
||||||
id="input-group-1"
|
|
||||||
class="border border-default border-radius"
|
|
||||||
description="We'll never share your email with anyone else."
|
|
||||||
size="lg"
|
|
||||||
>
|
>
|
||||||
<b-input-group-prepend class="d-none d-md-block">
|
<label class="input-3" for="input-3">{{ $t('form.message') }}</label>
|
||||||
<b-icon icon="envelope" class="display-4 m-3"></b-icon>
|
<b-input-group id="input-group-3" class="border border-default border-radius">
|
||||||
</b-input-group-prepend>
|
<b-input-group-prepend class="d-none d-md-block">
|
||||||
<b-form-input
|
<b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
|
||||||
id="input-1"
|
</b-input-group-prepend>
|
||||||
v-model="form.email"
|
<b-form-textarea
|
||||||
v-focus="emailFocused"
|
id="input-3"
|
||||||
@focus="emailFocused = true"
|
rows="3"
|
||||||
@blur="normalizeEmail()"
|
v-model="form.memo"
|
||||||
type="email"
|
class="pl-3 gradido-font-large"
|
||||||
placeholder="E-Mail"
|
:disabled="isBalanceDisabled"
|
||||||
class="pl-3 gradido-font-large"
|
></b-form-textarea>
|
||||||
:disabled="isBalanceDisabled"
|
</b-input-group>
|
||||||
></b-form-input>
|
<b-col v-if="errors">
|
||||||
</b-input-group>
|
<span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
|
||||||
<b-col v-if="errors">
|
</b-col>
|
||||||
<span v-for="error in errors" :key="error" class="errors">{{ error }}</span>
|
</validation-provider>
|
||||||
</b-col>
|
</b-col>
|
||||||
</validation-provider>
|
</b-row>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4 mb-4">
|
|
||||||
<validation-provider
|
|
||||||
:name="$t('form.amount')"
|
|
||||||
:rules="{
|
|
||||||
required: true,
|
|
||||||
gddSendAmount: [0.01, balance],
|
|
||||||
}"
|
|
||||||
v-slot="{ errors, valid }"
|
|
||||||
>
|
|
||||||
<label class="input-2" for="input-2">{{ $t('form.amount') }}</label>
|
|
||||||
<b-input-group
|
|
||||||
id="input-group-2"
|
|
||||||
class="border border-default border-radius"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
<b-input-group-prepend class="p-2 d-none d-md-block">
|
|
||||||
<div class="m-1 mt-2">{{ $t('GDD') }}</div>
|
|
||||||
</b-input-group-prepend>
|
|
||||||
|
|
||||||
<b-form-input
|
|
||||||
id="input-2"
|
|
||||||
v-model="form.amount"
|
|
||||||
type="text"
|
|
||||||
v-focus="amountFocused"
|
|
||||||
@focus="amountFocused = true"
|
|
||||||
@blur="normalizeAmount(valid)"
|
|
||||||
:placeholder="$n(0.01)"
|
|
||||||
class="pl-3 gradido-font-large"
|
|
||||||
:disabled="isBalanceDisabled"
|
|
||||||
></b-form-input>
|
|
||||||
</b-input-group>
|
|
||||||
<b-col v-if="errors">
|
|
||||||
<span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
|
|
||||||
</b-col>
|
|
||||||
</validation-provider>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
|
||||||
<validation-provider
|
|
||||||
:rules="{
|
|
||||||
required: true,
|
|
||||||
min: 5,
|
|
||||||
max: 255,
|
|
||||||
}"
|
|
||||||
:name="$t('form.message')"
|
|
||||||
v-slot="{ errors }"
|
|
||||||
>
|
|
||||||
<label class="input-3" for="input-3">{{ $t('form.message') }}</label>
|
|
||||||
<b-input-group id="input-group-3" class="border border-default border-radius">
|
|
||||||
<b-input-group-prepend class="d-none d-md-block">
|
|
||||||
<b-icon icon="chat-right-text" class="display-4 m-3 mt-4"></b-icon>
|
|
||||||
</b-input-group-prepend>
|
|
||||||
<b-form-textarea
|
|
||||||
id="input-3"
|
|
||||||
rows="3"
|
|
||||||
v-model="form.memo"
|
|
||||||
class="pl-3 gradido-font-large"
|
|
||||||
:disabled="isBalanceDisabled"
|
|
||||||
></b-form-textarea>
|
|
||||||
</b-input-group>
|
|
||||||
<b-col v-if="errors">
|
|
||||||
<span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
|
|
||||||
</b-col>
|
|
||||||
</validation-provider>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="!!isBalanceDisabled" class="text-danger">
|
<div v-if="!!isBalanceDisabled" class="text-danger">
|
||||||
{{ $t('form.no_gdd_available') }}
|
{{ $t('form.no_gdd_available') }}
|
||||||
</div>
|
</div>
|
||||||
@ -152,7 +165,6 @@
|
|||||||
</b-button>
|
</b-button>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<br />
|
|
||||||
</b-form>
|
</b-form>
|
||||||
</validation-observer>
|
</validation-observer>
|
||||||
</b-card>
|
</b-card>
|
||||||
|
|||||||
@ -13,7 +13,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-for="({ id, typeId }, index) in transactions" :key="id">
|
<div v-for="({ id, typeId }, index) in transactions" :key="id">
|
||||||
<transaction-list-item :typeId="typeId" class="pointer">
|
<transaction-list-item
|
||||||
|
:typeId="typeId"
|
||||||
|
class="pointer appBoxShadow gradido-border-radius mb-3"
|
||||||
|
>
|
||||||
<template #DECAY>
|
<template #DECAY>
|
||||||
<transaction-decay
|
<transaction-decay
|
||||||
class="list-group-item"
|
class="list-group-item"
|
||||||
|
|||||||
@ -27,9 +27,9 @@
|
|||||||
></b-avatar>
|
></b-avatar>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div>{{ avatarLongName }}</div>
|
<div class="small">{{ avatarLongName }}</div>
|
||||||
|
|
||||||
<div class="text-right m">
|
<div class="text-right small">
|
||||||
<small>{{ $store.state.email }}</small>
|
<small>{{ $store.state.email }}</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -40,11 +40,11 @@
|
|||||||
</b-navbar-nav>
|
</b-navbar-nav>
|
||||||
</b-collapse>
|
</b-collapse>
|
||||||
</b-navbar>
|
</b-navbar>
|
||||||
<div class="alertBox">
|
<!-- <div class="alertBox">
|
||||||
<b-alert show dismissible variant="light" class="nav-alert text-dark">
|
<b-alert show dismissible variant="light" class="nav-alert text-dark">
|
||||||
<small>{{ $t('1000thanks') }}</small>
|
<small>{{ $t('1000thanks') }}</small>
|
||||||
</b-alert>
|
</b-alert>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="community-news">
|
<div class="community-news">
|
||||||
<b-card class="bg-white">CommunityNews</b-card>
|
<b-card class="bg-white appBoxShadow gradido-border-radius">CommunityNews</b-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -1,7 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="community-member">
|
<div>
|
||||||
<div>CommunityMember components</div>
|
<div class="text-center">
|
||||||
<div>{{ CONFIG.COMMUNITY_NAME }}</div>
|
<b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">aktiv</b-badge>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="community-member bg-white appBoxShadow gradido-border-radius p-4 border border-success"
|
||||||
|
>
|
||||||
|
<div>CommunityMember components</div>
|
||||||
|
<div>{{ CONFIG.COMMUNITY_NAME }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -1,7 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wallet-amount">
|
<div class="translucent-color-opacity">
|
||||||
<div>GDD Amount components</div>
|
<div v-if="badge" class="text-center">
|
||||||
<div>{{ balance | GDD }}</div>
|
<b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">GDD Senden</b-badge>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border border-success"
|
||||||
|
>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="10" class="h4">GDD Konto</b-col>
|
||||||
|
<b-col cols="2" class="text-center">
|
||||||
|
<b-icon icon="check-circle" variant="success"></b-icon>
|
||||||
|
<div class="small">aktiv</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<div>
|
||||||
|
<b-icon icon="layers" class="mr-3" variant="success"></b-icon>
|
||||||
|
<span class="text-success">{{ balance | GDD }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -9,6 +25,7 @@ export default {
|
|||||||
name: 'GddAmount',
|
name: 'GddAmount',
|
||||||
props: {
|
props: {
|
||||||
balance: { type: Number, required: true },
|
balance: { type: Number, required: true },
|
||||||
|
badge: { type: Boolean, default: false },
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wallet-amount">
|
<div>
|
||||||
<div>GDT Amount components</div>
|
<div class="text-center">
|
||||||
<div>0.00 GDT</div>
|
<b-badge class="position-absolute mt--2 ml--4 px-3 zindex1" variant="light">GDT</b-badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border border-light opacity-05"
|
||||||
|
>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="9" class="h4">GDT Konto</b-col>
|
||||||
|
<b-col cols="3" class="text-center">
|
||||||
|
<b-icon icon="circle" variant="light"></b-icon>
|
||||||
|
<div class="small">inaktiv</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
<div>
|
||||||
|
<b-icon icon="layers" class="mr-3"></b-icon>
|
||||||
|
0.00 GDT
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="collapse-icon">
|
<div class="collapse-icon">
|
||||||
<b-icon
|
<b-icon
|
||||||
:icon="visible ? 'caret-up-square' : 'caret-down-square'"
|
:icon="visible ? 'arrow-up-circle' : 'arrow-down-circle'"
|
||||||
:class="visible ? 'text-black' : 'text-muted'"
|
:class="visible ? 'text-black' : 'text-muted'"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
58
frontend/src/components/TransactionRows/Name.vue
Normal file
58
frontend/src/components/TransactionRows/Name.vue
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<div class="name">
|
||||||
|
<div class="gdd-transaction-list-item-name">
|
||||||
|
<div v-if="linkedUser && linkedUser.email">
|
||||||
|
<b-link @click.stop="tunnelEmail">
|
||||||
|
{{ itemText }}
|
||||||
|
</b-link>
|
||||||
|
<span v-if="transactionLinkId">
|
||||||
|
{{ $t('via_link') }}
|
||||||
|
<b-icon
|
||||||
|
icon="link45deg"
|
||||||
|
variant="muted"
|
||||||
|
class="m-mb-1"
|
||||||
|
:title="$t('gdd_per_link.redeemed-title')"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span v-else>{{ itemText }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Name',
|
||||||
|
props: {
|
||||||
|
amount: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
linkedUser: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
transactionLinkId: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tunnelEmail() {
|
||||||
|
this.$emit('set-tunneled-email', this.linkedUser.email)
|
||||||
|
this.$router.push({ path: '/send' })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
itemText() {
|
||||||
|
return this.linkedUser
|
||||||
|
? this.linkedUser.firstName + ' ' + this.linkedUser.lastName
|
||||||
|
: this.text
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -1,55 +1,46 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="transaction-slot-creation">
|
<div class="transaction-slot-creation">
|
||||||
<div @click="visible = !visible">
|
|
||||||
<!-- Collaps Icon -->
|
|
||||||
<collapse-icon class="text-right" :visible="visible" />
|
|
||||||
<div>
|
|
||||||
<b-row>
|
|
||||||
<!-- ICON -->
|
|
||||||
<b-col cols="1">
|
|
||||||
<type-icon color="gradido-global-color-accent" icon="gift" />
|
|
||||||
</b-col>
|
|
||||||
|
|
||||||
<b-col cols="11">
|
<b-row @click="visible = !visible" class="">
|
||||||
<!-- Amount / Name || Text -->
|
<b-col cols="2">
|
||||||
<amount-and-name-row :amount="amount" :linkedUser="linkedUser" v-on="$listeners" />
|
<b-avatar icon="gift" variant="success" size="4em"></b-avatar>
|
||||||
|
</b-col>
|
||||||
|
<b-col>
|
||||||
|
<div>{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>
|
||||||
|
<div class="small">{{ balanceDate }}</div>
|
||||||
|
<div class="small">{{ balanceDate }}</div>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="3">
|
||||||
|
<div class="small">Empfangen</div>
|
||||||
|
<div class="small">{{ amount | GDD }}</div>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-collapse class="pb-4 pt-5" v-model="visible">
|
||||||
|
<decay-information :typeId="typeId" :decay="decay" :amount="amount" />
|
||||||
|
</b-collapse>
|
||||||
|
|
||||||
<!-- Nachricht Memo -->
|
|
||||||
<memo-row :memo="memo" />
|
|
||||||
|
|
||||||
<!-- Datum -->
|
|
||||||
<date-row :date="balanceDate" />
|
|
||||||
|
|
||||||
<!-- Decay -->
|
|
||||||
<decay-row :decay="decay.decay" />
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<b-collapse class="pb-4 pt-5" v-model="visible">
|
|
||||||
<decay-information :typeId="typeId" :decay="decay" :amount="amount" />
|
|
||||||
</b-collapse>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||||
import TypeIcon from '../TransactionRows/TypeIcon'
|
// import TypeIcon from '../TransactionRows/TypeIcon'
|
||||||
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
|
// import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
|
||||||
import MemoRow from '../TransactionRows/MemoRow'
|
// import MemoRow from '../TransactionRows/MemoRow'
|
||||||
import DateRow from '../TransactionRows/DateRow'
|
// import DateRow from '../TransactionRows/DateRow'
|
||||||
import DecayRow from '../TransactionRows/DecayRow'
|
// import DecayRow from '../TransactionRows/DecayRow'
|
||||||
import DecayInformation from '../DecayInformations/DecayInformation'
|
import DecayInformation from '../DecayInformations/DecayInformation'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TransactionCreation',
|
name: 'TransactionCreation',
|
||||||
components: {
|
components: {
|
||||||
CollapseIcon,
|
CollapseIcon,
|
||||||
TypeIcon,
|
// TypeIcon,
|
||||||
AmountAndNameRow,
|
// AmountAndNameRow,
|
||||||
MemoRow,
|
// MemoRow,
|
||||||
DateRow,
|
// DateRow,
|
||||||
DecayRow,
|
// DecayRow,
|
||||||
DecayInformation,
|
DecayInformation,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -1,39 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="transaction-slot-decay">
|
<div class="transaction-slot-decay">
|
||||||
<div @click="visible = !visible">
|
<b-row @click="visible = !visible" class="text-color-gdd-yellow">
|
||||||
<!-- Collaps Icon -->
|
<b-col cols="1"><type-icon color="text-color-gdd-yellow" icon="droplet-half" /></b-col>
|
||||||
<collapse-icon class="text-right" :visible="visible" />
|
<b-col>
|
||||||
<div>
|
{{ $t('decay.decay_since_last_transaction') }}
|
||||||
<b-row>
|
</b-col>
|
||||||
<!-- ICON -->
|
<b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
|
||||||
<b-col cols="1">
|
</b-row>
|
||||||
<type-icon color="gradido-global-color-gray" icon="droplet-half" />
|
|
||||||
</b-col>
|
|
||||||
|
|
||||||
<b-col cols="11">
|
<b-collapse class="pb-4 pt-5" v-model="visible">
|
||||||
<!-- Amount / Name || Text -->
|
<decay-information-decay
|
||||||
<amount-and-name-row
|
:balance="balance"
|
||||||
:amount="amount"
|
:decay="decay.decay"
|
||||||
:text="$t('decay.decay_since_last_transaction')"
|
:previousBookedBalance="previousBookedBalance"
|
||||||
/>
|
/>
|
||||||
</b-col>
|
</b-collapse>
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<b-collapse class="pb-4 pt-5" v-model="visible">
|
|
||||||
<decay-information-decay
|
|
||||||
:balance="balance"
|
|
||||||
:decay="decay.decay"
|
|
||||||
:previousBookedBalance="previousBookedBalance"
|
|
||||||
/>
|
|
||||||
</b-collapse>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||||
import TypeIcon from '../TransactionRows/TypeIcon'
|
import TypeIcon from '../TransactionRows/TypeIcon'
|
||||||
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
|
|
||||||
import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
|
import DecayInformationDecay from '../DecayInformations/DecayInformation-Decay'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -41,7 +27,6 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
CollapseIcon,
|
CollapseIcon,
|
||||||
TypeIcon,
|
TypeIcon,
|
||||||
AmountAndNameRow,
|
|
||||||
DecayInformationDecay,
|
DecayInformationDecay,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -1,47 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="transaction-slot-link gradido-shadow-inset">
|
<div class="transaction-slot-link">
|
||||||
<div>
|
<b-row @click="showTransactionLinks()">
|
||||||
<div class="transaction-link-details" @click="showTransactionLinks()">
|
<b-col cols="2">
|
||||||
<!-- Collaps Icon -->
|
<b-avatar icon="link" variant="danger" size="4em"></b-avatar>
|
||||||
<collapse-icon class="text-right" :visible="visible" />
|
</b-col>
|
||||||
<div>
|
<b-col>
|
||||||
<b-row>
|
<div>{{ $t('gdd_per_link.links_sum') }}</div>
|
||||||
<b-col cols="1">
|
<div class="small">{{ transactionLinkCount }} offene Links</div>
|
||||||
<type-icon color="text-danger" icon="link45deg" />
|
</b-col>
|
||||||
</b-col>
|
<b-col cols="3">
|
||||||
|
<div class="small">Insgesamt</div>
|
||||||
<b-col cols="11">
|
<div class="small">{{ amount | GDD }}</div>
|
||||||
<!-- Amount / Name || Text -->
|
</b-col>
|
||||||
<amount-and-name-row :amount="amount" :text="$t('gdd_per_link.links_sum')" />
|
<b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
|
||||||
|
</b-row>
|
||||||
<!-- Count Links -->
|
<b-collapse v-model="visible">
|
||||||
<link-count-row :count="transactionLinkCount" />
|
<collapse-links-list
|
||||||
|
v-model="currentPage"
|
||||||
<!-- Decay -->
|
:pending="pending"
|
||||||
<decay-row :decay="decay.decay" />
|
:pageSize="pageSize"
|
||||||
</b-col>
|
:transactionLinkCount="transactionLinkCount"
|
||||||
</b-row>
|
:transactionLinks="transactionLinks"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</b-collapse>
|
||||||
|
|
||||||
<b-collapse v-model="visible">
|
|
||||||
<collapse-links-list
|
|
||||||
v-model="currentPage"
|
|
||||||
:pending="pending"
|
|
||||||
:pageSize="pageSize"
|
|
||||||
:transactionLinkCount="transactionLinkCount"
|
|
||||||
:transactionLinks="transactionLinks"
|
|
||||||
/>
|
|
||||||
</b-collapse>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||||
import TypeIcon from '../TransactionRows/TypeIcon'
|
// import TypeIcon from '../TransactionRows/TypeIcon'
|
||||||
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
|
// import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
|
||||||
import LinkCountRow from '../TransactionRows/LinkCountRow'
|
// import LinkCountRow from '../TransactionRows/LinkCountRow'
|
||||||
import DecayRow from '../TransactionRows/DecayRow'
|
// import DecayRow from '../TransactionRows/DecayRow'
|
||||||
import CollapseLinksList from '../DecayInformations/CollapseLinksList'
|
import CollapseLinksList from '../DecayInformations/CollapseLinksList'
|
||||||
import { listTransactionLinks } from '@/graphql/queries'
|
import { listTransactionLinks } from '@/graphql/queries'
|
||||||
|
|
||||||
@ -49,10 +38,10 @@ export default {
|
|||||||
name: 'TransactionSlotLink',
|
name: 'TransactionSlotLink',
|
||||||
components: {
|
components: {
|
||||||
CollapseIcon,
|
CollapseIcon,
|
||||||
TypeIcon,
|
// TypeIcon,
|
||||||
AmountAndNameRow,
|
// AmountAndNameRow,
|
||||||
LinkCountRow,
|
// LinkCountRow,
|
||||||
DecayRow,
|
// DecayRow,
|
||||||
CollapseLinksList,
|
CollapseLinksList,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -1,61 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="transaction-slot-receive">
|
<div class="transaction-slot-receive">
|
||||||
<div @click="visible = !visible">
|
<b-row @click="visible = !visible" class="">
|
||||||
<!-- Collaps Icon -->
|
<b-col cols="2">
|
||||||
<collapse-icon class="text-right" :visible="visible" />
|
<b-avatar icon="arrow-right-circle" variant="success" size="4em"></b-avatar>
|
||||||
|
</b-col>
|
||||||
<div>
|
<b-col>
|
||||||
<b-row>
|
<div>
|
||||||
<!-- ICON -->
|
<name
|
||||||
<b-col cols="1">
|
v-on="$listeners"
|
||||||
<type-icon color="gradido-global-color-accent" icon="arrow-right-circle" />
|
:amount="amount"
|
||||||
</b-col>
|
:linkedUser="linkedUser"
|
||||||
|
:transactionLinkId="transactionLinkId"
|
||||||
<b-col cols="11">
|
/>
|
||||||
<!-- Amount / Name || Text -->
|
</div>
|
||||||
<amount-and-name-row
|
<div class="small">{{ balanceDate }}</div>
|
||||||
v-on="$listeners"
|
<div class="small">{{ balanceDate }}</div>
|
||||||
:amount="amount"
|
</b-col>
|
||||||
:linkedUser="linkedUser"
|
<b-col cols="3">
|
||||||
:transactionLinkId="transactionLinkId"
|
<div class="small">Empfangen</div>
|
||||||
/>
|
<div class="small">{{ amount | GDD }}</div>
|
||||||
|
</b-col>
|
||||||
<!-- Nachricht Memo -->
|
<b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
|
||||||
<memo-row :memo="memo" />
|
</b-row>
|
||||||
|
<b-collapse class="pb-4 pt-5" v-model="visible">
|
||||||
<!-- Datum -->
|
<decay-information :typeId="typeId" :decay="decay" :amount="amount" />
|
||||||
<date-row :date="balanceDate" />
|
</b-collapse>
|
||||||
|
|
||||||
<!-- Decay -->
|
|
||||||
<decay-row :decay="decay.decay" />
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<b-collapse class="pb-4 pt-5" v-model="visible">
|
|
||||||
<decay-information :typeId="typeId" :decay="decay" :amount="amount" />
|
|
||||||
</b-collapse>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||||
import TypeIcon from '../TransactionRows/TypeIcon'
|
// import TypeIcon from '../TransactionRows/TypeIcon'
|
||||||
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
|
import Name from '../TransactionRows/Name'
|
||||||
import MemoRow from '../TransactionRows/MemoRow'
|
// import MemoRow from '../TransactionRows/MemoRow'
|
||||||
import DateRow from '../TransactionRows/DateRow'
|
// import DateRow from '../TransactionRows/DateRow'
|
||||||
import DecayRow from '../TransactionRows/DecayRow'
|
// import DecayRow from '../TransactionRows/DecayRow'
|
||||||
import DecayInformation from '../DecayInformations/DecayInformation'
|
import DecayInformation from '../DecayInformations/DecayInformation'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TransactionReceive',
|
name: 'TransactionReceive',
|
||||||
components: {
|
components: {
|
||||||
CollapseIcon,
|
CollapseIcon,
|
||||||
TypeIcon,
|
// TypeIcon,
|
||||||
AmountAndNameRow,
|
Name,
|
||||||
MemoRow,
|
// MemoRow,
|
||||||
DateRow,
|
// DateRow,
|
||||||
DecayRow,
|
// DecayRow,
|
||||||
DecayInformation,
|
DecayInformation,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -1,61 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="transaction-slot-send">
|
<div class="transaction-slot-send">
|
||||||
<div @click="visible = !visible">
|
<b-row @click="visible = !visible" class="">
|
||||||
<!-- Collaps Icon -->
|
<b-col cols="2">
|
||||||
<collapse-icon class="text-right" :visible="visible" />
|
<b-avatar icon="arrow-left-circle" variant="danger" size="4em"></b-avatar>
|
||||||
|
</b-col>
|
||||||
<div>
|
<b-col>
|
||||||
<b-row>
|
<div>
|
||||||
<!-- ICON -->
|
<name
|
||||||
<b-col cols="1">
|
v-on="$listeners"
|
||||||
<type-icon color="text-danger" icon="arrow-left-circle" />
|
:amount="amount"
|
||||||
</b-col>
|
:linkedUser="linkedUser"
|
||||||
|
:transactionLinkId="transactionLinkId"
|
||||||
<b-col cols="11">
|
/>
|
||||||
<!-- Amount / Name -->
|
</div>
|
||||||
<amount-and-name-row
|
<div class="small">{{ balanceDate }}</div>
|
||||||
v-on="$listeners"
|
<div class="small">{{ balanceDate }}</div>
|
||||||
:amount="amount"
|
</b-col>
|
||||||
:linkedUser="linkedUser"
|
<b-col cols="3">
|
||||||
:transactionLinkId="transactionLinkId"
|
<div class="small">Gesendet</div>
|
||||||
/>
|
<div class="small">{{ amount | GDD }}</div>
|
||||||
|
</b-col>
|
||||||
<!-- Memo -->
|
<b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
|
||||||
<memo-row :memo="memo" />
|
</b-row>
|
||||||
|
<b-collapse class="pb-4 pt-5" v-model="visible">
|
||||||
<!-- Datum -->
|
<decay-information :typeId="typeId" :decay="decay" :amount="amount" />
|
||||||
<date-row :date="balanceDate" />
|
</b-collapse>
|
||||||
|
|
||||||
<!-- Decay -->
|
|
||||||
<decay-row :decay="decay.decay" />
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<b-collapse class="pb-4 pt-5" v-model="visible">
|
|
||||||
<decay-information :typeId="typeId" :decay="decay" :amount="amount" />
|
|
||||||
</b-collapse>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
import CollapseIcon from '../TransactionRows/CollapseIcon'
|
||||||
import TypeIcon from '../TransactionRows/TypeIcon'
|
// import TypeIcon from '../TransactionRows/TypeIcon'
|
||||||
import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
|
import Name from '../TransactionRows/Name'
|
||||||
import MemoRow from '../TransactionRows/MemoRow'
|
// import MemoRow from '../TransactionRows/MemoRow'
|
||||||
import DateRow from '../TransactionRows/DateRow'
|
// import DateRow from '../TransactionRows/DateRow'
|
||||||
import DecayRow from '../TransactionRows/DecayRow'
|
// import DecayRow from '../TransactionRows/DecayRow'
|
||||||
import DecayInformation from '../DecayInformations/DecayInformation'
|
import DecayInformation from '../DecayInformations/DecayInformation'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TransactionSend',
|
name: 'TransactionSend',
|
||||||
components: {
|
components: {
|
||||||
CollapseIcon,
|
CollapseIcon,
|
||||||
TypeIcon,
|
// TypeIcon,
|
||||||
AmountAndNameRow,
|
Name,
|
||||||
MemoRow,
|
// MemoRow,
|
||||||
DateRow,
|
// DateRow,
|
||||||
DecayRow,
|
// DecayRow,
|
||||||
DecayInformation,
|
DecayInformation,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@ -4,12 +4,12 @@
|
|||||||
<b-container v-if="path === '/overview'">
|
<b-container v-if="path === '/overview'">
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col cols="5">
|
<b-col cols="5">
|
||||||
<div class="p-4 bg-white appBoxShadow gradido-border-radius">
|
<div>
|
||||||
<gdd-amount :balance="balance" />
|
<gdd-amount :balance="balance" />
|
||||||
</div>
|
</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="7">
|
<b-col cols="7">
|
||||||
<div class="p-4 bg-white appBoxShadow gradido-border-radius">
|
<div>
|
||||||
<community-member />
|
<community-member />
|
||||||
</div>
|
</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
@ -20,12 +20,12 @@
|
|||||||
<b-container v-if="path === '/send'">
|
<b-container v-if="path === '/send'">
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col cols="6">
|
<b-col cols="6">
|
||||||
<div class="p-4 bg-white appBoxShadow gradido-border-radius">
|
<div>
|
||||||
<gdd-amount :balance="balance" />
|
<gdd-amount :balance="balance" :badge="true" />
|
||||||
</div>
|
</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="6">
|
<b-col cols="6">
|
||||||
<div class="p-4 bg-white appBoxShadow gradido-border-radius">
|
<div>
|
||||||
<gdt-amount />
|
<gdt-amount />
|
||||||
</div>
|
</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
@ -34,12 +34,12 @@
|
|||||||
<b-container v-if="path === '/transactions'">
|
<b-container v-if="path === '/transactions'">
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col cols="6">
|
<b-col cols="6">
|
||||||
<div class="p-4 bg-white appBoxShadow gradido-border-radius">
|
<div>
|
||||||
<gdd-amount :balance="balance" />
|
<gdd-amount :balance="balance" :badge="true" />
|
||||||
</div>
|
</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="6">
|
<b-col cols="6">
|
||||||
<div class="p-4 bg-white appBoxShadow gradido-border-radius">
|
<div>
|
||||||
<gdt-amount />
|
<gdt-amount />
|
||||||
</div>
|
</div>
|
||||||
</b-col>
|
</b-col>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user