fix: use building-maker from @bimdata/comonents

package.json

@@ -13,10 +13,8 @@
   },
   "dependencies": {
     "@bimdata/bcf-components": "6.2.1",
-    "@bimdata/building-maker": "3.0.3",
-    "@bimdata/components": "1.3.3",
-    "@bimdata/design-system": "2.1.0-rc.20",
-    "@bimdata/guided-tour-components": "1.0.4",
+    "@bimdata/components": "1.4.2",
+    "@bimdata/design-system": "2.1.0-rc.23",
     "@bimdata/typescript-fetch-api-client": "10.1.0",
     "@bimdata/viewer": "2.2.0-beta.9",
     "async": "^3.2.5",

src/components/specific/models/models-manager/pdf-manager/PDFManager.scss

@@ -14,11 +14,11 @@
       position: relative;
 
       .icon {
-        position: absolute; 
+        position: absolute;
         top: 152px;
         right: 26px;
       }
-    } 
+    }
 
     &__content {
       font-weight: normal;
@@ -31,17 +31,8 @@
     right: 124px;
     top: 3px;
   }
-
-  &__building-maker { 
-    position: fixed;
-    z-index: 1000;
-    top: 0%;
-    right: 0%;
-    width: 400px;
-    height: 100vh;
-    box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.1);
-    background-color: var(--color-white);
 
+  &__building-maker {
     &__close {
       position: absolute;
       z-index: 1001;
@@ -50,6 +41,10 @@
     }
 
     &__content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
       height: 100%;
     }
   }

src/components/specific/models/models-manager/pdf-manager/PDFManager.vue

@@ -5,7 +5,7 @@
     :types="types"
     :tabs="tabs"
     @tab-changed="currentTab = $event"
-    @edit-metaBuilding="editBM"
+    @edit-metaBuilding="editMetaBuilding"
     @file-uploaded="$emit('file-uploaded')"
   >
     <template #tablePlaceholder v-if="models.length === 0">
@@ -21,7 +21,7 @@
         </div>
       </div>
     </template>
-    <template #content v-if="currentTab && currentTab.id === 'metaBuildings'">
+    <template #content v-if="currentTab?.id === 'metaBuildings'">
       <BIMDataButton
         v-if="!project.isGuest"
         class="pdf-manager__building-maker-btn"
@@ -30,55 +30,59 @@
         outline
         radius
         icon
-        @click="openBM"
+        @click="openBuildingMaker"
       >
         <BIMDataIconBuilding size="xxxs" margin="0 12px 0 0" />
         <span> {{ $t("t.create") }} </span>
       </BIMDataButton>
 
-      <transition name="slide-fade-right">
-        <div v-if="isOpenBM" class="pdf-manager__building-maker">
-          <BIMDataButton
-            class="pdf-manager__building-maker__close"
-            ghost
-            rounded
-            icon
-            @click="closeBM"
-          >
-            <BIMDataIconClose size="xxs" fill color="granite-light" />
-          </BIMDataButton>
-          <div class="pdf-manager__building-maker__content">
-            <BuildingMaker
-              :apiClient="apiClient"
-              :space="project.cloud"
-              :project="project"
-              :model="currentModel"
-              @metaBuilding-created="loadProjectModels(project)"
-              @metaBuilding-updated="loadProjectModels(project)"
-              @metaBuilding-deleted="loadProjectModels(project)"
-            />
-          </div>
+      <AppSidePanelContent :header="false">
+        <BIMDataButton
+          class="pdf-manager__building-maker__close"
+          ghost
+          rounded
+          icon
+          @click="closeBuildingMaker"
+        >
+          <BIMDataIconClose size="xxs" fill color="granite-light" />
+        </BIMDataButton>
+        <div class="pdf-manager__building-maker__content">
+          <BIMDataBuildingMaker
+            :apiClient="apiClient"
+            :space="project.cloud"
+            :project="project"
+            :model="metaBuilding"
+            @metaBuilding-created="loadProjectModels(project)"
+            @metaBuilding-updated="loadProjectModels(project)"
+            @metaBuilding-deleted="loadProjectModels(project)"
+          />
         </div>
-      </transition>
+      </AppSidePanelContent>
     </template>
   </GenericModelsManager>
 </template>
 
 <script>
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import { useAppSidePanel } from "../../../app/app-side-panel/app-side-panel.js";
 import { MODEL_TYPE } from "../../../../../config/models.js";
