Added UserAvatar component

Author: epou

package-lock.json

@@ -20,7 +20,7 @@
     "@websitebeaver/vue-magnifier": "^1.1.0",
     "dayjs": "^1.11.13",
     "exifr": "^7.1.3",
-    "mosquito-alert": "github:mosquito-alert/mosquito-alert-typescript-sdk#0.1.18",
+    "mosquito-alert": "github:mosquito-alert/mosquito-alert-typescript-sdk#0.1.19",
     "pinia": "^3.0.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.3",

package.json

@@ -28,9 +28,8 @@
     <Column header="Assignations">
       <template #body="slotProps">
         <AvatarGroup>
-          <Avatar v-for="assignment, index in slotProps.data.assignments" :key="index" icon="pi pi-user" shape="circle"
-            :label="getInitials(assignment.user.full_name)"
-            v-tooltip.top="assignment.annotation_id === null ? `${assignment.user.full_name} (Pending)` : assignment.user.full_name"
+          <UserAvatar v-for="assignment, index in slotProps.data.assignments" :key="index" :user="assignment.user"
+            v-tooltip.top="assignment.annotation_id === null ? `${assignment.user.full_name || assignment.user.username} (Pending)` : assignment.user.full_name || assignment.user.username"
             :class="assignment.annotation_id ? '' : 'border-(--p-tag-warn-color)! bg-(--p-tag-warn-background)! text-(--p-tag-warn-color)!'" />
         </AvatarGroup>
       </template>
@@ -78,9 +77,10 @@ import type { DataTableRowClickEvent } from 'primevue';
 
 import type { IdentificationTask } from 'mosquito-alert';
 
+import UserAvatar from './users/UserAvatar.vue';
+
 import { getStatusSeverity } from '@/utils/IdentificationTaskUtils';
 import { formatLocalDateTime } from '@/utils/DateUtils';
-import { getInitials } from '@/utils/Utils';
 
 defineProps<{
   tasks: IdentificationTask[],

src/components/IdentificationTaskList.vue

@@ -2,8 +2,8 @@
   <Panel toggleable :collapsed="collapsed">
     <template #header>
       <div class="flex items-center gap-2">
-        <Avatar icon="pi pi-user" shape="circle" :label="getInitials(annotation?.user.full_name || '')" />
-        <span class="font-bold">{{ annotation?.user.full_name }}</span>
+        <UserAvatar :user="annotation?.user" />
+        <span class="font-bold">{{ annotation?.user.full_name || annotation?.user.username }}</span>
         <AnnotationTypeTag v-if="annotation.type === AnnotationType.Long" :type="annotation.type" />
         <Tag v-if="annotation?.is_flagged" icon="pi pi-flag" severity="danger" value="Flagged" rounded />
         <Tag v-if="annotation?.is_decisive" severity="contrast" value="Executive" rounded
@@ -54,9 +54,9 @@
 import type { Annotation } from 'mosquito-alert';
 import { AnnotationType } from 'mosquito-alert';
 import TaxonClassificationTag from '../taxa/TaxonClassificationTag.vue';
+import UserAvatar from '../users/UserAvatar.vue';
 import AnnotationTypeTag from './AnnotationTypeTag.vue';
 
-import { getInitials } from '@/utils/Utils';
 import { formatLocalDateTime } from '@/utils/DateUtils';
 
 withDefaults(defineProps<{

src/components/annotations/AnnotationPanel.vue

@@ -0,0 +1,12 @@
+<template>
+  <Avatar icon="pi pi-user" shape="circle" :label="getInitials(user?.full_name || user?.username || '')" />
+</template>
+
+<script setup lang="ts">
+import { getInitials } from '@/utils/Utils';
+import type { User, SimpleAnnotatorUser } from 'mosquito-alert';
+
+defineProps<{
+  user: User | SimpleAnnotatorUser | null
+}>();
+</script>

src/components/users/UserAvatar.vue

@@ -35,7 +35,7 @@
           <Button class="p-2!" icon="pi pi-user" :label="username" rounded variant="outlined" severity="secondary"
             @click="profileMenuToggle">
             <template #icon>
-              <Avatar icon="pi pi-user" shape="circle" :label="getInitials(username || '')" />
+              <UserAvatar :user="userStore.user" />
             </template>
           </Button>
           <Menu ref="profileMenu" id="overlay_menu" :model="profileMenuItems" :popup="true" />
@@ -51,7 +51,7 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useLayout } from './composables/layout';
-import { getInitials } from '@/utils/Utils';
+import UserAvatar from '@/components/users/UserAvatar.vue';
 import { useAuthStore } from '@/stores/authStore';
 import { useUserStore } from '@/stores/userStore';