PATCH: fix(meta-building): use apiClient to fetch model zones

bimdata · Apr 19, 2024 · c8f1208 · c8f1208
1 parent 9725161
commit c8f1208
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 22 deletions.
diff --git a/src/BIMDataBuildingMaker/BIMDataBuildingMaker.vue b/src/BIMDataBuildingMaker/BIMDataBuildingMaker.vue
@@ -57,10 +57,7 @@
     </div>
 
     <transition name="fade">
-      <div
-        class="bimdata-building-maker__loader"
-        v-show="loading.value"
-      >
+      <div class="bimdata-building-maker__loader" v-show="loading">
         <BIMDataSpinner />
       </div>
     </transition>

diff --git a/src/BIMDataMetaBuildingStructure/BIMDataMetaBuildingStructure.vue b/src/BIMDataMetaBuildingStructure/BIMDataMetaBuildingStructure.vue
@@ -6,6 +6,10 @@ import StructureView from "./StructureView/StructureView.vue";
 import ZonesView from "./ZonesView/ZonesView.vue";
 
 const props = defineProps({
+  apiClient: {
+    type: Object,
+    required: true,
+  },
   space: {
     type: Object,
     required: true,
@@ -28,9 +32,30 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["selection-changed", "storey-selected"]);
+const emit = defineEmits([
+  "selection-changed",
+  "storey-selected"
+]);
 
+const loading = ref(false);
+const modelZones = ref([]);
 const selectedStorey = ref(null);
+
+watch(
+  () => props.model,
+  async model => {
+    if (model) {
+      try {
+        loading.value = true;
+        modelZones.value = await props.apiClient.modelApi.getZones(props.space.id, model.id, props.project.id);
+      } finally {
+        loading.value = false;
+      }
+    }
+  },
+  { immediate: true }
+);
+
 watch(
   () => props.storey,
   storey => (selectedStorey.value = storey),
@@ -41,7 +66,7 @@ const state = {
   model: computed(() => props.model),
   storeys: computed(() => props.model?.storeys ?? []),
   storey: readonly(selectedStorey),
-  zones: computed(() => props.model?.zones.filter(zone => zone.storey_uuid === selectedStorey.value?.uuid) ?? []),
+  zones: computed(() => modelZones.value.filter(zone => zone.storey_uuid === selectedStorey.value?.uuid) ?? []),
   selectable: computed(() => props.selectable),
   onStoreySelected: event => (selectedStorey.value = event, emit("storey-selected", event)),
   onSelectionChanged: event => emit("selection-changed", event),
@@ -102,11 +127,18 @@ const activeTab = ref(tabs[0]);
     <div class="body">
       <component :is="activeTab.view" />
     </div>
+
+    <transition name="fade">
+      <div class="loading" v-show="loading">
+        <BIMDataSpinner />
+      </div>
+    </transition>
   </div>
 </template>
 
 <style scoped>
 .meta-building-structure {
+  position: relative;
   height: 100%;
 
   .title {
@@ -143,5 +175,23 @@ const activeTab = ref(tabs[0]);
     justify-content: center;
     align-items: center;
   }
+
+  .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: rgba(255, 255, 255, 0.75);
+
+    .bimdata-spinner {
+      transform: scale(2);
+    }
+  }
 }
 </style>
diff --git a/src/BIMDataMetaBuildingStructure/StructureView/StructureView.vue b/src/BIMDataMetaBuildingStructure/StructureView/StructureView.vue
@@ -15,9 +15,9 @@ defineOptions({
   }
 });
 
-const { model, storey } = inject("BIMDataMetaBuildingStructure.state");
+const { storey, zones } = inject("BIMDataMetaBuildingStructure.state");
 
-const tree = computed(() => setupTree(buildStructureTree(model.value, storey.value)));
+const tree = computed(() => setupTree(buildStructureTree(storey.value, zones.value)));
 const nodes = computed(() => flattenTree(tree.value));
 
 const searchText = ref("");

diff --git a/src/BIMDataMetaBuildingStructure/ZonesView/ZonesView.vue b/src/BIMDataMetaBuildingStructure/ZonesView/ZonesView.vue
@@ -11,9 +11,9 @@ defineOptions({
   }
 });
 
-const { model, storey } = inject("BIMDataMetaBuildingStructure.state");
+const { zones } = inject("BIMDataMetaBuildingStructure.state");
 
-const tree = computed(() => buildZonesTree(model.value, storey.value));
+const tree = computed(() => buildZonesTree(zones.value));
 </script>
 
 <template>

diff --git a/src/BIMDataMetaBuildingStructure/meta-building-structure.js b/src/BIMDataMetaBuildingStructure/meta-building-structure.js
@@ -1,34 +1,28 @@
 import { ref } from "vue";
 
-export function buildStructureTree(model, storey) {
+export function buildStructureTree(storey, zones) {
   return [
     {
       id: 1,
       text: "Zones",
       component: "StructureRootNode",
-      children: buildZonesTree(model, storey),
+      children: buildZonesTree(zones),
     },
     {
       id: 2,
       text: "Plans",
       component: "StructureRootNode",
-      children: buildPlansTree(model, storey),
+      children: buildPlansTree(storey),
     }
   ];
 }
 
-export function buildZonesTree(model, storey) {
-  if (!model || !storey) return [];
-
-  const zones = model.zones.filter(zone => zone.storey_uuid === storey.uuid);
-
+export function buildZonesTree(zones) {
   return zones.map(zoneNode);
 }
 
-export function buildPlansTree(model, storey) {
-  if (!model || !storey) return [];
-
-  return storey.plans.map(planNode);
+export function buildPlansTree(storey) {
+  return storey?.plans.map(planNode) ?? [];
 }
 
 export function setupTree(tree, parent) {