chore: refactor thumbnail (#5682)

app/javascript/dashboard/components/widgets/Avatar.vue

@@ -1,10 +1,6 @@
 <template>
-  <div
-    class="avatar-container"
-    :style="[style, customStyle]"
-    aria-hidden="true"
-  >
-    <span>{{ userInitial }}</span>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    {{ userInitial }}
   </div>
 </template>
 
@@ -16,69 +12,26 @@ export default {
       type: String,
       default: '',
     },
-    backgroundColor: {
-      type: String,
-      default: '#c2e1ff',
-    },
-    color: {
-      type: String,
-      default: '#1976cc',
-    },
-    customStyle: {
-      type: Object,
-      default: undefined,
-    },
     size: {
       type: Number,
       default: 40,
     },
-    src: {
-      type: String,
-      default: '',
-    },
-    rounded: {
-      type: Boolean,
-      default: true,
-    },
-    variant: {
-      type: String,
-      default: 'circle',
-    },
   },
   computed: {
     style() {
-      let style = {
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-        borderRadius:
-          this.variant === 'square' ? 'var(--border-radius-large)' : '50%',
-        lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
+      return {
         fontSize: `${Math.floor(this.size / 2.5)}px`,
       };
-
-      if (this.backgroundColor) {
-        style = { ...style, backgroundColor: this.backgroundColor };
-      }
-      if (this.color) {
-        style = { ...style, color: this.color };
-      }
-      return style;
     },
     userInitial() {
-      return this.initials || this.initial(this.username);
-    },
-  },
-  methods: {
-    initial(username) {
-      const parts = username ? username.split(/[ -]/) : [];
-      let initials = '';
-      for (let i = 0; i < parts.length; i += 1) {
-        initials += parts[i].charAt(0);
-      }
+      const parts = this.username.split(/[ -]/);
+      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
+
       if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
         initials = initials.replace(/[a-z]+/g, '');
       }
       initials = initials.substring(0, 2).toUpperCase();
+
       return initials;
     },
   },
@@ -88,6 +41,7 @@ export default {
 <style lang="scss" scoped>
 .avatar-container {
   display: flex;
+  line-height: 100%;
   font-weight: 500;
   align-items: center;
   justify-content: center;

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -1,74 +1,23 @@
 <template>
   <div class="user-thumbnail-box" :style="{ height: size, width: size }">
     <img
-      v-if="!imgError && Boolean(src)"
-      id="image"
+      v-if="!imgError && src"
       :src="src"
       :class="thumbnailClass"
-      @error="onImgError()"
+      @error="onImgError"
     />
     <Avatar
       v-else
       :username="userNameWithoutEmoji"
       :class="thumbnailClass"
       :size="avatarSize"
-      :variant="variant"
     />
     <img
-      v-if="badge === 'instagram_direct_message'"
-      id="badge"
+      v-if="badgeSrc"
       class="source-badge"
       :style="badgeStyle"
-      src="/integrations/channels/badges/instagram-dm.png"
-    />
-    <img
-      v-else-if="badge === 'facebook'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/messenger.png"
-    />
-    <img
-      v-else-if="badge === 'twitter-tweet'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/twitter-tweet.png"
-    />
-    <img
-      v-else-if="badge === 'twitter-dm'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/twitter-dm.png"
-    />
-    <img
-      v-else-if="badge === 'whatsapp'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/whatsapp.png"
-    />
-    <img
-      v-else-if="badge === 'sms'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/sms.png"
-    />
-    <img
-      v-else-if="badge === 'Channel::Line'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/line.png"
-    />
-    <img
-      v-else-if="badge === 'Channel::Telegram'"
-      id="badge"
-      class="source-badge"
-      :style="badgeStyle"
-      src="/integrations/channels/badges/telegram.png"
+      :src="`/integrations/channels/badges/${badgeSrc}.png`"
+      alt="Badge"
     />
     <div
       v-if="showStatusIndicator"
@@ -83,7 +32,7 @@
  * Src - source for round image
  * Size - Size of the thumbnail
  * Badge - Chat source indication { fb / telegram }
- * Username - User name for avatar
+ * Username - Username for avatar
  */
 import Avatar from './Avatar';
 import { removeEmoji } from 'shared/helpers/emoji';
@@ -103,7 +52,7 @@ export default {
     },
     badge: {
       type: String,
-      default: 'fb',
+      default: '',
     },
     username: {
       type: String,
@@ -142,6 +91,19 @@ export default {
     avatarSize() {
       return Number(this.size.replace(/\D+/g, ''));
     },
+    badgeSrc() {
+      return {
+        instagram_direct_message: 'instagram-dm',
+        facebook: 'messenger',
+        'twitter-tweet': 'twitter-tweet',
+        'twitter-dm': 'twitter-dm',
+        whatsapp: 'whatsapp',
+        sms: 'sms',
+        'Channel::Line': 'line',
+        'Channel::Telegram': 'telegram',
+        'Channel::WebWidget': '',
+      }[this.badge];
+    },
     badgeStyle() {
       const size = Math.floor(this.avatarSize / 3);
       const badgeSize = `${size + 2}px`;
@@ -160,14 +122,12 @@ export default {
     },
   },
   watch: {
-    src: {
-      handler(value, oldValue) {
+    src(value, oldValue) {
       if (value !== oldValue && this.imgError) {
         this.imgError = false;
       }
     },
   },
-  },
   methods: {
     onImgError() {
       this.imgError = true;
@@ -229,9 +189,5 @@ export default {
   .user-online-status--offline {
     background: var(--s-500);
   }
-
-  .user-online-status--offline {
-    background: var(--s-500);
-  }
 }
 </style>