fix: open the right model in viewer from project-card/models-card

bimdata · Sep 20, 2023 · 217b36e · 217b36e
1 parent 748dc39
commit 217b36e
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 69 deletions.
diff --git a/src/components/specific/models/models-card/ModelsCard.vue b/src/components/specific/models/models-card/ModelsCard.vue
@@ -60,21 +60,21 @@ export default {
   setup(props, { emit }) {
     const currentModel = ref(null);
 
-    watch(
-      () => props.models,
-      () => {
-        currentModel.value = props.models.length > 0 ? props.models[0] : null;
-      },
-      { immediate: true }
-    );
-
     const onModelChange = model => {
       if (!currentModel.value || currentModel.value.id !== model.id) {
         currentModel.value = model;
         emit("model-changed", model);
       }
     };
 
+    watch(
+      () => props.models,
+      () => {
+        currentModel.value = props.models[0];
+      },
+      { immediate: true }
+    );
+
     return {
       // References
       model: currentModel,

diff --git a/src/components/specific/models/models-card/main-model-selector/MainModelSelector.vue b/src/components/specific/models/models-card/main-model-selector/MainModelSelector.vue
@@ -78,8 +78,8 @@ export default {
   },
   setup(props) {
     const { IFC, POINT_CLOUD } = MODEL_TYPE;
-    const { loadProjectModels } = useModels();
     const { updateProject } = useProjects();
+    const { loadProjectModels } = useModels();
 
     const loading = ref(false);
     const mainModel = ref(null);
@@ -103,11 +103,11 @@ export default {
     const submit = async () => {
       try {
         loading.value = true;
-        await updateProject({
+        const updatedProject = await updateProject({
           ...props.project,
           main_model_id: selectedModel.value.id
         });
-        await loadProjectModels(props.project);
+        await loadProjectModels(updatedProject);
         props.onSuccess();
       } catch (error) {
         console.error(error);

diff --git a/...mponents/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue b/...mponents/specific/models/models-card/models-card-model-preview/ModelsCardModelPreview.vue
@@ -146,18 +146,7 @@ export default {
     watch(
       () => props.models,
       () => {
-        const models = [];
-        props.models
-          .filter(model => !model.archived)
-          .forEach(model => {
-            if (model.id === props.project.main_model_id) {
-              models.unshift(model);
-            } else {
-              models.push(model);
-            }
-          });
-
-        images.value = models.map((model, i) => ({
+        images.value = props.models.map((model, i) => ({
           index: i + 1,
           name: model.name,
           type: model.type,

diff --git a/src/components/specific/models/models-overview/ModelsOverview.vue b/src/components/specific/models/models-overview/ModelsOverview.vue
@@ -10,11 +10,7 @@
           :models="models"
           @model-changed="onModelChange"
         />
-        <ModelLocation
-          v-if="!isLG"
-          :project="project"
-          :model="displayedModel"
-        />
+        <ModelLocation v-if="!isLG" :project="project" :model="currentModel" />
       </template>
       <template v-else>
         <ModelsOverviewOnboarding
@@ -51,25 +47,25 @@ export default {
   },
   emits: ["open-file-uploader"],
   setup(props) {
-    const displayedModel = ref(null);
+    const currentModel = ref(null);
+
+    const onModelChange = model => {
+      if (!currentModel.value || currentModel.value.id !== model.id) {
+        currentModel.value = model;
+      }
+    };
 
     watch(
       () => props.models,
       () => {
-        displayedModel.value = props.models.length > 0 ? props.models[0] : null;
+        currentModel.value = props.models[0];
       },
       { immediate: true }
     );
 
-    const onModelChange = model => {
-      if (!displayedModel.value || displayedModel.value.id !== model.id) {
-        displayedModel.value = model;
-      }
-    };
-
     return {
       // References
-      displayedModel,
+      currentModel,
       // Methods
       onModelChange,
       // Responsive breakpoints

diff --git a/src/components/specific/projects/project-card/ProjectCard.vue b/src/components/specific/projects/project-card/ProjectCard.vue
@@ -43,7 +43,7 @@
             <ProjectCardModelPreview
               :project="project"
               :models="displayedModels"
-              @preview-changed="onPreviewChange"
+              @model-changed="onModelChange"
             />
           </template>
           <template #footer>
@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import { inject, onMounted, ref, watch } from "vue";
+import { inject, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useToggle } from "../../../../composables/toggle.js";
 import { MODEL_TYPE } from "../../../../config/models.js";
@@ -117,41 +117,48 @@ export default {
     const displayedModels = ref([]);
     const currentModel = ref(null);
 
-    const onPreviewChange = model => {
+    const onModelChange = model => {
       currentModel.value = model;
     };
 
     const goToModelViewer = () => {
       openInViewer(router, props.project, currentModel.value);
     };
 
+    let unwatchProject, unwatchModels;
+
     onMounted(() => {
       const observer = new IntersectionObserver(
         ([{ isIntersecting }]) => {
           if (!isIntersecting) return;
 
-          watch(
+          unwatchProject = watch(
             () => props.project,
             async () => {
               loading.value = true;
               const models = await ModelService.fetchModels(props.project);
-              displayedModels.value = models.filter(
-                model =>
-                  !model.archived && model.type !== MODEL_TYPE.META_BUILDING
-              );
+              displayedModels.value = models
+                .filter(
+                  model =>
+                    !model.archived && model.type !== MODEL_TYPE.META_BUILDING
+                )
+                .reduce(
+                  (acc, model) =>
+                    model.id === props.project.main_model_id
+                      ? [model, ...acc]
+                      : [...acc, model],
+                  []
+                );
               loading.value = false;
               visible.value = true;
             },
             { immediate: true }
           );
 
-          watch(
+          unwatchModels = watch(
             displayedModels,
             () => {
-              currentModel.value =
-                displayedModels.value.find(
-                  model => model.id === props.project.main_model_id
-                ) ?? displayedModels.value[0];
+              currentModel.value = displayedModels.value[0];
             },
             { immediate: true }
           );
@@ -167,6 +174,11 @@ export default {
       observer.observe(placeholder.value);
     });
 
+    onUnmounted(() => {
+      unwatchProject?.();
+      unwatchModels?.();
+    });
+
     return {
       // References
       currentModel,
@@ -180,7 +192,7 @@ export default {
       closeMenu,
       goToModelViewer,
       isSpaceAdmin,
-      onPreviewChange,
+      onModelChange,
       openMenu
     };
   }

diff --git a/...nts/specific/projects/project-card/project-card-model-preview/ProjectCardModelPreview.vue b/...nts/specific/projects/project-card/project-card-model-preview/ProjectCardModelPreview.vue
@@ -34,7 +34,7 @@ export default {
       required: true
     }
   },
-  emis: ["preview-changed"],
+  emis: ["model-changed"],
   setup(props, { emit }) {
     const container = ref(null);
     const viewport = ref(null);
@@ -55,32 +55,22 @@ export default {
     watch(index, (newIndex, oldIndex) => {
       if (newIndex !== oldIndex) {
         image.value = images.value[newIndex] || {};
-        emit("preview-changed", props.models[newIndex]);
+        emit("model-changed", props.models[newIndex]);
       }
     });
 
     watch(
       () => props.models,
       () => {
-        const models = [];
-        props.models
-          .filter(model => !model.archived)
-          .forEach(model => {
-            if (model.id === props.project.main_model_id) {
-              models.unshift(model);
-            } else {
-              models.push(model);
-            }
-          });
-
-        images.value = models.map((model, i) => ({
+        images.value = props.models.map((model, i) => ({
           index: i + 1,
           type: model.type,
           url: model.preview_file
         }));
 
         index.value = 0;
         image.value = images.value.length > 0 ? images.value[0] : {};
+        emit("model-changed", props.models[index.value]);
       },
       { immediate: true }
     );

diff --git a/src/state/models.js b/src/state/models.js
@@ -8,7 +8,12 @@ const state = reactive({
 });
 
 const loadProjectModels = async project => {
-  const models = await ModelService.fetchModels(project);
+  let models = await ModelService.fetchModels(project);
+  models = models.reduce(
+    (acc, model) =>
+      model.id === project.main_model_id ? [model, ...acc] : [...acc, model],
+    []
+  );
   state.projectModels = models;
   return models;
 };

diff --git a/src/views/project-board/project-overview/ProjectOverview.vue b/src/views/project-board/project-overview/ProjectOverview.vue
@@ -128,8 +128,8 @@ export default {
     const { currentSpace, spaceSubInfo, loadSpaceSubInfo } = useSpaces();
     const { currentProject, projectUsers, projectInvitations } = useProjects();
     const { loadProjectModels, projectModels } = useModels();
-    const { openModal } = useAppModal();
     const { loadProjectFileStructure } = useFiles();
+    const { openModal } = useAppModal();
     const { pushNotification } = useAppNotification();
 
     const modelsPreview = computed(() =>
@@ -171,11 +171,11 @@ export default {
     return {
       // References
       allowedExtensions: UPLOADABLE_EXTENSIONS,
-      modelsPreview,
       invitations: projectInvitations,
-      shouldSubscribe,
       models: projectModels,
+      modelsPreview,
       project: currentProject,
+      shouldSubscribe,
       showFileUploader,
       space: currentSpace,
       spaceSubInfo,