From 6b913a76cf900a078b58128177ce26c992ecc3dd Mon Sep 17 00:00:00 2001
From: David Jumani <dj.davidjumani1994@gmail.com>
Date: Tue, 8 Mar 2022 21:25:00 +0530
Subject: [PATCH] ui: Add user initials as avatar if no icon present (#6070)

* ui: Add user avatar if no icon

* set initials to uppercase
---
 ui/src/components/header/UserMenu.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue
index 24b63ead5d4..1b3bb7113f6 100644
--- a/ui/src/components/header/UserMenu.vue
+++ b/ui/src/components/header/UserMenu.vue
@@ -29,7 +29,10 @@
         <span v-if="image">
           <resource-icon :image="image" size="2x" style="margin-right: 5px"/>
         </span>
-        <a-avatar v-else class="user-menu-avatar avatar" size="small" :src="avatar()"/>
+        <a-avatar v-else-if="userInitials" class="user-menu-avatar avatar" size="small" :style="{ backgroundColor: '#1890ff', color: 'white' }">
+          {{ userInitials }}
+        </a-avatar>
+        <a-avatar v-else class="user-menu-avatar avatar" size="small" icon="user" :style="{ backgroundColor: '#1890ff', color: 'white' }" />
         <span>{{ nickname() }}</span>
       </span>
       <a-menu slot="overlay" class="user-menu-wrapper">
@@ -85,10 +88,13 @@ export default {
   data () {
     return {
       image: '',
+      userInitials: '',
       countNotify: 0
     }
   },
   created () {
+    this.userInitials = (this.$store.getters.userInfo.firstname.toUpperCase().charAt(0) || '') +
+      (this.$store.getters.userInfo.lastname.toUpperCase().charAt(0) || '')
     this.getIcon()
     eventBus.$on('refresh-header', () => {
       this.getIcon()