-import { useToggle } from "../../../../../composables/toggle";
 import { useModels } from "../../../../../state/models.js";
 import apiClient from "../../../../../services/api-client.js";
 import { segregateBySource } from "../../../../../utils/models.js";
 // Components
+import AppSidePanelContent from "../../../app/app-side-panel/AppSidePanelContent.vue";
 import GenericModelsManager from "../generic-models-manager/GenericModelsManager.vue";
 
-const tabsDef = [{ id: "upload" }, { id: "metaBuildings" }, { id: "archive" }];
+const tabsDef = [
+  { id: "upload" },
+  { id: "metaBuildings" },
+  { id: "archive" }
+];
 
 export default {
   components: {
+    AppSidePanelContent,
     GenericModelsManager
   },
   props: {
@@ -99,16 +103,15 @@ export default {
   setup(props) {
     const { locale, fallbackLocale } = useI18n();
     const { loadProjectModels } = useModels();
-    const { isOpen: isOpenBM, close: closeBM, open: openBM } = useToggle();
+    const { openSidePanel: openBuildingMaker, closeSidePanel: closeBuildingMaker } = useAppSidePanel();
 
     const tabs = ref(tabsDef);
     const currentTab = ref(null);
-    const currentModel = ref(null);
+    const metaBuilding = ref(null);
 
-    const editBM = model => {
-      currentModel.value = model;
-      openBM();
-      setTimeout(() => (currentModel.value = null), 100);
+    const editMetaBuilding = model => {
+      metaBuilding.value = model;
+      openBuildingMaker();
     };
 
     watch(
@@ -140,16 +143,15 @@ export default {
     return {
       // References
       apiClient,
-      currentModel,
       currentTab,
-      isOpenBM,
+      metaBuilding,
       placeholderBackground,
       tabs,
       // Methods
-      closeBM,
-      editBM,
+      closeBuildingMaker,
+      editMetaBuilding,
       loadProjectModels,
-      openBM
+      openBuildingMaker
     };
   }
 };

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

@@ -124,7 +124,7 @@ export default {
       required: true
     }
   },
-  emits: ["archive", "delete", "download", "update", "edit-metaBuilding"],
+  emits: ["archive", "delete", "download", "edit-metaBuilding", "update"],
   setup(props, { emit }) {
     const {
       isOpen: showMenu,
@@ -153,15 +153,6 @@ export default {
       });
     }
 
-    menuItems.push({
-      key: 2,
-      text: props.model.archived ? "t.unarchive" : "t.archive",
-      icon: props.model.archived ? "unarchive" : "archive",
-      action: () => onClick(props.model.archived ? "unarchive" : "archive"),
-      color: "var(--color-primary)",
-      dataTestId: "btn-archive-model"
-    });
-
     if (props.model.type === MODEL_TYPE.META_BUILDING) {
       menuItems.push({
         key: 3,
@@ -172,6 +163,15 @@ export default {
       });
     }
 
+    menuItems.push({
+      key: 2,
+      text: props.model.archived ? "t.unarchive" : "t.archive",
+      icon: props.model.archived ? "unarchive" : "archive",
+      action: () => onClick(props.model.archived ? "unarchive" : "archive"),
+      color: "var(--color-primary)",
+      dataTestId: "btn-archive-model"
+    });
+
     menuItems.push({
       divider: true
     });

src/main.js

@@ -3,7 +3,6 @@ import { createApp } from "vue";
 import BcfComponents from "@bimdata/bcf-components/vue3-plugin.js";
 import BIMDataComponents from "@bimdata/components/vue3-plugin.js";
 import DesignSystem from "@bimdata/design-system/vue3-plugin.js";
-import BuildingMaker from "@bimdata/building-maker/vue3-plugin.js";
 import i18n from "./i18n/index.js";
 import router from "./router/index.js";
 import globalComponents from "./components/global-components.js";
@@ -17,9 +16,8 @@ const app = createApp(App)
   .use(i18n)
   .use(router)
   .use(DesignSystem())
-  .use(BIMDataComponents())
-  .use(BcfComponents({ apiClient, i18nPlugin: i18n }))
-  .use(BuildingMaker({ i18nPlugin: i18n }));
+  .use(BIMDataComponents({ i18nPlugin: i18n }))
+  .use(BcfComponents({ i18nPlugin: i18n, apiClient }));
 
 // Register global components
 for (const [name, component] of Object.entries(globalComponents)) {