[cloudstack] branch 4.16 updated: ui: Add user initials as avatar if no icon present (#6070)

[nv...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

nvazquez pushed a commit to branch 4.16
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/4.16 by this push:
     new 6b913a7  ui: Add user initials as avatar if no icon present (#6070)
6b913a7 is described below

commit 6b913a76cf900a078b58128177ce26c992ecc3dd
Author: David Jumani <dj...@gmail.com>
AuthorDate: Tue Mar 8 21:25:00 2022 +0530

    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 24b63ea..1b3bb71 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()