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

Signed-off-by: Benjamin Frueh <[email protected]>

Author: benjaminfrueh

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

@@ -588,7 +588,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 })
 			}
@@ -605,7 +604,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 })
 			}
@@ -794,7 +792,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 })
 			}
@@ -820,7 +817,6 @@ export default {
 			this.loading.groups = true
 			try {
 				await this.$store.dispatch('addUserGroup', { userid, gid })
-				this.userGroups.push(group)
 			} catch (error) {
 				console.error(error)
 			}
@@ -844,7 +840,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) {
@@ -869,7 +864,6 @@ export default {
 					userid,
 					gid,
 				})
-				this.userSubAdminGroups.push(group)
 			} catch (error) {
 				console.error(error)
 			}
@@ -891,7 +885,6 @@ export default {
 					userid,
 					gid,
 				})
-				this.userSubAdminGroups = this.userSubAdminGroups.filter(group => group.id !== gid)
 			} catch (error) {
 				console.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)
+		},
 	},
 }