mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
Merge pull request #2548 from gradido/slots-for-right-sidebar
refactor(frontend): slots for right sidebar and header
This commit is contained in:
Moriz Wahl
GitHub
commit
becaa750e8
@ -15,6 +15,7 @@ const routerPushMock = jest.fn()
|
|||||||
const stubs = {
|
const stubs = {
|
||||||
RouterLink: RouterLinkStub,
|
RouterLink: RouterLinkStub,
|
||||||
RouterView: true,
|
RouterView: true,
|
||||||
|
LastTransactions: true,
|
||||||
}
|
}
|
||||||
|
|
||||||
const mocks = {
|
const mocks = {
|
||||||
@ -29,6 +30,9 @@ const mocks = {
|
|||||||
meta: {
|
meta: {
|
||||||
hideFooter: false,
|
hideFooter: false,
|
||||||
},
|
},
|
||||||
|
path: {
|
||||||
|
replace: jest.fn(),
|
||||||
|
},
|
||||||
},
|
},
|
||||||
$router: {
|
$router: {
|
||||||
push: routerPushMock,
|
push: routerPushMock,
|
||||||
|
|||||||
@ -35,7 +35,87 @@
|
|||||||
:balance="balance"
|
:balance="balance"
|
||||||
:GdtBalance="GdtBalance"
|
:GdtBalance="GdtBalance"
|
||||||
:totalUsers="totalUsers"
|
:totalUsers="totalUsers"
|
||||||
|
>
|
||||||
|
<template #overview>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="12" lg="5">
|
||||||
|
<div>
|
||||||
|
<gdd-amount :balance="balance" :showStatus="false" :badgeShow="false" />
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="12" lg="7">
|
||||||
|
<div>
|
||||||
|
<community-member :totalUsers="totalUsers" />
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
<template #send>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="12" lg="6">
|
||||||
|
<div>
|
||||||
|
<gdd-amount
|
||||||
|
:balance="balance"
|
||||||
|
:badge="true"
|
||||||
|
:showStatus="true"
|
||||||
|
:badgeShow="false"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="12" lg="6">
|
||||||
|
<div>
|
||||||
|
<router-link to="gdt">
|
||||||
|
<gdt-amount :GdtBalance="GdtBalance" :badgeShow="false" />
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
<template #transactions>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="12" lg="6">
|
||||||
|
<div>
|
||||||
|
<router-link to="transactions">
|
||||||
|
<gdd-amount :balance="balance" :showStatus="true" />
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="12" lg="6">
|
||||||
|
<div>
|
||||||
|
<router-link to="gdt">
|
||||||
|
<gdt-amount :GdtBalance="GdtBalance" />
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
<template #gdt>
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="12" lg="6">
|
||||||
|
<div>
|
||||||
|
<router-link to="transactions">
|
||||||
|
<gdd-amount :balance="balance" :showStatus="false" />
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="12" lg="6">
|
||||||
|
<div>
|
||||||
|
<router-link to="gdt">
|
||||||
|
<gdt-amount
|
||||||
|
:badge="true"
|
||||||
|
:showStatus="true"
|
||||||
|
:GdtBalance="GdtBalance"
|
||||||
|
/>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</template>
|
||||||
|
<template #community>
|
||||||
|
<nav-community />
|
||||||
|
</template>
|
||||||
|
<template #settings></template>
|
||||||
|
</content-header>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
</b-col>
|
</b-col>
|
||||||
@ -46,7 +126,20 @@
|
|||||||
:transactionCount="transactionCount"
|
:transactionCount="transactionCount"
|
||||||
:transactionLinkCount="transactionLinkCount"
|
:transactionLinkCount="transactionLinkCount"
|
||||||
@set-tunneled-email="setTunneledEmail"
|
@set-tunneled-email="setTunneledEmail"
|
||||||
|
>
|
||||||
|
<template #transactions>
|
||||||
|
<last-transactions
|
||||||
|
:transactions="transactions"
|
||||||
|
:transactionCount="transactionCount"
|
||||||
|
:transactionLinkCount="transactionLinkCount"
|
||||||
|
v-on="$listeners"
|
||||||
/>
|
/>
|
||||||
|
</template>
|
||||||
|
<template #community>
|
||||||
|
<contribution-info />
|
||||||
|
</template>
|
||||||
|
<template #empty />
|
||||||
|
</right-side>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="12">
|
<b-col cols="12">
|
||||||
<!-- router-view -->
|
<!-- router-view -->
|
||||||
@ -75,7 +168,20 @@
|
|||||||
:transactionCount="transactionCount"
|
:transactionCount="transactionCount"
|
||||||
:transactionLinkCount="transactionLinkCount"
|
:transactionLinkCount="transactionLinkCount"
|
||||||
@set-tunneled-email="setTunneledEmail"
|
@set-tunneled-email="setTunneledEmail"
|
||||||
|
>
|
||||||
|
<template #transactions>
|
||||||
|
<last-transactions
|
||||||
|
:transactions="transactions"
|
||||||
|
:transactionCount="transactionCount"
|
||||||
|
:transactionLinkCount="transactionLinkCount"
|
||||||
|
v-on="$listeners"
|
||||||
/>
|
/>
|
||||||
|
</template>
|
||||||
|
<template #community>
|
||||||
|
<contribution-info />
|
||||||
|
</template>
|
||||||
|
<template #empty />
|
||||||
|
</right-side>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row>
|
<b-row>
|
||||||
@ -102,6 +208,12 @@ import { logout } from '@/graphql/mutations'
|
|||||||
import ContentFooter from '@/components/ContentFooter.vue'
|
import ContentFooter from '@/components/ContentFooter.vue'
|
||||||
import { FadeTransition } from 'vue2-transitions'
|
import { FadeTransition } from 'vue2-transitions'
|
||||||
import CONFIG from '@/config'
|
import CONFIG from '@/config'
|
||||||
|
import GddAmount from '@/components/Template/ContentHeader/GddAmount.vue'
|
||||||
|
import GdtAmount from '@/components/Template/ContentHeader/GdtAmount.vue'
|
||||||
|
import CommunityMember from '@/components/Template/ContentHeader/CommunityMember.vue'
|
||||||
|
import NavCommunity from '@/components/Template/ContentHeader/NavCommunity.vue'
|
||||||
|
import LastTransactions from '@/components/Template/RightSide/LastTransactions.vue'
|
||||||
|
import ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DashboardLayout',
|
name: 'DashboardLayout',
|
||||||
@ -116,6 +228,12 @@ export default {
|
|||||||
ContentFooter,
|
ContentFooter,
|
||||||
FadeTransition,
|
FadeTransition,
|
||||||
Breadcrumb,
|
Breadcrumb,
|
||||||
|
GddAmount,
|
||||||
|
GdtAmount,
|
||||||
|
CommunityMember,
|
||||||
|
NavCommunity,
|
||||||
|
LastTransactions,
|
||||||
|
ContributionInfo,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -1,116 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div v-if="path === '/overview'">
|
<slot :name="path" />
|
||||||
<b-row>
|
|
||||||
<b-col cols="12" lg="5">
|
|
||||||
<div>
|
|
||||||
<gdd-amount :balance="balance" :showStatus="false" :path="path" :badgeShow="false" />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" lg="7">
|
|
||||||
<div>
|
|
||||||
<community-member :totalUsers="totalUsers" />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
<!-- <div v-if="path === '/storys'"></div>
|
|
||||||
<div v-if="path === '/addresses'"></div> -->
|
|
||||||
<div v-if="path === '/send'">
|
|
||||||
<b-row>
|
|
||||||
<b-col cols="12" lg="6">
|
|
||||||
<div>
|
|
||||||
<gdd-amount :balance="balance" :badge="true" :showStatus="true" :badgeShow="false" />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" lg="6">
|
|
||||||
<div>
|
|
||||||
<router-link to="gdt">
|
|
||||||
<gdt-amount :GdtBalance="GdtBalance" :badgeShow="false" />
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
<div v-if="path === '/transactions'">
|
|
||||||
<b-row>
|
|
||||||
<b-col cols="12" lg="6">
|
|
||||||
<div>
|
|
||||||
<router-link to="transactions">
|
|
||||||
<gdd-amount :balance="balance" :showStatus="true" />
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" lg="6">
|
|
||||||
<div>
|
|
||||||
<router-link to="gdt">
|
|
||||||
<gdt-amount :GdtBalance="GdtBalance" />
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
<div v-if="path === '/gdt'">
|
|
||||||
<b-row>
|
|
||||||
<b-col cols="12" lg="6">
|
|
||||||
<div>
|
|
||||||
<router-link to="transactions">
|
|
||||||
<gdd-amount :balance="balance" :showStatus="false" />
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
<b-col cols="12" lg="6">
|
|
||||||
<div>
|
|
||||||
<router-link to="gdt">
|
|
||||||
<gdt-amount :badge="true" :showStatus="true" :GdtBalance="GdtBalance" />
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</div>
|
|
||||||
<!-- <div 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>
|
|
||||||
</div> -->
|
|
||||||
<div v-if="path === '/community'"><nav-community /></div>
|
|
||||||
<div v-if="path === '/settings'"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import GddAmount from '@/components/Template/ContentHeader/GddAmount.vue'
|
|
||||||
import GdtAmount from '@/components/Template/ContentHeader/GdtAmount.vue'
|
|
||||||
import CommunityMember from '@/components/Template/ContentHeader/CommunityMember.vue'
|
|
||||||
import NavCommunity from '@/components/Template/ContentHeader/NavCommunity.vue'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ContentHeader',
|
name: 'ContentHeader',
|
||||||
components: {
|
|
||||||
GddAmount,
|
|
||||||
GdtAmount,
|
|
||||||
CommunityMember,
|
|
||||||
NavCommunity,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
balance: { type: Number, required: true },
|
|
||||||
GdtBalance: { type: Number, required: true },
|
|
||||||
totalUsers: { type: Number, required: true },
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
path() {
|
path() {
|
||||||
return this.$route.path
|
return this.$route.path.replace(/^\//, '')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,157 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="right-side mt-3 mt-lg-0">
|
<div class="right-side mt-3 mt-lg-0">
|
||||||
<b-container v-if="path === '/overview'" fluid="md">
|
<b-container>
|
||||||
<!-- <b-row>
|
<slot :name="name" />
|
||||||
<b-col>
|
|
||||||
<div class="p-4">
|
|
||||||
<favourites />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row> -->
|
|
||||||
<b-row>
|
|
||||||
<b-col>
|
|
||||||
<div>
|
|
||||||
<last-transactions
|
|
||||||
:transactions="transactions"
|
|
||||||
:transactionCount="transactionCount"
|
|
||||||
:transactionLinkCount="transactionLinkCount"
|
|
||||||
v-on="$listeners"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-container>
|
</b-container>
|
||||||
<!-- <b-container v-if="path === '/storys'">
|
|
||||||
<b-row>
|
|
||||||
<b-col>
|
|
||||||
<div class="p-4">
|
|
||||||
<favourites />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-row class="mt-3 mt-lg-5">
|
|
||||||
<b-col>
|
|
||||||
<div class="p-4 h-100">
|
|
||||||
<top-storys-by-month />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-container> -->
|
|
||||||
<!-- <b-container v-if="path === '/addresses'">favourites ride side</b-container> -->
|
|
||||||
<b-container v-if="path === '/send'">
|
|
||||||
<!-- <b-row>
|
|
||||||
<b-col>
|
|
||||||
<div class="p-4">
|
|
||||||
<favourites />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row> -->
|
|
||||||
<b-row>
|
|
||||||
<b-col>
|
|
||||||
<div>
|
|
||||||
<last-transactions
|
|
||||||
:transactions="transactions"
|
|
||||||
:transactionCount="transactionCount"
|
|
||||||
:transactionLinkCount="transactionLinkCount"
|
|
||||||
v-on="$listeners"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-container>
|
|
||||||
<b-container v-if="path === '/transactions'">
|
|
||||||
<!-- <b-row>
|
|
||||||
<b-col>
|
|
||||||
<div class="p-4">
|
|
||||||
<favourites />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row> -->
|
|
||||||
<b-row>
|
|
||||||
<b-col>
|
|
||||||
<div>
|
|
||||||
<last-transactions
|
|
||||||
:transactions="transactions"
|
|
||||||
:transactionCount="transactionCount"
|
|
||||||
:transactionLinkCount="transactionLinkCount"
|
|
||||||
v-on="$listeners"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-container>
|
|
||||||
<b-container v-if="path === '/gdt'">
|
|
||||||
<!-- <b-row>
|
|
||||||
<b-col>
|
|
||||||
<div class="p-4">
|
|
||||||
<favourites />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row> -->
|
|
||||||
<b-row>
|
|
||||||
<b-col>
|
|
||||||
<div>
|
|
||||||
<last-transactions
|
|
||||||
:transactions="transactions"
|
|
||||||
:transactionCount="transactionCount"
|
|
||||||
:transactionLinkCount="transactionLinkCount"
|
|
||||||
v-on="$listeners"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-container>
|
|
||||||
<!-- <b-container v-if="path === '/profile'">
|
|
||||||
<b-row>
|
|
||||||
<b-col>
|
|
||||||
<div class="p-4">
|
|
||||||
<favourites />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-row class="mt-3 mt-lg-5">
|
|
||||||
<b-col>
|
|
||||||
<div class="p-4 h-100">
|
|
||||||
<your-overview />
|
|
||||||
</div>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-container> -->
|
|
||||||
<b-container v-if="path === '/community'">
|
|
||||||
<contribution-info />
|
|
||||||
<!-- <last-contributions class="mt-5" /> -->
|
|
||||||
</b-container>
|
|
||||||
<b-container v-if="path === '/settings'"></b-container>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
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'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RightSide',
|
name: 'RightSide',
|
||||||
components: {
|
|
||||||
LastTransactions,
|
|
||||||
// Favourites,
|
|
||||||
// TopStorysByMonth,
|
|
||||||
// LastContributions,
|
|
||||||
ContributionInfo,
|
|
||||||
// YourOverview,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
transactions: {
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
transactionCount: { type: Number, default: 0 },
|
|
||||||
transactionLinkCount: { type: Number, default: 0 },
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
path() {
|
name() {
|
||||||
return this.$route.path
|
switch (this.$route.path.replace(/^\//, '')) {
|
||||||
|
case 'settings':
|
||||||
|
return 'empty'
|
||||||
|
case 'community':
|
||||||
|
return 'community'
|
||||||
|
default:
|
||||||
|
return 'transactions'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user