From 579803d13b52e5cdd8fddd066bcf4f8a9ecb7321 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 19 Dec 2022 12:42:24 +0100
Subject: [PATCH] add lib vue-avatar

---
 frontend/package.json                         |  1 +
 .../Contributions/ContributionListItem.vue    | 17 ++++++++---------
 frontend/src/components/Menu/Navbar.spec.js   |  7 ++++---
 frontend/src/components/Menu/Navbar.vue       | 19 ++++++++-----------
 .../Template/RightSide/LastTransactions.vue   | 12 ++++++------
 .../Transactions/TransactionReceive.vue       |  9 ++++++---
 .../Transactions/TransactionSend.vue          |  8 +++++---
 frontend/yarn.lock                            |  5 +++++
 8 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 35c5437f4..9c9f47e53 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,6 +52,7 @@
     "vee-validate": "^3.4.5",
     "vue": "2.6.12",
     "vue-apollo": "^3.0.7",
+    "vue-avatar": "^2.3.3",
     "vue-flatpickr-component": "^8.1.2",
     "vue-focus": "^2.1.0",
     "vue-i18n": "^8.22.4",
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 76676c8c2..7203a1d93 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -6,15 +6,12 @@
     >
       <b-row>
         <b-col cols="2">
-          <b-avatar
+          <avatar
             v-if="firstName"
-            :text="avatarText"
-            :badge-variant="variant"
-            size="3em"
+            :username="username"
+            color="#fff"
             class="font-weight-bold"
-          >
-            <template #badge><b-icon :icon="icon"></b-icon></template>
-          </b-avatar>
+          ></avatar>
           <b-avatar v-else :icon="icon" :variant="variant" size="3em"></b-avatar>
         </b-col>
         <b-col>
@@ -178,6 +175,7 @@
   </div>
 </template>
 <script>
+import Avatar from 'vue-avatar'
 import CollapseIcon from '../TransactionRows/CollapseIcon'
 import ContributionMessagesList from '@/components/ContributionMessages/ContributionMessagesList.vue'
 import { listContributionMessages } from '../../graphql/queries.js'
