@bimdata/bcf-components 6.0.2-rc.1 → 6.0.2-rc.2

package/package.json

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

package/src/components/bcf-settings/BcfSettings.vue

@@ -44,7 +44,7 @@
 
 <script>
 import { EXTENSION_TYPES } from "../../config.js";
-import { useService } from "../../service.js";
+import service from "../../service.js";
 // Components
 import SettingCard from "./setting-card/SettingCard.vue";
 
@@ -72,12 +72,12 @@ export default {
   emits: ["back", "close", "extension-created", "extension-updated", "extension-deleted"],
   setup(props, { emit }) {
     const createExtension = async (event) => {
-      const ext = await useService().createExtension(props.project, event.extensionType, event.data);
+      const ext = await service.createExtension(props.project, event.extensionType, event.data);
       emit("extension-created", ext);
     };
 
     const updateExtension = async (event) => {
-      const ext = await useService().updateExtension(
+      const ext = await service.updateExtension(
         props.project,
         event.extensionType,
         event.extension,
@@ -87,7 +87,7 @@ export default {
     };
 
     const deleteExtension = async (event) => {
-      await useService().deleteExtension(props.project, event.extensionType, event.extension);
+      await service.deleteExtension(props.project, event.extensionType, event.extension);
       emit("extension-deleted", event.extension);
     };
 

package/src/components/bcf-topic-form/BcfTopicForm.vue

@@ -197,7 +197,7 @@
 
 <script>
 import { computed, ref, watch } from "vue";
-import { useService } from "../../service.js";
+import service from "../../service.js";
 import { getViewerList } from "../../utils/viewer.js";
 import { setViewpointDefaults } from "../../utils/viewpoints.js";
 // Components
@@ -391,8 +391,6 @@ export default {
     };
 
     const submit = async () => {
-      const service = useService();
-
       if (!topicTitle.value) {
         hasErrorTitle.value = true;
         return;

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

@@ -232,7 +232,7 @@
 <script>
 import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
 import { computed, onMounted, ref } from "vue";
-import { useService } from "../../service.js";
+import service from "../../service.js";
 import { getPriorityColor } from "../../utils/topic.js";
 // Components
 import BcfTopicComments from "./bcf-topic-comments/BcfTopicComments.vue";
@@ -300,14 +300,14 @@ export default {
 
     const currentUserEmail = ref("");
     const loadCurrentUserEmail = async () => {
-      currentUserEmail.value = (await useService().fetchCurrentUser()).email ?? "";
+      currentUserEmail.value = (await service.fetchCurrentUser()).email ?? "";
     };
 
     const deleteTopic = async () => {
       try {
         showDeleteModal.value = false;
         loading.value = true;
-        await useService().deleteTopic(props.project, props.topic);
+        await service.deleteTopic(props.project, props.topic);
         emit("topic-deleted", props.topic);
       } catch (error) {
         console.error(error);

package/src/components/bcf-topic-overview/bcf-topic-comments/BcfTopicComments.vue

@@ -94,7 +94,7 @@
 
 <script>
 import { onMounted, inject, ref, watch, onBeforeUnmount } from "vue";
-import { useService } from "../../../service.js";
+import service from "../../../service.js";
 import { getViewerOptions, highlightViewer, unhighlightViewer } from "../../../utils/viewer.js";
 
 // Components
@@ -142,7 +142,7 @@ export default {
     const viewerSelectOptions = ref([]);
 
     const loadComments = async () => {
-      comments.value = await useService().fetchTopicComments(props.project, props.topic);
+      comments.value = await service.fetchTopicComments(props.project, props.topic);
     };
 
     const setCommentViewpoint = async () => {
@@ -165,7 +165,6 @@ export default {
 
     const submitComment = async () => {
       try {
-        const service = useService();
         loading.value = true;
         if (viewpoint.value) {
           viewpoint.value = await service.createViewpoint(

package/src/components/bcf-topic-overview/bcf-topic-comments/topic-comment/TopicComment.vue

@@ -138,7 +138,7 @@
 
 <script>
 import { inject, onMounted, ref, onBeforeUnmount } from "vue";
-import { useService } from "../../../../service.js";
+import service from "../../../../service.js";
 import { getViewerOptions, highlightViewer, unhighlightViewer } from "../../../../utils/viewer.js";
 
 // TODO: should be imported from DS
@@ -189,7 +189,7 @@ export default {
     const toggleMenu = () => (showMenu.value = !showMenu.value);
 
     const loadViewpoint = async () => {
-      viewpoint.value = await useService().fetchTopicCommentViewpoint(
+      viewpoint.value = await service.fetchTopicCommentViewpoint(
         props.project,
         props.topic,
         props.comment
@@ -206,7 +206,7 @@ export default {
     };
     const deleteViewpoint = async () => {
       if (viewpoint.value.guid) {
-        await useService().deleteViewpoint(props.project, props.topic, viewpoint.value);
+        await service.deleteViewpoint(props.project, props.topic, viewpoint.value);
       }
       viewpoint.value = null;
     };
@@ -232,7 +232,7 @@ export default {
           return;
         }
         if (viewpoint.value && !viewpoint.value.guid) {
-          viewpoint.value = await useService().createViewpoint(
+          viewpoint.value = await service.createViewpoint(
             props.project,
             props.topic,
             viewpoint.value
@@ -244,7 +244,7 @@ export default {
         ) {
           loading.value = true;
 
-          const newComment = await useService().updateComment(
+          const newComment = await service.updateComment(
             props.project,
             props.topic,
             props.comment,
@@ -265,7 +265,7 @@ export default {
     const submitDelete = async () => {
       try {
         loading.value = true;
-        await useService().deleteComment(props.project, props.topic, props.comment);
+        await service.deleteComment(props.project, props.topic, props.comment);
         emit("comment-deleted", props.comment);
         isDeleting.value = false;
       } finally {

package/src/index.js

@@ -1,19 +1,11 @@
 import * as config from "./config.js";
-import { createService, setService, useService } from "./service.js";
+import { getPriorityColor, getStatusColor } from "./utils/topic.js";
+import { getViewpointConfig } from "./utils/viewpoints.js";
 
 import { useBcfFilter } from "./composables/filter.js";
 import { useBcfSearch } from "./composables/search.js";
 import { useBcfSort } from "./composables/sort.js";
 
-import {
-  getPriorityColor,
-  getStatusColor
-} from "./utils/topic.js";
-
-import {
-  getViewpointConfig
-} from "./utils/viewpoints.js";
-
 import BcfFilters from "./components/bcf-filters/BcfFilters.vue";
 import BcfSettings from "./components/bcf-settings/BcfSettings.vue";
 import BcfStatistics from "./components/bcf-statistics/BcfStatistics.vue";
@@ -36,15 +28,12 @@ const components = {
 
 export {
   config,
-  createService,
-  setService,
-  useService,
-  useBcfFilter,
-  useBcfSearch,
-  useBcfSort,
   getPriorityColor,
   getStatusColor,
   getViewpointConfig,
+  useBcfFilter,
+  useBcfSearch,
+  useBcfSort,
   components,
 
   // Export components individually

package/src/service.js

@@ -4,22 +4,29 @@ import { getExtensionField } from "./utils/extensions.js";
 import { getPriorityColor } from "./utils/topic.js";
 import { downloadBlobAs } from "./utils/download.js";
 
-let libService = null;
-
-function createService(apiClient, { fetchUsers }) {
-  const getUsers = fetchUsers
-    ? (project) => fetchUsers(project)
-    : (project) => apiClient.collaborationApi.getProjectUsers(project.cloud.id, project.id);
-
-  const fetchCurrentUser = () => apiClient.bcfApi.getUser();
+class Service {
+  setup({ apiClient, fetchUsers }) {
+    this.apiClient = apiClient;
+    this.fetchUsers = fetchUsers;
+  }
+
+  _getUsers() {
+    return this.fetchUsers
+      ? (project) => this.fetchUsers(project)
+      : (project) => this.apiClient.collaborationApi.getProjectUsers(project.cloud.id, project.id);
+  }
+
+  fetchCurrentUser() {
+    return this.apiClient.bcfApi.getUser();
+  }
 
   // --- BCF Topics API ---
 
-  const fetchTopics = async (project, { extensions, users } = {}) => {
-    const _extensions = extensions ?? (await apiClient.bcfApi.getDetailedExtensions(project.id));
-    const _users = users ?? (await getUsers(project));
+  async fetchTopics(project, { extensions, users } = {}) {
+    const _extensions = extensions ?? (await this.apiClient.bcfApi.getDetailedExtensions(project.id));
+    const _users = users ?? (await this._getUsers(project));
 
-    const topics = await apiClient.bcfApi.getTopics(project.id);
+    const topics = await this.apiClient.bcfApi.getTopics(project.id);
     topics.sort((a, b) => b.index - a.index);
     topics.forEach((topic) => {
       topic.color = getPriorityColor(topic, _extensions);
@@ -27,180 +34,147 @@ function createService(apiClient, { fetchUsers }) {
     });
 
     return topics;
-  };
+  }
 
-  const fecthTopicByGuid = async (project, guid) => {
-    const extensions = await apiClient.bcfApi.getDetailedExtensions(project.id);
-    const topic = await apiClient.bcfApi.getFullTopic(guid, project.id, "url");
+  async fecthTopicByGuid(project, guid) {
+    const extensions = await this.apiClient.bcfApi.getDetailedExtensions(project.id);
+    const topic = await this.apiClient.bcfApi.getFullTopic(guid, project.id, "url");
     topic.color = getPriorityColor(topic, extensions);
     return topic;
-  };
+  }
 
-  const createTopic = (project, topic) => {
-    return apiClient.bcfApi.createTopic(project.id, topic);
-  };
+  createTopic(project, topic) {
+    return this.apiClient.bcfApi.createTopic(project.id, topic);
+  }
 
-  const updateTopic = (project, topic) => {
-    return apiClient.bcfApi.updateTopic(topic.guid, project.id, topic);
-  };
+  updateTopic(project, topic) {
+    return this.apiClient.bcfApi.updateTopic(topic.guid, project.id, topic);
+  }
 
-  const deleteTopic = (project, topic) => {
-    return apiClient.bcfApi.deleteTopic(topic.guid, project.id);
-  };
+  deleteTopic(project, topic) {
+    return this.apiClient.bcfApi.deleteTopic(topic.guid, project.id);
+  }
 
-  const importBcf = async (project, file) => {
+  async importBcf(project, file) {
     const formData = new FormData();
     formData.append("name", file.name);
     formData.append("file", file);
-    await fetch(`${apiClient.config.basePath}/bcf/2.1/projects/${project.id}/import`, {
+    await fetch(`${this.apiClient.config.basePath}/bcf/2.1/projects/${project.id}/import`, {
       method: "POST",
       credentials: "include",
       headers: {
-        ...apiClient.authHeader,
+        ...this.apiClient.authHeader,
       },
       body: formData,
     });
-  };
+  }
 
-  const exportBcf = async (project, topics) => {
-    const response = await apiClient.bcfApi.downloadBcfExport(
+  async exportBcf(project, topics) {
+    const response = await this.apiClient.bcfApi.downloadBcfExport(
       project.id,
       undefined, // Format
       topics.map((t) => t.guid).join(",")
     );
     downloadBlobAs(`${project.name}.bcf`, response);
-  };
+  }
 
-  const exportBcfXLSX = async (project, topics) => {
-    const response = await apiClient.bcfApi.downloadBcfExportXlsx(
+  async exportBcfXLSX(project, topics) {
+    const response = await this.apiClient.bcfApi.downloadBcfExportXlsx(
       project.id,
       undefined, // Format
       undefined, // Locale
       topics.map((t) => t.guid).join(",")
     );
     downloadBlobAs(`${project.name}.xlsx`, response);
-  };
+  }
 
   // --- BCF Topic Viewpoints API ---
 
-  const loadTopicsViewpoints = async (project, topics) => {
-    await eachLimit(topics, 10, (topic, cb) => {
+  async loadTopicsViewpoints(project, topics) {
+    await eachLimit(topics, 10, (topic, done) => {
       fetchTopicViewpoints(project, topic).then(viewpoints => {
         topic.viewpoints = viewpoints;
-        cb();
-      }, cb);
+        done();
+      }, done);
     });
     return topics;
-  };
+  }
 
-  const fetchTopicViewpoints = (project, topic) => {
-    return apiClient.bcfApi.getTopicViewpoints(project.id, topic.guid, "url");
-  };
+  fetchTopicViewpoints(project, topic) {
+    return this.apiClient.bcfApi.getTopicViewpoints(project.id, topic.guid, "url");
+  }
 
-  const fetchTopicCommentViewpoint = (project, topic, comment) => {
-    return apiClient.bcfApi.getViewpoint(comment.viewpoint_guid, project.id, topic.guid);
-  };
+  fetchTopicCommentViewpoint(project, topic, comment) {
+    return this.apiClient.bcfApi.getViewpoint(comment.viewpoint_guid, project.id, topic.guid);
+  }
 
-  const createViewpoint = (project, topic, viewpoint) => {
-    return apiClient.bcfApi.createViewpoint(project.id, topic.guid, "url", viewpoint);
-  };
+  createViewpoint(project, topic, viewpoint) {
+    return this.apiClient.bcfApi.createViewpoint(project.id, topic.guid, "url", viewpoint);
+  }
 
-  const updateViewpoint = (project, topic, viewpoint) => {
-    return apiClient.bcfApi.updateViewpoint(viewpoint.guid, project.id, topic.guid, "url", viewpoint);
-  };
+  updateViewpoint(project, topic, viewpoint) {
+    return this.apiClient.bcfApi.updateViewpoint(viewpoint.guid, project.id, topic.guid, "url", viewpoint);
+  }
 
-  const deleteViewpoint = (project, topic, viewpoint) => {
-    return apiClient.bcfApi.deleteViewpoint(viewpoint.guid, project.id, topic.guid);
-  };
+  deleteViewpoint(project, topic, viewpoint) {
+    return this.apiClient.bcfApi.deleteViewpoint(viewpoint.guid, project.id, topic.guid);
+  }
 
   // --- BCF Topic Comments API ---
 
-  const fetchTopicComments = async (project, topic) => {
-    const users = await getUsers(project);
+  async fetchTopicComments(project, topic) {
+    const users = await this._getUsers(project);
 
-    const comments = await apiClient.bcfApi.getComments(project.id, topic.guid);
+    const comments = await this.apiClient.bcfApi.getComments(project.id, topic.guid);
     comments.sort((a, b) => (a.date > b.date ? -1 : 1));
     comments.forEach((c) => {
       c.user = users.find((u) => u.email === c.author);
     });
 
     return comments;
-  };
+  }
 
-  const createComment = (project, topic, data) => {
-    return apiClient.bcfApi.createComment(project.id, topic.guid, data);
-  };
+  createComment(project, topic, data) {
+    return this.apiClient.bcfApi.createComment(project.id, topic.guid, data);
+  }
 
-  const updateComment = (project, topic, comment, data) => {
-    return apiClient.bcfApi.updateComment(comment.guid, project.id, topic.guid, data);
-  };
+  updateComment(project, topic, comment, data) {
+    return this.apiClient.bcfApi.updateComment(comment.guid, project.id, topic.guid, data);
+  }
 
-  const deleteComment = (project, topic, comment) => {
-    return apiClient.bcfApi.deleteComment(comment.guid, project.id, topic.guid);
-  };
+  deleteComment(project, topic, comment) {
+    return this.apiClient.bcfApi.deleteComment(comment.guid, project.id, topic.guid);
+  }
 
   // --- BCF Extensions API ---
 
-  const fetchExtensions = (project) => {
-    return apiClient.bcfApi.getExtensions(project.id);
-  };
+  fetchExtensions(project) {
+    return this.apiClient.bcfApi.getExtensions(project.id);
+  }
 
-  const fetchDetailedExtensions = (project) => {
-    return apiClient.bcfApi.getDetailedExtensions(project.id);
-  };
+  fetchDetailedExtensions(project) {
+    return this.apiClient.bcfApi.getDetailedExtensions(project.id);
+  }
 
-  const createExtension = async (project, type, data) => {
-    return await apiClient.bcfApi[`createExtension${type}`](project.id, {
+  createExtension(project, type, data) {
+    return this.apiClient.bcfApi[`createExtension${type}`](project.id, {
       [getExtensionField(type)]: data.value,
       color: getRandomHexColor(),
     });
-  };
+  }
 
-  const updateExtension = async (project, type, extension, data) => {
-    return await apiClient.bcfApi[`updateExtension${type}`](extension.id, project.id, {
+  updateExtension(project, type, extension, data) {
+    return this.apiClient.bcfApi[`updateExtension${type}`](extension.id, project.id, {
       [getExtensionField(type)]: data.value,
       color: data.color,
     });
-  };
-
-  const deleteExtension = async (project, type, extension) => {
-    await apiClient.bcfApi[`deleteExtension${type}`](extension.id, project.id);
-  };
-
-  return {
-    fetchCurrentUser,
-    fetchTopics,
-    fecthTopicByGuid,
-    createTopic,
-    updateTopic,
-    deleteTopic,
-    importBcf,
-    exportBcf,
-    exportBcfXLSX,
-    loadTopicsViewpoints,
-    fetchTopicViewpoints,
-    fetchTopicCommentViewpoint,
-    createViewpoint,
-    updateViewpoint,
-    deleteViewpoint,
-    fetchTopicComments,
-    createComment,
-    updateComment,
-    deleteComment,
-    fetchExtensions,
-    fetchDetailedExtensions,
-    createExtension,
-    updateExtension,
-    deleteExtension,
-  };
-}
+  }
 
-function setService(service) {
-  libService = service;
+  deleteExtension(project, type, extension) {
+    return this.apiClient.bcfApi[`deleteExtension${type}`](extension.id, project.id);
+  }
 }
 
-function useService() {
-  return libService;
-}
+const service = new Service();
 
-export { createService, setService, useService };
+export default service;

package/vue3-plugin.js

@@ -1,9 +1,6 @@
-import {
-  components,
-  createService,
-  setService,
-} from "./src/index.js";
+import { components } from "./src/index.js";
 import messages from "./src/i18n/index.js";
+import service from "./src/service.js";
 
 /**
  * BCF Components library plugin for Vue 3.
@@ -28,8 +25,7 @@ const pluginFactory = ({
   return {
     install(app) {
       if (apiClient) {
-        const service = createService(apiClient, { fetchUsers });
-        setService(service);
+        service.setup({ apiClient, fetchUsers });
       } else {
         console.error(
           "[BCF Components Plugin] No api client provided. " +