From 708ef2d72efbdfe6261322937b0a8f76ee19b9e4 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Sat, 12 Nov 2022 10:51:35 +0000
Subject: [PATCH] feat: improve user component (#2687)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2687
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
---
 src/components/misc/user.vue | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/misc/user.vue b/src/components/misc/user.vue
index b10bcdd8b1..c539508241 100644
--- a/src/components/misc/user.vue
+++ b/src/components/misc/user.vue
@@ -1,23 +1,27 @@
 <template>
-	<div :class="{'is-inline': isInline}" class="user">
+	<div
+		class="user"
+		:class="{'is-inline': isInline}"
+	>
 		<img
 			:height="avatarSize"
 			:src="getAvatarUrl(user, avatarSize)"
 			:width="avatarSize"
-			alt=""
+			:alt="'Avatar of ' + displayName"
 			class="avatar"
-			v-tooltip="getDisplayName(user)"/>
-		<span class="username" v-if="showUsername">{{ getDisplayName(user) }}</span>
+			v-tooltip="displayName"
+		/>
+		<span class="username" v-if="showUsername">{{ displayName }}</span>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type {PropType} from 'vue'
+import {computed, type PropType} from 'vue'
 
 import {getAvatarUrl, getDisplayName} from '@/models/user'
 import type {IUser} from '@/modelTypes/IUser'
 
-defineProps({
+const props = defineProps({
 	user: {
 		type: Object as PropType<IUser>,
 		required: true,
@@ -38,6 +42,8 @@ defineProps({
 		default: false,
 	},
 })
+
+const displayName = computed(() => getDisplayName(props.user))
 </script>
 
 <style lang="scss" scoped>
@@ -47,12 +53,11 @@ defineProps({
 	&.is-inline {
 		display: inline;
 	}
+}
 
-	img {
-		border-radius: 100%;
-
-		vertical-align: middle;
-		margin-right: .5rem;
-	}
+.avatar {
+	border-radius: 100%;
+	vertical-align: middle;
+	margin-right: .5rem;
 }
 </style>