Load manager avatars in asynchronously with workspaces

appinfo/routes.php

@@ -182,6 +182,11 @@
 			'url' => '/spaces/{spaceId}/users',
 			'verb' => 'GET',
 		],
+		[
+			'name' => 'workspace#getAdmins',
+			'url' => '/space/{spaceId}/admin-users',
+			'verb' => 'GET',
+		],
 		[
 			'name' => 'group#removeUserFromWorkspace',
 			'url' => '/spaces/{spaceId}/users/{user}/groups',

lib/Controller/WorkspaceController.php

@@ -196,11 +196,6 @@ public function findAll(): JSONResponse {
 					$space['userCount'] = $group->count();
 				}
 
-				if (str_starts_with($gid, 'SPACE-GE')) {
-					$users = $group->getUsers();
-					$space['users'] = $this->userFormatter->formatUsers($users, $folderInfo, (string)$space['id']);
-				}
-
 				$space['users'] = (object)$space['users'];
 			}
 
@@ -243,6 +238,39 @@ public function getUsers(int $spaceId): JSONResponse {
 
 		return new JSONResponse($users);
 	}
+
+	/**
+	 * @NoAdminRequired
+	 */
+	public function getAdmins(int $spaceId): JSONResponse {
+
+		$space = $this->spaceMapper->find($spaceId);
+
+		$groupfolder = $this->folderHelper->getFolder($space->getGroupfolderId(), $this->rootFolder->getRootFolderStorageId());
+
+		if ($groupfolder === false) {
+			return new JSONResponse(
+				[
+					'message' => 'Failed loading groupfolder '.$space->getGroupfolderId(),
+					'success' => false
+				],
+				Http::STATUS_BAD_REQUEST);
+		}
+
+		$adminUsers = [];
+		foreach($groupfolder['groups'] as $gid => $groupInfo) {
+			if (str_starts_with($gid, 'SPACE-GE')) {
+				$group = $this->groupManager->get($gid);
+				if ($group !== null) {
+					$users = $group->getUsers();
+					$adminUsers = $this->userFormatter->formatUsers($users, $groupfolder, (string) $spaceId);
+				}
+				break;
+			}
+		}
+
+		return new JSONResponse($adminUsers);
+	}
 
 	/**
 	 * @NoAdminRequired

package.json

@@ -87,6 +87,7 @@
     "@nextcloud/l10n": "^2.1.0",
     "@nextcloud/router": "^2.1.1",
     "@nextcloud/vue": "^7.12.1",
+    "@xunlei/vue-lazy-component": "^1.1.3",
     "ramda": "^0.29.1",
     "vue": "^2.7.13",
     "vue-material-design-icons": "^5.2.0",

src/LeftSidebar.vue

@@ -103,6 +103,7 @@ export default {
 				quota: t('workspace', 'unlimited'),
 				users: {},
 				userCount: workspace.userCount,
+				managers: null,
 			})
 			this.$router.push({
 				path: `/workspace/${name}`,

src/SpaceTable.vue

@@ -53,13 +53,16 @@
 						{{ space.quota }}
 					</td>
 					<td class="workspace-td">
-						<div class="admin-avatars">
+						<VueLazyComponent
+							:key="'avatar-'+name"
+							class="admin-avatars"
+							@init="initAdmins(space.id, name)">
 							<NcAvatar v-for="user in workspaceManagers(space)"
 								:key="user.uid"
 								:style="{ marginRight: 2 + 'px' }"
 								:display-name="user.name"
 								:user="user.uid" />
-						</div>
+						</VueLazyComponent>
 					</td>
 				</tr>
 			</tbody>
@@ -76,12 +79,14 @@
 <script>
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import { component as VueLazyComponent } from '@xunlei/vue-lazy-component'
 
 export default {
 	name: 'SpaceTable',
 	components: {
 		NcAvatar,
 		NcEmptyContent,
+		VueLazyComponent,
 	},
 	methods: {
 		convertQuotaForFrontend(quota) {
@@ -99,6 +104,9 @@ export default {
 		},
 		// Returns all workspace's managers
 		workspaceManagers(space) {
+			if (space.managers) {
+				return Object.values(space.managers)
+			}
 			return Object.values(space.users).filter((u) => this.$store.getters.isSpaceAdmin(u, space.name))
 		},
 		openSpace(name) {
@@ -110,6 +118,15 @@ export default {
 			const space = this.$store.state.spaces[this.$route.params.space]
 			this.$store.dispatch('loadUsers', { space })
 		},
+		initAdmins(id, name) {
+			const space = this.$store.getters.getSpaceById(id)
+			if (space !== null) {
+				if (space.managers !== null || space.users.length > 0) {
+					return
+				}
+				this.$store.dispatch('loadAdmins', space)
+			}
+		},
 	},
 }
 </script>

src/WorkspaceContent.vue

@@ -81,6 +81,7 @@ export default {
 							quota,
 							users: space.users,
 							userCount: space.userCount,
+							managers: null,
 						})
 					})
 

src/main.js

@@ -27,6 +27,7 @@ import store from './store/index.js'
 import App from './App.vue'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import { Tooltip } from '@nextcloud/vue'
+import VueLazyComponent from '@xunlei/vue-lazy-component'
 
 Vue.mixin({
 	methods: {
@@ -36,6 +37,7 @@ Vue.mixin({
 })
 
 Vue.directive('tooltip', Tooltip)
+Vue.use(VueLazyComponent)
 
 export default new Vue({
 	el: '#content',

src/store/actions.js

@@ -495,4 +495,14 @@ export default {
 				console.error(error)
 			})
 	},
+	async loadAdmins(context, space) {
+		const url = generateUrl(`/apps/workspace/space/${space.id}/admin-users`)
+		axios.get(url)
+			.then(response => {
+				context.commit('addSpaceAdminUsers', { name: space.name, managers: response.data })
+			})
+			.catch(error => {
+				console.error(error)
+			})
+	},
 }

src/store/getters.js

@@ -45,6 +45,9 @@ export const getters = {
 	getSpaceUserCount: state => (name) => {
 		return state.spaces[name].userCount
 	},
+	getSpaceById: state => (spaceId) => {
+		return Object.values(state.spaces).find((space) => space.id === spaceId)
+	},
 	// Returns the number of users in a group
 	groupUserCount: state => (spaceName, gid) => {
 		const users = state.spaces[spaceName].users

src/store/mutations.js

@@ -99,6 +99,9 @@ export default {
 		state.spaces[space.name] = space
 		sortSpaces(state)
 	},
+	addSpaceAdminUsers(state, space) {
+		state.spaces[space.name].managers = space.managers
+	},
 	UPDATE_USERS(state, { space, users }) {
 		space.users = users
 		VueSet(state.spaces, space.name, space)