feat(viewer): create model-viewer view (still empty for now)

src/components/specific/models/project-models-overview/ProjectModelsOverview.vue

@@ -8,7 +8,7 @@
         <ViewerCard
           :project="project"
           :models="models"
-          @model-change="onModelChange"
+          @model-changed="onModelChange"
         />
         <ModelLocation :project="project" :model="displayedModel" />
       </template>

src/components/specific/models/viewer-card-model-preview/ViewerCardModelPreview.vue

@@ -69,7 +69,7 @@ export default {
       required: true
     }
   },
-  emits: ["model-change"],
+  emits: ["model-changed"],
   setup(props, { emit }) {
     const nbSlices = 15;
     const container = ref(null);
@@ -94,7 +94,7 @@ export default {
 
     watch(index, i => {
       image.value = images.value[i];
-      emit("model-change", props.models[i]);
+      emit("model-changed", props.models[i]);
     });
     const previousImage = () => {
       if (index.value > 0) index.value--;

src/components/specific/models/viewer-card/ViewerCard.vue

@@ -1,21 +1,21 @@
 <template>
   <BIMDataCard class="viewer-card">
     <template #left>
-      <BIMDataButton color="primary" fill radius @click="goToViewer">
+      <BIMDataButton color="primary" fill radius @click="goToModelViewer">
         <BIMDataIcon name="show" size="xs" />
         <span>{{ $t("ViewerCard.buttonOpen") }}</span>
       </BIMDataButton>
     </template>
     <template #content>
-      <ViewerCardModelPreview
-        :models="models"
-        @model-change="$emit('model-change', $event)"
-      />
+      <ViewerCardModelPreview :models="models" @model-changed="onModelChange" />
     </template>
   </BIMDataCard>
 </template>
 
 <script>
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { routeNames } from "@/router";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
 import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataCard.js";
@@ -39,12 +39,36 @@ export default {
       required: true
     }
   },
-  emits: ["model-change"],
-  setup() {
-    const goToViewer = () => {};
+  emits: ["model-changed"],
+  setup(props, { emit }) {
+    const router = useRouter();
+
+    const currentModel = ref();
+    watch(
+      () => props.models,
+      () => (currentModel.value = props.models[0]),
+      { immediate: true }
+    );
+
+    const onModelChange = model => {
+      currentModel.value = model;
+      emit("model-changed", model);
+    };
+
+    const goToModelViewer = () => {
+      router.push({
+        name: routeNames.modelViewer,
+        params: {
+          spaceID: props.project.cloud.id,
+          projectID: props.project.id,
+          modelID: currentModel.value.id
+        }
+      });
+    };
 
     return {
-      goToViewer
+      goToModelViewer,
+      onModelChange
     };
   }
 };

src/router/index.js

@@ -2,20 +2,22 @@ import { createRouter, createWebHistory } from "vue-router";
 import { authGuard } from "./guards";
 import {
   dashboardResolver,
+  modelViewerResolver,
   projectBoardResolver,
-  userProjectsResolver,
   rootResolver,
   spaceBoardResolver,
+  userProjectsResolver,
   userSpacesResolver
 } from "./resolvers";
 // Components
 import Layout from "@/Layout";
 import Dashboard from "@/views/dashboard/Dashboard";
+import ModelViewer from "@/views/model-viewer/ModelViewer";
 import OidcCallback from "@/views/oidc-callback/OidcCallback";
 import OidcCallbackError from "@/views/oidc-callback-error/OidcCallbackError";
 import ProjectBoard from "@/views/project-board/ProjectBoard";
-import UserProjects from "@/views/user-projects/UserProjects";
 import SpaceBoard from "@/views/space-board/SpaceBoard";
+import UserProjects from "@/views/user-projects/UserProjects";
 import UserSpaces from "@/views/user-spaces/UserSpaces";
 
 const routeNames = Object.freeze({
@@ -26,7 +28,8 @@ const routeNames = Object.freeze({
   userSpaces: "user-spaces",
   spaceBoard: "space-board",
   userProjects: "user-projects",
-  projectBoard: "project-board"
+  projectBoard: "project-board",
+  modelViewer: "model-viewer"
 });
 
 const routes = [
@@ -81,6 +84,15 @@ const routes = [
           resolver: projectBoardResolver,
           breadcrumb: "BreadcrumbProjectSelector"
         }
+      },
+      {
+        path:
+          "/spaces/:spaceID(\\d+)/projects/:projectID(\\d+)/viewer/:modelID(\\d+)",
+        name: routeNames.modelViewer,
+        component: ModelViewer,
+        meta: {
+          resolver: modelViewerResolver
+        }
       }
     ]
   },

src/router/resolvers.js

@@ -17,7 +17,6 @@ const createViewResolver = resolve => {
     loading.value = true;
     await resolve(route);
     loading.value = false;
-    return;
   };
 };
 
@@ -47,48 +46,58 @@ const userProjectsResolver = createViewResolver(async () => {
 });
 
 const spaceBoardResolver = createViewResolver(async route => {
-  const {
-    currentSpace,
-    loadUserSpaces,
-    loadSpaceUsers,
-    loadSpaceInvitations,
-    selectSpace
-  } = useSpaces();
-  const { loadUserProjects, loadSpaceProjects } = useProjects();
+  const spaces = useSpaces();
+  const projects = useProjects();
 
-  await loadUserSpaces();
-  await loadUserProjects();
-  await selectSpace(+route.params.spaceID);
-  loadSpaceProjects(currentSpace.value);
-  if (currentSpace.value.isAdmin) {
-    await loadSpaceUsers(currentSpace.value);
-    await loadSpaceInvitations(currentSpace.value);
+  await spaces.loadUserSpaces();
+  await projects.loadUserProjects();
+
+  spaces.selectSpace(+route.params.spaceID);
+  projects.loadSpaceProjects(spaces.currentSpace.value);
+
+  if (spaces.currentSpace.value.isAdmin) {
+    await spaces.loadSpaceUsers(spaces.currentSpace.value);
+    await spaces.loadSpaceInvitations(spaces.currentSpace.value);
   }
   return;
 });
 
 const projectBoardResolver = createViewResolver(async route => {
-  const { currentSpace, loadUserSpaces, selectSpace } = useSpaces();
-  const {
-    currentProject,
-    loadUserProjects,
-    loadSpaceProjects,
-    loadProjectUsers,
-    loadProjectInvitations,
-    selectProject
-  } = useProjects();
-  const { loadProjectModels } = useModels();
+  const spaces = useSpaces();
+  const projects = useProjects();
+  const models = useModels();
 
-  await loadUserSpaces();
-  await loadUserProjects();
-  await selectSpace(+route.params.spaceID);
-  loadSpaceProjects(currentSpace.value);
-  await selectProject(+route.params.projectID);
-  if (currentProject.value.isAdmin) {
-    await loadProjectUsers(currentProject.value);
-    await loadProjectInvitations(currentProject.value);
+  await spaces.loadUserSpaces();
+  await projects.loadUserProjects();
+
+  spaces.selectSpace(+route.params.spaceID);
+  projects.loadSpaceProjects(spaces.currentSpace.value);
+
+  projects.selectProject(+route.params.projectID);
+  await models.loadProjectModels(projects.currentProject.value);
+
+  if (projects.currentProject.value.isAdmin) {
+    await projects.loadProjectUsers(projects.currentProject.value);
+    await projects.loadProjectInvitations(projects.currentProject.value);
   }
-  await loadProjectModels(currentProject.value);
+  return;
+});
+
+const modelViewerResolver = createViewResolver(async route => {
+  const spaces = useSpaces();
+  const projects = useProjects();
+  const models = useModels();
+
+  await spaces.loadUserSpaces();
+  await projects.loadUserProjects();
+
+  spaces.selectSpace(+route.params.spaceID);
+  projects.loadSpaceProjects(spaces.currentSpace.value);
+
+  projects.selectProject(+route.params.projectID);
+  await models.loadProjectModels(projects.currentProject.value);
+
+  // models.selectModel(+route.params.modelID); ???
   return;
 });
 
@@ -98,5 +107,6 @@ export {
   userSpacesResolver,
   userProjectsResolver,
   spaceBoardResolver,
-  projectBoardResolver
+  projectBoardResolver,
+  modelViewerResolver
 };

src/views/model-viewer/ModelViewer.scss

@@ -0,0 +1,11 @@
+.model-viewer-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/views/model-viewer/ModelViewer.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="model-viewer-view">
+    <!-- TODO -->
+    BIMData Viewer
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+    // TODO
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./ModelViewer.scss"></style>