IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

style header components

Browse Source
This commit is contained in:
ogerly 2022-11-30 09:35:05 +01:00
parent 694a9fa09e
commit b1a1189a13
15 changed files with 135 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/assets/News/news.json
View File

@ -5,12 +5,5 @@
"text": "Gradido schenkt dir Dankbarkeit im Februar", "text": "Gradido schenkt dir Dankbarkeit im Februar",
"url": "", "url": "",
"extra": "Gradido ebenet Wege zu sozialem Frieden" "extra": "Gradido ebenet Wege zu sozialem Frieden"
},
{
"id": "1",
"date": "22. Dezember 2022",
"text": "Gradido schenkt dir Dankbarkeit im Dezember",
"url": "",
"extra": "Gradido ebenet Wege zu sozialem Frieden"
} }
] ]

7
frontend/src/components/GddTransactionList.vue
View File

@ -15,11 +15,10 @@
<div v-for="({ id, typeId }, index) in transactions" :key="id"> <div v-for="({ id, typeId }, index) in transactions" :key="id">
<transaction-list-item <transaction-list-item
:typeId="typeId" :typeId="typeId"
class="pointer appBoxShadow gradido-border-radius mb-3" class="pointer mb-3 bg-white appBoxShadow gradido-border-radius p-4"
> >
<template #DECAY> <template #DECAY>
<transaction-decay <transaction-decay
class="list-group-item"
v-bind="transactions[index]" v-bind="transactions[index]"
:previousBookedBalance="previousBookedBalance(index)" :previousBookedBalance="previousBookedBalance(index)"
/> />
@ -27,7 +26,6 @@
<template #SEND> <template #SEND>
<transaction-send <transaction-send
class="list-group-item"
v-bind="transactions[index]" v-bind="transactions[index]"
:previousBookedBalance="previousBookedBalance(index)" :previousBookedBalance="previousBookedBalance(index)"
v-on="$listeners" v-on="$listeners"
@ -36,7 +34,6 @@
<template #RECEIVE> <template #RECEIVE>
<transaction-receive <transaction-receive
class="list-group-item"
v-bind="transactions[index]" v-bind="transactions[index]"
:previousBookedBalance="previousBookedBalance(index)" :previousBookedBalance="previousBookedBalance(index)"
v-on="$listeners" v-on="$listeners"
@ -45,7 +42,6 @@
<template #CREATION> <template #CREATION>
<transaction-creation <transaction-creation
class="list-group-item"
v-bind="transactions[index]" v-bind="transactions[index]"
:previousBookedBalance="previousBookedBalance(index)" :previousBookedBalance="previousBookedBalance(index)"
v-on="$listeners" v-on="$listeners"
@ -54,7 +50,6 @@
<template #LINK_SUMMARY> <template #LINK_SUMMARY>
<transaction-link-summary <transaction-link-summary
class="list-group-item"
v-bind="transactions[index]" v-bind="transactions[index]"
:transactionLinkCount="transactionLinkCount" :transactionLinkCount="transactionLinkCount"
@update-transactions="updateTransactions" @update-transactions="updateTransactions"

13
frontend/src/components/Menu/Sidebar.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div id="component-sidebar "> <div id="component-sidebar ">
<div id="side-menu" ref="sideMenu" class="pl-lg-1 gradido-border-radius appBoxShadow pt-2 mt-4"> <div id="side-menu" ref="sideMenu" class="gradido-border-radius appBoxShadow pt-2 mt-4">
<!-- @mouseout="$emit('toogleMobilMenu')" --> <!-- @mouseout="$emit('toogleMobilMenu')" -->
<div class="mb-6 mt-3"> <div class="mb-6 mt-3">
<b-nav vertical class="w-200"> <b-nav vertical class="w-200">
@ -25,6 +25,10 @@
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon> <b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.transactions') }}</span> <span class="ml-2">{{ $t('navigation.transactions') }}</span>
</b-nav-item> </b-nav-item>
<b-nav-item to="/gdt" class="mb-3" active-class="activeRoute">
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('gdt.gdt') }}</span>
</b-nav-item>
<!-- <b-nav-item to="/profile" class="mb-3 HIDE_FOR_WORK_IN_PROCESS"> <!-- <b-nav-item to="/profile" class="mb-3 HIDE_FOR_WORK_IN_PROCESS">
<b-icon icon="person" aria-hidden="true"></b-icon> <b-icon icon="person" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.profile') }}</span> <span class="ml-2">{{ $t('navigation.profile') }}</span>
@ -96,7 +100,7 @@ export default {
.activeRoute { .activeRoute {
font-weight: bold; font-weight: bold;
color: rgb(219, 129, 19); color: rgb(219, 129, 19);
border-left: 1rem solid; border-left: 1px solid;
} }
/* .component-navbar .active, */ /* .component-navbar .active, */
@ -106,6 +110,9 @@ export default {
} */ } */
#component-sidebar { #component-sidebar {
min-width: 53px; min-width: 53px;
max-width: 200px; max-width: 210px;
}
#side-menu {
max-width: 210px;
} }
</style> </style>

