@bimdata/bcf-components 6.5.2 → 6.6.0

package/README.md

@@ -1,7 +1,6 @@
 <h1 align="center">BIMData BCF components library</h1>
 
-A set (library) of Vue components to manage BCF and build BCF related
-features into your app.
+A set of Vue components to manage BCF and build BCF related features into your app.
 
 Made with :heart: by [BIMData.io](https://bimdata.io/).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bimdata/bcf-components",
-  "version": "6.5.2",
+  "version": "6.6.0",
   "files": [
     "src",
     "vue3-plugin.js"
@@ -23,10 +23,10 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^11.0.1",
-    "@semantic-release/npm": "^12.0.1",
-    "@semantic-release/release-notes-generator": "^14.0.3",
+    "@semantic-release/github": "^11.0.6",
+    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/release-notes-generator": "^14.1.0",
     "conventional-changelog-eslint": "^6.0.0",
-    "semantic-release": "^24.2.3"
+    "semantic-release": "^24.2.9"
   }
 }

package/src/components/bcf-filters/BcfFilters.vue

@@ -44,6 +44,15 @@
           v-model="filters.statuses"
         />
 
+        <BIMDataSelect
+          width="100%"
+          :multi="true"
+          :label="$t('BcfComponents.BcfFilters.stageLabel')"
+          :nullLabel="$t('BcfComponents.BcfFilters.undefined')"
+          :options="stageOptions"
+          v-model="filters.stages"
+        />
+
         <div class="bcf-filters__container__date">
           <BIMDataDatePicker
             v-model="filters.startDate"
@@ -158,6 +167,10 @@ export default {
       getSelectOptions(props.topics.map((topic) => topic.topic_status))
     );
 
+    const stageOptions = computed(() =>
+      getSelectOptions(props.topics.map((topic) => topic.stage))
+    );
+
     const userOptions = computed(() =>
       getSelectOptions(props.topics.map((topic) => topic.assigned_to))
     );
