mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
step 1 from new style done
This commit is contained in:
ogerly
parent
5f3b19c595
commit
c4e671256a
@ -215,6 +215,9 @@ a:hover,
|
||||
.gradido-global-color-accent {
|
||||
color: #047006;
|
||||
}
|
||||
.gradido-global-border-color-accent {
|
||||
border-color: #047006 !important;
|
||||
}
|
||||
|
||||
.gradido-global-color-gray {
|
||||
color: #858383;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container contribution-form">
|
||||
<div class="my-3">
|
||||
<div class="contribution-form">
|
||||
<!-- <div class="my-3">
|
||||
<h3>{{ $t('contribution.formText.yourContribution') }}</h3>
|
||||
{{ $t('contribution.formText.bringYourTalentsTo') }}
|
||||
<ul class="my-3">
|
||||
@ -11,7 +11,7 @@
|
||||
<div class="my-3">
|
||||
<b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<b-form
|
||||
ref="form"
|
||||
@submit.prevent="submit"
|
||||
@ -126,7 +126,10 @@ export default {
|
||||
},
|
||||
props: {
|
||||
value: { type: Object, required: true },
|
||||
updateAmount: { type: String, required: false },
|
||||
isThisMonth: { type: Boolean, required: true },
|
||||
minimalDate: { type: Date, required: true },
|
||||
maxGddLastMonth: { type: Number, required: true },
|
||||
maxGddThisMonth: { type: Number, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -137,9 +140,9 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
numberFormat(value) {
|
||||
return value.replace(PATTERN_NON_DIGIT, '')
|
||||
},
|
||||
// numberFormat(value) {
|
||||
// return value.replace(PATTERN_NON_DIGIT, '')
|
||||
// },
|
||||
submit() {
|
||||
this.form.amount = this.form.amount.replace(PATTERN_NON_DIGIT, '')
|
||||
// spreading is needed for testing
|
||||
@ -153,19 +156,15 @@ export default {
|
||||
this.form.memo = ''
|
||||
this.form.amount = ''
|
||||
},
|
||||
textForMonth(date, availableAmount) {
|
||||
const obj = {
|
||||
monthAndYear: this.$d(date, 'monthAndYear'),
|
||||
creation: availableAmount,
|
||||
}
|
||||
return this.$t('contribution.formText.openAmountForMonth', obj)
|
||||
},
|
||||
// textForMonth(date, availableAmount) {
|
||||
// const obj = {
|
||||
// monthAndYear: this.$d(date, 'monthAndYear'),
|
||||
// creation: availableAmount,
|
||||
// }
|
||||
// return this.$t('contribution.formText.openAmountForMonth', obj)
|
||||
// },
|
||||
},
|
||||
computed: {
|
||||
minimalDate() {
|
||||
const date = new Date(this.maximalDate)
|
||||
return new Date(date.setMonth(date.getMonth() - 1, 1))
|
||||
},
|
||||
disabled() {
|
||||
return (
|
||||
this.form.date === '' ||
|
||||
@ -178,25 +177,6 @@ export default {
|
||||
(!this.isThisMonth && parseInt(this.form.amount) > parseInt(this.maxGddLastMonth))
|
||||
)
|
||||
},
|
||||
isThisMonth() {
|
||||
const formDate = new Date(this.form.date)
|
||||
return (
|
||||
formDate.getFullYear() === this.maximalDate.getFullYear() &&
|
||||
formDate.getMonth() === this.maximalDate.getMonth()
|
||||
)
|
||||
},
|
||||
maxGddLastMonth() {
|
||||
// when existing contribution is edited, the amount is added back on top of the amount
|
||||
return this.form.id && !this.isThisMonth
|
||||
? parseInt(this.$store.state.creation[1]) + parseInt(this.updateAmount)
|
||||
: this.$store.state.creation[1]
|
||||
},
|
||||
maxGddThisMonth() {
|
||||
// when existing contribution is edited, the amount is added back on top of the amount
|
||||
return this.form.id && this.isThisMonth
|
||||
? parseInt(this.$store.state.creation[2]) + parseInt(this.updateAmount)
|
||||
: this.$store.state.creation[2]
|
||||
},
|
||||
validMaxGDD() {
|
||||
return Number(this.isThisMonth ? this.maxGddThisMonth : this.maxGddLastMonth)
|
||||
},
|
||||
|
||||
@ -1,18 +1,30 @@
|
||||
<template>
|
||||
<div class="open-creations-amount bg-white appBoxShadow gradido-border-radius p-4">
|
||||
<b-table striped hover :items="items"></b-table>
|
||||
<div class="my-3">
|
||||
<ul class="my-3">
|
||||
<li v-html="textForMonth(new Date(minimalDate), maxGddLastMonth)"></li>
|
||||
<li v-html="textForMonth(new Date(), maxGddThisMonth)"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'OpenCreationsAmount',
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{ monat: 'Oktober', status: 'Max. erreicht', eingereicht: '50 h', stundenOffen: '0 h' },
|
||||
{ monat: 'November', status: 'einreichen', eingereicht: '20 h', stundenOffen: '30 h' },
|
||||
],
|
||||
}
|
||||
props: {
|
||||
minimalDate: { type: Date, required: true },
|
||||
maxGddLastMonth: { type: Number, required: true },
|
||||
maxGddThisMonth: { type: Number, required: true },
|
||||
},
|
||||
|
||||
methods: {
|
||||
textForMonth(date, availableAmount) {
|
||||
const obj = {
|
||||
monthAndYear: this.$d(date, 'monthAndYear'),
|
||||
creation: availableAmount,
|
||||
}
|
||||
return this.$t('contribution.formText.openAmountForMonth', obj)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="transaction-confirm-link">
|
||||
<div class="transaction-confirm-link bg-white appBoxShadow gradido-border-radius p-3">
|
||||
<b-row class="confirm-box-link">
|
||||
<b-col class="text-right mt-4 mb-3">
|
||||
<div class="alert-heading text-left h3">{{ $t('gdd_per_link.header') }}</div>
|
||||
@ -9,7 +9,7 @@
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-container class="bv-example-row mt-3 mb-3 gray-background p-2">
|
||||
<b-container class="bv-example-row mt-3 mb-5">
|
||||
<div class="alert-heading text-left h3">{{ $t('advanced-calculation') }}</div>
|
||||
<b-row class="pr-3">
|
||||
<b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="transaction-confirm-send">
|
||||
<div class="transaction-confirm-send bg-white appBoxShadow gradido-border-radius p-3">
|
||||
<b-row class="confirm-box-send">
|
||||
<b-col>
|
||||
<div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
|
||||
@ -33,7 +33,7 @@
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-container class="bv-example-row mt-3 mb-3 gray-background p-2">
|
||||
<b-container class="bv-example-row mt-5 mb-5">
|
||||
<div class="alert-heading text-left h3">{{ $t('advanced-calculation') }}</div>
|
||||
<b-row class="pr-3">
|
||||
<b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card class="p-0 gradido-custom-background">
|
||||
<div class="bg-white appBoxShadow gradido-border-radius p-4">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="h3 mb-4">{{ $t('gdd_per_link.created') }}</div>
|
||||
<clipboard-copy
|
||||
:link="link"
|
||||
@ -18,9 +18,9 @@
|
||||
{{ $t('form.close') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ClipboardCopy from '../ClipboardCopy.vue'
|
||||
|
||||
@ -1,35 +1,29 @@
|
||||
<template>
|
||||
<b-container>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card class="p-0 gradido-custom-background">
|
||||
<div class="p-4 gradido-font-15rem">
|
||||
<div>{{ $t('form.sorry') }}</div>
|
||||
<hr />
|
||||
<div class="bg-white appBoxShadow gradido-border-radius p-4">
|
||||
<div>
|
||||
<div class="gradido-font-15rem">{{ $t('form.sorry') }}</div>
|
||||
<hr />
|
||||
|
||||
<div class="test-send_transaction_error">{{ $t('form.send_transaction_error') }}</div>
|
||||
<div class="test-send_transaction_error">{{ $t('form.send_transaction_error') }}</div>
|
||||
|
||||
<hr />
|
||||
<div class="test-receiver-not-found" v-if="errorResult === 'recipient not known'">
|
||||
{{ $t('transaction.receiverNotFound') }}
|
||||
</div>
|
||||
<div
|
||||
class="test-receiver-not-found"
|
||||
v-if="errorResult === 'GraphQL error: The recipient account was deleted'"
|
||||
>
|
||||
{{ $t('transaction.receiverDeleted') }}
|
||||
</div>
|
||||
<div v-else>{{ errorResult }}</div>
|
||||
</div>
|
||||
<p class="text-center mt-3">
|
||||
<b-button variant="secondary" @click="$emit('on-reset')">
|
||||
{{ $t('form.close') }}
|
||||
</b-button>
|
||||
</p>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<hr />
|
||||
<div class="test-receiver-not-found" v-if="errorResult === 'recipient not known'">
|
||||
{{ $t('transaction.receiverNotFound') }}
|
||||
</div>
|
||||
<div
|
||||
class="test-receiver-not-found"
|
||||
v-if="errorResult === 'GraphQL error: The recipient account was deleted'"
|
||||
>
|
||||
{{ $t('transaction.receiverDeleted') }}
|
||||
</div>
|
||||
<div v-else>{{ errorResult }}</div>
|
||||
</div>
|
||||
<p class="text-center mt-5">
|
||||
<b-button variant="secondary" @click="$emit('on-reset')">
|
||||
{{ $t('form.close') }}
|
||||
</b-button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -1,20 +1,14 @@
|
||||
<template>
|
||||
<b-container>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-card class="p-0 gradido-custom-background">
|
||||
<div class="p-4">
|
||||
{{ $t('form.thx') }}
|
||||
<hr />
|
||||
{{ $t('form.send_transaction_success') }}
|
||||
</div>
|
||||
<p class="text-center mt-3">
|
||||
<b-button variant="primary" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
|
||||
</p>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<div class="bg-white appBoxShadow gradido-border-radius p-3">
|
||||
<div class="p-4">
|
||||
{{ $t('form.thx') }}
|
||||
<hr />
|
||||
{{ $t('form.send_transaction_success') }}
|
||||
</div>
|
||||
<div class="text-center mt-5">
|
||||
<b-button variant="primary" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -1,131 +1,125 @@
|
||||
<template>
|
||||
<div class="component-navbar">
|
||||
<b-navbar toggleable="lg" type="light" variant="faded">
|
||||
<div class="navbar-brand">
|
||||
<b-navbar-nav @click="$emit('set-visible', false)">
|
||||
<b-nav-item to="/overview">
|
||||
<img :src="logo" class="navbar-brand-img" alt="..." />
|
||||
</b-nav-item>
|
||||
<div class="auth-header position-sticky">
|
||||
<b-navbar toggleable="lg" class="pr-4">
|
||||
<b-navbar-brand>
|
||||
<b-img
|
||||
class="imgLogo ml--3 mt-lg--2 mt-3 p-2 mb-3 zindex1000"
|
||||
:src="logo"
|
||||
width="200"
|
||||
alt="..."
|
||||
/>
|
||||
</b-navbar-brand>
|
||||
<b-img class="sheet-img position-absolute zindex1000" :src="sheet"></b-img>
|
||||
|
||||
<b-collapse id="nav-collapse" is-nav class="ml-5">
|
||||
<b-navbar-nav class="ml-auto" right>
|
||||
<div class="mb-2">
|
||||
<router-link to="/profile">
|
||||
<div>
|
||||
<div class="d-flex">
|
||||
<div class="mr-3">
|
||||
<b-avatar
|
||||
button
|
||||
variant="primary"
|
||||
:text="avatarShortName"
|
||||
class="align-baseline"
|
||||
></b-avatar>
|
||||
</div>
|
||||
<div>
|
||||
<div class="small">{{ avatarLongName }}</div>
|
||||
|
||||
<div class="text-right small">
|
||||
<small>{{ $store.state.email }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</b-navbar-nav>
|
||||
</div>
|
||||
|
||||
<b-navbar-nav class="ml-auto" is-nav>
|
||||
<b-nav-item>
|
||||
<b-icon v-if="pending" icon="three-dots" animation="cylon"></b-icon>
|
||||
<div v-else>{{ pending ? $t('em-dash') : balance | amount }} {{ $t('GDD') }}</div>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
to="/profile"
|
||||
right
|
||||
class="d-none d-sm-none d-md-none d-lg-flex shadow-lg"
|
||||
data-test="navbar-item-username"
|
||||
>
|
||||
<small>
|
||||
{{ $store.state.firstName }} {{ $store.state.lastName }}
|
||||
<b>{{ $store.state.email }}</b>
|
||||
<b-icon class="ml-3" icon="gear-fill" aria-hidden="true"></b-icon>
|
||||
</small>
|
||||
</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
|
||||
<b-navbar-toggle
|
||||
target="false"
|
||||
@click="$emit('set-visible', (visibleCollapse = !visible))"
|
||||
></b-navbar-toggle>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
|
||||
<b-collapse id="collapse-nav" v-model="visibleCollapse" class="p-3 b-collaps-gradido">
|
||||
<b-nav vertical @click="$emit('set-visible', false)">
|
||||
<div class="text-right">
|
||||
<b-link to="/profile">
|
||||
<small>
|
||||
{{ $store.state.firstName }}
|
||||
{{ $store.state.lastName }}
|
||||
<b>{{ $store.state.email }}</b>
|
||||
</small>
|
||||
</b-link>
|
||||
</div>
|
||||
<b-nav-item to="/overview" class="mb-3">
|
||||
<b-icon icon="house" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.overview') }}
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/send" class="mb-3">
|
||||
<b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.send') }}
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/transactions" class="mb-3">
|
||||
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.transactions') }}
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/gdt" class="mb-3">
|
||||
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
|
||||
{{ $t('gdt.gdt') }}
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/community" class="mb-3">
|
||||
<b-icon icon="people" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.community') }}
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/profile" class="mb-3">
|
||||
<b-icon icon="gear" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.profile') }}
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/information" class="mb-3">
|
||||
<b-icon icon="info-circle" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.info') }}
|
||||
</b-nav-item>
|
||||
<br />
|
||||
<b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
|
||||
<b-icon icon="shield-check" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.admin_area') }}
|
||||
</b-nav-item>
|
||||
<b-nav-item class="mb-3" @click="$emit('logout')">
|
||||
<b-icon icon="power" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.logout') }}
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</b-collapse>
|
||||
<!-- <div class="alertBox">
|
||||
<b-alert show dismissible variant="light" class="nav-alert text-dark">
|
||||
<small>{{ $t('1000thanks') }}</small>
|
||||
</b-alert>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'navbar',
|
||||
name: 'AuthNavbar',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
balance: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
pending: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
balance: { type: Number, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logo: 'img/brand/green.png',
|
||||
visibleCollapse: this.visible,
|
||||
logo: '/img/brand/green.png',
|
||||
sheet: '/img/template/Blaetter.png',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible() {
|
||||
this.visibleCollapse = this.visible
|
||||
computed: {
|
||||
avatarShortName() {
|
||||
return this.$store.state.firstName[0] + this.$store.state.lastName[0]
|
||||
},
|
||||
avatarLongName() {
|
||||
return `${this.$store.state.firstName} ${this.$store.state.lastName}`
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.b-collaps-gradido {
|
||||
position: absolute;
|
||||
z-index: 100000;
|
||||
background-color: #dfe0e3f5;
|
||||
width: 100%;
|
||||
box-shadow: #b4b4b4 0px 13px 22px;
|
||||
font-size: large;
|
||||
|
||||
<style lang="scss">
|
||||
.auth-header {
|
||||
font-family: 'Open Sans', sans-serif !important;
|
||||
height: 150px;
|
||||
}
|
||||
.b-collaps-gradido li :hover {
|
||||
background-color: #e9e7e7f5;
|
||||
|
||||
.authNavbar > .nav-link {
|
||||
color: #383838 !important;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.authNavbar > .router-link-exact-active {
|
||||
color: #0e79bc !important;
|
||||
}
|
||||
|
||||
button.navbar-toggler > span.navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.sheet-img {
|
||||
top: -11px;
|
||||
left: 50%;
|
||||
max-width: 64%;
|
||||
}
|
||||
.alertBox {
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 25px;
|
||||
}
|
||||
@media screen and (max-width: 1170px) {
|
||||
.sheet-img {
|
||||
left: 40%;
|
||||
}
|
||||
.alertBox {
|
||||
position: static;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
.sheet-img {
|
||||
top: -15px;
|
||||
left: 10%;
|
||||
max-width: 61%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<div class="auth-header position-sticky">
|
||||
<b-navbar toggleable="lg" class="pr-4">
|
||||
<b-navbar-brand>
|
||||
<b-img
|
||||
class="imgLogo ml--3 mt-lg--2 mt-3 p-2 mb-3 zindex1000"
|
||||
:src="logo"
|
||||
width="200"
|
||||
alt="..."
|
||||
/>
|
||||
|
||||
</b-navbar-brand>
|
||||
<b-img class="sheet-img position-absolute zindex1000" :src="sheet"></b-img>
|
||||
|
||||
<b-collapse id="nav-collapse" is-nav class="ml-5">
|
||||
<b-navbar-nav class="ml-auto" right>
|
||||
<div class="mb-2">
|
||||
<router-link to="/profile">
|
||||
<div>
|
||||
<div class="d-flex">
|
||||
<div class="mr-3">
|
||||
<b-avatar
|
||||
button
|
||||
variant="primary"
|
||||
:text="avatarShortName"
|
||||
class="align-baseline"
|
||||
></b-avatar>
|
||||
</div>
|
||||
<div>
|
||||
<div class="small">{{ avatarLongName }}</div>
|
||||
|
||||
<div class="text-right small">
|
||||
<small>{{ $store.state.email }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
<!-- <div class="alertBox">
|
||||
<b-alert show dismissible variant="light" class="nav-alert text-dark">
|
||||
<small>{{ $t('1000thanks') }}</small>
|
||||
</b-alert>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AuthNavbar',
|
||||
props: {
|
||||
balance: { type: Number, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logo: '/img/brand/green.png',
|
||||
sheet: '/img/template/Blaetter.png',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
avatarShortName() {
|
||||
return this.$store.state.firstName[0] + this.$store.state.lastName[0]
|
||||
},
|
||||
avatarLongName() {
|
||||
return `${this.$store.state.firstName} ${this.$store.state.lastName}`
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.auth-header {
|
||||
font-family: 'Open Sans', sans-serif !important;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.authNavbar > .nav-link {
|
||||
color: #383838 !important;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.authNavbar > .router-link-exact-active {
|
||||
color: #0e79bc !important;
|
||||
}
|
||||
|
||||
button.navbar-toggler > span.navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.sheet-img {
|
||||
top: -11px;
|
||||
left: 50%;
|
||||
max-width: 64%;
|
||||
}
|
||||
.alertBox {
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 25px;
|
||||
}
|
||||
@media screen and (max-width: 1170px) {
|
||||
.sheet-img {
|
||||
left: 40%;
|
||||
}
|
||||
.alertBox {
|
||||
position: static;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
.sheet-img {
|
||||
top: -15px;
|
||||
left: 10%;
|
||||
max-width: 61%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,47 +1,72 @@
|
||||
<template>
|
||||
<div id="component-sidebar">
|
||||
<div class="pl-3">
|
||||
<p></p>
|
||||
<div class="mb-6">
|
||||
<div id="component-sidebar ">
|
||||
<div id="side-menu" ref="sideMenu" class="pl-lg-1 gradido-border-radius appBoxShadow pt-2 mt-4">
|
||||
<!-- @mouseout="$emit('toogleMobilMenu')" -->
|
||||
<div class="mb-6 mt-3">
|
||||
<b-nav vertical class="w-200">
|
||||
<b-nav-item to="/overview" class="mb-3">
|
||||
<b-icon icon="house" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.overview') }}
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.overview') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/storys" class="mb-3">
|
||||
<b-icon icon="card-heading" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.topStories') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/addresses" class="mb-3">
|
||||
<b-icon icon="bookmark" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.adresses') }}</span>
|
||||
</b-nav-item>
|
||||
|
||||
<b-nav-item to="/send" class="mb-3">
|
||||
<b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.send') }}
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.send') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/transactions" class="mb-3">
|
||||
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.transactions') }}
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.transactions') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/gdt" class="mb-3">
|
||||
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
|
||||
{{ $t('gdt.gdt') }}
|
||||
<b-nav-item to="/profile" class="mb-3">
|
||||
<b-icon icon="person" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/community" class="mb-3">
|
||||
<b-icon icon="people" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.community') }}
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/profile" class="mb-3" data-test="profile-menu">
|
||||
<b-icon icon="gear" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.profile') }}
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/information" class="mb-3">
|
||||
<b-icon icon="info-circle" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.info') }}
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.members') }}</span>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
<hr />
|
||||
<b-nav vertical class="w-100">
|
||||
<b-nav-item
|
||||
@click="
|
||||
lightmode = !lightmode
|
||||
$emit('modeToggle')
|
||||
"
|
||||
class="mb-3"
|
||||
>
|
||||
<b-icon :icon="lightmode ? 'toggle-on' : 'toggle-off'" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
|
||||
<label for="checkbox" class="switch-label">
|
||||
<span v-if="lightmode">{{ $t('navigation.moon') }}</span>
|
||||
<span v-else>{{ $t('navigation.sun') }}</span>
|
||||
</label>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/settings" class="mb-3">
|
||||
<b-icon icon="gear" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.settings') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
|
||||
<b-icon icon="shield-check" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.admin_area') }}
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.admin_area') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item class="mb-3" @click="$emit('logout')" data-test="logout-menu">
|
||||
<b-nav-item class="mb-3" @click="$emit('logout')">
|
||||
<b-icon icon="power" aria-hidden="true"></b-icon>
|
||||
{{ $t('navigation.logout') }}
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.logout') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
class="mt-4 mb-3 d-block d-md-none d-lg-none"
|
||||
@click="$emit('toogleMobilMenu')"
|
||||
>
|
||||
<b-icon icon="x" aria-hidden="true"></b-icon>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
@ -51,6 +76,11 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar',
|
||||
data() {
|
||||
return {
|
||||
lightmode: false,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@ -58,4 +88,8 @@ export default {
|
||||
#component-sidebar .active {
|
||||
font-weight: bold;
|
||||
}
|
||||
#component-sidebar {
|
||||
min-width: 53px;
|
||||
max-width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<div id="component-sidebar ">
|
||||
<div id="side-menu" ref="sideMenu" class="pl-lg-1 gradido-border-radius appBoxShadow pt-2 mt-4">
|
||||
<!-- @mouseout="$emit('toogleMobilMenu')" -->
|
||||
<div class="mb-6 mt-3">
|
||||
<b-nav vertical class="w-200">
|
||||
<b-nav-item to="/overview" class="mb-3">
|
||||
<b-icon icon="house" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.overview') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/storys" class="mb-3">
|
||||
<b-icon icon="card-heading" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.topStories') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/addresses" class="mb-3">
|
||||
<b-icon icon="bookmark" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.adresses') }}</span>
|
||||
</b-nav-item>
|
||||
|
||||
<b-nav-item to="/send" class="mb-3">
|
||||
<b-icon icon="arrow-left-right" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.send') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/transactions" class="mb-3">
|
||||
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.transactions') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/profile" class="mb-3">
|
||||
<b-icon icon="person" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.profile') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/community" class="mb-3">
|
||||
<b-icon icon="people" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.members') }}</span>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
<hr />
|
||||
<b-nav vertical class="w-100">
|
||||
<b-nav-item
|
||||
@click="
|
||||
lightmode = !lightmode
|
||||
$emit('modeToggle')
|
||||
"
|
||||
class="mb-3"
|
||||
>
|
||||
<b-icon :icon="lightmode ? 'toggle-on' : 'toggle-off'" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.lightmode') }}</span>
|
||||
<label for="checkbox" class="switch-label">
|
||||
<span v-if="lightmode">{{ $t('navigation.moon') }}</span>
|
||||
<span v-else>{{ $t('navigation.sun') }}</span>
|
||||
</label>
|
||||
</b-nav-item>
|
||||
<b-nav-item to="/settings" class="mb-3">
|
||||
<b-icon icon="gear" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.settings') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item class="mb-3" v-if="$store.state.isAdmin" @click="$emit('admin')">
|
||||
<b-icon icon="shield-check" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.admin_area') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item class="mb-3" @click="$emit('logout')">
|
||||
<b-icon icon="power" aria-hidden="true"></b-icon>
|
||||
<span class="d-none d-lg-inline ml-2">{{ $t('navigation.logout') }}</span>
|
||||
</b-nav-item>
|
||||
<b-nav-item
|
||||
class="mt-4 mb-3 d-block d-md-none d-lg-none"
|
||||
@click="$emit('toogleMobilMenu')"
|
||||
>
|
||||
<b-icon icon="x" aria-hidden="true"></b-icon>
|
||||
</b-nav-item>
|
||||
</b-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar',
|
||||
data() {
|
||||
return {
|
||||
lightmode: false,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.component-navbar .active,
|
||||
#component-sidebar .active {
|
||||
font-weight: bold;
|
||||
}
|
||||
#component-sidebar {
|
||||
min-width: 53px;
|
||||
max-width: 200px;
|
||||
}
|
||||
</style>
|
||||
@ -13,10 +13,10 @@
|
||||
<div class="small">{{ CONFIG.COMMUNITY_NAME }}</div>
|
||||
</b-col>
|
||||
<b-col cols="4" class="border-left border-light">
|
||||
<b-icon icon="people" class="ml-3 mr-3"></b-icon> 1240
|
||||
<b-icon icon="people" class="ml-3 mr-3"></b-icon>
|
||||
1240
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,32 +2,33 @@
|
||||
<div class="translucent-color-opacity">
|
||||
<div class="text-center">
|
||||
<b-badge
|
||||
v-if="showStatus"
|
||||
class="position-absolute mt--2 ml--5 px-3"
|
||||
:variant="badge ? 'success' : 'light'"
|
||||
class="position-absolute mt--2 ml--4 px-3 zindex1"
|
||||
:variant="showStatus ? 'success' : 'light'"
|
||||
>
|
||||
GDD Senden
|
||||
GDD
|
||||
</b-badge>
|
||||
</div>
|
||||
<div
|
||||
class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border border-success"
|
||||
:class="badge ? 'border-success' : 'border-light'"
|
||||
class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border"
|
||||
:class="showStatus ? 'gradido-global-border-color-accent' : 'border-light opacity-05'"
|
||||
>
|
||||
<b-row>
|
||||
<b-col cols="9" class="h4">GDD Konto</b-col>
|
||||
<b-col cols="3" class="text-center">
|
||||
<div v-if="showStatus">
|
||||
<div>
|
||||
<b-icon
|
||||
:icon="badge ? 'check-circle' : 'circle'"
|
||||
:variant="badge ? 'success' : 'light'"
|
||||
:icon="showStatus ? 'check-circle' : 'circle'"
|
||||
:class="showStatus ? 'gradido-global-border-color-accent' : ''"
|
||||
></b-icon>
|
||||
<div class="small">{{ badge ? 'aktiv' : 'inaktiv' }}</div>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div>
|
||||
<b-icon icon="layers" class="mr-3" variant="success"></b-icon>
|
||||
<span :class="badge ? 'text-success' : 'text-light'">{{ balance | GDD }}</span>
|
||||
<b-icon icon="layers" class="mr-3 gradido-global-border-color-accent"></b-icon>
|
||||
<span :class="badge ? 'gradido-global-color-accent' : 'text-light'">
|
||||
{{ balance | GDD }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border opacity-05"
|
||||
:class="badge ? 'border-success' : 'border-light'"
|
||||
class="wallet-amount bg-white appBoxShadow gradido-border-radius p-4 border"
|
||||
:class="showStatus ? 'gradido-global-border-color-accent' : 'border-light opacity-05'"
|
||||
>
|
||||
<b-row>
|
||||
<b-col cols="9" class="h4">GDT Konto</b-col>
|
||||
@ -19,7 +19,7 @@
|
||||
<div>
|
||||
<b-icon
|
||||
:icon="badge ? 'check-circle' : 'circle'"
|
||||
:variant="badge ? 'success' : 'light'"
|
||||
class="gradido-global-border-color-accent"
|
||||
></b-icon>
|
||||
<div class="small">{{ badge ? 'aktiv' : 'inaktiv' }}</div>
|
||||
</div>
|
||||
@ -37,6 +37,7 @@ export default {
|
||||
name: 'GdtAmount',
|
||||
props: {
|
||||
badge: { type: Boolean, default: false },
|
||||
showStatus: { type: Boolean, default: false },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="contribution-info">
|
||||
<div>
|
||||
<h3>{{ $t('contribution.formText.yourContribution') }}</h3>
|
||||
{{ $t('contribution.formText.bringYourTalentsTo') }}
|
||||
|
||||
<div class="my-3">
|
||||
<b>{{ $t('contribution.formText.describeYourCommunity') }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'LastContributions',
|
||||
}
|
||||
</script>
|
||||
@ -1,18 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="list-group">
|
||||
<div class="list-group bg-white appBoxShadow gradido-border-radius p-3">
|
||||
<b-row @click="visible = !visible" class="">
|
||||
<b-col cols="2">
|
||||
<b-avatar :icon="getLinesByType.icon" variant="light" size="4em"></b-avatar>
|
||||
<b-avatar
|
||||
:icon="getLinesByType.icon"
|
||||
variant="light"
|
||||
size="4em"
|
||||
:class="getLinesByType.iconclasses"
|
||||
></b-avatar>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div>
|
||||
<!-- <div>
|
||||
{{ getLinesByType }}
|
||||
</div> -->
|
||||
<div>
|
||||
{{ date }}
|
||||
</div>
|
||||
<div>
|
||||
{{ getLinesByType.description }}
|
||||
</div>
|
||||
<div class="small">
|
||||
{{ getLinesByType.descriptiontext }}
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="3">
|
||||
<div class="small">Gesendet</div>
|
||||
<div class="small">{{ amount | GDT }}</div>
|
||||
<div class="small mt-2">GDT erhalten</div>
|
||||
<div class="">{{ getLinesByType.credittext }}</div>
|
||||
</b-col>
|
||||
<b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
|
||||
</b-row>
|
||||
@ -75,7 +89,7 @@ export default {
|
||||
case GdtEntryType.CVS2: {
|
||||
return {
|
||||
icon: 'heart',
|
||||
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
|
||||
iconclasses: 'gradido-global-color-accent',
|
||||
description: this.$t('gdt.contribution'),
|
||||
descriptiontext: this.$n(this.amount, 'decimal') + ' €',
|
||||
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
|
||||
@ -84,7 +98,7 @@ export default {
|
||||
case GdtEntryType.ELOPAGE_PUBLISHER: {
|
||||
return {
|
||||
icon: 'person-check',
|
||||
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
|
||||
iconclasses: 'gradido-global-color-accent',
|
||||
description: this.$t('gdt.recruited-member'),
|
||||
descriptiontext: '5%',
|
||||
credittext: this.$n(this.amount, 'decimal') + ' GDT',
|
||||
@ -93,7 +107,7 @@ export default {
|
||||
case GdtEntryType.GLOBAL_MODIFICATOR: {
|
||||
return {
|
||||
icon: 'gift',
|
||||
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
|
||||
iconclasses: 'gradido-global-color-accent',
|
||||
description: this.$t('gdt.gdt-received'),
|
||||
descriptiontext: this.comment,
|
||||
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="transaction-slot-creation">
|
||||
|
||||
<b-row @click="visible = !visible" class="">
|
||||
<b-col cols="2">
|
||||
<b-avatar icon="gift" variant="success" size="4em"></b-avatar>
|
||||
@ -19,8 +18,6 @@
|
||||
<b-collapse class="pb-4 pt-5" v-model="visible">
|
||||
<decay-information :typeId="typeId" :decay="decay" :amount="amount" />
|
||||
</b-collapse>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@ -14,11 +14,11 @@
|
||||
<!-- navbar -->
|
||||
<b-row>
|
||||
<b-col>
|
||||
<navbar-new class="main-navbar" :balance="balance"></navbar-new>
|
||||
<navbar class="main-navbar" :balance="balance"></navbar>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div ref="sideMenuRow" class="d-none d-lg-none d-md-none zindex1000">
|
||||
<sidebar-new
|
||||
<sidebar
|
||||
class="main-sidebar"
|
||||
@admin="admin"
|
||||
@logout="logout"
|
||||
@ -29,7 +29,7 @@
|
||||
<b-row fluid class="d-flex">
|
||||
<!-- Sidebar left -->
|
||||
<b-col cols="2" class="d-none d-lg-block d-md-block">
|
||||
<sidebar-new
|
||||
<sidebar
|
||||
class="main-sidebar"
|
||||
@admin="admin"
|
||||
@logout="logout"
|
||||
@ -57,6 +57,7 @@
|
||||
/>
|
||||
</b-col>
|
||||
<b-col cols="12">
|
||||
<!-- router-view -->
|
||||
<div class="main-content mt-3">
|
||||
<fade-transition :duration="200" origin="center top" mode="out-in">
|
||||
<router-view
|
||||
@ -98,10 +99,8 @@
|
||||
import ContentHeader from '@/layouts/templates/ContentHeader.vue'
|
||||
import RightSide from '@/layouts/templates/RightSide.vue'
|
||||
import SkeletonOverview from '@/components/skeleton/Overview.vue'
|
||||
// import Navbar from '@/components/Menu/Navbar.vue'
|
||||
import NavbarNew from '@/components/Menu/NavbarNew.vue'
|
||||
// import Sidebar from '@/components/Menu/Sidebar.vue'
|
||||
import SidebarNew from '@/components/Menu/SidebarNew.vue'
|
||||
import Navbar from '@/components/Menu/Navbar.vue'
|
||||
import Sidebar from '@/components/Menu/Sidebar.vue'
|
||||
import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
|
||||
import { transactionsQuery } from '@/graphql/queries'
|
||||
import { logout } from '@/graphql/mutations'
|
||||
@ -115,10 +114,8 @@ export default {
|
||||
SkeletonOverview,
|
||||
ContentHeader,
|
||||
RightSide,
|
||||
// Navbar,
|
||||
NavbarNew,
|
||||
// Sidebar,
|
||||
SidebarNew,
|
||||
Navbar,
|
||||
Sidebar,
|
||||
SessionLogoutTimeout,
|
||||
ContentFooter,
|
||||
FadeTransition,
|
||||
|
||||
@ -1,91 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<b-container v-if="path === '/overview'">
|
||||
<b-row>
|
||||
<b-col cols="5">
|
||||
<div>
|
||||
<gdd-amount :balance="balance" :showStatus="false" />
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="7">
|
||||
<div>
|
||||
<community-member />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/storys'"><h2>Deine Community im Überblick</h2></b-container>
|
||||
<b-container v-if="path === '/addresses'">Deine Favoriten im Überblick</b-container>
|
||||
<b-container v-if="path === '/send'">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<b-container v-if="path === '/overview'">
|
||||
<b-row>
|
||||
<b-col cols="5">
|
||||
<div>
|
||||
<gdd-amount :balance="balance" :showStatus="false" />
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="7">
|
||||
<div>
|
||||
<community-member />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/storys'"><h2>Deine Community im Überblick</h2></b-container>
|
||||
<b-container v-if="path === '/addresses'">Deine Favoriten im Überblick</b-container>
|
||||
<b-container v-if="path === '/send'">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<gdd-amount :balance="balance" :badge="true" :showStatus="true" />
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<gdt-amount />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/transactions'">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<router-link to="transaction">
|
||||
<gdd-amount :balance="balance" :badge="true" :showStatus="true" />
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<router-link to="gdt">
|
||||
<gdt-amount />
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/transactions'">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<router-link to="transaction">
|
||||
<gdd-amount :balance="balance" :badge="true" :showStatus="true" />
|
||||
</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<router-link to="gdt">
|
||||
<gdt-amount />
|
||||
</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/gdt'">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<router-link to="transactions">
|
||||
<gdd-amount :balance="balance" />
|
||||
</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<router-link to="gdt">
|
||||
<gdt-amount :badge="true" />
|
||||
</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/profile'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-white appBoxShadow gradido-border-radius">
|
||||
<b-row>
|
||||
<b-col cols="8" class="h3">Zeige deiner Community wer du bist.</b-col>
|
||||
<b-col cols="4" class="text-small text-muted">vor 4 Stunden geändert</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="2" class=""><b-avatar size="72px" rounded="lg"></b-avatar></b-col>
|
||||
<b-col cols="10" class="">Text</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/community'"><nav-community /></b-container>
|
||||
<b-container v-if="path === '/settings'">settings content header</b-container>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/gdt'">
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<router-link to="transactions">
|
||||
<gdd-amount :balance="balance" :badge="true" :showStatus="false" />
|
||||
</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div>
|
||||
<router-link to="gdt">
|
||||
<gdt-amount :badge="true" :showStatus="true" />
|
||||
</router-link>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/profile'">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<div class="p-4 bg-white appBoxShadow gradido-border-radius">
|
||||
<b-row>
|
||||
<b-col cols="8" class="h3">Zeige deiner Community wer du bist.</b-col>
|
||||
<b-col cols="4" class="text-small text-muted">vor 4 Stunden geändert</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="2" class=""><b-avatar size="72px" rounded="lg"></b-avatar></b-col>
|
||||
<b-col cols="10" class="">Text</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/community'"><nav-community /></b-container>
|
||||
<b-container v-if="path === '/settings'">settings content header</b-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -102,7 +102,8 @@
|
||||
</b-row>
|
||||
</b-container>
|
||||
<b-container v-if="path === '/community'">
|
||||
<last-contributions />
|
||||
<contribution-info />
|
||||
<last-contributions class="mt-5" />
|
||||
</b-container>
|
||||
<b-container v-if="path === '/settings'">settings ride side</b-container>
|
||||
</div>
|
||||
@ -111,6 +112,7 @@
|
||||
import LastTransactions from '@/components/Template/RightSide/LastTransactions.vue'
|
||||
import Favourites from '@/components/Template/RightSide/Favourites.vue'
|
||||
import TopStorysByMonth from '@/components/Template/RightSide/TopStorysByMonth.vue'
|
||||
import ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
|
||||
import LastContributions from '@/components/Template/RightSide/LastContributions.vue'
|
||||
import YourOverview from '@/components/Template/RightSide/YourOverview.vue'
|
||||
|
||||
@ -121,6 +123,7 @@ export default {
|
||||
Favourites,
|
||||
TopStorysByMonth,
|
||||
LastContributions,
|
||||
ContributionInfo,
|
||||
YourOverview,
|
||||
},
|
||||
props: {
|
||||
|
||||
@ -3,12 +3,20 @@
|
||||
<div>
|
||||
<b-tabs no-nav-style v-model="tabIndex" content-class="mt-3" align="center">
|
||||
<b-tab>
|
||||
<open-creations-amount />
|
||||
<open-creations-amount
|
||||
:minimalDate="minimalDate"
|
||||
:maxGddThisMonth="maxGddThisMonth"
|
||||
:maxGddLastMonth="maxGddLastMonth"
|
||||
/>
|
||||
<div class="mb-3"></div>
|
||||
<contribution-form
|
||||
@set-contribution="setContribution"
|
||||
@update-contribution="updateContribution"
|
||||
v-model="form"
|
||||
:updateAmount="updateAmount"
|
||||
:isThisMonth="isThisMonth"
|
||||
:minimalDate="minimalDate"
|
||||
:maxGddLastMonth="maxGddLastMonth"
|
||||
:maxGddThisMonth="maxGddThisMonth"
|
||||
/>
|
||||
</b-tab>
|
||||
<b-tab>
|
||||
@ -75,6 +83,7 @@ export default {
|
||||
amount: '',
|
||||
},
|
||||
updateAmount: '',
|
||||
maximalDate: new Date(),
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -89,6 +98,31 @@ export default {
|
||||
this.hashLink = to.hash
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
minimalDate() {
|
||||
const date = new Date(this.maximalDate)
|
||||
return new Date(date.setMonth(date.getMonth() - 1, 1))
|
||||
},
|
||||
isThisMonth() {
|
||||
const formDate = new Date(this.form.date)
|
||||
return (
|
||||
formDate.getFullYear() === this.maximalDate.getFullYear() &&
|
||||
formDate.getMonth() === this.maximalDate.getMonth()
|
||||
)
|
||||
},
|
||||
maxGddLastMonth() {
|
||||
// when existing contribution is edited, the amount is added back on top of the amount
|
||||
return this.form.id && !this.isThisMonth
|
||||
? parseInt(this.$store.state.creation[1]) + parseInt(this.updateAmount)
|
||||
: parseInt(this.$store.state.creation[1])
|
||||
},
|
||||
maxGddThisMonth() {
|
||||
// when existing contribution is edited, the amount is added back on top of the amount
|
||||
return this.form.id && this.isThisMonth
|
||||
? parseInt(this.$store.state.creation[2]) + parseInt(this.updateAmount)
|
||||
: parseInt(this.$store.state.creation[2])
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setContribution(data) {
|
||||
this.$apollo
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container-fluid">
|
||||
<div>
|
||||
<community-news class="mb-5 shadow" />
|
||||
<gdd-transaction-list
|
||||
<!-- <gdd-transaction-list
|
||||
:transactions="transactions"
|
||||
:pageSize="5"
|
||||
:timestamp="timestamp"
|
||||
@ -10,38 +10,38 @@
|
||||
:transactionLinkCount="transactionLinkCount"
|
||||
:pending="pending"
|
||||
v-on="$listeners"
|
||||
/>
|
||||
<gdd-transaction-list-footer :count="transactionCount" />
|
||||
/> -->
|
||||
<!-- <gdd-transaction-list-footer :count="transactionCount" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CommunityNews from '@/components/Overview/CommunityNews.vue'
|
||||
import GddTransactionList from '@/components/GddTransactionList.vue'
|
||||
import GddTransactionListFooter from '@/components/GddTransactionListFooter.vue'
|
||||
// import GddTransactionList from '@/components/GddTransactionList.vue'
|
||||
// import GddTransactionListFooter from '@/components/GddTransactionListFooter.vue'
|
||||
|
||||
export default {
|
||||
name: 'Overview',
|
||||
components: {
|
||||
CommunityNews,
|
||||
GddTransactionList,
|
||||
GddTransactionListFooter,
|
||||
// GddTransactionList,
|
||||
// GddTransactionListFooter,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timestamp: Date.now(),
|
||||
// timestamp: Date.now(),
|
||||
}
|
||||
},
|
||||
props: {
|
||||
transactions: {
|
||||
default: () => [],
|
||||
},
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
transactionLinkCount: { type: Number, default: 0 },
|
||||
pending: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// transactions: {
|
||||
// default: () => [],
|
||||
// },
|
||||
// transactionCount: { type: Number, default: 0 },
|
||||
// transactionLinkCount: { type: Number, default: 0 },
|
||||
// pending: {
|
||||
// type: Boolean,
|
||||
// default: true,
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
// updateTransactions(pagination) {
|
||||
@ -51,9 +51,9 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.g-border {
|
||||
/* .g-border {
|
||||
border: #ffffff 2px;
|
||||
border-style: inset;
|
||||
border-radius: 5px;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
|
||||
@ -34,7 +34,11 @@
|
||||
</b-tabs> -->
|
||||
|
||||
<div v-if="gdt">
|
||||
<div>{{ titleGdt }}</div>
|
||||
<div
|
||||
class="gradido-global-color-accent appBoxShadow gradido-border-radius p-3 mb-3 text-right blurtext"
|
||||
>
|
||||
{{ titleGdt }}
|
||||
</div>
|
||||
|
||||
<gdt-transaction-list
|
||||
v-model="currentPage"
|
||||
@ -140,6 +144,17 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.blurtext {
|
||||
color: transparent;
|
||||
text-shadow: #047006 0 0 15px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
.blurtext:hover {
|
||||
transition: 0.4s;
|
||||
color: #047006;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
padding-top: 14px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user