@@ -185,6 +183,7 @@ import { listContributionMessages } from '../../graphql/queries.js'
 export default {
   name: 'ContributionListItem',
   components: {
+    Avatar,
     CollapseIcon,
     ContributionMessagesList,
   },
@@ -269,8 +268,8 @@ export default {
     collapsId() {
       return 'collapse' + String(this.id)
     },
-    avatarText() {
-      return this.firstName[0] + this.lastName[0]
+    username() {
+      return `${this.firstName} ${this.lastName}`
     },
   },
   methods: {
diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
index 0a98ad8a6..69fd87c7d 100644
--- a/frontend/src/components/Menu/Navbar.spec.js
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -45,14 +45,15 @@ describe('AuthNavbar', () => {
       expect(wrapper.find('div.navbar-brand').exists()).toBeTruthy()
     })
 
-    describe('.b-avatar element', () => {
+    describe('.avatar element', () => {
       it('is rendered', () => {
-        expect(wrapper.find('button.b-avatar').exists()).toBeTruthy()
+        expect(wrapper.find('button.avatar').exists()).toBeTruthy()
       })
 
       it("has the user's initials", () => {
         expect(
-          wrapper.find('button.b-avatar').find('.b-avatar-text > span:nth-child(1)').text(),
+          // wrapper.find('button.b-avatar').find('.b-avatar-text > span:nth-child(1)').text(),
+          wrapper.find('.vue-avatar--wrapper').text(),
         ).toBe(`${wrapper.vm.$store.state.firstName[0]}${wrapper.vm.$store.state.lastName[0]}`)
       })
     })
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 8b27fb3bf..e77dff404 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -21,15 +21,10 @@
               <div>
                 <div class="d-flex">
                   <div class="mr-3">
-                    <b-avatar
-                      button
-                      variant="gradido"
-                      :text="avatarShortName"
-                      class="align-baseline"
-                    ></b-avatar>
+                    <avatar :username="username"></avatar>
                   </div>
                   <div>
-                    <div class="small" data-test="navbar-item-username">{{ avatarLongName }}</div>
+                    <div class="small" data-test="navbar-item-username">{{ username }}</div>
 
                     <div class="text-right small">
                       <small>{{ $store.state.email }}</small>
@@ -51,8 +46,13 @@
 </template>
 
 <script>
+import Avatar from 'vue-avatar'
+
 export default {
   name: 'Navbar',
+  components: {
+    Avatar,
+  },
   props: {
     balance: { type: Number, required: true },
   },
@@ -63,10 +63,7 @@ export default {
     }
   },
   computed: {
-    avatarShortName() {
-      return this.$store.state.firstName[0] + this.$store.state.lastName[0]
-    },
-    avatarLongName() {
+    username() {
       return `${this.$store.state.firstName} ${this.$store.state.lastName}`
     },
   },
diff --git a/frontend/src/components/Template/RightSide/LastTransactions.vue b/frontend/src/components/Template/RightSide/LastTransactions.vue
index 35698d65f..4bc0147a4 100644
--- a/frontend/src/components/Template/RightSide/LastTransactions.vue
+++ b/frontend/src/components/Template/RightSide/LastTransactions.vue
@@ -18,12 +18,10 @@
           "
         >
           <div 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">
+            <avatar
+              :username="`${transaction.linkedUser.firstName} ${transaction.linkedUser.lastName}`"
+            ></avatar>
+            <span>
               <name :linkedUser="transaction.linkedUser" @set-tunneled-email="setTunneledEmail" />
             </span>
             <b-badge>{{ transaction.amount | GDD }}</b-badge>
@@ -34,11 +32,13 @@
   </div>
 </template>
 <script>
+import Avatar from 'vue-avatar'
 import Name from '@/components/TransactionRows/Name.vue'
 
 export default {
   name: 'LastTransactions',
   components: {
+    Avatar,
     Name,
   },
   props: {
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index e66a43caf..55ee1300b 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -2,7 +2,8 @@
   <div class="transaction-slot-receive">
     <b-row @click="visible = !visible" class="">
       <b-col cols="2">
-        <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar>
+        <!-- <b-avatar :text="avatarText" variant="success" size="3em"></b-avatar> -->
+        <avatar :username="username"></avatar>
       </b-col>
       <b-col>
         <div>
@@ -40,6 +41,7 @@
   </div>
 </template>
 <script>
+import Avatar from 'vue-avatar'
 import CollapseIcon from '../TransactionRows/CollapseIcon'
 // import TypeIcon from '../TransactionRows/TypeIcon'
 import Name from '../TransactionRows/Name'
@@ -51,6 +53,7 @@ import DecayInformation from '../DecayInformations/DecayInformation'
 export default {
   name: 'TransactionReceive',
   components: {
+    Avatar,
     CollapseIcon,
     // TypeIcon,
     Name,
@@ -99,8 +102,8 @@ export default {
     }
   },
   computed: {
-    avatarText() {
-      return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
+    username() {
+      return `${this.linkedUser.firstName} ${this.linkedUser.lastName}`
     },
   },
 }
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index f51c07222..98071e00c 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -2,7 +2,7 @@
   <div class="transaction-slot-send">
     <b-row @click="visible = !visible" class="">
       <b-col cols="2">
-        <b-avatar :text="avatarText" variant="danger" size="3em"></b-avatar>
+        <avatar :username="username"></avatar>
       </b-col>
       <b-col>
         <div>
@@ -40,6 +40,7 @@
   </div>
 </template>
 <script>
+import Avatar from 'vue-avatar'
 import CollapseIcon from '../TransactionRows/CollapseIcon'
 // import TypeIcon from '../TransactionRows/TypeIcon'
 import Name from '../TransactionRows/Name'
@@ -51,6 +52,7 @@ import DecayInformation from '../DecayInformations/DecayInformation'
 export default {
   name: 'TransactionSend',
   components: {
+    Avatar,
     CollapseIcon,
     // TypeIcon,
     Name,
@@ -100,8 +102,8 @@ export default {
     }
   },
   computed: {
-    avatarText() {
-      return this.linkedUser.firstName[0] + this.linkedUser.lastName[0]
+    username() {
+      return `${this.linkedUser.firstName} ${this.linkedUser.lastName}`
     },
   },
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index fe7ab7947..23b36ccc0 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -14140,6 +14140,11 @@ vue-apollo@^3.0.7:
     serialize-javascript "^4.0.0"
     throttle-debounce "^2.1.0"
 
+vue-avatar@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/vue-avatar/-/vue-avatar-2.3.3.tgz#e125bf4f4a6f4f9480da0c522020266a8609d2a8"
+  integrity sha512-Z57ILRTkFIAuCH9JiFBxX74C5zua5ub/jRDM/KZ+QKXNfscvmUOgWBs3kA2+wrpZMowIvfLHIT0gvQu1z+zpLg==
+
 vue-cli-plugin-i18n@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz#5a3077de5d62c9b4068e486db1fc97fce9fa0072"