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

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

@@ -0,0 +1,148 @@
+<template>
+  <BIMDataTable
+    class="bcf-topics-table"
+    tableLayout="fixed"
+    :columns="
+      displayedColumns
+        .map(col => ({
+          ...col,
+          label: col.label || $t(`BcfComponents.BcfTopicsTable.headers.${col.id}`)
+        }))
+    "
+    :rows="topics"
+    rowKey="guid"
+    :paginated="paginated"
+    :perPage="perPage"
+    :rowHeight="42"
+    :selectable="selectable"
+    :selection="selection"
+    @update:selection="$emit('update:selection', $event)"
+  >
+    <template #cell-index="{ row: topic }">
+      <BcfTopicIndexCell
+        :detailedExtensions="detailedExtensions"
+        :topic="topic"
+      />
+    </template>
+    <template #cell-priority="{ row: topic }">
+      <BcfTopicPriorityCell
+        :detailedExtensions="detailedExtensions"
+        :topic="topic"
+      />
+    </template>
+    <template #cell-status="{ row: topic }">
+      <BcfTopicStatusCell
+        v-if="topic.topic_status"
+        :detailedExtensions="detailedExtensions"
+        :topic="topic"
+      />
+    </template>
+    <template #cell-title="{ row: topic }">
+      <BIMDataTextbox maxWidth="100%" :text="topic.title" />
+    </template>
+    <template #cell-creator="{ row: { creator, creation_author } }">
+      <BIMDataTooltip :text="creation_author">
+        <UserAvatar
+          :user="creator || {}"
+          :size="30"
+          color="silver-light"
+          style="margin: auto"
+        />
+      </BIMDataTooltip>
+    </template>
+    <template #cell-date="{ row: topic }">
+      {{ toShortDateFormat(topic.creation_date) }}
+    </template>
+    <template #cell-actions="{ row: topic }">
+      <BcfTopicActionsCell
+        :topic="topic"
+        @open-topic="$emit('open-topic', $event)"
+      />
+    </template>
+  </BIMDataTable>
+</template>
+
+<script>
+import { computed } from "vue";
+import columnsDef from "./columns.js";
+// Components
+import BIMDataTable from "@bimdata/design-system/src/BIMDataComponents/BIMDataTable/BIMDataTable.vue";
+import BIMDataTextbox from "@bimdata/design-system/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
+import BIMDataTooltip from "@bimdata/design-system/src/BIMDataComponents/BIMDataTooltip/BIMDataTooltip.vue";
+import BcfTopicActionsCell from "./bcf-topic-actions-cell/BcfTopicActionsCell.vue";
+import BcfTopicIndexCell from "./bcf-topic-index-cell/BcfTopicIndexCell.vue";
+import BcfTopicPriorityCell from "./bcf-topic-priority-cell/BcfTopicPriorityCell.vue";
+import BcfTopicStatusCell from "./bcf-topic-status-cell/BcfTopicStatusCell.vue";
+
+// TODO: should be imported from DS
+import UserAvatar from "../user-avatar/UserAvatar.vue";
+
+export default {
+  components: {
+    BcfTopicActionsCell,
+    BcfTopicIndexCell,
+    BcfTopicPriorityCell,
+    BcfTopicStatusCell,
+    BIMDataTable,
+    BIMDataTextbox,
+    BIMDataTooltip,
+    UserAvatar
+  },
+  props: {
+    detailedExtensions: {
+      type: Object,
+      required: true
+    },
+    topics: {
+      type: Array,
+      required: true
+    },
+    paginated: {
+      type: Boolean,
+      default: false
+    },
+    perPage: {
+      type: Number,
+      default: 10
+    },
+    columns: {
+      type: Array
+    },
+    selectable: {
+      type: Boolean,
+      default: false
+    },
+    selection: {
+      type: Map,
+      default: () => new Map(),
+    },
+  },
+  emits: [
+    "open-topic",
+    "update:selection",
+  ],
+  setup(props) {
+    const displayedColumns = computed(() =>
+      props.columns && props.columns.length > 0
+        ? columnsDef.filter(c => props.columns.includes(c.id))
+        : columnsDef
+    );
+
+    const toShortDateFormat = (date) => {
+      if (!date) return "";
+
+      const d = date.toISOString().split('T')[0].split('-').reverse();
+      d[2] = d[2].slice(-2);
+
+      return d.join("/");
+    };
+
+    return {
+      // References
+      displayedColumns,
+      // Methods
+      toShortDateFormat,
+    };
+  }
+};
+</script>

package/src/components/bcf-topics-table/bcf-topic-actions-cell/BcfTopicActionsCell.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="bcf-topic-actions-cell">
+    <BIMDataButton
+      color="primary"
+      outline
+      radius
+      icon
+      @click="$emit('open-topic', topic)"
+    >
+      <BIMDataIconShow size="xs" />
+    </BIMDataButton>
+  </div>
+</template>
+
+<script>
+// Components
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import BIMDataIconShow from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconShow.vue";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIconShow,
+  },
+  props: {
+    topic: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: [
+    "open-topic"
+  ],
+};
+</script>
+
+<style scoped lang="scss">
+.bcf-topic-actions-cell {
+  .bimdata-btn {
+    margin: auto;
+  }
+}
+</style>

