@bimdata/bcf-components 6.6.2 → 6.7.0

package/package.json

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

package/src/components/bcf-statistics/BcfStatistics.scss

@@ -4,7 +4,6 @@
   &__content {
     position: relative;
     display: flex;
-    align-items: center;
 
     &__chart {
       flex: 1;

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

@@ -101,6 +101,10 @@
           resize: vertical;
         }
       }
+
+      :deep(.bcf-topic-documents-selector) {
+        margin-bottom: 30px;
+      }
     }
   }
 

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

@@ -164,6 +164,11 @@
           :documents="topicDocuments"
           @selection-change="topicDocuments = $event"
         />
+        <BcfTopicGroups
+          :project="project"
+          :groups="topicGroups"
+          @selection-change="topicGroups = $event"
+        />
       </div>
     </div>
 
@@ -210,10 +215,12 @@ import BcfTopicDocumentsSelector from "./bcf-topic-documents-selector/BcfTopicDo
 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";
+import BcfTopicGroups from "./bcf-topic-groups/BcfTopicGroups.vue";
 
 export default {
   components: {
     BcfTopicDocumentsSelector,
+    BcfTopicGroups,
     BcfTopicImages,
     BcfTopicSnapshots,
     BcfTopicSnapshotsActions,
@@ -297,6 +304,7 @@ export default {
     const topicDescription = ref("");
     const topicLabels = ref([]);
     const topicDocuments = ref([]);
+    const topicGroups = ref([]);
     const viewpoints = ref([]);
 
     const viewpointsToCreate = ref([]);
@@ -326,6 +334,7 @@ export default {
       topicDescription.value = "";
       topicLabels.value = [];
       topicDocuments.value = [];
+      topicGroups.value = [];
       viewpoints.value = [];
       viewpointsToCreate.value = [];
       viewpointsToUpdate.value = [];
@@ -349,6 +358,7 @@ export default {
           topicDescription.value = topic.description || "";
           topicLabels.value = topic.labels || [];
           topicDocuments.value = topic.documents || [];
+          topicGroups.value = topic.groups || [];
           viewpoints.value = topic.viewpoints || [];
         } else {
           reset();
@@ -466,6 +476,7 @@ export default {
           due_date: topicDueDate.value,
           description: topicDescription.value,
           labels: topicLabels.value,
+          groups: topicGroups.value,
           bimdata_viewer_layout: viewpointsToCreate.value.length > 1 && viewerLayout ? viewerLayout : props.topic?.bimdata_viewer_layout,
         };
 
@@ -520,6 +531,7 @@ export default {
       topicDescription,
       topicDocuments,
       topicDueDate,
+      topicGroups,
       topicPriority,
       topicStage,
       topicStatus,

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

@@ -37,7 +37,7 @@
       radius
       @click="isOpenDMS = false, $emit('selection-change', topicDocuments)"
     >
-      {{ $t("BcfComponents.BcfTopicForm.validateDocuments") }}
+      {{ $t("BcfComponents.BcfTopicForm.validate") }}
     </BIMDataButton>
   </div>
 </template>

package/src/components/bcf-topic-form/bcf-topic-groups/BcfTopicGroups.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="bcf-topic-groups" @click="isOpenGroups = true">
+    <span class="label">
+      <template v-if="groups.length > 0">
+        {{ $t("BcfComponents.BcfTopicForm.groupsCount", { count: groups.length }) }}
+      </template>
+      <template v-else>
+        {{ $t("BcfComponents.BcfTopicForm.groupsLabel") }}
+      </template>
+    </span>
+    <BIMDataIconChevron size="xxs" />
+    <div class="underline"></div>
+  </div>
+
+  <div v-if="isOpenGroups" class="bcf-topic-groups__selector">
+    <BIMDataButton ghost radius @click="isOpenGroups = false">
+      <BIMDataIconArrow size="xxs" />
+      <span class="m-l-6">{{ "BcfComponents.back" }}</span>
+    </BIMDataButton>
+    <div class="body">
+      <div class="text">
+        {{ $t("BcfComponents.BcfTopicForm.groupsText") }}
+      </div>
+      <div class="list">
+        <GroupItem
+          v-for="group in projectGroups"
+          :key="group.id"
+          :group="group"
+          :selected="topicGroups.includes(group.id)"
+          @toggle="toggleGroup"
+        />
+      </div>
+    </div>
+    <BIMDataButton
+      width="100%"
+      color="primary"
+      fill
+      radius
+      @click="isOpenGroups = false, $emit('selection-change', topicGroups)"
+    >
+      {{ $t("BcfComponents.BcfTopicForm.validate") }}
+    </BIMDataButton>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import service from "../../../service.js";
+import GroupItem from "./GroupItem.vue";
+
+const props = defineProps({
+  project: {
+    type: Object,
+    required: true,
+  },
+  groups: {
+    type: Array,
+    required: true,
+  }
+});
+
+defineEmits(["selection-change"]);
+
+const isOpenGroups = ref(false);
+const projectGroups = ref([]);
+const selectedGroups = ref([]);
+
+const topicGroups = computed(
+  () => selectedGroups.value.map(group => group.id)
+);
+
+const toggleGroup = group => {
+  const index = selectedGroups.value.findIndex(g => g.id === group.id);
+  if (index !== -1) {
+    selectedGroups.value.splice(index, 1);
+  } else {
+    selectedGroups.value.push(group);
+  }
+};
+
+onMounted(async () => {
+  projectGroups.value = await service.fetchProjectGroups(props.project);
+  selectedGroups.value = projectGroups.value.filter(group => props.groups.includes(group.id));
+});
+</script>
+
+<style scoped>
+.bcf-topic-groups {
+  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-groups__selector {
+  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);
+
+  .body {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .text {
+      text-align: center;
+      color: var(--color-granite);
+    }
+
+    .list {
+      margin-top: var(--spacing-unit);
+      padding: var(--spacing-unit) 0;
+      flex: 1;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-unit);
+    }
+  }
+}
+</style>

package/src/components/bcf-topic-form/bcf-topic-groups/GroupItem.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="group-item">
+    <BIMDataCheckbox v-model="checked" />
+    <div class="card">
+      <div class="stripe" :style="{ backgroundColor: group.color }"></div>
+      <BIMDataIconGroup />
+      <BIMDataTextbox class="name" cut-position="end" :text="group.name" />
+      <UserAvatarList :users="group.members" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import UserAvatarList from "../../user-avatar/UserAvatarList.vue";
+
+const props = defineProps({
+  group: {
+    type: Object,
+    required: true,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["toggle"]);
+
+const checked = ref(props.selected);
+
+watch(checked, () => emit("toggle", props.group));
+</script>
+
+<style scoped>
+.group-item {
+  min-height: 50px;
+  padding-right: 6px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-unit);
+
+  .card {
+    position: relative;
+    height: 100%;
+    flex: 1;
+    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
+    box-shadow: var(--box-shadow);
+
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-unit);
+
+    .stripe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 6px;
+    }
+
+    .name {
+      width: 0 !important;
+      flex: 1;
+    }
+  }
+}
+</style>

package/src/components/user-avatar/UserAvatar.vue

@@ -58,4 +58,35 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" src="./UserAvatar.scss"></style>
+<style scoped>
+.user-avatar {
+  min-width: 32px;
+  min-height: 32px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.user-avatar--primary {
+    background-color: var(--color-primary);
+    color: var(--color-silver-light);
+  }
+
+  &.user-avatar--secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
+  }
+
+  &.user-avatar--silver-light {
+    background-color: var(--color-silver-light);
+    color: var(--color-primary);
+  }
+}
+</style>

package/src/components/user-avatar/UserAvatarList.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="user-avatar-list"
+    :style="{
+      width: `${listWidth}px`,
+      gridTemplateColumns: `repeat(${listLength}, ${itemGap}px)`
+    }"
+  >
+    <UserAvatar
+      class="user-avatar-list__item"
+      v-for="user of displayedUsers"
+      :key="user.id"
+      :user="user"
+      :size="itemSize"
+    />
+    <template v-if="users.length > length">
+      <div
+        class="user-avatar-list__tail-item"
+        :style="{ width: `${itemSize}px`, height: `${itemSize}px` }"
+      >
+        {{ `+ ${users.length - length + 1}` }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+// Components
+import UserAvatar from "./UserAvatar.vue";
+
+export default {
+  components: {
+    UserAvatar
+  },
+  props: {
+    users: {
+      type: Array,
+      required: true
+    },
+    length: {
+      type: Number,
+      default: 4
+    },
+    itemSize: {
+      type: [Number, String],
+      default: 32,
+      validate: value => value >= 32
+    },
+    itemGap: {
+      type: [Number, String],
+      default: 24,
+      validate: value => value > 0
+    },
+    fixedWidth: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const displayedUsers = computed(() => {
+      const n = props.users.length;
+      const l = props.length;
+      return props.users.slice(0, n > l ? l - 1 : l);
+    });
+
+    const listLength = computed(() => {
+      const n = props.users.length;
+      const l = props.length;
+      return props.fixedWidth || n > l ? l : n;
+    });
+
+    const listWidth = computed(() => {
+      const l = listLength.value;
+      const w = +props.itemSize;
+      const g = +props.itemGap;
+      return l * g + (w > g ? w - g : 0);
+    });
+
+    return {
+      // References
+      displayedUsers,
+      listLength,
+      listWidth
+    };
+  }
+};
+</script>
+
+<style scoped>
+.user-avatar-list {
+  display: grid;
+
+  .user-avatar-list__item {
+    border: 1px solid var(--color-white);
+  }
+
+  .user-avatar-list__tail-item {
+    min-width: 32px;
+    min-height: 32px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--color-white);
+    border-radius: 50%;
+    font-weight: bold;
+    background-color: var(--color-primary);
+    color: var(--color-silver-light);
+    z-index: 1;
+  }
+}
+</style>

package/src/i18n/lang/en.json

@@ -73,7 +73,10 @@
             "emptySearch": "No result",
             "documentsLabel": "Add a file",
             "documentsCount": "Files - {count} selected files",
-            "validateDocuments": "Validate"
+            "groupsLabel": "Permissions",
+            "groupsCount": "Permissions - {count} selected groups",
+            "groupsText": "You are now setting the access rights: choose the user group(s) that will be exclusively authorized to see and interact with this topic.",
+            "validate": "Validate"
         },
         "BcfTopicOverview": {
             "openViewer": "Open in viewer",

package/src/i18n/lang/fr.json

@@ -73,7 +73,10 @@
             "emptySearch": "Pas de résultat",
             "documentsLabel": "Documents",
             "documentsCount": "Documents - {count} documents sélectionnés",
-            "validateDocuments": "Valider"
+            "groupsLabel": "Permissions",
+            "groupsCount": "Permissions - {count} groupes sélectionnés",
+            "groupsText": "Sélectionner les groupes utilisateur qui peuvent voir ce topic et intéragir avec.",
+            "validate": "Valider"
         },
         "BcfTopicOverview": {
             "openViewer": "Ouvrir dans le viewer",

package/src/service.js

@@ -35,6 +35,10 @@ class Service {
     return this.apiClient.bcfApi.getUser();
   }
 
+  fetchProjectGroups(project) {
+    return this.apiClient.collaborationApi.getManageGroups(project.cloud.id, project.id);
+  }
+
   // --- BCF Topics API ---
 
   /**

package/src/components/user-avatar/UserAvatar.scss

@@ -1,30 +0,0 @@
-.user-avatar {
-  min-width: 32px;
-  min-height: 32px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-
-  &--primary {
-    background-color: var(--color-primary);
-    color: var(--color-silver-light);
-  }
-
-  &--secondary {
-    background-color: var(--color-secondary);
-    color: var(--color-primary);
-  }
-
-  &--silver-light {
-    background-color: var(--color-silver-light);
-    color: var(--color-primary);
-  }
-}