@bimdata/bcf-components 6.0.0-rc.8 → 6.0.0

package/src/config.js

@@ -0,0 +1,87 @@
+const EXTENSION_TYPES = Object.freeze([
+  "Priority",
+  "Type",
+  "Stage",
+  "Status",
+  "Label"
+]);
+
+const EXTENSION_WITH_COLOR = Object.freeze([
+  "Priority",
+  "Status"
+]);
+
+const EXTENSION_FIELDS = Object.freeze({
+  Priority: "priority",
+  Type: "topic_type",
+  Stage: "stage",
+  Status: "topic_status",
+  Label: "label",
+});
+
+const EXTENSION_LIST_FIELDS = Object.freeze({
+  Priority: "priorities",
+  Type: "topic_types",
+  Stage: "stages",
+  Status: "topic_statuses",
+  Label: "topic_labels",
+});
+
+const DEFAULT_PRIORITY_COLOR = "D8D8D8";
+const DEFAULT_STATUS_COLOR = "D8D8D8";
+
+/**
+ * Viewpoint config
+ */
+
+const VIEWPOINT_TYPES = Object.freeze({
+  IFC3D: "ifc3d",
+  POINT_CLOUD: "pointCloud",
+  IFC2D: "ifc2d",
+  DWG: "dwg",
+  PLAN: "plan",
+  PANORAMA: "panorama",
+});
+
+const VIEWPOINT_CONFIG = Object.freeze({
+  [VIEWPOINT_TYPES.IFC3D]: {
+    window: "3d",
+    plugin: "viewer3d",
+    icon: "fileIfcPolychrome",
+  },
+  [VIEWPOINT_TYPES.POINT_CLOUD]: {
+    window: "pointCloud",
+    plugin: "pointCloud",
+  },
+  [VIEWPOINT_TYPES.IFC2D]: {
+    window: "2d",
+    plugin: "viewer2d",
+    icon: "fileIfcPolychrome",
+  },
+  [VIEWPOINT_TYPES.DWG]: {
+    window: "dwg",
+    plugin: "dwg",
+    icon: "fileDwgPolychrome",
+  },
+  [VIEWPOINT_TYPES.PLAN]: {
+    window: "plan",
+    plugin: "plan",
+    icon: "filePlanPolychrome",
+  },
+  [VIEWPOINT_TYPES.PANORAMA]: {
+    window: "panorama",
+    plugin: "panorama",
+    icon: "filePlanPolychrome",
+  },
+});
+
+export {
+  DEFAULT_PRIORITY_COLOR,
+  DEFAULT_STATUS_COLOR,
+  EXTENSION_FIELDS,
+  EXTENSION_LIST_FIELDS,
+  EXTENSION_TYPES,
+  EXTENSION_WITH_COLOR,
+  VIEWPOINT_CONFIG,
+  VIEWPOINT_TYPES,
+};

package/{dist → src}/i18n/lang/en.json

@@ -65,7 +65,9 @@
             "cancelButton": "Discard changes",
             "continueButton": "Continue editing",
             "createTitle": "Report a problem",
