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

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

@ -1,6 +1,6 @@
<template>
<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')" -->
<div class="mb-6 mt-3">
<b-nav vertical class="w-200">
@ -25,6 +25,10 @@
<b-icon icon="layout-text-sidebar-reverse" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.transactions') }}</span>
</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-icon icon="person" aria-hidden="true"></b-icon>
<span class="ml-2">{{ $t('navigation.profile') }}</span>
@ -96,7 +100,7 @@ export default {
.activeRoute {
font-weight: bold;
color: rgb(219, 129, 19);
border-left: 1rem solid;
border-left: 1px solid;
}
/* .component-navbar .active, */
@ -106,6 +110,9 @@ export default {
} */
#component-sidebar {
min-width: 53px;
max-width: 200px;
max-width: 210px;
}
#side-menu {
max-width: 210px;
}
</style>

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

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

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

@ -17,8 +17,8 @@
"
>
<b-row>
<b-col cols="9" class="h4">{{ $t('gddKonto') }}</b-col>
<b-col cols="3" class="text-center">
<b-col class="h4">{{ $t('gddKonto') }}</b-col>
<!-- <b-col cols="3" class="text-center">
<div>
<b-icon
:icon="showStatus ? 'check-circle' : 'circle'"
@ -26,7 +26,7 @@
></b-icon>
<div class="small">{{ badge ? $t('active') : $t('inactive') }}</div>
</div>
</b-col>
</b-col> -->
</b-row>
<div>
<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'"
>
<b-row>
<b-col cols="9" class="h4">{{ $t('gdt.gdtKonto') }}</b-col>
<b-col cols="3" class="text-center">
<b-col class="h4">{{ $t('gdt.gdtKonto') }}</b-col>
<!-- <b-col cols="3" class="text-center">
<div>
<b-icon
:icon="badge ? 'check-circle' : 'circle'"
@ -23,7 +23,7 @@
></b-icon>
<div class="small">{{ badge ? $t('active') : $t('inactive') }}</div>
</div>
</b-col>
</b-col> -->
</b-row>
<div>
<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-col>
</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
v-if="
index <= 7 &&
@ -14,35 +15,51 @@
transaction.typeId !== 'LINK_SUMMARY' &&
transaction.typeId !== 'CREATION'
"
class="d-flex align-items-center"
>
<b-row>
<b-col cols="3">
<b-avatar badge-variant="white" src="https://placekitten.com/300/300">
<template #badge>
<b-icon
:icon="transaction.typeId === 'SEND' ? 'arrow-left' : 'arrow-right'"
<b-avatar
:text="transaction.linkedUser.firstName[0] + transaction.linkedUser.lastName[0]"
:variant="transaction.typeId === 'SEND' ? 'danger' : 'success'"
></b-icon>
</template>
</b-avatar>
</b-col>
<b-col>
<b-row>
<b-col class="small font-weight-bold">
class="mr-3"
></b-avatar>
<span class="mr-auto">
{{ transaction.linkedUser.firstName }} {{ transaction.linkedUser.lastName }}
</b-col>
<b-col cols="2" class="mr-4">
<b-icon icon="bookmark-plus" variant="black"></b-icon>
</b-col>
</b-row>
<b-row class="mb-2">
<b-col class="small">{{ transaction.amount | GDD }}</b-col>
</span>
<b-badge>{{ transaction.amount | GDD }}</b-badge>
</div>
</b-list-group-item>
</b-list-group>
<!-- <div class="mt-3 mb-3" v-for="(transaction, index) in transactions" :key="transaction.id">
<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">{{ transaction.amount | GDD }}</b-col>
</b-row>
</b-col>
</b-row>
</div>
</div>
</div> -->
</div>
</template>
<script>
@ -55,5 +72,10 @@ export default {
transactionCount: { type: Number, default: 0 },
transactionLinkCount: { type: Number, default: 0 },
},
computed: {
avatarText() {
return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
},
},
}
</script>

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

@ -2,11 +2,12 @@
<div class="transaction-slot-receive">
<b-row @click="visible = !visible" class="">
<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>
<div>
<name
class="font-weight-bold"
v-on="$listeners"
:amount="amount"
:linkedUser="linkedUser"
@ -85,5 +86,10 @@ export default {
visible: false,
}
},
computed: {
avatarText() {
return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
},
},
}
</script>

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

@ -2,11 +2,12 @@
<div class="transaction-slot-send">
<b-row @click="visible = !visible" class="">
<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>
<div>
<name
class="font-weight-bold"
v-on="$listeners"
:amount="amount"
:linkedUser="linkedUser"
@ -86,5 +87,10 @@ export default {
visible: false,
}
},
computed: {
avatarText() {
return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
},
},
}
</script>

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

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

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

@ -38,7 +38,11 @@
<b-row class="d-lg-flex" cols="12">
<!-- ContentHeader -->
<b-col>
<content-header :balance="balance" :GdtBalance="GdtBalance" />
<content-header
:balance="balance"
:GdtBalance="GdtBalance"
:totalUsers="totalUsers"
/>
</b-col>
</b-row>
</b-col>
@ -97,7 +101,7 @@ import Navbar from '@/components/Menu/Navbar.vue'
import Sidebar from '@/components/Menu/Sidebar.vue'
import MobileSidebar from '@/components/MobileSidebar/MobileSidebar.vue'
import SessionLogoutTimeout from '@/components/SessionLogoutTimeout.vue'
import { transactionsQuery } from '@/graphql/queries'
import { transactionsQuery, communityStatistics } from '@/graphql/queries'
import { logout } from '@/graphql/mutations'
import ContentFooter from '@/components/ContentFooter.vue'
import { FadeTransition } from 'vue2-transitions'
@ -129,6 +133,7 @@ export default {
hamburger: true,
darkMode: false,
skeleton: true,
totalUsers: null,
}
},
provide() {
@ -138,6 +143,7 @@ export default {
},
created() {
this.updateTransactions(0)
this.getCommunityStatistics()
setTimeout(() => {
this.skeleton = false
}, 1500)
@ -189,6 +195,23 @@ export default {
// 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() {
window.location.assign(CONFIG.ADMIN_AUTH_URL.replace('{token}', this.$store.state.token))
this.$store.dispatch('logout') // logout without redirect

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

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

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

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

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

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

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

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