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 = {
|
||||
RouterLink: RouterLinkStub,
|
||||
RouterView: true,
|
||||
LastTransactions: true,
|
||||
}
|
||||
|
||||
const mocks = {
|
||||
@ -29,6 +30,9 @@ const mocks = {
|
||||
meta: {
|
||||
hideFooter: false,
|
||||
},
|
||||
path: {
|
||||
replace: jest.fn(),
|
||||
},
|
||||
},
|
||||
$router: {
|
||||
push: routerPushMock,
|
||||
|
||||
@ -35,7 +35,87 @@
|
||||
:balance="balance"
|
||||
:GdtBalance="GdtBalance"
|
||||
: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-row>
|
||||
</b-col>
|
||||
@ -46,7 +126,20 @@
|
||||
:transactionCount="transactionCount"
|
||||
:transactionLinkCount="transactionLinkCount"
|
||||
@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 cols="12">
|
||||
<!-- router-view -->
|
||||
@ -75,7 +168,20 @@
|
||||
:transactionCount="transactionCount"
|
||||
:transactionLinkCount="transactionLinkCount"
|
||||
@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-row>
|
||||
<b-row>
|
||||
@ -102,6 +208,12 @@ import { logout } from '@/graphql/mutations'
|
||||
import ContentFooter from '@/components/ContentFooter.vue'
|
||||
import { FadeTransition } from 'vue2-transitions'
|
||||
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 {
|
||||
name: 'DashboardLayout',
|
||||
@ -116,6 +228,12 @@ export default {
|
||||
ContentFooter,
|
||||
FadeTransition,
|
||||
Breadcrumb,
|
||||
GddAmount,
|
||||
GdtAmount,
|
||||
CommunityMember,
|
||||
NavCommunity,
|
||||
LastTransactions,
|
||||
ContributionInfo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -1,116 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="path === '/overview'">
|
||||
<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>
|
||||
<slot :name="path" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
name: 'ContentHeader',
|
||||
components: {
|
||||
GddAmount,
|
||||
GdtAmount,
|
||||
CommunityMember,
|
||||
NavCommunity,
|
||||
},
|
||||
props: {
|
||||
balance: { type: Number, required: true },
|
||||
GdtBalance: { type: Number, required: true },
|
||||
totalUsers: { type: Number, required: true },
|
||||
},
|
||||
|
||||
computed: {
|
||||
path() {
|
||||
return this.$route.path
|
||||
return this.$route.path.replace(/^\//, '')
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,157 +1,23 @@
|
||||
<template>
|
||||
<div class="right-side mt-3 mt-lg-0">
|
||||
<b-container v-if="path === '/overview'" fluid="md">
|
||||
<!-- <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>
|
||||
<slot :name="name" />
|
||||
</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>
|
||||
</template>
|
||||
<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 {
|
||||
name: 'RightSide',
|
||||
components: {
|
||||
LastTransactions,
|
||||
// Favourites,
|
||||
// TopStorysByMonth,
|
||||
// LastContributions,
|
||||
ContributionInfo,
|
||||
// YourOverview,
|
||||
},
|
||||
props: {
|
||||
transactions: {
|
||||
default: () => [],
|
||||
},
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
transactionLinkCount: { type: Number, default: 0 },
|
||||
},
|
||||
computed: {
|
||||
path() {
|
||||
return this.$route.path
|
||||
name() {
|
||||
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