MINOR: feat(ifc): allow to open multiple IFCs at once from models man…

…ager (#478)

package.json

@@ -42,7 +42,7 @@
     "eslint-plugin-vue": "^9.28.0",
     "jest": "^29.7.0",
     "prettier": "^3.3.3",
-    "sass": "^1.79.3",
+    "sass-embedded": "^1.79.5",
     "semantic-release": "^24.1.1",
     "vite": "^5.4.8",
     "vite-plugin-environment": "^1.1.3"

src/components/specific/app/app-link/AppLink.vue

@@ -1,27 +1,38 @@
+<script setup>
+defineProps({
+  to: {
+    type: [String, Object],
+    required: true
+  },
+  target: {
+    type: String,
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+
 <template>
-  <router-link class="app-link" :to="to" :target="target">
+  <router-link
+    class="app-link"
+    :class="{ disabled }"
+    :to="disabled ? '' : to"
+    :target="target"
+  >
     <slot></slot>
   </router-link>
 </template>
 
-<script>
-export default {
-  props: {
-    to: {
-      type: [String, Object],
-      required: true
-    },
-    target: {
-      type: String,
-      default: ""
-    }
-  }
-};
-</script>
-
 <style scoped>
 .app-link {
   text-decoration: none;
   color: inherit;
+
+  &.disabled {
+    pointer-events: none;
+  }
 }
 </style>

src/components/specific/models/models-manager/generic-models-manager/GenericModelsManager.vue

@@ -34,6 +34,7 @@
       <BIMDataIconExport margin="0 12px" />
       <span> {{ $t("t.add") }}</span>
     </BIMDataButton>
+
     <div class="generic-models-manager__separator"></div>
 
     <transition name="fade">
@@ -45,6 +46,7 @@
         @archive="archiveModels"
         @delete="openDeleteModal"
         @download="downloadModels"
+        @open="openModels"
         @unarchive="unarchiveModels"
       />
     </transition>
@@ -85,12 +87,14 @@
 
 <script>
 import { computed, ref, watch, watchEffect } from "vue";
+import { useRouter } from "vue-router";
 import { MODEL_CONFIG } from "../../../../../config/models.js";
+import { WINDOWS } from "../../../../../config/viewer.js";
 import { useFiles } from "../../../../../state/files.js";
 import { useModels } from "../../../../../state/models.js";
 import { useUser } from "../../../../../state/user.js";
 import { wait } from "../../../../../utils/async.js";
-import { isModel } from "../../../../../utils/models.js";
+import { isModel, openInViewer } from "../../../../../utils/models.js";
 import { fileUploadInput } from "../../../../../utils/upload.js";
 
 // Components
@@ -126,6 +130,7 @@ export default {
     "view-metaBuilding"
   ],
   setup(props, { emit }) {
+    const router = useRouter();
     const { isProjectGuest } = useUser();
     const { createModel, updateModels } = useModels();
     const { downloadFiles: download } = useFiles();
@@ -190,6 +195,10 @@ export default {
       );
     };
 
+    const openModels = models => {
+      openInViewer(router, props.project, models, WINDOWS.IFC3D);
+    };
+
     const uploadModels = () => {
       fileUploadInput(
         "file",
@@ -236,6 +245,7 @@ export default {
       onFileUploaded,
       onUploadCanceled,
       openDeleteModal,
+      openModels,
       selectTab,
       unarchiveModels,
       uploadModels

src/components/specific/models/models-manager/models-action-bar/ModelsActionBar.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { MODEL_TYPE } from "../../../../../config/models.js";
 import { useUser } from "../../../../../state/user.js";
 
 const { hasAdminPermModel } = useUser();
@@ -19,10 +20,13 @@ defineEmits([
   "archive",
   "delete",
   "download",
-  "unarchive"
+  "open",
+  "unarchive",
 ]);
 
 const isArchived = computed(() => props.models.every(m => m.archived));
+
+const isIFC = computed(() => props.models.every(m => m.type === MODEL_TYPE.IFC));
 </script>
 
 <template>
@@ -67,7 +71,25 @@ const isArchived = computed(() => props.models.every(m => m.archived));
       <BIMDataIconDownload size="s" margin="0 6px 0 0" />
       <span>{{ $t("t.download") }}</span>
     </BIMDataButton>
+
+    <BIMDataButton
+      v-if="isIFC"
+      width="120px"
+      ghost
+      squared
+      @click="$emit('open', models)"
+    >
+      <BIMDataIconShow size="s" margin="0 6px 0 0" />
+      <span>{{ $t("t.open") }}</span>
+    </BIMDataButton>
   </div>
 </template>
 
-<style scoped lang="scss" src="./ModelsActionBar.scss"></style>
+<style scoped>
+.models-action-bar {
+  display: inline-flex;
+  gap: calc(var(--spacing-unit) / 2);
+  background-color: var(--color-white);
+  box-shadow: var(--box-shadow);
+}
+</style>

src/components/specific/models/models-table/model-actions-cell/ViewerButton.vue

@@ -1,7 +1,37 @@
+<script setup>
+import { DEFAULT_WINDOW } from "../../../../../config/viewer.js";
+import routeNames from "../../../../../router/route-names.js";
+// Components
+import AppLink from "../../../app/app-link/AppLink.vue";
+
+defineProps({
+  project: {
+    type: Object,
+    required: true
+  },
+  model: {
+    type: Object,
+    required: true
+  },
+  window: {
+    type: String,
+    default: DEFAULT_WINDOW
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  text: {
+    type: String
+  }
+});
+</script>
+
 <template>
   <AppLink
     data-test-id="btn-open-viewer"
     :data-test-param="window"
+    :disabled="disabled"
     :to="{
       name: routeNames.modelViewer,
       params: {
@@ -27,46 +57,7 @@
   </AppLink>
 </template>
 
-<script>
-import { DEFAULT_WINDOW } from "../../../../../config/viewer.js";
-import routeNames from "../../../../../router/route-names.js";
-// Components
-import AppLink from "../../../app/app-link/AppLink.vue";
-
-export default {
-  components: {
-    AppLink
-  },
-  props: {
-    project: {
-      type: Object,
-      required: true
-    },
-    model: {
-      type: Object,
-      required: true
-    },
-    window: {
-      type: String,
-      default: DEFAULT_WINDOW
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: String
-    }
-  },
-  setup() {
-    return {
-      routeNames
-    };
-  }
-};
-</script>
-
-<style scoped lang="scss">
+<style scoped>
 .viewer-button {
   color: var(--color-granite-light);
 

src/utils/models.js

@@ -78,16 +78,17 @@ function isConvertible(document) {
   );
 }
 
-function openInViewer(router, project, model) {
+function openInViewer(router, project, model, window) {
+  const models = [].concat(model);
   router.push({
     name: routeNames.modelViewer,
     params: {
       spaceID: project.cloud.id,
       projectID: project.id,
-      modelIDs: model.id
+      modelIDs: models.map(m => m.id).join(",")
     },
     query: {
-      window: MODEL_CONFIG[model.type].window
+      window: window || MODEL_CONFIG[models[0].type].window
     }
   });
 }

src/views/model-viewer/ModelViewer.vue

@@ -15,9 +15,9 @@
 
 <script>
 import makeBIMDataViewer from "@bimdata/viewer";
-import set from "lodash/set";
-import merge from "lodash/merge";
 import cloneDeep from "lodash/cloneDeep";
+import merge from "lodash/merge";
+import set from "lodash/set";
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
@@ -60,6 +60,7 @@ export default {
         topicGuid
       }
     });
+
     // Extract space specific plugins config
     // and merges it into initial config
     const spacePluginsConfig = currentSpace.value.features
@@ -92,11 +93,10 @@ export default {
 
     const pluginUrls = featurePlugins.concat(Array.from(appPlugins));
 
+    let bimdataViewer;
     let unwatchAccessToken = () => {};
     let unwatchLocale = () => {};
 
-    let bimdataViewer;
-
     onMounted(async () => {
       loading.value = true;
       bimdataViewer = makeBIMDataViewer({

vite.config.js

@@ -16,6 +16,7 @@ export default defineConfig(({ mode }) => {
     css: {
       preprocessorOptions: {
         scss: {
+          api: "modern-compiler",
           // Make global SASS mixins available everywhere
           additionalData: '@import "/src/styles/mixins.scss";'
         }