fix(settings): Display group displayName consistently when editing a user

apps/settings/src/components/Users/UserRow.vue

@@ -624,7 +624,6 @@ export default {
 				for (const group of groups) {
 					this.$store.commit('addGroup', group)
 				}
-				this.selectedGroups = this.selectedGroups.map((selectedGroup) => groups.find((group) => group.id === selectedGroup.id) ?? selectedGroup)
 			} catch (error) {
 				logger.error(t('settings', 'Failed to load groups with details'), { error })
 			}
@@ -641,7 +640,6 @@ export default {
 				for (const group of groups) {
 					this.$store.commit('addGroup', group)
 				}
-				this.selectedSubAdminGroups = this.selectedSubAdminGroups.map((selectedGroup) => groups.find((group) => group.id === selectedGroup.id) ?? selectedGroup)
 			} catch (error) {
 				logger.error(t('settings', 'Failed to load sub admin groups with details'), { error })
 			}
@@ -830,7 +828,6 @@ export default {
 				await this.$store.dispatch('addGroup', gid)
 				const userid = this.user.id
 				await this.$store.dispatch('addUserGroup', { userid, gid })
-				this.userGroups.push({ id: gid, name: gid })
 			} catch (error) {
 				logger.error(t('settings', 'Failed to create group'), { error })
 			}
@@ -856,7 +853,6 @@ export default {
 			this.loading.groups = true
 			try {
 				await this.$store.dispatch('addUserGroup', { userid, gid })
-				this.userGroups.push(group)
 			} catch (error) {
 				logger.error(error)
 			}
@@ -880,7 +876,6 @@ export default {
 					userid,
 					gid,
 				})
-				this.userGroups = this.userGroups.filter((group) => group.id !== gid)
 				this.loading.groups = false
 				// remove user from current list if current list is the removed group
 				if (this.$route.params.selectedGroup === gid) {
@@ -905,7 +900,6 @@ export default {
 					userid,
 					gid,
 				})
-				this.userSubAdminGroups.push(group)
 			} catch (error) {
 				logger.error(error)
 			}
@@ -927,7 +921,6 @@ export default {
 					userid,
 					gid,
 				})
-				this.userSubAdminGroups = this.userSubAdminGroups.filter((group) => group.id !== gid)
 			} catch (error) {
 				logger.error(error)
 			} finally {

apps/settings/src/mixins/UserRowMixin.js

@@ -41,14 +41,6 @@ export default {
 			formattedFullTime,
 		}
 	},
-	data() {
-		return {
-			selectedGroups: this.user.groups.map((id) => ({ id, name: id })),
-			selectedSubAdminGroups: this.user.subadmin.map((id) => ({ id, name: id })),
-			userGroups: this.user.groups.map((id) => ({ id, name: id })),
-			userSubAdminGroups: this.user.subadmin.map((id) => ({ id, name: id })),
-		}
-	},
 	computed: {
 		showConfig() {
 			return this.$store.getters.getShowConfig
@@ -129,5 +121,19 @@ export default {
 			}
 			return t('settings', 'Never')
 		},
+
+		userGroups() {
+			const allGroups = this.$store.getters.getGroups
+			return this.user.groups
+				.map((id) => allGroups.find((g) => g.id === id))
+				.filter((group) => group !== undefined)
+		},
+
+		userSubAdminGroups() {
+			const allGroups = this.$store.getters.getGroups
+			return this.user.subadmin
+				.map((id) => allGroups.find((g) => g.id === id))
+				.filter((group) => group !== undefined)
+		},
 	},
 }