feat(sharing): sort team members by display name in UI and by ID in API (#2784)

frontend/src/views/teams/EditTeam.vue

@@ -113,7 +113,7 @@
 				<table class="table has-actions is-striped is-hoverable is-fullwidth">
 					<tbody>
 						<tr
-							v-for="m in team?.members"
+							v-for="m in sortedMembers"
 							:key="m.id"
 						>
 							<td>
@@ -243,6 +243,7 @@ import FormField from '@/components/input/FormField.vue'
 import Multiselect from '@/components/input/Multiselect.vue'
 import User from '@/components/misc/User.vue'
 
+import {getDisplayName} from '@/models/user'
 import TeamService from '@/services/team'
 import TeamMemberService from '@/services/teamMember'
 import UserService from '@/services/user'
@@ -273,6 +274,12 @@ const userIsAdmin = computed(() => {
 })
 const userInfo = computed(() => authStore.info)
 
+const sortedMembers = computed(() => {
+	return [...(team.value?.members ?? [])].sort((a, b) =>
+		getDisplayName(a).localeCompare(getDisplayName(b), undefined, {sensitivity: 'base'}),
+	)
+})
+
 const teamService = ref<TeamService>(new TeamService())
 const teamMemberService = ref<TeamMemberService>(new TeamMemberService())
 const userService = ref<UserService>(new UserService())

pkg/models/teams.go

@@ -17,6 +17,7 @@
 package models
 
 import (
+	"sort"
 	"time"
 
 	"code.vikunja.io/api/pkg/config"
@@ -178,6 +179,9 @@ func addMoreInfoToTeams(s *xorm.Session, teams []*Team) (err error) {
 		if teamUser, has := users[team.CreatedByID]; has {
 			team.CreatedBy = &teamUser.User
 		}
+		sort.Slice(team.Members, func(i, j int) bool {
+			return team.Members[i].ID < team.Members[j].ID
+		})
 	}
 	return
 }