From 81baf024f6a30906f48c05c458fe9bbdf0359dff Mon Sep 17 00:00:00 2001
From: pablo014 <angelopablo014@gmail.com>
Date: Tue, 1 Oct 2024 16:09:22 -0700
Subject: [PATCH 1/2] feat(detailsTooltip): add image to the side

---
 src/components/user/DetailsTooltip.vue | 67 ++++++++++++++++++--------
 1 file changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/components/user/DetailsTooltip.vue b/src/components/user/DetailsTooltip.vue
index 2ca856e8d..87b9b3e28 100644
--- a/src/components/user/DetailsTooltip.vue
+++ b/src/components/user/DetailsTooltip.vue
@@ -14,28 +14,45 @@
       <slot
     /></base-text>
     <template #popper>
-      <div class="tooltip-content p-2">
-        <div v-if="userItem" class="text-base">
-          {{ `${userItem.first_name} ${userItem.last_name}` }}
+      <div class="flex">
+        <div v-if="userItem" class="flex items-center justify-center">
+          <Avatar
+            :initials="userItem.first_name"
+            :url="
+              userItem.profilePictureUrl
+                ? userItem.profilePictureUrl
+                : getUserAvatarLink(userItem.first_name)
+            "
+            :custom-size="{ width: '40px', height: '40px' }"
+            inner-classes="shadow"
+          />
         </div>
-        <div
-          v-if="userItem"
-          class="text-xs"
-          data-testid="testUserOrganizationDiv"
-        >
-          {{ userItem.organization.name }}
-        </div>
-        <div v-if="userItem" class="mt-2" data-testid="testUserEmailDiv">
-          <font-awesome-icon icon="envelope" :alt="$t('actions.email')" />
-          <a :href="`mailto:${userItem.email}`" class="ml-1">{{
-            userItem.email
-          }}</a>
-        </div>
-        <div v-if="userItem && userItem.mobile" data-testid="testUserMobileDiv">
-          <font-awesome-icon icon="phone" :alt="$t('actions.call')" />
-          <a :href="`tel:${userItem.mobile}`" class="ml-1">{{
-            userItem.mobile
-          }}</a>
+        <div class="tooltip-content p-2">
+          <div v-if="userItem" class="text-base">
+            {{ `${userItem.first_name} ${userItem.last_name}` }}
+          </div>
+          <div
+            v-if="userItem"
+            class="text-xs"
+            data-testid="testUserOrganizationDiv"
+          >
+            {{ userItem.organization.name }}
+          </div>
+          <div v-if="userItem" class="mt-2" data-testid="testUserEmailDiv">
+            <font-awesome-icon icon="envelope" :alt="$t('actions.email')" />
+            <a :href="`mailto:${userItem.email}`" class="ml-1">{{
+              userItem.email
+            }}</a>
+          </div>
+          <div
+            v-if="userItem && userItem.mobile"
+            data-testid="testUserMobileDiv"
+          >
+            <font-awesome-icon icon="phone" :alt="$t('actions.call')" />
+            <a :href="`tel:${userItem.mobile}`" class="ml-1">{{
+              userItem.mobile
+            }}</a>
+          </div>
         </div>
       </div>
     </template>
@@ -45,10 +62,16 @@
 <script lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import User from '../../models/User';
+<<<<<<< HEAD
 import { DbService, USER_DATABASE } from '@/services/db.service';
+=======
+import { getUserAvatarLink } from '../../utils/urls';
+import Avatar from '@/components/Avatar.vue';
+>>>>>>> feat(detailsTooltip): add image to the side
 
 export default defineComponent({
   name: 'UserDetailsTooltip',
+  components: { Avatar },
   props: {
     user: {
       type: Number,
@@ -102,6 +125,8 @@ export default defineComponent({
     return {
       asyncUser,
       userItem,
+      getUserAvatarLink,
+      Avatar,
     };
   },
 });

From 3ffa6174645d0a638287e95f393d6a542671e5b9 Mon Sep 17 00:00:00 2001
From: pablo014 <angelopablo014@gmail.com>
Date: Mon, 14 Oct 2024 16:03:01 -0700
Subject: [PATCH 2/2] fix(detailsTooltip): rebase issues

---
 src/components/user/DetailsTooltip.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/user/DetailsTooltip.vue b/src/components/user/DetailsTooltip.vue
index 87b9b3e28..96c0289ef 100644
--- a/src/components/user/DetailsTooltip.vue
+++ b/src/components/user/DetailsTooltip.vue
@@ -62,12 +62,9 @@
 <script lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import User from '../../models/User';
-<<<<<<< HEAD
 import { DbService, USER_DATABASE } from '@/services/db.service';
-=======
 import { getUserAvatarLink } from '../../utils/urls';
 import Avatar from '@/components/Avatar.vue';
->>>>>>> feat(detailsTooltip): add image to the side
 
 export default defineComponent({
   name: 'UserDetailsTooltip',