feat(detailsTooltip): add image to the side

CrisisCleanup · Oct 1, 2024 · 970166d · 970166d
1 parent aa61335
commit 970166d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 22 deletions.
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
@@ -43,7 +43,9 @@
                   :custom-size="{ width: '40px', height: '40px' }"
                   inner-classes="shadow"
                 />
-                <UserDetailsTooltip :user="user.id" :user-object="user" />
+                <UserDetailsTooltip :user="user.id" :user-object="user">
+                  <div>test</div>
+                </UserDetailsTooltip>
                 <div v-if="mobileOnlineUsers.includes(user.id)">
                   <font-awesome-icon
                     icon="mobile-screen"

diff --git 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,9 +62,12 @@
 <script lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import User from '../../models/User';
+import { getUserAvatarLink } from '../../utils/urls';
+import Avatar from '@/components/Avatar.vue';
 
 export default defineComponent({
   name: 'UserDetailsTooltip',
+  components: { Avatar },
   props: {
     user: {
       type: Number,
@@ -83,6 +103,8 @@ export default defineComponent({
     return {
       asyncUser,
       userItem,
+      getUserAvatarLink,
+      Avatar,
     };
   },
 });