14
frontend/src/components/Template/ContentHeader/CommunityMember.vue
View File

@ -2,21 +2,20 @@
<div> <div>
<div class="text-center"> <div class="text-center">
<b-badge class="position-absolute mt--2 ml--5 px-3" variant="success"> <b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">
{{ $t('active') }} {{ $t('community.community') }}
</b-badge> </b-badge>
</div> </div>
<div <div
class="community-member bg-white appBoxShadow gradido-border-radius p-4 border border-success" class="community-member bg-white appBoxShadow gradido-border-radius p-4 border border-success"
> >
<div class="h4">{{ $t('community.communityMember') }}</div>
<b-row> <b-row>
<b-col cols="8"> <b-col cols="8">
<div class="small">{{ $t('community.city') }}</div> <div class="h4">{{ $t('community.communityMember') }}</div>
<div class="small">{{ CONFIG.COMMUNITY_NAME }}</div> <div class="small">{{ CONFIG.COMMUNITY_NAME }}</div>
</b-col> </b-col>
<b-col cols="4" class="border-left border-light"> <b-col cols="4" class="border-left border-light p-3">
<b-icon icon="people" class="ml-3 mr-3"></b-icon> <b-icon icon="people"></b-icon>
{{ $t('1234') }} {{ totalUsers }}
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@ -27,6 +26,9 @@ import CONFIG from '@/config'
export default { export default {
name: 'CommunityMember', name: 'CommunityMember',
props: {
totalUsers: { type: Number, required: true },
},
data() { data() {
return { return {
CONFIG, CONFIG,

6
frontend/src/components/Template/ContentHeader/GddAmount.vue
View File

@ -17,8 +17,8 @@
" "
> >
<b-row> <b-row>
<b-col cols="9" class="h4">{{ $t('gddKonto') }}</b-col> <b-col class="h4">{{ $t('gddKonto') }}</b-col>
<b-col cols="3" class="text-center"> <!-- <b-col cols="3" class="text-center">
<div> <div>
<b-icon <b-icon
:icon="showStatus ? 'check-circle' : 'circle'" :icon="showStatus ? 'check-circle' : 'circle'"
@ -26,7 +26,7 @@
></b-icon> ></b-icon>
<div class="small">{{ badge ? $t('active') : $t('inactive') }}</div> <div class="small">{{ badge ? $t('active') : $t('inactive') }}</div>
</div> </div>
</b-col> </b-col> -->
</b-row> </b-row>
<div> <div>
<b-icon icon="layers" class="mr-3 gradido-global-border-color-accent"></b-icon> <b-icon icon="layers" class="mr-3 gradido-global-border-color-accent"></b-icon>

6
frontend/src/components/Template/ContentHeader/GdtAmount.vue
View File

@ -14,8 +14,8 @@
:class="showStatus ? 'gradido-global-border-color-accent' : 'border-light opacity-05'" :class="showStatus ? 'gradido-global-border-color-accent' : 'border-light opacity-05'"
> >
<b-row> <b-row>
<b-col cols="9" class="h4">{{ $t('gdt.gdtKonto') }}</b-col> <b-col class="h4">{{ $t('gdt.gdtKonto') }}</b-col>
<b-col cols="3" class="text-center"> <!-- <b-col cols="3" class="text-center">
<div> <div>
<b-icon <b-icon
:icon="badge ? 'check-circle' : 'circle'" :icon="badge ? 'check-circle' : 'circle'"
@ -23,7 +23,7 @@
></b-icon> ></b-icon>
<div class="small">{{ badge ? $t('active') : $t('inactive') }}</div> <div class="small">{{ badge ? $t('active') : $t('inactive') }}</div>
</div> </div>
</b-col> </b-col> -->
</b-row> </b-row>
<div> <div>
<b-icon icon="layers" class="mr-3" :variant="badge ? 'success' : 'light'"></b-icon> <b-icon icon="layers" class="mr-3" :variant="badge ? 'success' : 'light'"></b-icon>

68
frontend/src/components/Template/RightSide/LastTransactions.vue
View File

@ -6,7 +6,8 @@
<b-icon icon="three-dots-vertical"></b-icon> <b-icon icon="three-dots-vertical"></b-icon>
</b-col> </b-col>
</b-row> </b-row>
<div class="mt-3 mb-3" v-for="(transaction, index) in transactions" :key="transaction.id"> <b-list-group flush horizontal>
<b-list-group-item v-for="(transaction, index) in transactions" :key="transaction.id">
<div <div
v-if=" v-if="
index <= 7 && index <= 7 &&
@ -14,35 +15,51 @@
transaction.typeId !== 'LINK_SUMMARY' && transaction.typeId !== 'LINK_SUMMARY' &&
transaction.typeId !== 'CREATION' transaction.typeId !== 'CREATION'
" "
class="d-flex align-items-center"
> >
<b-row> <b-avatar
<b-col cols="3"> :text="transaction.linkedUser.firstName[0] + transaction.linkedUser.lastName[0]"
<b-avatar badge-variant="white" src="https://placekitten.com/300/300">
<template #badge>
<b-icon
:icon="transaction.typeId === 'SEND' ? 'arrow-left' : 'arrow-right'"
:variant="transaction.typeId === 'SEND' ? 'danger' : 'success'" :variant="transaction.typeId === 'SEND' ? 'danger' : 'success'"
></b-icon> class="mr-3"
</template> ></b-avatar>
</b-avatar> <span class="mr-auto">
</b-col>
<b-col>
<b-row>
<b-col class="small font-weight-bold">
{{ transaction.linkedUser.firstName }} {{ transaction.linkedUser.lastName }} {{ transaction.linkedUser.firstName }} {{ transaction.linkedUser.lastName }}
</b-col> </span>
<b-col cols="2" class="mr-4"> <b-badge>{{ transaction.amount | GDD }}</b-badge>
<b-icon icon="bookmark-plus" variant="black"></b-icon> </div>
</b-col> </b-list-group-item>
</b-row> </b-list-group>
<b-row class="mb-2"> <!-- <div class="mt-3 mb-3" v-for="(transaction, index) in transactions" :key="transaction.id">
<b-col class="small">{{ transaction.amount | GDD }}</b-col> <b-row
v-if="
index <= 7 &&
transaction.typeId !== 'DECAY' &&
transaction.typeId !== 'LINK_SUMMARY' &&
transaction.typeId !== 'CREATION'
"
>
<b-col>
<div class="d-flex">
<b-avatar
:text="transaction.linkedUser.firstName[0] + transaction.linkedUser.lastName[0]"
:variant="transaction.typeId === 'SEND' ? 'success' : 'danger'"
class="mr-3"
></b-avatar>
<div class="small">
<div class="font-weight-bold">
{{ transaction.linkedUser.firstName }} {{ transaction.linkedUser.lastName }}
</div>
{{ $d(new Date(transaction.balanceDate), 'short') }}
</div>
</div>
<b-row class="mb-2 text-right">
<b-col class="small">{{ $d(new Date(transaction.balanceDate), 'short') }}</b-col> <b-col class="small">{{ $d(new Date(transaction.balanceDate), 'short') }}</b-col>
<b-col class="small">{{ transaction.amount | GDD }}</b-col>
</b-row> </b-row>
</b-col> </b-col>
</b-row> </b-row>
</div> </div> -->
</div>
</div> </div>
</template> </template>
<script> <script>
@ -55,5 +72,10 @@ export default {
transactionCount: { type: Number, default: 0 }, transactionCount: { type: Number, default: 0 },
transactionLinkCount: { type: Number, default: 0 }, transactionLinkCount: { type: Number, default: 0 },
}, },
computed: {
avatarText() {
return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
},
},
} }
</script> </script>

8
frontend/src/components/Transactions/TransactionReceive.vue
View File

@ -2,11 +2,12 @@
<div class="transaction-slot-receive"> <div class="transaction-slot-receive">
<b-row @click="visible = !visible" class=""> <b-row @click="visible = !visible" class="">
<b-col cols="2"> <b-col cols="2">
<b-avatar icon="arrow-right-circle" variant="success" size="4em"></b-avatar> <b-avatar :text="avatarText" variant="success" size="4em"></b-avatar>
</b-col> </b-col>
<b-col> <b-col>
<div> <div>
<name <name
class="font-weight-bold"
v-on="$listeners" v-on="$listeners"
:amount="amount" :amount="amount"
:linkedUser="linkedUser" :linkedUser="linkedUser"
@ -85,5 +86,10 @@ export default {
visible: false, visible: false,
} }
}, },
computed: {
avatarText() {
return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
},
},
} }
</script> </script>

