From b80f07043104868d134761b34582b234d12274e1 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 25 Apr 2023 18:32:31 +0200
Subject: [PATCH] feat: show avatar and full name in team overview

---
 src/components/misc/user.vue |  4 +++-
 src/views/teams/EditTeam.vue | 11 +++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/misc/user.vue b/src/components/misc/user.vue
index c53950824..e32ff6c62 100644
--- a/src/components/misc/user.vue
+++ b/src/components/misc/user.vue
@@ -49,9 +49,11 @@ const displayName = computed(() => getDisplayName(props.user))
 <style lang="scss" scoped>
 .user {
 	margin: .5rem;
+	display: flex;
+	justify-items: center;
 
 	&.is-inline {
-		display: inline;
+		display: inline-flex;
 	}
 }
 
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 94072afae..b06369068 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -73,7 +73,11 @@
 							:search-results="foundUsers"
 							label="username"
 							v-model="newMember"
-						/>
+						>
+							<template #searchResult="{option: user}">
+								<User :avatar-size="24" :user="user" class="m-0"/>
+							</template>
+						</multiselect>
 					</div>
 					<div class="control">
 						<x-button @click="addUser" icon="plus">
@@ -88,7 +92,9 @@
 			<table class="table has-actions is-striped is-hoverable is-fullwidth">
 				<tbody>
 				<tr :key="m.id" v-for="m in team?.members">
-					<td>{{ getDisplayName(m) }}</td>
+					<td>
+						<User :avatar-size="24" :user="m" class="m-0"/>
+					</td>
 					<td>
 						<template v-if="m.id === userInfo.id">
 							<b class="is-success">You</b>
@@ -185,6 +191,7 @@ import {useRoute, useRouter} from 'vue-router'
 
 import Editor from '@/components/input/AsyncEditor'
 import Multiselect from '@/components/input/multiselect.vue'
+import User from '@/components/misc/user.vue'
 
 import TeamService from '@/services/team'
 import TeamMemberService from '@/services/teamMember'