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

package/src/components/bcf-topic-form/bcf-topic-images/BcfTopicImages.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="bcf-topic-images">
+    <template v-if="viewpoints.length > 0">
+      <div class="bcf-topic-images__images">
+        <div
+          class="image-preview"
+          :class="{ single: viewpoints.length === 1 }"
+          v-for="(viewpoint, i) in viewpoints.slice(0, 4)"
+          :key="viewpoint.guid || i"
+        >
+          <img v-if="viewpoint.snapshot.snapshot_data" :src="viewpoint.snapshot.snapshot_data" />
+          <BIMDataButton class="btn-delete" fill rounded icon @click="$emit('delete-viewpoint', viewpoint)">
+            <BIMDataIconDelete size="xs" fill color="high" />
+          </BIMDataButton>
+        </div>
+      </div>
+
+      <BIMDataButton
+        :disabled="viewpoints.length >= 4"
+        class="btn-upload"
+        width="100%"
+        color="primary"
+        fill
+        radius
+      >
+        <label for="files">
+          <BIMDataIconCamera size="xs" margin="0 6px 0 0" />
+          {{ $t("BcfComponents.BcfTopicForm.addPictureButton") }}
+        </label>
+        <input
+          :disabled="viewpoints.length >= 4"
+          hidden
+          id="files"
+          type="file"
+          multiple
+          accept="image/png, image/jpeg"
+          @change="$emit('upload-viewpoint', $event)"
+        />
+      </BIMDataButton>
+    </template>
+
+    <template v-else>
+      <div class="bcf-topic-images__upload">
+        <span class="icon">
+          <BIMDataIconUnarchive size="m" />
+        </span>
+        <BIMDataButton class="btn-upload" color="primary" outline radius>
+          <label v-if="!isTabletOrMobile" for="files">
+            {{ $t("BcfComponents.BcfTopicForm.dragDropImageText") }}
+          </label>
+          <label v-else for="files">
+            {{ $t("BcfComponents.BcfTopicForm.dragDropImageTextTablet") }}
+          </label>
+          <input
+            hidden
+            id="files"
+            type="file"
+            multiple
+            accept="image/png, image/jpeg"
+            @change="$emit('upload-viewpoint', $event)"
+          />
+        </BIMDataButton>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { isTabletOrMobile } from "../../../utils/browser.js";
+// Components
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import {
+  BIMDataIconDelete,
+  BIMDataIconCamera,
+  BIMDataIconUnarchive,
+} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIconDelete,
+    BIMDataIconCamera,
+    BIMDataIconUnarchive,
+  },
+  props: {
+    viewpoints: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ["upload-viewpoint", "delete-viewpoint"],
+  setup() {
+    return {
+      // Methods
+      isTabletOrMobile,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./BcfTopicImages.scss"></style>

package/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.scss

@@ -0,0 +1,50 @@
+.bcf-topic-snapshots {
+  &__snapshots {
+    width: 100%;
+    min-height: 180px;
+    max-height: 262px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    .snapshot-preview {
+      position: relative;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .btn-delete {
+        position: absolute;
+        top: calc(50% - (32px / 2));
+        left: calc(50% - (32px / 2));
+      }
+
+      &:first-child {
+        width: 100%;
+        height: 180px;
+      }
+
+      &:not(:first-child) {
+        width: 30%;
+        height: 72px;
+      }
+    }
+  }
+
+  &__create {
+    width: 100%;
+    height: 180px;
+    min-height: 180px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 2px dashed var(--color-silver);
+    label {
+      cursor: pointer;
+    }
+  }
+}

package/src/components/bcf-topic-form/bcf-topic-snapshots/BcfTopicSnapshots.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="bcf-topic-snapshots">
+    <template v-if="viewpoints.length > 0">
+      <div class="bcf-topic-snapshots__snapshots">
+        <div
+          class="snapshot-preview"
+          :class="{ single: viewpoints.length === 1 }"
+          v-for="(viewpoint, i) in viewpoints.slice(0, 4)"
+          :key="viewpoint.guid || i"
+        >
+          <img v-if="viewpoint.snapshot.snapshot_data" :src="viewpoint.snapshot.snapshot_data" />
+          <BIMDataButton class="btn-delete" fill rounded icon @click="$emit('delete-viewpoint', viewpoint)">
+            <BIMDataIconDelete size="xs" fill color="high" />
+          </BIMDataButton>
+        </div>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="bcf-topic-snapshots__create">
+        <BIMDataButton color="primary" fill radius @click="$emit('create-viewpoint')">
+          <BIMDataIconCamera size="s" margin="0 6px 0 0" />
+          <span>{{ $t("BcfComponents.BcfTopicForm.takeSnapshot") }}</span>
+        </BIMDataButton>
+        <BIMDataButton color="primary" outline radius class="m-t-12">
+          <label for="files" class="flex items-center">
+            <BIMDataIconUnarchive fill color="default" size="s" margin="0 6px 0 0" />
+            <span>{{ $t("BcfComponents.BcfTopicForm.importFile") }}</span>
+          </label>
+          <input
+            :disabled="viewpoints.length >= 4"
+            hidden
+            id="files"
+            type="file"
+            multiple
+            accept="image/png, image/jpeg"
+            @change="$emit('upload-viewpoint', $event)"
+          />
+        </BIMDataButton>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import BcfTopicSnapshotsActions from "../bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue";
+// Components
+import BIMDataButton from "@bimdata/design-system/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import {
+  BIMDataIconDelete,
+  BIMDataIconCamera,
+} from "@bimdata/design-system/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/index.js";
+
+export default {
+  components: {
+    BcfTopicSnapshotsActions,
+    BIMDataButton,
+    BIMDataIconDelete,
+    BIMDataIconCamera,
+  },
+  props: {
+    viewpoints: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ["create-viewpoint", "upload-viewpoint", "delete-viewpoint"],
+};
+</script>
+
+<style scoped lang="scss" src="./BcfTopicSnapshots.scss"></style>

package/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.scss

@@ -0,0 +1,9 @@
+.bcf-topic-snapshots-actions {
+  label {
+    height: 32px;
+    width: 32px;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+  }
+}

package/src/components/bcf-topic-form/bcf-topic-snapshots-actions/BcfTopicSnapshotsActions.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="bcf-topic-snapshots-actions flex"
+  >
+    <BIMDataTooltip
+      :disabled="snapshotedViewpoints.length > 0"
+      :text="$t('BcfComponents.BcfTopicForm.takeSnapshot')"
+      color="primary"
+      position="right"
+    >
+      <BIMDataButton
+        color="default"
+        ghost
+        rounded
+        icon
+        @click="$emit('create-viewpoint')"
+        :disabled="snapshotedViewpoints.length > 0"
+      >
+        <BIMDataIconCamera size="s" />
+      </BIMDataButton>
+    </BIMDataTooltip>
+    <BIMDataTooltip
+      :text="$t('BcfComponents.BcfTopicForm.importFile')"
+      color="primary"
+      position="right"
+    >
+      <BIMDataButton color="default" ghost rounded icon >
+        <label for="files" class="flex items-center">
+          <BIMDataIconUnarchive fill color="default" size="s" />
+        </label>
+        <input
+          hidden
+          id="files"
+          type="file"
+          multiple
+          accept="image/png, image/jpeg"
+          @change="$emit('upload-viewpoint', $event)"
+        />
+      </BIMDataButton>
+    </BIMDataTooltip>
+  </div>
+</template>
+
+<script>
+import { computed } from "vue";
+
+export default {
+  props: {
+    viewpoints: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ["create-viewpoint", "upload-viewpoint"],
+  setup(props) {
+
+    // Computed filtering viewpoints on isUpload = false
+    const snapshotedViewpoints = computed(() =>
+      props.viewpoints.filter((viewpoint) => !viewpoint.isUpload)
+    );
+
+    return {
+      snapshotedViewpoints,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./BcfTopicSnapshotsActions.scss"></style>

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

@@ -0,0 +1,94 @@
+.bcf-topic-overview {
+  height: 100%;
+  font-size: 12px;
+
+  &__header {
+    height: 32px;
+    padding: 0 calc(var(--spacing-unit) / 2);
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing-unit) / 3);
+
+    &__title {
+      flex-grow: 1;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    &__actions {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &__content {
+    height: calc(100% - 32px);
+    padding: var(--spacing-unit) calc(var(--spacing-unit) / 2);
+    overflow: auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-unit);
+
+    &__head {
+      height: 27px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &__index,
+      &__date {
+        height: 100%;
+        padding: calc(var(--spacing-unit) / 2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &__index {
+        min-width: 50px;
+      }
+
+      &__date {
+        min-width: 100px;
+        background-color: var(--color-silver-light);
+        color: var(--color-primary);
+      }
+    }
+
+    &__card {
+      padding: var(--spacing-unit);
+      box-shadow: var(--box-shadow);
+      line-height: 1.5;
+
+      .title {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--spacing-unit) / 2);
+        margin-bottom: var(--spacing-unit);
+      }
+
+      .line {
+        .label {
+          margin-right: 4px;
+          font-weight: bold;
+          color: var(--color-primary);
+
+          &::after {
+            content: ":";
+            padding: 0 1px;
+          }
+        }
+
+        .value {
+          color: var(--color-granite);
+        }
+      }
+    }
+  }
+
+  .delete-modal {
+    z-index: 10;
+  }
+}