8
frontend/src/components/Transactions/TransactionSend.vue
View File

@ -2,11 +2,12 @@
<div class="transaction-slot-send"> <div class="transaction-slot-send">
<b-row @click="visible = !visible" class=""> <b-row @click="visible = !visible" class="">
<b-col cols="2"> <b-col cols="2">
<b-avatar icon="arrow-left-circle" variant="danger" size="4em"></b-avatar> <b-avatar :text="avatarText" variant="danger" size="4em"></b-avatar>
</b-col> </b-col>
<b-col> <b-col>
<div> <div>
<name <name
class="font-weight-bold"
v-on="$listeners" v-on="$listeners"
:amount="amount" :amount="amount"
:linkedUser="linkedUser" :linkedUser="linkedUser"
@ -86,5 +87,10 @@ export default {
visible: false, visible: false,
} }
}, },
computed: {
avatarText() {
return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
},
},
} }
</script> </script>

12
frontend/src/graphql/queries.js
View File

@ -210,12 +210,12 @@ export const communityStatistics = gql`
query { query {
communityStatistics { communityStatistics {
totalUsers totalUsers
activeUsers # activeUsers
deletedUsers # deletedUsers
totalGradidoCreated # totalGradidoCreated
totalGradidoDecayed # totalGradidoDecayed
totalGradidoAvailable # totalGradidoAvailable
totalGradidoUnbookedDecayed # totalGradidoUnbookedDecayed
} }
} }
` `

27
frontend/src/layouts/DashboardLayout.vue
View File

@ -38,7 +38,11 @@
<b-row class="d-lg-flex" cols="12"> <b-row class="d-lg-flex" cols="12">
<!-- ContentHeader --> <!-- ContentHeader -->
<b-col> <b-col>
<content-header :balance="balance" :GdtBalance="GdtBalance" /> <content-header
:balance="balance"
:GdtBalance="GdtBalance"
:totalUsers="totalUsers"
/>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
@ -97,7 +101,7 @@ import Navbar from '@/components/Menu/Navbar.vue'
import Sidebar from '@/components/Menu/Sidebar.vue' import Sidebar from '@/components/Menu/Sidebar.vue'
import MobileSidebar from '@/components/MobileSidebar/MobileSidebar.vue' import MobileSidebar from '@/components/MobileSidebar/MobileSidebar.vue'
import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue' import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
import { transactionsQuery } from '@/graphql/queries' import { transactionsQuery, communityStatistics } from '@/graphql/queries'
import { logout } from '@/graphql/mutations' 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'
@ -129,6 +133,7 @@ export default {
hamburger: true, hamburger: true,
darkMode: false, darkMode: false,
skeleton: true, skeleton: true,
totalUsers: null,
} }
}, },
provide() { provide() {
@ -138,6 +143,7 @@ export default {
}, },
created() { created() {
this.updateTransactions(0) this.updateTransactions(0)
this.getCommunityStatistics()
setTimeout(() => { setTimeout(() => {
this.skeleton = false this.skeleton = false
}, 1500) }, 1500)
@ -189,6 +195,23 @@ export default {
// what to do when loading balance fails? // what to do when loading balance fails?
}) })
}, },
async getCommunityStatistics() {
this.$apollo
.query({
query: communityStatistics,
})
.then((result) => {
this.totalUsers = result.data.communityStatistics.totalUsers
// this.totalGradidoCreated = result.data.communityStatistics.totalGradidoCreated
// this.totalGradidoDecayed =
// Number(result.data.communityStatistics.totalGradidoDecayed) +
// Number(result.data.communityStatistics.totalGradidoUnbookedDecayed)
// this.totalGradidoAvailable = result.data.communityStatistics.totalGradidoAvailable
})
.catch(() => {
this.toastError('communityStatistics has no result, use default data')
})
},
admin() { admin() {
window.location.assign(CONFIG.ADMIN_AUTH_URL.replace('{token}', this.$store.state.token)) window.location.assign(CONFIG.ADMIN_AUTH_URL.replace('{token}', this.$store.state.token))
this.$store.dispatch('logout') // logout without redirect this.$store.dispatch('logout') // logout without redirect

5
frontend/src/layouts/templates/ContentHeader.vue
View File

@ -9,7 +9,7 @@
</b-col> </b-col>
<b-col cols="7"> <b-col cols="7">
<div> <div>
<community-member /> <community-member :totalUsers="totalUsers" />
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
@ -25,7 +25,9 @@
</b-col> </b-col>
<b-col cols="6"> <b-col cols="6">
<div> <div>
<router-link to="gdt">
<gdt-amount :GdtBalance="GdtBalance" /> <gdt-amount :GdtBalance="GdtBalance" />
</router-link>
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
@ -103,6 +105,7 @@ export default {
props: { props: {
balance: { type: Number, required: true }, balance: { type: Number, required: true },
GdtBalance: { type: Number, required: true }, GdtBalance: { type: Number, required: true },
totalUsers: { type: Number, required: true },
}, },
computed: { computed: {

2
frontend/src/locales/de.json
View File

@ -6,6 +6,7 @@
"85": "85%", "85": "85%",
"active": "aktiv", "active": "aktiv",
"advanced-calculation": "Vorausberechnung", "advanced-calculation": "Vorausberechnung",
"member": "Mitglied",
"auth": { "auth": {
"left": { "left": {
"dignity": "Würde", "dignity": "Würde",
@ -199,6 +200,7 @@
}, },
"GDT": "GDT", "GDT": "GDT",
"gdt": { "gdt": {
"gdt":"Gradido Transform",
"calculation": "Berechnung der Gradido Transform", "calculation": "Berechnung der Gradido Transform",
"contribution": "Beitrag", "contribution": "Beitrag",
"conversion": "Umrechnung", "conversion": "Umrechnung",

2
frontend/src/locales/en.json
View File

@ -6,6 +6,7 @@
"85": "85%", "85": "85%",
"active": "active", "active": "active",
"advanced-calculation": "Advanced calculation", "advanced-calculation": "Advanced calculation",
"member": "Member",
"auth": { "auth": {
"left": { "left": {
"dignity": "Dignity", "dignity": "Dignity",
@ -199,6 +200,7 @@
}, },
"GDT": "GDT", "GDT": "GDT",
"gdt": { "gdt": {
"gdt":"Gradido Transform",
"calculation": "Calculation of Gradido Transform", "calculation": "Calculation of Gradido Transform",
"contribution": "Contribution", "contribution": "Contribution",
"conversion": "Conversion", "conversion": "Conversion",

9
frontend/src/pages/InfoStatistic.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="info-statistic"> <div class="info-statistic">
<b-container> <b-container class="bg-white appBoxShadow gradido-border-radius p-4">
<div class="h3">{{ $t('community.community') }}</div> <div class="h3">{{ $t('community.community') }}</div>
<div class="h1">{{ CONFIG.COMMUNITY_NAME }}</div> <div class="h1">{{ CONFIG.COMMUNITY_NAME }}</div>
<div> <div>
@ -12,7 +12,7 @@
</b-container> </b-container>
<hr /> <hr />
<b-container> <b-container class="bg-white appBoxShadow gradido-border-radius p-4">
<div class="h3">{{ $t('community.openContributionLinks') }}</div> <div class="h3">{{ $t('community.openContributionLinks') }}</div>
<small v-if="count > 0"> <small v-if="count > 0">
{{ {{
@ -37,7 +37,7 @@
</ul> </ul>
</b-container> </b-container>
<hr /> <hr />
<b-container> <b-container class="bg-white appBoxShadow gradido-border-radius p-4">
<div class="h3">{{ $t('community.moderators') }}</div> <div class="h3">{{ $t('community.moderators') }}</div>
<ul> <ul>
<li v-for="item in itemsAdminUser" v-bind:key="item.id"> <li v-for="item in itemsAdminUser" v-bind:key="item.id">
@ -45,7 +45,8 @@
</li> </li>
</ul> </ul>
</b-container> </b-container>
<b-container> <hr />
<b-container class="bg-white appBoxShadow gradido-border-radius p-4">
<div class="h3">{{ $t('contact') }}</div> <div class="h3">{{ $t('contact') }}</div>
<b-link :href="`mailto:${supportMail}`">{{ supportMail }}</b-link> <b-link :href="`mailto:${supportMail}`">{{ supportMail }}</b-link>
</b-container> </b-container>