-            "dragDropImageTextTablet": "Take a picture"
+            "dragDropImageTextTablet": "Take a picture",
+            "searchPlaceholder": "Search",
+            "emptySearch": "No result"
         },
         "BcfTopicOverview": {
             "openViewer": "Open in viewer",

package/{dist → src}/i18n/lang/fr.json

@@ -65,7 +65,11 @@
             "updateButton": "Modifier ce BCF",
             "modalText": "Vous êtes sur le point de quitter l'édition de l'issue {name} mais il y'a des modifications non enregistrées.",
             "cancelButton": "Annuler les modifications",
-            "continueButton": "Continuer les modifications"
+            "continueButton": "Continuer les modifications",
+            "takeSnapshot": "Prendre un snapshot",
+            "importFile": "Importer un fichier",
+            "searchPlaceholder": "Rechercher",
+            "emptySearch": "Pas de résultat"
         },
         "BcfTopicOverview": {
             "openViewer": "Ouvrir dans le viewer",

package/src/index.js

@@ -0,0 +1,59 @@
+import * as config from "./config.js";
+import { createService, setService, useService } from "./service.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";
+import BcfTopicCard from "./components/bcf-topic-card/BcfTopicCard.vue";
+import BcfTopicCreationCard from "./components/bcf-topic-creation-card/BcfTopicCreationCard.vue";
+import BcfTopicForm from "./components/bcf-topic-form/BcfTopicForm.vue";
+import BcfTopicOverview from "./components/bcf-topic-overview/BcfTopicOverview.vue";
+import BcfTopicsTable from "./components/bcf-topics-table/BcfTopicsTable.vue";
+
+const components = {
+  BcfFilters,
+  BcfSettings,
+  BcfStatistics,
+  BcfTopicCard,
+  BcfTopicCreationCard,
+  BcfTopicForm,
+  BcfTopicOverview,
+  BcfTopicsTable,
+};
+
+export {
+  config,
+  createService,
+  setService,
+  useService,
+  useBcfFilter,
+  useBcfSearch,
+  useBcfSort,
+  getPriorityColor,
+  getStatusColor,
+  getViewpointConfig,
+  components,
+
+  // Export components individually
+  BcfFilters,
+  BcfSettings,
+  BcfStatistics,
+  BcfTopicCard,
+  BcfTopicCreationCard,
+  BcfTopicForm,
+  BcfTopicOverview,
+  BcfTopicsTable,
+};

package/src/service.js

@@ -0,0 +1,206 @@
+import { getRandomHexColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
+import eachLimit from "async/eachLimit";
+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();
+
+  // --- BCF Topics API ---
+
+  const fetchTopics = async (project, { extensions, users } = {}) => {
+    const _extensions = extensions ?? (await apiClient.bcfApi.getDetailedExtensions(project.id));
+    const _users = users ?? (await getUsers(project));
+
+    const topics = await apiClient.bcfApi.getTopics(project.id);
+    topics.sort((a, b) => b.index - a.index);
+    topics.forEach((topic) => {
+      topic.color = getPriorityColor(topic, _extensions);
+      topic.creator = _users.find((u) => u.email === topic.creation_author);
+    });
+
+    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");
+    topic.color = getPriorityColor(topic, extensions);
+    return topic;
+  };
+
+  const createTopic = (project, topic) => {
+    return apiClient.bcfApi.createTopic(project.id, topic);
+  };
+
+  const updateTopic = (project, topic) => {
+    return apiClient.bcfApi.updateTopic(topic.guid, project.id, topic);
+  };
+
+  const deleteTopic = (project, topic) => {
+    return apiClient.bcfApi.deleteTopic(topic.guid, project.id);
+  };
+
+  const importBcf = async (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`, {
+      method: "POST",
+      credentials: "include",
+      headers: {
+        ...apiClient.authHeader,
+      },
+      body: formData,
+    });
+  };
+
+  const exportBcf = async (project, topics) => {
+    const response = await 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(
+      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) => {
+      fetchTopicViewpoints(project, topic).then(viewpoints => {
+        topic.viewpoints = viewpoints;
+        cb();
+      }, cb);
+    });
+    return topics;
+  };
+
+  const fetchTopicViewpoints = (project, topic) => {
+    return apiClient.bcfApi.getTopicViewpoints(project.id, topic.guid, "url");
+  };
+
+  const fetchTopicCommentViewpoint = (project, topic, comment) => {
+    return 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);
+  };
+
+  const updateViewpoint = (project, topic, viewpoint) => {
+    return 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);
+  };
+
+  // --- BCF Topic Comments API ---
+
+  const fetchTopicComments = async (project, topic) => {
+    const users = await getUsers(project);
+
+    const comments = await 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);
+  };
+
+  const updateComment = (project, topic, comment, data) => {
+    return 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);
+  };
+
+  // --- BCF Extensions API ---
+
+  const fetchExtensions = (project) => {
+    return apiClient.bcfApi.getExtensions(project.id);
+  };
+
+  const fetchDetailedExtensions = (project) => {
+    return apiClient.bcfApi.getDetailedExtensions(project.id);
+  };
+
+  const createExtension = async (project, type, data) => {
+    return await 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, {
+      [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;
+}
+
+function useService() {
+  return libService;
+}
+
+export { createService, setService, useService };

package/src/utils/browser.js

@@ -0,0 +1,12 @@
+const isMobileRegex = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i;
+const isTabletRegex = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/;
+
+function isTabletOrMobile() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const isMobile = isMobileRegex.test(userAgent);
+  const isTablet = isTabletRegex.test(userAgent);
+
+  return isMobile || isTablet
+}
+
+export { isTabletOrMobile };

package/src/utils/download.js

@@ -0,0 +1,15 @@
+async function downloadBlobAs(name, blob) {
+  const { URL } = window;
+  const link = document.createElement("a");
+  link.rel = "noopener";
+  link.download = name;
+  // Create object url from blob
+  link.href = URL.createObjectURL(blob);
+
+  // Trigger "Save As" dialog
+  setTimeout(() => link.click(), 0);
+  // Revoke object url after 30 seconds
+  setTimeout(() => URL.revokeObjectURL(link.href), 3e4);
+};
+
+export { downloadBlobAs };

package/src/utils/extensions.js

@@ -0,0 +1,14 @@
+import { EXTENSION_FIELDS, EXTENSION_LIST_FIELDS } from "../config.js";
+
+function getExtensionField(type) {
+  return EXTENSION_FIELDS[type];
+}
+
+function getAvailableExtensions(type, detailedExtensions) {
+  return detailedExtensions[EXTENSION_LIST_FIELDS[type]].slice();
+}
+
+export {
+  getExtensionField,
+  getAvailableExtensions,
+};

package/src/utils/topic.js

@@ -0,0 +1,23 @@
+import {
+  DEFAULT_PRIORITY_COLOR,
+  DEFAULT_STATUS_COLOR
+} from "../config.js";
+
+function getPriorityColor(topic, detailedExtensions) {
+  const priorityDetail = detailedExtensions.priorities.find(
+    p => p.priority === topic.priority
+  );
+  return priorityDetail?.color || DEFAULT_PRIORITY_COLOR;
+}
+
+function getStatusColor(topic, detailedExtensions) {
+  const statusDetail = detailedExtensions.topic_statuses.find(
+    s => s.topic_status === topic.topic_status
+  );
+  return statusDetail?.color || DEFAULT_STATUS_COLOR;
+}
+
+export {
+  getPriorityColor,
+  getStatusColor,
+};

package/src/utils/viewer.js

@@ -0,0 +1,21 @@
+export function getViewerList(viewers) {
+  return Object.values(viewers).flat();
+}
+
+export function getViewerOptions(viewers) {
+  return Object.entries(viewers)
+    .map(([id, list]) => list.map((v, i) => ({ key: `${id}-${i}`, id, index: i, viewer: v })))
+    .flat();
+}
+
+export function highlightViewer(viewer) {
+  viewer.$viewer.localContext.el.style.boxSizing = "border-box";
+  viewer.$viewer.localContext.el.style.border = "2px solid var(--color-primary)";
+  viewer.$viewer.localContext.el.style.opacity = ".85";
+}
+
+export function unhighlightViewer(viewer) {
+  viewer.$viewer.localContext.el.style.boxSizing = "";
+  viewer.$viewer.localContext.el.style.border = "";
+  viewer.$viewer.localContext.el.style.opacity = "";
+}

package/src/utils/viewpoints.js

@@ -0,0 +1,28 @@
+import { VIEWPOINT_CONFIG } from "../config.js";
+
+function getViewpointConfig(viewpoint) {
+  return VIEWPOINT_CONFIG[viewpoint.originating_system];
+}
+
+function setViewpointDefaults(viewpoint) {
+  if (!viewpoint.components.selection) {
+    viewpoint.components.selection = [];
+  }
+  if (!viewpoint.components.visibility) {
+    viewpoint.components.visibility = {
+      default_visibility: true,
+      exceptions: [],
+      view_setup_hints: {
+        spaces_visible: false,
+        space_boundaries_visible: false,
+        openings_visible: false,
+      },
+    };
+  }
+  return viewpoint;
+}
+
+export {
+  getViewpointConfig,
+  setViewpointDefaults,
+};

package/vue3-plugin.js

@@ -2,12 +2,12 @@ import {
   components,
   createService,
   setService,
-} from "./dist/bcf-components.mjs";
-import messages from "./dist/i18n/index.js";
+} from "./src/index.js";
+import messages from "./src/i18n/index.js";
 
 /**
  * BCF Components library plugin for Vue 3.
- * Here are the actions the plugin will perform:
+ * The plugin will perform the following actions in order:
  *  - initialize library service
  *  - register components translations
  *  - globally register BCF components
@@ -33,8 +33,7 @@ const pluginFactory = ({
       } else {
         console.error(
           "[BCF Components Plugin] No api client provided. " +
-          "You must provide an api client for the components " +
-          "to work properly."
+          "You must provide an api client for the components to work properly."
         );
       }