From de982f2c9f45f64d5abc8baf4013f9a6369cc901 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Sun, 31 Mar 2024 13:02:55 +0530
Subject: [PATCH] feat: Add Avatar component

---
 .../reports/components/SLA/Avatar.vue         | 55 +++++++++++
 .../reports/components/SLA/SLAReportItem.vue  | 18 ++--
 .../reports/components/SLA/SLATable.vue       |  5 +-
 .../reports/components/SLA/UserAvatar.vue     | 95 +++++++++++++++++++
 4 files changed, 163 insertions(+), 10 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/Avatar.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/UserAvatar.vue

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/Avatar.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/Avatar.vue
new file mode 100644
index 000000000..1fad70eef
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/Avatar.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    <slot>{{ userInitial }}</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Avatar',
+  props: {
+    username: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: Number,
+      default: 40,
+    },
+  },
+  computed: {
+    style() {
+      return {
+        fontSize: `${Math.floor(this.size / 2.5)}px`,
+      };
+    },
+    userInitial() {
+      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;
+    },
+  },
+};
+</script>
+
+<style scoped>
+@tailwind components;
+@layer components {
+  .avatar-color {
+    background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
+  }
+
+  .dark-avatar-color {
+    background-image: linear-gradient(to top, #135899 0%, #135899 100%);
+  }
+}
+.avatar-container {
+  @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-woot-600 dark:text-woot-200;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
index 753383043..195ff587d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -1,5 +1,6 @@
 <script setup>
 import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
+import UserAvatar from './UserAvatar.vue';
 defineProps({
   slaName: {
     type: String,
@@ -18,7 +19,7 @@ defineProps({
 
 <template>
   <div
-    class="grid content-center h-16 grid-cols-12 gap-4 px-6 py-0 bg-white border-b border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+    class="grid content-center items-center h-16 grid-cols-12 gap-4 px-6 py-0 w-full bg-white border-b border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
   >
     <div
       class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
@@ -26,25 +27,28 @@ defineProps({
       {{ slaName }}
     </div>
     <div
-      class="flex items-center col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
     >
       <span class="text-slate-700 dark:text-slate-100">
         {{ `#${conversationId} ` }}
       </span>
       <span class="text-slate-600 dark:text-slate-100">with </span>
-      <span class="text-slate-700 dark:text-slate-100 capitalize">{{
+      <span class="text-slate-700 dark:text-slate-100 capitalize truncate">{{
         conversation.contact.name
       }}</span>
       <card-labels
+        class="w-[80%]"
         :conversation-id="conversationId"
         :conversation-labels="conversation.labels"
       />
     </div>
-    <div
-      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
-    >
-      Elijah
+    <div class="flex items-center gap-2 col-span-2">
+      <user-avatar user-name="Muhsin" src="" />
+      <span class="text-slate-600 dark:text-slate-200 capitalize truncate">
+        Muhsin Keloth
+      </span>
     </div>
+
     <div
       class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
     >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
index 0522a4d6d..a0651dd03 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-800/50"
+      class="min-w-full border-t border-x rounded-xl border-slate-75 dark:border-slate-800/50"
     >
       <!-- Header -->
       <div
@@ -35,11 +35,10 @@
       />
     </div>
     <table-footer
-      v-if="shouldShowFooter"
       :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"
-      class="dark:bg-slate-900 sticky bottom-0"
+      class="dark:bg-slate-900 sticky bottom-0 border-none"
       @page-change="onPageChange"
     />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/UserAvatar.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/UserAvatar.vue
new file mode 100644
index 000000000..c127125ac
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/UserAvatar.vue
@@ -0,0 +1,95 @@
+<template>
+  <div
+    :style="{ height: size, width: size }"
+    class="rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+    :title="username"
+  >
+    <slot>
+      <img
+        v-if="shouldShowImage"
+        :src="src"
+        draggable="false"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <div
+        v-else
+        :style="{ height: size, width: size }"
+        class="flex justify-center items-center rounded-full"
+        aria-hidden="true"
+      >
+        <span :style="{ fontSize: fontSize }" class="font-semibold">{{
+          userInitial
+        }}</span>
+      </div>
+    </slot>
+  </div>
+</template>
+<script>
+import { removeEmoji } from 'shared/helpers/emoji';
+
+export default {
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '24px',
+    },
+    username: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      hasImageLoaded: false,
+      imgError: false,
+    };
+  },
+  computed: {
+    userNameWithoutEmoji() {
+      return removeEmoji(this.username);
+    },
+    showStatusIndicator() {
+      if (this.shouldShowStatusAlways) return true;
+      return this.status === 'online' || this.status === 'busy';
+    },
+    avatarSize() {
+      return Number(this.size.replace(/\D+/g, ''));
+    },
+    shouldShowImage() {
+      if (!this.src) {
+        return false;
+      }
+      if (this.hasImageLoaded) {
+        return !this.imgError;
+      }
+      return false;
+    },
+    userInitial() {
+      return 'M';
+    },
+    fontSize() {
+      return `${Math.floor(this.avatarSize / 2.5)}px`;
+    },
+  },
+  watch: {
+    src(value, oldValue) {
+      if (value !== oldValue && this.imgError) {
+        this.imgError = false;
+      }
+    },
+  },
+  methods: {
+    onImgError() {
+      this.imgError = true;
+    },
+    onImgLoad() {
+      this.hasImageLoaded = true;
+    },
+  },
+};
+</script>