@bimdata/bcf-components 6.4.5 → 6.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimdata/bcf-components",
-  "version": "6.4.5",
+  "version": "6.4.7",
   "files": [
     "src",
     "vue3-plugin.js"

package/src/components/bcf-topic-card/BcfTopicCard.scss

@@ -109,4 +109,12 @@
   height: var(--card-height);
   box-shadow: var(--box-shadow);
   background-color: var(--color-silver-light);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .bimdata-spinner {
+    transform: scale(2);
+  }
 }

package/src/components/bcf-topic-card/BcfTopicCard.vue

@@ -80,12 +80,15 @@
     </div>
   </div>
 
-  <div v-else ref="placeholder" class="bcf-topic-card-placeholder"></div>
+  <div v-else ref="placeholder" class="bcf-topic-card-placeholder">
+    <BIMDataSpinner v-if="loading" />
+  </div>
 </template>
 
 <script>
 import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import service from "../../service.js";
 import { getPriorityColor, getStatusColor } from "../../utils/topic.js";
 // Components
 import BcfTopicDefaultImage from "./BcfTopicDefaultImage.vue";
@@ -95,6 +98,10 @@ export default {
     BcfTopicDefaultImage,
   },
   props: {
+    project: {
+      type: Object,
+      required: true,
+    },
     detailedExtensions: {
       type: Object,
       required: true,
@@ -115,6 +122,7 @@ export default {
   emits: ["open-topic", "update:selected"],
   setup(props) {
     const visible = ref(false);
+    const loading = ref(false);
     const placeholder = ref(null);
     const hover = ref(false);
 
@@ -128,11 +136,24 @@ export default {
 
     const topicObjects = computed(() => props.topic.viewpoints?.[0]?.components?.selection ?? []);
 
+    let unwatchTopic;
+
     onMounted(() => {
       const observer = new IntersectionObserver(
         ([{ isIntersecting }]) => {
           if (!isIntersecting) return;
-          visible.value = true;
+
+          unwatchTopic = watch(
+            () => props.topic,
+            async topic => {
+              loading.value = true;
+              topic.viewpoints = await service.fetchTopicViewpoints(props.project, topic);
+              loading.value = false;
+              visible.value = true;
+            },
+            { immediate: true }
+          );
+
           observer.disconnect();
         },
         {
@@ -143,9 +164,14 @@ export default {
       observer.observe(placeholder.value);
     });
 
+    onUnmounted(() => {
+      unwatchTopic?.();
+    });
+
     return {
       // References
       hover,
+      loading,
       placeholder,
       priorityColor,
       statusColor,

package/src/components/bcf-topic-overview/BcfTopicOverview.vue

@@ -53,6 +53,7 @@
       </div>
 
       <BcfTopicViewpoints
+        :project="project"
         :detailedExtensions="detailedExtensions"
         :topic="topic"
         @view-topic-viewpoint="$emit('view-topic-viewpoint', $event)"

package/src/components/bcf-topic-overview/bcf-topic-viewpoints/BcfTopicViewpoints.vue

@@ -34,7 +34,8 @@
 
 <script>
 import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
-import { computed } from "vue";
+import { computed, watch } from "vue";
+import service from "../../../service.js";
 import { getStatusColor } from "../../../utils/topic.js";
 import { getViewpointConfig } from "../../../utils/viewpoints.js";
 // Components
@@ -45,6 +46,10 @@ export default {
     BcfTopicDefaultImage,
   },
   props: {
+    project: {
+      type: Object,
+      required: true,
+    },
     detailedExtensions: {
       type: Object,
       required: true,
@@ -62,8 +67,8 @@ export default {
   setup(props) {
     const viewpoints = computed(() =>
       (props.topic.viewpoints ?? [])
-        .filter((v) => v.snapshot)
-        .map((viewpoint) => ({
+        .filter(v => v.snapshot)
+        .map(viewpoint => ({
           ...viewpoint,
           icon: getViewpointConfig(viewpoint)?.icon,
         }))
@@ -71,6 +76,17 @@ export default {
 
     const statusColor = computed(() => getStatusColor(props.topic, props.detailedExtensions));
 
+    watch(
+      () => props.topic,
+      async () => {
+        if (!props.topic.viewpoints) {
+          // Load topic viewpoints if they are not loaded yet
+          props.topic.viewpoints = await service.fetchTopicViewpoints(props.project, props.topic);
+        }
+      },
+      { immediate: true }
+    );
+
     return {
       // References
       statusColor,