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

package/src/components/bcf-settings/setting-card/SettingCardItem.scss

@@ -0,0 +1,48 @@
+.setting-card-item {
+  position: relative;
+  height: 37px;
+  margin-bottom: calc(var(--spacing-unit) / 2);
+  padding: 0 var(--spacing-unit);
+  background-color: var(--color-silver-light);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__actions {
+    display: flex;
+    align-items: center;
+  }
+
+  &__color {
+    display: block;
+    width: 19px;
+    height: 19px;
+    margin-left: var(--spacing-unit);
+    border-radius: 3px;
+    border: 1px solid var(--color-silver);
+    cursor: pointer;
+  }
+
+  &__color-selector {
+    position: absolute;
+    z-index: 1;
+    top: 32px;
+    right: calc(var(--spacing-unit) / 2);
+  }
+
+  &__delete-guard {
+    position: absolute;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--spacing-unit);
+    box-shadow: var(--box-shadow);
+    background-color: var(--color-white);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-unit);
+  }
+}

package/src/components/bcf-settings/setting-card/SettingCardItem.vue

@@ -0,0 +1,151 @@
+<template>
+  <li class="setting-card-item">
+    <span v-if="!editMode">
+      {{ extension[getExtensionField(extensionType)] }}
+    </span>
+
+    <BIMDataInput v-else ref="input" v-model="extensionName" @keyup.enter.stop="submitValue" />
+
+    <div class="setting-card-item__actions">
+      <BIMDataButton color="primary" ghost rounded icon @click="editMode = !editMode">
+        <BIMDataIcon :name="editMode ? 'close' : 'edit'" size="xxs" />
+      </BIMDataButton>
+      <BIMDataButton color="high" ghost rounded icon @click="isOpenDeleteGuard = true">
+        <BIMDataIconDelete size="xxs" />
+      </BIMDataButton>
+
+      <template v-if="EXTENSION_WITH_COLOR.includes(extensionType)">
+        <span
+          class="setting-card-item__color"
+          :style="{
+            'border-color': adjustBorderColor(`${extensionColor}`, -50),
+            'background-color': `#${extensionColor}`,
+          }"
+          @click="isOpenColorSelector = true"
+        >
+        </span>
+        <BIMDataColorSelector
+          v-if="isOpenColorSelector"
+          class="setting-card-item__color-selector"
+          v-click-away="() => (isOpenColorSelector = false)"
+          :modelValue="extensionColor"
+          @update:modelValue="submitColor"
+        />
+      </template>
+    </div>
+
+    <div v-if="isOpenDeleteGuard" class="setting-card-item__delete-guard">
+      <p>
+        {{ $t("BcfComponents.SettingCard.deleteExtensionText") }}
+      </p>
+      <div class="flex items-center">
+        <BIMDataButton
+          class="m-r-6"
+          height="28px"
+          color="high"
+          fill
+          radius
+          @click="submitDelete(extension)"
+        >
+          {{ $t("BcfComponents.SettingCard.deleteButton") }}
+        </BIMDataButton>
+        <BIMDataButton color="primary" ghost rounded icon @click="isOpenDeleteGuard = false">
+          <BIMDataIconClose size="xxxs" />
+        </BIMDataButton>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script>
+import { adjustBorderColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
+import { ref, watch } from "vue";
+import { EXTENSION_WITH_COLOR } from "../../../config.js";
+import { getExtensionField } from "../../../utils/extensions.js";
+// Components
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import BIMDataColorSelector from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/BIMDataColorSelector.vue";
+import {
+  BIMDataIconDelete,
+  BIMDataIconClose,
+} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
+import BIMDataInput from "@bimdata/design-system/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataColorSelector,
+    BIMDataIconDelete,
+    BIMDataIconClose,
+    BIMDataInput,
+  },
+  props: {
+    extensionType: {
+      type: String,
+    },
+    extension: {
+      type: Object,
+    },
+  },
+  emits: ["update-extension", "delete-extension"],
+  setup(props, { emit }) {
+    const editMode = ref(false);
+    const isOpenColorSelector = ref(false);
+    const isOpenDeleteGuard = ref(false);
+
+    const extensionName = ref(props.extension[getExtensionField(props.extensionType)]);
+    const extensionColor = ref(props.extension.color);
+
+    const input = ref(null);
+    watch(editMode, () => setTimeout(() => editMode.value && input.value.focus(), 50));
+
+    const submitValue = async () => {
+      if (extensionName.value !== props.extension[getExtensionField(props.extensionType)]) {
+        emit("update-extension", {
+          extensionType: props.extensionType,
+          extension: props.extension,
+          data: { value: extensionName.value },
+        });
+        editMode.value = false;
+      }
+    };
+
+    const submitColor = async (colorValue) => {
+      if (colorValue !== props.extension.color) {
+        emit("update-extension", {
+          extensionType: props.extensionType,
+          extension: props.extension,
+          data: { color: colorValue },
+        });
+        extensionColor.value = colorValue;
+      }
+    };
+
+    const submitDelete = async (extension) => {
+      emit("delete-extension", {
+        extensionType: props.extensionType,
+        extension,
+      });
+    };
+
+    return {
+      // References
+      editMode,
+      extensionColor,
+      extensionName,
+      EXTENSION_WITH_COLOR,
+      input,
+      isOpenColorSelector,
+      isOpenDeleteGuard,
+      // Methods
+      adjustBorderColor,
+      getExtensionField,
+      submitColor,
+      submitDelete,
+      submitValue,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./SettingCardItem.scss"></style>

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

@@ -0,0 +1,56 @@
+.bcf-statistics {
+  width: 100%;
+
+  &__content {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    &__chart {
+      flex: 1;
+    }
+
+    &__legend {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-unit);
+      margin-left: var(--spacing-unit);
+      font-size: 14px;
+
+      &__title {
+        font-weight: bold;
+      }
+
+      &__item {
+        display: flex;
+        align-items: center;
+        line-height: 24px;
+
+        &__mark {
+          width: 10px;
+          height: 10px;
+          border: 3px solid;
+          border-radius: 50px;
+        }
+
+        &__percent {
+          margin: 0 calc(var(--spacing-unit) / 2);
+          min-width: 30px;
+          font-weight: bold;
+        }
+
+        &__text .count {
+          font-size: 13px;
+        }
+      }
+
+      :deep(.bimdata-paginated-list) {
+        ul:first-child {
+          min-height: 144px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="bcf-statistics">
+    <div class="bcf-statistics__content">
+      <BIMDataSimplePieChart
+        class="bcf-statistics__content__chart"
+        :barsData="chartData"
+        :placeholder="true"
+        :placeholderStrokeWidth="10"
+        :graphDrawTime="2.5"
+      />
+
+      <div
+        class="bcf-statistics__content__legend"
+      >
+        <div class="bcf-statistics__content__legend__title">
+          {{ $t(`BcfComponents.BcfStatistics.extension.${extensionType}Title`) }}
+        </div>
+        <BIMDataPaginatedList
+          :list="chartData"
+          :perPage="6"
+          :first="false"
+          :last="false"
+          :numberDataElements="false"
+          :backgroundColor="'transparent'"
+        >
+          <template #element="{ element: data }">
+            <div class="bcf-statistics__content__legend__item">
+              <span
+                class="bcf-statistics__content__legend__item__mark"
+                :style="{ borderColor: data.color }"
+              ></span>
+              <span class="bcf-statistics__content__legend__item__percent">
+                {{ data.percentage.toFixed(0) }} %
+              </span>
+              <span class="bcf-statistics__content__legend__item__text">
+                {{
+                  data.label ||
+                  $t(`BcfComponents.BcfStatistics.extension.${extensionType}NotDefined`)
+                }}
+                <span class="count">
+                  ({{ data.count }})
+                </span>
+              </span>
+            </div>
+          </template>
+        </BIMDataPaginatedList>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+import { DEFAULT_PRIORITY_COLOR } from "../../config.js";
+import { getAvailableExtensions, getExtensionField } from "../../utils/extensions.js";
+// Components
+import BIMDataPaginatedList from "@bimdata/design-system/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue";
+import BIMDataSimplePieChart from "@bimdata/design-system/src/BIMDataComponents/BIMDataSimplePieChart/BIMDataSimplePieChart.vue";
+
+export default {
+  components: {
+    BIMDataPaginatedList,
+    BIMDataSimplePieChart,
+  },
+  props: {
+    detailedExtensions: {
+      type: Object,
+      required: true
+    },
+    extensionType: {
+      type: String
+    },
+    topics: {
+      type: Array,
+      required: true
+    },
+  },
+  setup(props) {
+    const chartData = computed(() => {
+      if (props.topics.length === 0) return [];
+
+      const extField = getExtensionField(props.extensionType);
+      const displayedExtensions = getAvailableExtensions(props.extensionType, props.detailedExtensions);
+
+      // Add an undefined extension value to match topics
+      // that have no value for this extension.
+      displayedExtensions.push({ [extField]: undefined });
+
+      return displayedExtensions
+        .map(extension => {
+          const topicCount = props.topics
+            .filter(topic => topic[extField] === extension[extField])
+            .length;
+
+          return {
+            label: extension[extField],
+            color: `#${extension.color ?? DEFAULT_PRIORITY_COLOR}`,
+            count: topicCount,
+            percentage: (topicCount * 100) / props.topics.length
+          };
+        })
+        .sort((a, b) => b.percentage - a.percentage);
+    });
+
+    return {
+      chartData
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./BcfStatistics.scss"></style>

package/src/components/bcf-topic-card/BcfTopicCard.scss

@@ -0,0 +1,96 @@
+.bcf-topic-card {
+  position: relative;
+  width: 336px;
+  height: 308px;
+  box-shadow: var(--box-shadow);
+
+  &.selected{
+    outline: 3px solid var(--color-primary);
+  }
+
+  &__header {
+    height: 32px;
+    padding-right: var(--spacing-unit);
+    background-color: var(--color-white);
+    display: flex;
+    gap: var(--spacing-unit);
+
+    .index {
+      padding: 3px;
+      min-width: 32px;
+      background-color: var(--color-silver);
+      color: var(--color-text);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .title {
+      width: calc(100% - var(--spacing-unit) * 2 - 44px);
+      color: var(--color-primary);
+      display: flex;
+      align-items: center;
+    }
+
+    .checkbox {
+      display: flex;
+      align-items: center;
+
+      :deep(.bimdata-checkbox__mark) {
+        width: 15px;
+        height: 15px;
+        &::after {
+          top: 2px;
+          left: 4px;
+        }
+      }
+    }
+  }
+
+  &__image {
+    height: 171px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .img-default {
+      width: 120px;
+      height: 120px;
+    }
+
+    .status {
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      border-radius: 3px;
+      padding: calc(var(--spacing-unit) / 2);
+      display: flex;
+      align-items: center;
+    }
+
+    .date {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      padding: calc(var(--spacing-unit) / 2);
+      font-size: 11px;
+      background-color: var(--color-white);
+    }
+  }
+
+  &__content {
+    height: 105px;
+    padding: var(--spacing-unit);
+    border-top: 3px solid var(--color-silver-light);
+    font-size: 12px;
+    background-color: var(--color-white);
+    color: var(--color-text);
+  }
+}

package/src/components/bcf-topic-card/BcfTopicCard.vue

@@ -0,0 +1,150 @@
+<template>
+  <div
+    class="bcf-topic-card"
+    :class="{ selected }"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+  >
+    <div class="bcf-topic-card__header">
+      <div
+        class="index"
+        :style="{
+          'background-color': `#${priorityColor}`,
+          color: adjustTextColor(`#${priorityColor}`, '#FFF', 'var(--color-text)'),
+        }"
+      >
+        {{ topic.index }}
+      </div>
+      <div class="title">
+        <BIMDataTextbox maxWidth="100% - 48px" :text="topic.title" />
+      </div>
+      <div class="checkbox">
+        <BIMDataCheckbox
+          v-show="selectable && hover"
+          :modelValue="selected"
+          @update:modelValue="$emit('update:selected', $event)"
+        />
+      </div>
+    </div>
+
+    <div class="bcf-topic-card__image">
+      <div
+        v-if="topic.topic_status"
+        class="status"
+        :style="{
+          'background-color': `#${statusColor}`,
+          color: adjustTextColor(`#${statusColor}`, '#FFF', 'var(--color-text)'),
+        }"
+      >
+        <BIMDataIconInformation fill color="default" />
+        <span class="m-l-6">{{ topic.topic_status }}</span>
+      </div>
+
+      <div class="date">
+        {{ $d(topic.creation_date, "short") }}
+      </div>
+
+      <img v-if="topicImage" :src="topicImage" alt="topic viewpoint" loading="lazy" />
+      <BcfTopicDefaultImage v-else class="img-default" />
+    </div>
+
+    <div class="bcf-topic-card__content">
+      <div>
+        <strong>
+          {{ $t("BcfComponents.BcfTopicCard.priority") }}
+        </strong>
+        <span :style="{ color: `#${priorityColor}` }">
+          {{ topic.priority || $t("BcfComponents.BcfTopicCard.noPriority") }}
+        </span>
+      </div>
+      <div>
+        <strong>
+          {{ $t("BcfComponents.BcfTopicCard.assignedTo") }}
+        </strong>
+        <span>
+          {{ topic.assigned_to || $t("BcfComponents.BcfTopicCard.notSpecified") }}
+        </span>
+      </div>
+      <div class="flex justify-around m-t-12">
+        <div class="flex items-center">
+          <BIMDataIconModel3D fill color="default" size="xs" />
+          <span class="m-l-6">
+            {{ $t("BcfComponents.BcfTopicCard.elements", { n: topicObjects.length }) }}
+          </span>
+        </div>
+        <BIMDataButton width="48%" color="primary" fill radius @click="$emit('open-topic', topic)">
+          {{ $t("BcfComponents.BcfTopicCard.see") }}
+        </BIMDataButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
+import { computed, ref } from "vue";
+import { getPriorityColor, getStatusColor } from "../../utils/topic.js";
+// Components
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import {
+  BIMDataIconInformation,
+  BIMDataIconModel3D,
+} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
+import BIMDataTextbox from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
+import BcfTopicDefaultImage from "./BcfTopicDefaultImage.vue";
+
+export default {
+  components: {
+    BcfTopicDefaultImage,
+    BIMDataButton,
+    BIMDataIconInformation,
+    BIMDataIconModel3D,
+    BIMDataTextbox,
+  },
+  props: {
+    detailedExtensions: {
+      type: Object,
+      required: true,
+    },
+    topic: {
+      type: Object,
+      required: true,
+    },
+    selectable: {
+      type: Boolean,
+      default: false,
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["open-topic", "update:selected"],
+  setup(props) {
+    const hover = ref(false);
+
+    const priorityColor = computed(() => getPriorityColor(props.topic, props.detailedExtensions));
+
+    const statusColor = computed(() => getStatusColor(props.topic, props.detailedExtensions));
+
+    const topicImage = computed(
+      () => props.topic.viewpoints?.filter((v) => v.snapshot)[0]?.snapshot.snapshot_data
+    );
+
+    const topicObjects = computed(() => props.topic.viewpoints?.[0]?.components?.selection ?? []);
+
+    return {
+      // References
+      hover,
+      priorityColor,
+      statusColor,
+      topicImage,
+      topicObjects,
+      // Methods
+      adjustTextColor,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./BcfTopicCard.scss"></style>