From b1a1189a13f096e550321415c19d6c07fbb81018 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 30 Nov 2022 09:35:05 +0100
Subject: [PATCH] style header components

---
 frontend/src/assets/News/news.json            |  7 --
 .../src/components/GddTransactionList.vue     |  7 +-
 frontend/src/components/Menu/Sidebar.vue      | 13 ++-
 .../ContentHeader/CommunityMember.vue         | 14 ++--
 .../Template/ContentHeader/GddAmount.vue      |  6 +-
 .../Template/ContentHeader/GdtAmount.vue      |  6 +-
 .../Template/RightSide/LastTransactions.vue   | 80 ++++++++++++-------
 .../Transactions/TransactionReceive.vue       |  8 +-
 .../Transactions/TransactionSend.vue          |  8 +-
 frontend/src/graphql/queries.js               | 12 +--
 frontend/src/layouts/DashboardLayout.vue      | 27 ++++++-
 .../src/layouts/templates/ContentHeader.vue   |  7 +-
 frontend/src/locales/de.json                  |  2 +
 frontend/src/locales/en.json                  |  2 +
 frontend/src/pages/InfoStatistic.vue          |  9 ++-
 15 files changed, 135 insertions(+), 73 deletions(-)

diff --git a/frontend/src/assets/News/news.json b/frontend/src/assets/News/news.json
index f3b94c431..b179a3b49 100644
--- a/frontend/src/assets/News/news.json
+++ b/frontend/src/assets/News/news.json
@@ -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"
   }
 ]
diff --git a/frontend/src/components/GddTransactionList.vue b/frontend/src/components/GddTransactionList.vue
index e3ff9624c..509fbe167 100644
--- a/frontend/src/components/GddTransactionList.vue
+++ b/frontend/src/components/GddTransactionList.vue
@@ -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"
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 837ae854f..aecf1559f 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -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>
diff --git a/frontend/src/components/Template/ContentHeader/CommunityMember.vue b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
index ecddec9d1..78b595228 100644
--- a/frontend/src/components/Template/ContentHeader/CommunityMember.vue
+++ b/frontend/src/components/Template/ContentHeader/CommunityMember.vue
@@ -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,
diff --git a/frontend/src/components/Template/ContentHeader/GddAmount.vue b/frontend/src/components/Template/ContentHeader/GddAmount.vue
index fdfef225b..f171f58ff 100644
--- a/frontend/src/components/Template/ContentHeader/GddAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GddAmount.vue
@@ -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>
diff --git a/frontend/src/components/Template/ContentHeader/GdtAmount.vue b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
index 37f1dfe39..c1da15f1d 100644
--- a/frontend/src/components/Template/ContentHeader/GdtAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
@@ -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>
diff --git a/frontend/src/components/Template/RightSide/LastTransactions.vue b/frontend/src/components/Template/RightSide/LastTransactions.vue
index ed1d91ff9..e28059942 100644
--- a/frontend/src/components/Template/RightSide/LastTransactions.vue
+++ b/frontend/src/components/Template/RightSide/LastTransactions.vue
@@ -6,8 +6,31 @@
         <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">
-      <div
+    <b-list-group flush horizontal>
+      <b-list-group-item v-for="(transaction, index) in transactions" :key="transaction.id">
+        <div
+          v-if="
+            index <= 7 &&
+            transaction.typeId !== 'DECAY' &&
+            transaction.typeId !== 'LINK_SUMMARY' &&
+            transaction.typeId !== 'CREATION'
+          "
+          class="d-flex align-items-center"
+        >
+          <b-avatar
+            :text="transaction.linkedUser.firstName[0] + transaction.linkedUser.lastName[0]"
+            :variant="transaction.typeId === 'SEND' ? 'danger' : 'success'"
+            class="mr-3"
+          ></b-avatar>
+          <span class="mr-auto">
+            {{ transaction.linkedUser.firstName }} {{ transaction.linkedUser.lastName }}
+          </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' &&
@@ -15,34 +38,28 @@
           transaction.typeId !== 'CREATION'
         "
       >
-        <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'"
-                  :variant="transaction.typeId === 'SEND' ? 'danger' : 'success'"
-                ></b-icon>
-              </template>
-            </b-avatar>
-          </b-col>
-          <b-col>
-            <b-row>
-              <b-col class="small font-weight-bold">
+        <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 }}
-              </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>
-              <b-col class="small">{{ $d(new Date(transaction.balanceDate), 'short') }}</b-col>
-            </b-row>
-          </b-col>
-        </b-row>
-      </div>
-    </div>
+              </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>
 </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>
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index 7f756ee05..d0f7c7af8 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -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>
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index 57eda3444..41f82abae 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -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>
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
index 1c910a23e..d915c1245 100644
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@@ -210,12 +210,12 @@ export const communityStatistics = gql`
   query {
     communityStatistics {
       totalUsers
-      activeUsers
-      deletedUsers
-      totalGradidoCreated
-      totalGradidoDecayed
-      totalGradidoAvailable
-      totalGradidoUnbookedDecayed
+      # activeUsers
+      # deletedUsers
+      # totalGradidoCreated
+      # totalGradidoDecayed
+      # totalGradidoAvailable
+      # totalGradidoUnbookedDecayed
     }
   }
 `
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 2ac3e55ac..ca2c75c4a 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -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
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 2f2b356ac..68aef38f0 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -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>
-            <gdt-amount :GdtBalance="GdtBalance" />
+            <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: {
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index d68fd5ca4..991710c1d 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -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",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index e64feaa83..698794255 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -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",
diff --git a/frontend/src/pages/InfoStatistic.vue b/frontend/src/pages/InfoStatistic.vue
index 254a895e0..2a3bb5e72 100644
--- a/frontend/src/pages/InfoStatistic.vue
+++ b/frontend/src/pages/InfoStatistic.vue
@@ -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>