feat: use getter and helper in other components as well

src/components/home/TheNavigation.vue

@@ -44,8 +44,8 @@
 							variant="secondary"
 							:shadow="false"
 						>
-							<img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
-							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
+							<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40"/>
+							<span class="username">{{ authStore.userDisplayName }}</span>
 							<span class="icon is-small">
 								<icon icon="chevron-down"/>
 							</span>
@@ -80,7 +80,7 @@
 						{{ $t('about.title') }}
 					</dropdown-item>
 					<dropdown-item
-						@click="logout()"
+						@click="authStore.logout()"
 					>
 						{{ $t('user.auth.logout') }}
 					</dropdown-item>
@@ -117,8 +117,6 @@ const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Righ
 const menuActive = computed(() => baseStore.menuActive)
 
 const authStore = useAuthStore()
-const userInfo = computed(() => authStore.info)
-const userAvatar = computed(() => authStore.avatarUrl)
 
 const configStore = useConfigStore()
 const imprintUrl = computed(() => configStore.legal.imprintUrl)
@@ -136,10 +134,6 @@ onMounted(async () => {
 	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
 })
 
-function logout() {
-	authStore.logout()
-}
-
 function openQuickActions() {
 	baseStore.setQuickActionsActive(true)
 }

src/components/tasks/partials/editAssignees.vue

@@ -41,6 +41,7 @@ import {success} from '@/message'
 import {useTaskStore} from '@/stores/tasks'
 
 import type {IUser} from '@/modelTypes/IUser'
+import { getDisplayName } from '@/models/user'
 
 const props = defineProps({
 	taskId: {
@@ -65,7 +66,7 @@ const taskStore = useTaskStore()
 const {t} = useI18n({useScope: 'global'})
 
 const listUserService = shallowReactive(new ListUserService())
-const foundUsers = ref([])
+const foundUsers = ref<IUser[]>([])
 const assignees = ref<IUser[]>([])
 let isAdding = false
 
@@ -114,13 +115,14 @@ async function findUser(query: string) {
 		return
 	}
 
-	const response = await listUserService.getAll({listId: props.listId}, {s: query})
+	const response = await listUserService.getAll({listId: props.listId}, {s: query}) as IUser[]
 
 	// Filter the results to not include users who are already assigned
-	foundUsers.value = response.filter(({id}) => !includesById(assignees.value, id))
+	foundUsers.value = response
+		.filter(({id}) => !includesById(assignees.value, id))
 		.map(u => {
 			// Users may not have a display name set, so we fall back on the username in that case
-			u.name = u.name === '' ? u.username : u.name
+			u.name = getDisplayName(u)
 			return u
 		})
 }

src/modelTypes/IUser.ts

@@ -7,7 +7,7 @@ export const AUTH_TYPES = {
 	'LINK_SHARE': 2,
 } as const
 
-type AuthType = typeof AUTH_TYPES[keyof typeof AUTH_TYPES]
+export type AuthType = typeof AUTH_TYPES[keyof typeof AUTH_TYPES]
 
 export interface IUser extends IAbstract {
 	id: number