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

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

@@ -0,0 +1,350 @@
+<template>
+  <div class="bcf-topic-overview">
+    <div class="bcf-topic-overview__header">
+      <BIMDataButton
+        v-if="uiConfig.backButton"
+        ghost rounded icon
+        @click="$emit('back')"
+      >
+        <BIMDataIconArrow size="xxs" fill color="granite-light" />
+      </BIMDataButton>
+      <div class="bcf-topic-overview__header__title">
+        <BIMDataTextbox maxWidth="250px" :text="topic.title" />
+      </div>
+      <div class="bcf-topic-overview__header__actions">
+        <BIMDataButton
+          v-if="uiConfig.editButton"
+          ghost rounded icon
+          @click="$emit('edit-topic', topic)"
+        >
+          <BIMDataIconEdit size="xxs" />
+        </BIMDataButton>
+        <BIMDataButton
+          v-if="uiConfig.deleteButton"
+          ghost rounded icon
+          @click="showDeleteModal = true"
+        >
+          <BIMDataIconDelete size="xxs" />
+        </BIMDataButton>
+        <BIMDataButton
+          v-if="uiConfig.closeButton"
+          ghost rounded icon
+          @click="$emit('close')"
+        >
+          <BIMDataIconClose size="xxs" fill color="granite-light" />
+        </BIMDataButton>
+      </div>
+    </div>
+
+    <div class="bcf-topic-overview__content">
+      <div class="bcf-topic-overview__content__head">
+        <div
+          class="bcf-topic-overview__content__head__index"
+          :style="{
+            backgroundColor: `#${priorityColor}`,
+            color: adjustTextColor(`#${priorityColor}`, '#FFF', '#2F374A'),
+          }"
+        >
+          {{ topic.index }}
+        </div>
+        <div class="bcf-topic-overview__content__head__date">
+          {{ $d(topic.creation_date, "short") }}
+        </div>
+      </div>
+
+      <BcfTopicViewpoints
+        :detailedExtensions="detailedExtensions"
+        :topic="topic"
+        @view-topic-viewpoint="$emit('view-topic-viewpoint', $event)"
+      />
+
+      <BIMDataButton
+        v-if="uiConfig.viewerMode"
+        width="100%"
+        fill
+        radius
+        :disabled="topicObjects.length === 0"
+        @click="$emit('view-topic-components', topic)"
+      >
+        <BIMDataIconModel3D size="xs" margin="0 6px 0 0" />
+        <template v-if="topicObjects.length > 0">
+          {{ $t("BcfComponents.BcfTopicOverview.elements", { count: topicObjects.length }) }}
+        </template>
+        <template v-else>
+          {{ $t("BcfComponents.BcfTopicOverview.noElements") }}
+        </template>
+      </BIMDataButton>
+
+      <BIMDataButton
+        v-else
+        width="100%"
+        color="primary"
+        fill
+        radius
+        @click="$emit('view-topic', topic)"
+      >
+        {{ $t("BcfComponents.BcfTopicOverview.openViewer") }}
+      </BIMDataButton>
+
+      <div class="bcf-topic-overview__content__card">
+        <div class="title" v-if="!uiConfig.viewerMode">
+          <BIMDataIconModel3D size="xs" />
+          <span>
+            {{ $t("BcfComponents.BcfTopicOverview.elements", { count: topicObjects.length }) }}
+          </span>
+        </div>
+        <div class="line">
+          <span class="label">
+            {{ $t("BcfComponents.BcfTopicOverview.type") }}
+          </span>
+          <span class="value">
+            {{
+              topic.topic_type
+                ? topic.topic_type
+                : $t("BcfComponents.BcfTopicOverview.noTypeSpecified")
+            }}
+          </span>
+        </div>
+        <div class="line">
+          <span class="label">
+            {{ $t("BcfComponents.BcfTopicOverview.description") }}
+          </span>
+          <span class="value" style="white-space: pre-line">
+            {{
+              topic.description
+                ? topic.description
+                : $t("BcfComponents.BcfTopicOverview.noDescriptionProvided")
+            }}
+          </span>
+        </div>
+        <div class="line">
+          <span class="label">
+            {{ $t("BcfComponents.BcfTopicOverview.assignedTo") }}
+          </span>
+          <span class="value">
+            {{
+              topic.assigned_to
+                ? topic.assigned_to
+                : $t("BcfComponents.BcfTopicOverview.notAssigned")
+            }}
+          </span>
+        </div>
+        <div class="line">
+          <span class="label">
+            {{ $t("BcfComponents.BcfTopicOverview.dueDate") }}
+          </span>
+          <span class="value">
+            {{
+              topic.due_date
+                ? $d(topic.due_date, "short")
+                : $t("BcfComponents.BcfTopicOverview.noDueDate")
+            }}
+          </span>
+        </div>
+      </div>
+
+      <div class="bcf-topic-overview__content__card">
+        <div class="title">
+          <BIMDataIconBcf />
+          <span>
+            {{ $t("BcfComponents.BcfTopicOverview.informations") }}
+          </span>
+        </div>
+        <div class="line">
+          <span class="label">
+            {{ $t("BcfComponents.BcfTopicOverview.status") }}
+          </span>
+          <span class="value">
+            {{ topic.topic_status || $t("BcfComponents.BcfTopicOverview.noStatusSpecified") }}
+          </span>
+        </div>
+        <div class="line">
+          <span class="label">
+            {{ $t("BcfComponents.BcfTopicOverview.stage") }}
+          </span>
+          <span class="value">
+            {{ topic.stage || $t("BcfComponents.BcfTopicOverview.noStageProvided") }}
+          </span>
+        </div>
+        <div class="line">
+          <span class="label">
+            {{ $t("BcfComponents.BcfTopicOverview.priority") }}
+          </span>
+          <span class="value" :style="{ color: `#${priorityColor}` }">
+            {{ topic.priority || $t("BcfComponents.BcfTopicOverview.priorityNotDefined") }}
+          </span>
+        </div>
+        <div class="line">
+          <span class="label">
+            {{ $t("BcfComponents.BcfTopicOverview.author") }}
+          </span>
+          <span class="value">
+            {{ topic.creation_author }}
+          </span>
+        </div>
+        <div class="line m-t-12">
+          <span class="label">
+            {{ $t("BcfComponents.BcfTopicOverview.tags") }}
+          </span>
+          <span class="value">
+            {{
+              topicLabels.length
+                ? topicLabels.join(", ")
+                : $t("BcfComponents.BcfTopicOverview.noTags")
+            }}
+          </span>
+        </div>
+      </div>
+
+      <BcfTopicComments
+        :uiConfig="uiConfig"
+        :project="project"
+        :topic="topic"
+        :currentUserEmail="currentUserEmail"
+        :getViewers="getViewers"
+        @comment-created="$emit('comment-created', $event)"
+        @comment-updated="$emit('comment-updated', $event)"
+        @comment-deleted="$emit('comment-deleted', $event)"
+        @view-comment-snapshot="$emit('view-comment-snapshot',$event)"
+      />
+    </div>
+
+    <BIMDataSafeZoneModal v-if="showDeleteModal" class="delete-modal">
+      <template #text>
+        {{ $t("BcfComponents.BcfTopicOverview.deleteText", { name: topic.title }) }}
+      </template>
+      <template #actions>
+        <BIMDataButton class="m-r-12" color="high" fill radius @click="deleteTopic">
+          {{ $t("BcfComponents.BcfTopicOverview.deleteBcfButton") }}
+        </BIMDataButton>
+        <BIMDataButton color="primary" outline radius @click="showDeleteModal = false">
+          {{ $t("BcfComponents.BcfTopicOverview.keepBcfButton") }}
+        </BIMDataButton>
+      </template>
+    </BIMDataSafeZoneModal>
+
+    <div v-if="loading">
+      <BIMDataLoading />
+    </div>
+  </div>
+</template>
+
+<script>
+import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
+import { computed, onMounted, ref } from "vue";
+import { useService } from "../../service.js";
+import { getPriorityColor } from "../../utils/topic.js";
+// Components
+import BIMDataSafeZoneModal from "@bimdata/components/src/BIMDataSafeZoneModal/BIMDataSafeZoneModal.vue";
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import {BIMDataIconArrow,BIMDataIconEdit, BIMDataIconDelete, BIMDataIconClose, BIMDataIconModel3D } from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
+import BIMDataLoading from "@bimdata/design-system/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue";
+import BIMDataTextbox from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
+import BcfTopicComments from "./bcf-topic-comments/BcfTopicComments.vue";
+import BcfTopicDefaultImage from "../bcf-topic-card/BcfTopicDefaultImage.vue";
+import BcfTopicViewpoints from "./bcf-topic-viewpoints/BcfTopicViewpoints.vue";
+
+export default {
+  components: {
+    BcfTopicComments,
+    BcfTopicDefaultImage,
+    BcfTopicViewpoints,
+    BIMDataButton,
+    BIMDataIconArrow,BIMDataIconEdit, BIMDataIconDelete, BIMDataIconClose, BIMDataIconModel3D,
+    BIMDataLoading,
+    BIMDataSafeZoneModal,
+    BIMDataTextbox,
+  },
+  props: {
+    uiConfig: {
+      type: Object,
+      default: () => ({
+        viewerMode: false,
+        backButton: false,
+        closeButton: false,
+        editButton: false,
+        deleteButton: false,
+        commentCreation: false,
+      }),
+    },
+    project: {
+      type: Object,
+      required: true,
+    },
+    detailedExtensions: {
+      type: Object,
+      required: true,
+    },
+    topic: {
+      type: Object,
+      required: true,
+    },
+    getViewers: {
+      type: Function,
+      default: () => () => ({})
+    },
+  },
+  emits: [
+    "back",
+    "close",
+    "comment-created",
+    "comment-deleted",
+    "comment-updated",
+    "edit-topic",
+    "topic-deleted",
+    "topic-delete-error",
+    "view-comment-snapshot",
+    "view-topic",
+    "view-topic-components",
+    "view-topic-viewpoint",
+  ],
+  setup(props, { emit }) {
+    const service = useService();
+
+    const loading = ref(false);
+    const showDeleteModal = ref(false);
+
+    const priorityColor = computed(() => getPriorityColor(props.topic, props.detailedExtensions));
+
+    const topicObjects = computed(() => props.topic.viewpoints?.[0]?.components?.selection ?? []);
+
+    const topicLabels = computed(() => Array.from(props.topic.labels ?? []).sort());
+
+    const currentUserEmail = ref("");
+    const loadCurrentUserEmail = async () => {
+      currentUserEmail.value = (await service.fetchCurrentUser()).email ?? "";
+    };
+
+    const deleteTopic = async () => {
+      try {
+        showDeleteModal.value = false;
+        loading.value = true;
+        await service.deleteTopic(props.project, props.topic);
+        emit("topic-deleted", props.topic);
+      } catch (error) {
+        console.error(error);
+        emit("topic-delete-error", error);
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    onMounted(() => loadCurrentUserEmail())
+
+    return {
+      // References
+      currentUserEmail,
+      loading,
+      priorityColor,
+      showDeleteModal,
+      topicLabels,
+      topicObjects,
+      // Methods
+      adjustTextColor,
+      deleteTopic,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./BcfTopicOverview.scss"></style>

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

@@ -0,0 +1,39 @@
+.bcf-topic-comments {
+  p {
+    font-weight: 700;
+  }
+
+  &__post-comment {
+    &__snapshot {
+      height: 200px;
+      position: relative;
+      background-color: var(--color-silver-light);
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      .btn-delete {
+        position: absolute;
+        top: calc(50% - (32px / 2));
+        left: calc(50% - (32px / 2));
+      }
+    }
+    &__camera {
+      cursor: pointer;
+    }
+  }
+
+  :deep(.submenu--down li) {
+    padding: 0;
+  }
+  :deep(.submenu--down li > div) {
+    padding: calc(var(--spacing-unit) / 2);
+  }
+
+  :deep(.bimdata-textarea) {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,268 @@
+<template>
+  <div class="bcf-topic-comments">
+    <template v-if="uiConfig.commentCreation">
+      <BIMDataButton v-if="!isOpen" width="100%" color="primary" fill radius @click="isOpen = true">
+        {{ $t("BcfComponents.BcfTopicComments.commentButton") }}
+      </BIMDataButton>
+
+      <div v-else class="bcf-topic-comments__post-comment m-t-24">
+        <p class="color-granite m-b-24">
+          {{ $t("BcfComponents.BcfTopicComments.commentText") }}
+        </p>
+        <div class="bcf-comment-input m-t-24">
+          <BIMDataTextarea
+            ref="input"
+            width="100%"
+            :label="$t('BcfComponents.BcfTopicComments.commentLabel')"
+            v-model="text"
+            autofocus
+            resizable
+          />
+          <div class="bcf-topic-comments__post-comment__snapshot m-b-12" v-if="viewpoint">
+            <img v-if="viewpoint.snapshot.snapshot_data" :src="viewpoint.snapshot.snapshot_data" />
+            <BIMDataButton class="btn-delete" fill rounded icon @click="deleteViewpoint">
+              <BIMDataIconDelete size="xs" fill color="high" />
+            </BIMDataButton>
+          </div>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <div
+                class="bcf-topic-comments__post-comment__camera m-r-12"
+                @click="setCommentViewpoint"
+                v-if="!viewerSelectVisible && isViewer"
+              >
+                <BIMDataIconCamera fill color="default" />
+              </div>
+              <BIMDataDropdownList
+                v-if="viewerSelectVisible && isViewer"
+                :list="viewerSelectOptions"
+                elementKey="key"
+                @element-click="createViewpoint"
+                width="180px"
+              >
+                <template #header>{{ $t("BcfComponents.BcfTopicComments.takeSnapshot") }}</template>
+                <template #element="{ element }">
+                  <div
+                    style="width: 100%"
+                    @mouseenter="highlightViewer(element.viewer)"
+                    @mouseleave="unhighlightViewer(element.viewer)"
+                  >
+                    {{ `${element.id} (${element.index})` }}
+                  </div>
+                </template>
+              </BIMDataDropdownList>
+            </div>
+            <div class="flex items-center justify-end">
+              <BIMDataButton color="primary" ghost radius class="m-r-6" @click="isOpen = false">
+                {{ $t("BcfComponents.BcfTopicComments.cancelButton") }}
+              </BIMDataButton>
+              <BIMDataButton color="primary" fill radius width="135px" @click="submitComment">
+                {{ $t("BcfComponents.BcfTopicComments.publishButton") }}
+              </BIMDataButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="bcf-topic-comments__list m-t-18">
+      <p class="color-granite">
+        {{
+          (comments ? comments.length : 0) + " " + $t("BcfComponents.BcfTopicComments.commentsText")
+        }}
+      </p>
+      <div v-if="comments && comments.length">
+        <TopicComment
+          v-for="comment in comments"
+          :key="comment.guid"
+          :project="project"
+          :topic="topic"
+          :comment="comment"
+          :currentUserEmail="currentUserEmail"
+          :get-viewers="getViewers"
+          @comment-updated="onCommentUpdated"
+          @comment-deleted="onCommentDeleted"
+          @view-comment-snapshot="$emit('view-comment-snapshot', $event)"
+        />
+      </div>
+    </div>
+
+    <template v-if="loading">
+      <BIMDataLoading />
+    </template>
+  </div>
+</template>
+
+<script>
+import { onMounted, inject, ref, watch, onBeforeUnmount } from "vue";
+import { useService } from "../../../service.js";
+import { getViewerOptions, highlightViewer, unhighlightViewer } from "../../../utils/viewer.js";
+
+// Components
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import BIMDataDropdownList from "@bimdata/design-system/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue";
+import {
+  BIMDataIconCamera,
+  BIMDataIconDelete,
+} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
+import BIMDataLoading from "@bimdata/design-system/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue";
+import BIMDataTextarea from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue";
+import TopicComment from "./topic-comment/TopicComment.vue";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataDropdownList,
+    BIMDataIconCamera,
+    BIMDataIconDelete,
+    BIMDataLoading,
+    BIMDataTextarea,
+    TopicComment,
+  },
+  props: {
+    project: {
+      type: Object,
+      required: true,
+    },
+    topic: {
+      type: Object,
+      required: true,
+    },
+    uiConfig: {
+      type: Object,
+      required: true,
+    },
+    currentUserEmail: {
+      type: String,
+      required: true,
+    },
+    getViewers: {
+      type: Function,
+      required: true,
+    },
+  },
+  emis: ["comment-created", "comment-updated", "comment-deleted", "view-comment-snapshot"],
+  setup(props, { emit }) {
+    let pluginCreatedSub, pluginDestroyedSub;
+
+    const service = useService();
+    const $viewer = inject("$viewer", null);
+
+    const loading = ref(false);
+    const isOpen = ref(false);
+    const input = ref(null);
+    const comments = ref([]);
+    const text = ref("");
+    const viewpoint = ref(null);
+    const viewerSelectVisible = ref(false);
+    const viewerSelectOptions = ref([]);
+
+    const loadComments = async () => {
+      comments.value = await service.fetchTopicComments(props.project, props.topic);
+    };
+
+    const setCommentViewpoint = async () => {
+      if (viewerSelectOptions.value.length === 1) {
+        await createViewpoint(viewerSelectOptions.value[0]);
+      } else if (viewerSelectOptions.value.length > 1) {
+        viewerSelectVisible.value = true;
+      }
+    };
+
+    const createViewpoint = async ({ viewer }) => {
+      unhighlightViewer(viewer);
+      viewerSelectVisible.value = false;
+      viewpoint.value = await viewer.getViewpoint();
+    };
+
+    const deleteViewpoint = () => {
+      viewpoint.value = null;
+    };
+
+    const submitComment = async () => {
+      try {
+        loading.value = true;
+        if (viewpoint.value) {
+          viewpoint.value = await service.createViewpoint(
+            props.project,
+            props.topic,
+            viewpoint.value
+          );
+        }
+        const comment = await service.createComment(props.project, props.topic, {
+          comment: text.value,
+          viewpoint_guid: viewpoint.value?.guid,
+        });
+        loadComments();
+        emit("comment-created", comment);
+        isOpen.value = false;
+        text.value = "";
+      } finally {
+        loading.value = false;
+        viewpoint.value = null;
+      }
+    };
+
+    const onCommentUpdated = (comment) => {
+      loadComments();
+      emit("comment-updated", comment);
+    };
+
+    const onCommentDeleted = (comment) => {
+      loadComments();
+      emit("comment-deleted", comment);
+    };
+
+    watch(
+      () => props.topic,
+      () => loadComments(),
+      { immediate: true }
+    );
+
+    watch(isOpen, () => setTimeout(() => isOpen.value && input.value.focus(), 50));
+
+    onMounted(() => {
+      if ($viewer) {
+        viewerSelectOptions.value = getViewerOptions(props.getViewers());
+        pluginCreatedSub = $viewer.globalContext.hub.on("plugin-created", () => {
+          viewerSelectOptions.value = getViewerOptions(props.getViewers());
+        });
+        pluginDestroyedSub = $viewer.globalContext.hub.on("plugin-destroyed", () => {
+          viewerSelectOptions.value = getViewerOptions(props.getViewers());
+        });
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if ($viewer) {
+        $viewer.globalContext.hub.off(pluginCreatedSub);
+        $viewer.globalContext.hub.off(pluginDestroyedSub);
+      }
+    });
+
+    return {
+      // References
+      comments,
+      input,
+      isOpen,
+      loading,
+      text,
+      viewerSelectOptions,
+      viewerSelectVisible,
+      viewpoint,
+      isViewer: Boolean($viewer),
+      // Methods
+      createViewpoint,
+      deleteViewpoint,
+      highlightViewer,
+      loadComments,
+      onCommentDeleted,
+      onCommentUpdated,
+      setCommentViewpoint,
+      submitComment,
+      unhighlightViewer,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./BcfTopicComments.scss"></style>