feat(state): load space users when resolving SpaceBoard view

src/api/SpaceService.js

@@ -5,6 +5,12 @@ class SpacesService {
     return apiClient.collaborationApi.getClouds();
   }
 
+  fetchSpaceUsers(space) {
+    return apiClient.collaborationApi.getCloudUsers({
+      cloudPk: space.id
+    });
+  }
+
   createSpace(space) {
     return apiClient.collaborationApi.createCloud({
       data: space

src/router/index.js

@@ -84,13 +84,14 @@ const router = createRouter({
 
 router.beforeEach(authGuard);
 
-router.beforeResolve(to => {
-  to.matched
+router.beforeResolve(async to => {
+  const resolvers = to.matched
     .filter(r => r.meta && r.meta.resolver)
-    .reduce(
-      (chain, r) => chain.then(() => r.meta.resolver(to)),
-      Promise.resolve()
-    );
+    .map(r => r.meta.resolver);
+
+  for (const resolver of resolvers) {
+    await resolver(to);
+  }
 });
 
 export { routeNames };

src/router/resolvers.js

@@ -17,11 +17,12 @@ const dashboardResolver = createViewResolver(() => useSpaces().loadSpaces());
 const spacesResolver = createViewResolver(() => useSpaces().loadSpaces());
 
 const spaceBoardResolver = createViewResolver(route => {
-  const { currentSpace, loadSpaces, selectSpace } = useSpaces();
+  const { currentSpace, loadSpaces, loadSpaceUsers, selectSpace } = useSpaces();
   const { loadProjects } = useProjects();
 
   return loadSpaces()
     .then(() => selectSpace(+route.params.spaceID))
+    .then(() => loadSpaceUsers(currentSpace.value, { forceFetch: true }))
     .then(() => loadProjects(currentSpace.value, { forceFetch: true }));
 });
 

src/state/projects.js

@@ -2,16 +2,19 @@ import { reactive, readonly, toRefs } from "vue";
 import IfcService from "@/api/IfcService";
 import ProjectsService from "@/api/ProjectService";
 
+const loaded = {
+  projects: false
+};
+
 const state = reactive({
-  loaded: false,
   projects: [],
   currentProject: null
 });
 
 const loadProjects = async (space, options = {}) => {
-  if (!state.loaded || options.forceFetch) {
+  if (!loaded.projects || options.forceFetch) {
     state.projects = await ProjectsService.fetchSpaceProjects(space);
-    state.loaded = true;
+    loaded.projects = true;
   }
   return state.projects;
 };
@@ -44,12 +47,6 @@ const selectProject = id => {
 };
 
 const fetchProjectPreviewImages = async project => {
-  // let ifcs = await IfcService.fetchProjectIfcs(project);
-  // ifcs = ifcs.filter(ifc => ifc.viewer360File);
-  // ifcs.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
-  // const imageURL = ifcs.length ? ifcs[0].viewer360File : null;
-  // return imageURL;
-
   const ifcs = await IfcService.fetchProjectIfcs(project);
   const images = ifcs
     .filter(ifc => ifc.viewer360File)

src/state/spaces.js

@@ -1,20 +1,33 @@
 import { reactive, readonly, toRefs } from "vue";
 import SpacesService from "@/api/SpaceService";
 
+const loaded = {
+  spaces: false,
+  currentSpaceUsers: false
+};
+
 const state = reactive({
-  loaded: false,
   spaces: [],
-  currentSpace: null
+  currentSpace: null,
+  currentSpaceUsers: []
 });
 
 const loadSpaces = async (options = {}) => {
-  if (!state.loaded || options.forceFetch) {
+  if (!loaded.spaces || options.forceFetch) {
     state.spaces = await SpacesService.fetchUserSpaces();
-    state.loaded = true;
+    loaded.spaces = true;
   }
   return state.spaces;
 };
 
+const loadSpaceUsers = async (space, options = {}) => {
+  if (!loaded.currentSpaceUsers || options.forceFetch) {
+    state.currentSpaceUsers = await SpacesService.fetchSpaceUsers(space);
+    loaded.currentSpaceUsers = true;
+  }
+  return state.currentSpaceUsers;
+};
+
 const createSpace = async space => {
   const newSpace = await SpacesService.createSpace(space);
   state.spaces = [newSpace].concat(state.spaces);
@@ -53,6 +66,7 @@ export function useSpaces() {
   return {
     ...toRefs(readonlyState),
     loadSpaces,
+    loadSpaceUsers,
     createSpace,
     updateSpace,
     softUpdateSpace,

src/views/space-board/SpaceBoard.vue

@@ -26,7 +26,7 @@
     </div>
 
     <transition name="fade">
-      <div class="side-panel">
+      <div class="side-panel" v-show="false">
         <SpaceUsersManager :space="space" />
       </div>
     </transition>