package/src/components/bcf-topics-table/bcf-topic-index-cell/BcfTopicIndexCell.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="bcf-topic-index-cell">
+    <span
+      class="left-stripe"
+      :style="{ backgroundColor: `#${priorityColor}` }"
+    ></span>
+    <span class="index">
+      {{ topic.index }}
+    </span>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+import { getPriorityColor } from "../../../utils/topic.js";
+
+export default {
+  props: {
+    detailedExtensions: {
+      type: Object,
+      required: true,
+    },
+    topic: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const priorityColor = computed(
+      () => getPriorityColor(props.topic, props.detailedExtensions)
+    );
+
+    return {
+      // References
+      priorityColor,
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.bcf-topic-index-cell {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .left-stripe {
+    position: absolute;
+    left: calc(0px - var(--spacing-unit));
+    width: 10px;
+    height: 42px;
+  }
+}
+</style>

package/src/components/bcf-topics-table/bcf-topic-priority-cell/BcfTopicPriorityCell.vue

@@ -0,0 +1,47 @@
+<template>
+  <span
+    class="bcf-topic-priority-cell"
+    :style="{ color: `#${priorityColor}` }"
+  >
+    {{ topic.priority || $t("BcfComponents.BcfTopicPriorityCell.noPriority") }}
+  </span>
+</template>
+
+<script>
+import { computed } from "vue";
+import { getPriorityColor } from "../../../utils/topic.js";
+
+export default {
+  props: {
+    detailedExtensions: {
+      type: Object,
+      required: true
+    },
+    topic: {
+      type: Object,
+      required: true
+    },
+  },
+  setup(props) {
+    const priorityColor = computed(
+      () => getPriorityColor(props.topic, props.detailedExtensions)
+    );
+
+    return {
+      // References
+      priorityColor,
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.bcf-topic-priority-cell {
+  height: 42px;
+  padding: 0 calc(var(--spacing-unit) / 2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+}
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+  <span
+    class="bcf-topic-status-cell"
+    :style="{
+      backgroundColor: `#${statusColor}`,
+      color: adjustTextColor(statusColor, '#ffffff', 'var(--color-text)')
+    }"
+  >
+    {{ topic.topic_status }}
+  </span>
+</template>
+
+<script>
+import { adjustTextColor } from "@bimdata/design-system/src/BIMDataComponents/BIMDataColorSelector/colors.js";
+import { computed } from "vue";
+import { getStatusColor } from "../../../utils/topic.js";
+
+export default {
+  props: {
+    detailedExtensions: {
+      type: Object,
+      required: true
+    },
+    topic: {
+      type: Object,
+      required: true
+    },
+  },
+  setup(props) {
+    const statusColor = computed(
+      () => getStatusColor(props.topic, props.detailedExtensions)  
+    );
+
+    return {
+      // References
+      statusColor,
+      // Methods
+      adjustTextColor,
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.bcf-topic-status-cell {
+  height: 42px;
+  padding: 0 calc(var(--spacing-unit) / 2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/src/components/bcf-topics-table/columns.js

@@ -0,0 +1,38 @@
+export default [
+  {
+    id: "index",
+    label: "#",
+    width: "60px",
+    align: "center"
+  },
+  {
+    id: "priority",
+    width: "120px",
+    align: "center"
+  },
+  {
+    id: "status",
+    width: "100px",
+    align: "center"
+  },
+  {
+    id: "title",
+    align: "left"
+  },
+  {
+    id: "creator",
+    width: "60px",
+    align: "center"
+  },
+  {
+    id: "date",
+    width: "90px",
+    align: "center"
+  },
+  {
+    id: "actions",
+    label: " ",
+    width: "60px",
+    align: "center"
+  }
+];

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

@@ -0,0 +1,30 @@
+.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);
+  }
+}

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

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="user-avatar"
+    :class="`user-avatar--${user.profile_picture ? 'silver-light' : color}`"
+    :style="{
+      width: `${size}px`,
+      height: `${size}px`,
+      fontSize: `${initialsSize ? initialsSize : +size * 0.382}px`,
+    }"
+  >
+    <template v-if="user.profile_picture">
+      <img :src="user.profile_picture" />
+    </template>
+    <template v-else-if="initials">
+      {{ initials }}
+    </template>
+    <template v-else>
+      <BIMDataIconUser size="xs" />
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+
+import BIMDataIconUser from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconUser.vue";
+
+export default {
+  components: {
+    BIMDataIconUser,
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+    size: {
+      type: [Number, String],
+      default: 32,
+      validate: (value) => value >= 32,
+    },
+    initialsSize: {
+      type: [Number, String],
+    },
+    color: {
+      type: String,
+      default: "primary",
+      validate: (value) => ["primary", "secondary", "silver-light"].includes(value),
+    },
+  },
+  setup(props) {
+    const initials = computed(() =>
+      (
+        `${(props.user.firstname && props.user.firstname[0]) || ""}` +
+        `${(props.user.lastname && props.user.lastname[0]) || ""}`
+      ).toUpperCase()
+    );
+
+    return {
+      initials,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./UserAvatar.scss"></style>

package/src/composables/filter.js

@@ -0,0 +1,58 @@
+import { computed, reactive } from "vue";
+
+const EMPTY_FILTERS = {
+  priorities: [],
+  statuses: [],
+  users: [],
+  creators: [],
+  labels: [],
+  startDate: null,
+  endDate: null,
+};
+
+function useBcfFilter(topics) {
+  const filters = reactive({ ...EMPTY_FILTERS });
+
+  const filteredTopics = computed(() => {
+    let list = topics.value;
+    if (filters.priorities.length > 0) {
+      list = list.filter(t => filters.priorities.includes(t.priority));
+    }
+    if (filters.statuses.length > 0) {
+      list = list.filter(t => filters.statuses.includes(t.topic_status));
+    }
+    if (filters.users.length > 0) {
+      list = list.filter(t => filters.users.includes(t.assigned_to));
+    }
+    if (filters.creators.length > 0) {
+      list = list.filter(t => filters.creators.includes(t.creation_author));
+    }
+    if (filters.labels.length > 0) {
+      list = list.filter(t => filters.labels.some(l => t.labels.includes(l)));
+    }
+    if (filters.startDate && filters.endDate) {
+      list = list.filter(t => (
+        t.creation_date >= filters.startDate &&
+        t.creation_date <= filters.endDate
+      ));
+    }
+    return list;
+  });
+
+  function apply(f) {
+    Object.assign(filters, f);
+  }
+
+  function reset() {
+    apply(EMPTY_FILTERS);
+  }
+
+  return {
+    filters,
+    filteredTopics,
+    apply,
+    reset,
+  };
+}
+
+export { useBcfFilter };

package/src/composables/search.js

@@ -0,0 +1,42 @@
+import { ref, watch } from "vue";
+
+const searchFields = [
+  "title",
+  "topic_type",
+  "priority",
+  "topic_status",
+  "stage",
+  "creation_author",
+  "modified_author",
+  "assigned_to",
+  "description",
+];
+
+function useBcfSearch(topics) {
+  const searchText = ref("");
+  const filteredTopics = ref([]);
+
+  watch(
+    [topics, searchText],
+    () => {
+      if (searchText.value) {
+        const lowerCaseSearchText = searchText.value.toLowerCase();
+        filteredTopics.value = topics.value.filter(topic =>
+          searchFields.some(field =>
+            (topic[field] || "").toLowerCase().includes(lowerCaseSearchText)
+          )
+        );
+      } else {
+        filteredTopics.value = topics.value;
+      }
+    },
+    { immediate: true }
+  );
+
+  return {
+    searchText,
+    filteredTopics,
+  };
+}
+
+export { useBcfSearch };

package/src/composables/sort.js

@@ -0,0 +1,64 @@
+import { ref } from "vue";
+
+function useListSort(list, mapper = elem => elem) {
+  const initialList = ref(list);
+
+  const sort = (order = "asc") => {
+    const sortedList = initialList.value
+      .slice()
+      .sort((a, b) => (mapper(a) < mapper(b) ? -1 : 1));
+    if (order === "desc") {
+      sortedList.reverse();
+    }
+    initialList.value = sortedList;
+  };
+
+  const sortOrder = ref("none");
+  const sortToggle = () => {
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
+    sort(sortOrder.value);
+  };
+
+  return {
+    sortOrder,
+    sortToggle
+  };
+}
+
+function useBcfSort(topics) {
+  const { sortToggle: sortToggleIndex, sortOrder: sortOrderIndex } =
+    useListSort(topics, topic => topic.index);
+
+  const { sortToggle: sortToggleTitle, sortOrder: sortOrderTitle } =
+    useListSort(topics, topic => topic.title);
+
+  const { sortToggle: sortToggleDate, sortOrder: sortOrderDate } =
+    useListSort(topics, topic => topic.creation_date);
+
+  const sortedBy = ref("");
+
+  const sortByIndex = () => {
+    sortedBy.value = "index";
+    sortToggleIndex();
+  };
+  const sortByTitle = () => {
+    sortedBy.value = "title";
+    sortToggleTitle();
+  };
+  const sortByDate = () => {
+    sortedBy.value = "date";
+    sortToggleDate();
+  };
+
+  return {
+    sortedBy,
+    sortByIndex,
+    sortByTitle,
+    sortByDate,
+    sortOrderIndex,
+    sortOrderTitle,
+    sortOrderDate,
+  };
+}
+
+export { useBcfSort };