@@ -195,6 +208,7 @@ export default {
       labelOptions,
       priorityOptions,
       statusOptions,
+      stageOptions,
       userOptions,
       // Methods
       close,

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

@@ -159,6 +159,11 @@
           v-model="topicLabels"
           :multi="true"
         />
+        <BcfTopicDocumentsSelector
+          :project="project"
+          :documents="topicDocuments"
+          @selection-change="topicDocuments = $event"
+        />
       </div>
     </div>
 
@@ -201,12 +206,14 @@ import service from "../../service.js";
 import { setViewpointDefaults } from "../../utils/viewpoints.js";
 import { getViewerViewpoint } from "../../utils/viewer.js";
 // Components
+import BcfTopicDocumentsSelector from "./bcf-topic-documents-selector/BcfTopicDocumentsSelector.vue";
 import BcfTopicImages from "./bcf-topic-images/BcfTopicImages.vue";
 import BcfTopicSnapshots from "./bcf-topic-snapshots/BcfTopicSnapshots.vue";
 import BcfTopicSnapshotsActions from "./bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue";
 
 export default {
   components: {
+    BcfTopicDocumentsSelector,
     BcfTopicImages,
     BcfTopicSnapshots,
     BcfTopicSnapshotsActions,
@@ -289,6 +296,7 @@ export default {
     const topicDueDate = ref(null);
     const topicDescription = ref("");
     const topicLabels = ref([]);
+    const topicDocuments = ref([]);
     const viewpoints = ref([]);
 
     const viewpointsToCreate = ref([]);
@@ -304,8 +312,8 @@ export default {
     let viewerLayout = null;
 
     const hasErrorTitle = ref(false);
-    const isOpenModal = ref(false);
     const loading = ref(false);
+    const isOpenModal = ref(false);
 
     const reset = () => {
       topicTitle.value = "";
@@ -317,6 +325,7 @@ export default {
       topicDueDate.value = null;
       topicDescription.value = "";
       topicLabels.value = [];
+      topicDocuments.value = [];
       viewpoints.value = [];
       viewpointsToCreate.value = [];
       viewpointsToUpdate.value = [];
@@ -339,6 +348,7 @@ export default {
           topicDueDate.value = topic.due_date;
           topicDescription.value = topic.description || "";
           topicLabels.value = topic.labels || [];
+          topicDocuments.value = topic.documents || [];
           viewpoints.value = topic.viewpoints || [];
         } else {
           reset();
@@ -471,6 +481,8 @@ export default {
           newTopic = await service.updateTopic(props.project, data);
         }
 
+        await service.updateTopicDocuments(props.project, newTopic, topicDocuments.value);
+
         await Promise.all([
           ...viewpointsToCreate.value.map((viewpoint) =>
             service.createViewpoint(props.project, newTopic, viewpoint)
@@ -506,6 +518,7 @@ export default {
       nextIndex,
       topicAssignedTo,
       topicDescription,
+      topicDocuments,
       topicDueDate,
       topicPriority,
       topicStage,

package/src/components/bcf-topic-form/bcf-topic-documents-selector/BcfTopicDocumentsSelector.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="bcf-topic-documents-selector" @click="isOpenDMS = true">
+    <span class="label">
+      <template v-if="documents.length > 0">
+        {{ $t("BcfComponents.BcfTopicForm.documentsCount", { count: documents.length }) }}
+      </template>
+      <template v-else>
+        {{ $t("BcfComponents.BcfTopicForm.documentsLabel") }}
+      </template>
+    </span>
+    <BIMDataIconChevron size="xxs" />
+    <div class="underline"></div>
+  </div>
+
+  <div v-if="isOpenDMS" class="bcf-topic-form__dms">
+    <BIMDataButton ghost radius @click="isOpenDMS = false">
+      <BIMDataIconArrow size="xxs" />
+      <span class="m-l-6">{{ "BcfComponents.back" }}</span>
+    </BIMDataButton>
+    <BIMDataFileManager
+      :locale="$i18n.locale"
+      :headerButtons="false"
+      :apiUrl="apiUrl()"
+      :archiveUrl="''"
+      :accessToken="accessToken()"
+      :spaceId="project.cloud.id"
+      :projectId="project.id"
+      :select="true"
+      :multi="true"
+      :init-selection="selectedDocuments"
+      @selection-change="selectedDocuments = $event"
+    />
+    <BIMDataButton
+      width="100%"
+      color="primary"
+      fill
+      radius
+      @click="isOpenDMS = false, $emit('selection-change', topicDocuments)"
+    >
+      {{ $t("BcfComponents.BcfTopicForm.validateDocuments") }}
+    </BIMDataButton>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import service from "../../../service.js";
+
+const props = defineProps({
+  project: {
+    type: Object,
+    required: true,
+  },
+  documents: {
+    type: Array,
+    required: true,
+  }
+});
+
+defineEmits(["selection-change"]);
+
+const apiUrl = () => service.apiClient.config.configuration.basePath;
+const accessToken = () => service.apiClient.accessToken;
+
+const isOpenDMS = ref(false);
+const selectedDocuments = ref([]);
+
+const topicDocuments = computed(
+  () => selectedDocuments.value.map(({ document }) => ({ guid: document.id }))
+);
+
+onMounted(() => {
+  selectedDocuments.value = props.documents.map(doc => ({ document: { id: doc.guid } }));
+});
+</script>
+
+<style scoped>
+.bcf-topic-documents-selector {
+  position: relative;
+  height: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  .label {
+    font-size: 12px;
+    color: var(--color-granite-light);
+  }
+
+  .underline {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    display: block;
+    background: var(--color-silver);
+  }
+}
+
+.bcf-topic-form__dms:deep() {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-unit);
+  background-color: var(--color-white);
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-unit);
+
+  .bimdata-file-manager {
+    flex: 1;
+    overflow: auto;
+
+    .bimdata-responsive-grid {
+      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
+    }
+
+    .file-card {
+      height: 150px;
+
+      .file-card__content__footer__name {
+        --textbox-lines: 1 !important;
+
+        .multi-line-text-box__content__full,
+        .multi-line-text-box__ghost {
+          display: block ruby;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .file-card__content__footer__initials {
+        display: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -42,7 +42,7 @@
           class="bcf-topic-overview__content__head__index"
           :style="{
             backgroundColor: `#${priorityColor}`,
-            color: adjustTextColor(`#${priorityColor}`, '#FFF', '#2F374A'),
+            color: adjustTextColor(`#${priorityColor}`, '#FFF', 'var(--color-text)'),
           }"
         >
           {{ topic.index }}
@@ -198,6 +198,12 @@
         </div>
       </div>
 
+      <BcfTopicDocuments
+        :project="project"
+        :topic="topic"
+        @view-topic-document="$emit('view-topic-document', $event)"
+      />
+
       <BcfTopicComments
         :uiConfig="uiConfig"
         :project="project"
@@ -232,18 +238,20 @@
 
 <script>
 import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
-import { computed, onMounted, ref } from "vue";
+import { computed, ref } from "vue";
 import service from "../../service.js";
 import { getPriorityColor } from "../../utils/topic.js";
 // Components
 import BcfTopicComments from "./bcf-topic-comments/BcfTopicComments.vue";
 import BcfTopicDefaultImage from "../bcf-topic-card/BcfTopicDefaultImage.vue";
+import BcfTopicDocuments from "./bcf-topic-documents/BcfTopicDocuments.vue";
 import BcfTopicViewpoints from "./bcf-topic-viewpoints/BcfTopicViewpoints.vue";
 
 export default {
   components: {
     BcfTopicComments,
     BcfTopicDefaultImage,
+    BcfTopicDocuments,
     BcfTopicViewpoints,
   },
   props: {
@@ -291,6 +299,7 @@ export default {
     "view-comment-snapshot",
     "view-topic",
     "view-topic-components",
+    "view-topic-document",
     "view-topic-viewpoint",
   ],
   setup(props, { emit }) {

package/src/components/bcf-topic-overview/bcf-topic-documents/BcfTopicDocuments.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="bcf-topic-documents">
+    <div
+      class="bcf-topic-documents__item"
+      v-for="doc in documents"
+      :key="doc.guid"
+      @click="$emit('view-topic-document', doc)"
+    >
+      <BIMDataFileIcon :size="22" :file-name="doc.referenced_document" />
+      <span>{{ doc.referenced_document }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch } from "vue";
+import service from "../../../service.js";
+
+const props = defineProps({
+  project: {
+    type: Object,
+    required: true,
+  },
+  topic: {
+    type: Object,
+    required: true,
+  },
+});
+
+defineEmits(["view-topic-document"]);
+
+const documents = computed(() => props.topic.documents ?? []);
+
+watch(
+  () => props.topic,
+  async () => {
+    if (!props.topic.documents) {
+      // Load topic documents if they are not loaded yet
+      props.topic.documents = await service.fetchTopicDocuments(props.project, props.topic);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.bcf-topic-documents {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+}
+
+.bcf-topic-documents__item {
+  padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
+  border-radius: 3px;
+  background-color: var(--color-silver-light);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-unit);
+  font-weight: bold;
+  cursor: pointer;
+}
+</style>

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

@@ -5,7 +5,7 @@
       class="status-badge"
       :style="{
         backgroundColor: `#${statusColor}`,
-        color: adjustTextColor(`#${statusColor}`, '#FFF', '#2F374A'),
+        color: adjustTextColor(`#${statusColor}`, '#FFF', 'var(--color-text)'),
       }"
     >
       <BIMDataIconInformation fill color="default" />

package/src/components/bcf-topics-table/BcfTopicsTable.vue

@@ -6,7 +6,7 @@
       displayedColumns
         .map(col => ({
           ...col,
-          label: col.label || $t(`BcfComponents.BcfTopicsTable.headers.${col.id}`)
+          label: col.label ?? $t(`BcfComponents.BcfTopicsTable.headers.${col.id}`)
         }))
     "
     :rows="topics"
@@ -54,7 +54,12 @@
       {{ toShortDateFormat(topic.creation_date) }}
     </template>
     <template #cell-actions="{ row: topic }">
-      <BcfTopicActionsCell :topic="topic" @open-topic="$emit('open-topic', $event)" :warning="warningCallback(topic)" :warningTooltipMessage="warningTooltipMessage" />
+      <BcfTopicActionsCell
+        :topic="topic"
+        @open-topic="$emit('open-topic', $event)"
+        :warning="warningCallback(topic)"
+        :warningTooltipMessage="warningTooltipMessage"
+      />
     </template>
   </BIMDataTable>
 </template>

package/src/components/bcf-topics-table/bcf-topic-status-cell/BcfTopicStatusCell.vue

@@ -3,7 +3,7 @@
     class="bcf-topic-status-cell"
     :style="{
       backgroundColor: `#${statusColor}`,
-      color: adjustTextColor(statusColor, '#ffffff', 'var(--color-text)')
+      color: adjustTextColor(statusColor, '#FFF', 'var(--color-text)')
     }"
   >
     {{ topic.topic_status }}

package/src/composables/filter.js

@@ -3,6 +3,7 @@ import { computed, reactive } from "vue";
 const EMPTY_FILTERS = {
   priorities: [],
   statuses: [],
+  stages: [],
   users: [],
   creators: [],
   labels: [],
@@ -21,6 +22,9 @@ function useBcfFilter(topics) {
     if (filters.statuses.length > 0) {
       list = list.filter(t => filters.statuses.includes(t.topic_status));
     }
+    if (filters.stages.length > 0) {
+      list = list.filter(t => filters.stages.includes(t.stage));
+    }
     if (filters.users.length > 0) {
       list = list.filter(t => filters.users.includes(t.assigned_to));
     }

package/src/i18n/lang/de.json

@@ -1,5 +1,6 @@
 {
     "BcfComponents": {
+        "back": "Zurück",
         "BcfFilters": {
             "filtersButton": "Filter",
             "filtersTitle": "Filter",
@@ -14,7 +15,6 @@
             "datePlaceholder": "Erstellungsdatum"
         },
         "BcfSettings": {
-            "goBackButton": "Zurück",
             "title": "BCF-Parameter",
             "text": "Erstellen, füllen und listen Sie die BCF-Einstellungen auf, die Sie für dieses Projekt haben möchten.",
             "validateButton": "Die BCF-Parameter anerkennen"

package/src/i18n/lang/en.json

@@ -1,5 +1,6 @@
 {
     "BcfComponents": {
+        "back": "Back",
         "BcfFilters": {
             "filtersButton": "Filters",
             "filtersTitle": "Filters",
@@ -14,7 +15,6 @@
             "datePlaceholder": "Creation date"
         },
         "BcfSettings": {
-            "goBackButton": "Back",
             "title": "BCF Settings",
             "text": "Create, enter in, and list the BCF settings you would like to have for this project",
             "validateButton": "Validate BCF settings"
@@ -69,7 +69,10 @@
             "takeSnapshot": "Take a snapshot",
             "importFile": "Import a file",
             "searchPlaceholder": "Search",
-            "emptySearch": "No result"
+            "emptySearch": "No result",
+            "documentsLabel": "Add a file",
+            "documentsCount": "Files - {count} selected files",
+            "validateDocuments": "Validate"
         },
         "BcfTopicOverview": {
             "openViewer": "Open in viewer",

package/src/i18n/lang/es.json

@@ -1,5 +1,6 @@
 {
     "BcfComponents": {
+        "back": "Volver",
         "BcfFilters": {
             "filtersButton": "Filtros",
             "filtersTitle": "Filtros",
@@ -14,7 +15,6 @@
             "datePlaceholder": "Fecha de creación"
         },
         "BcfSettings": {
-            "goBackButton": "Volver",
             "title": "Parámetros del BCF",
             "text": "Cree, rellene y enumere los parámetros del BCF que desea tener en este proyecto",
             "validateButton": "Validar los parámetros del BCF"

package/src/i18n/lang/fr.json

@@ -1,20 +1,21 @@
 {
     "BcfComponents": {
+        "back": "Retour",
         "BcfFilters": {
             "filtersButton": "Filtres",
             "filtersTitle": "Filtres",
             "priorityLabel": "Priorité",
             "statusLabel": "Statut",
+            "stageLabel": "Phase",
             "assignedToLabel": "Assigné à",
             "creatorsLabel": "Créé par",
-            "tagsLabel": "Tags",
+            "tagsLabel": "Tags", 
             "resetButton": "Réinitialiser",
             "searchButton": "Rechercher",
             "undefined": "Non défini",
             "datePlaceholder": "Date de création"
         },
         "BcfSettings": {
-            "goBackButton": "Retour",
             "title": "Paramètres BCF",
             "text": "Créez, renseignez et listez les paramètres BCF que vous souhaitez avoir sur ce projet",
             "validateButton": "Valider les paramètres BCF"
@@ -69,7 +70,10 @@
             "takeSnapshot": "Prendre un snapshot",
             "importFile": "Importer un fichier",
             "searchPlaceholder": "Rechercher",
-            "emptySearch": "Pas de résultat"
+            "emptySearch": "Pas de résultat",
+            "documentsLabel": "Documents",
+            "documentsCount": "Documents - {count} documents sélectionnés",
+            "validateDocuments": "Valider"
         },
         "BcfTopicOverview": {
             "openViewer": "Ouvrir dans le viewer",

package/src/i18n/lang/it.json

@@ -1,5 +1,6 @@
 {
     "BcfComponents": {
+        "back": "Indietro",
         "BcfFilters": {
             "filtersButton": "Filtri",
             "filtersTitle": "Filtri",
@@ -14,7 +15,6 @@
             "undefined": "Non definito"
         },
         "BcfSettings": {
-            "goBackButton": "Indietro",
             "title": "Parametri BCF",
             "text": "Creare, notificare e elencare i parametri BCF che si desidera avere su questo progetto",
             "validateButton": "Conferma i parametri BCF"

package/src/i18n/lang/nl.json

@@ -1,5 +1,6 @@
 {
     "BcfComponents": {
+        "back": "Terug",
         "BcfFilters": {
             "filtersButton": "Filters",
             "filtersTitle": "Filters",
@@ -14,7 +15,6 @@
             "undefined": "Niet gedefinieerd"
         },
         "BcfSettings": {
-            "goBackButton": "Terug",
             "title": "BCF-instellingen",
             "text": "De voor dit project gewenste BCF-instellingen maken, invoeren en in een lijst plaatsen",
             "validateButton": "BCF-instellingen valideren"

package/src/i18n/lang/no.json

@@ -1,5 +1,6 @@
 {
     "BcfComponents": {
+        "back": "Tilbake",
         "BcfFilters": {
             "filtersButton": "Filtre",
             "filtersTitle": "Filtre",
@@ -14,7 +15,6 @@
             "undefined": "Ikke definert"
         },
         "BcfSettings": {
-            "goBackButton": "Tilbake",
             "title": "BCF-innstillinger",
             "text": "Opprett, fyll inn og list opp BCF-innstillingene du vil ha til dette prosjektet",
             "validateButton": "Valider BCF-innstillinger"

package/src/service.js

@@ -113,6 +113,20 @@ class Service {
     downloadBlobAs(`${project.name}.xlsx`, response);
   }
 
+  // --- BCF Topic Documents API
+
+  fetchTopicDocuments(project, topic) {
+    return this.apiClient.bcfApi.getDocumentReferences(topic.guid, project.id);
+  }
+
+  createTopicDocument(project, topic, document) {
+    return this.apiClient.bcfApi.createDocumentReference(topic.guid, project.id, document);
+  }
+
+  updateTopicDocuments(project, topic, documents) {
+    return this.apiClient.bcfApi.fullUpdateDocumentReference(topic.guid, project.id, documents);
+  }
+
   // --- BCF Topic Viewpoints API ---
 
   async loadTopicsViewpoints(project, topics) {