PATCH: feat(files-manager): add pdf page selection feature

bimdata · May 10, 2023 · ffc91d0 · ffc91d0
1 parent 3cf4854
commit ffc91d0
Show file tree

Hide file tree

Showing 8 changed files with 418 additions and 166 deletions.
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.scss b/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.scss
@@ -68,6 +68,14 @@
     }
   }
 
+  &__pdf-page-selector {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   &__modal {
     position: absolute;
     top: 0px;

diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.vue b/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.vue
@@ -130,6 +130,16 @@
       </div>
     </template>
     <BIMDataLoading v-else />
+    <div
+      v-if="pdfPageSelectorDisplayed"
+      class="bimdata-file-manager__pdf-page-selector"
+    >
+      <PdfPageSelector
+        :model="pdfModel"
+        @select="selectPdfPage"
+        @close="selectPdfPage(pdfModel)"
+      />
+    </div>
     <div class="bimdata-file-manager__modal" v-if="modalDisplayed">
       <RenameModal
         :projectId="projectId"
@@ -171,6 +181,7 @@ import NewFolderButton from "./components/newFolder/NewFolderButton.vue";
 import UploadFileButton from "./components/UploadFileButton.vue";
 import RenameModal from "./components/modals/RenameModal.vue";
 import DeleteModal from "./components/modals/DeleteModal.vue";
+import PdfPageSelector from "./components/PdfPageSelector.vue";
 
 import getFlattenTree from "./utils/flattenTree.js";
 import { downloadFiles } from "./utils/files.js";
@@ -197,6 +208,7 @@ export default {
     RenameModal,
     DeleteModal,
     BIMDataPDFViewer,
+    PdfPageSelector,
   },
   provide() {
     return {
@@ -256,6 +268,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfPageSelect: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -270,6 +286,9 @@ export default {
       entityDeletable: false,
       successFileIds: [],
       pdfToView: null,
+      pdfModel: null,
+      pdfPageSelectorDisplayed: false,
+      selectPdfPage: () => {},
     };
   },
   computed: {
@@ -524,21 +543,43 @@ export default {
         content: newFolder,
       });
     },
-    onToggleFileSelect(file) {
+    async onToggleFileSelect(file) {
       if (this.isFileSelected(file)) {
         this.selectedFiles = this.selectedFiles.filter(
-          selectedFile => selectedFile !== file
+          ({ document }) => document !== file
         );
       } else {
         if (!this.multi) {
           this.selectedFiles = [];
         }
-        this.selectedFiles.push(file);
+
+        let model = null;
+        if (file.model_id) {
+          model = await this.apiClient.modelApi.getModel(
+            this.spaceId,
+            file.model_id,
+            this.projectId
+          );
+        }
+        if (
+          this.pdfPageSelect &&
+          file.model_type === "PDF" &&
+          model.children?.length > 0
+        ) {
+          this.pdfModel = model;
+          this.pdfPageSelectorDisplayed = true;
+          model = await new Promise(res => (this.selectPdfPage = res));
+          this.selectPdfPage = () => {};
+          this.pdfPageSelectorDisplayed = false;
+          this.pdfModel = null;
+        }
+
+        this.selectedFiles.push({ document: file, model });
       }
       this.$emit("selection-change", this.selectedFiles);
     },
     isFileSelected(file) {
-      return this.selectedFiles.includes(file);
+      return this.selectedFiles.some(({ document }) => file === document);
     },
     onBreadcrumClick(step) {
       this.currentFolder = step;

diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/PdfPageSelector.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/PdfPageSelector.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="pdf-page-selector">
+    <div class="head">
+      <BIMDataButton ghost radius @click="$emit('close')">
+        <BIMDataIcon name="arrow" size="xxs" />
+        <span style="margin-left: 6px">
+          {{ $translate("back") }}
+        </span>
+      </BIMDataButton>
+      <span class="flex item-center">
+        <BIMDataIcon name="filePdfPolychrome" size="m" margin="0 6px 0 0" />
+        <span>{{ model.name }}</span>
+      </span>
+      <BIMDataButton ghost rounded icon @click="$emit('close')">
+        <BIMDataIcon name="close" size="xxs" />
+      </BIMDataButton>
+    </div>
+    <div class="body">
+      <BIMDataResponsiveGrid
+        style="width: 100%"
+        itemWidth="157px"
+        rowGap="6px"
+        columnGap="6px"
+      >
+        <div
+          v-for="page of pages"
+          :key="page.id"
+          class="pdf-page"
+          :class="{ selected: selectedPage?.id === page.id }"
+          @click="selectedPage = page"
+        >
+          <div class="pdf-page__img">
+            <template v-if="page.map_file">
+              <img :src="page.map_file" :alt="`page ${page.page_number}`" />
+            </template>
+            <template v-else>
+              <BIMDataIcon name="filePdfPolychrome" size="l" />
+            </template>
+          </div>
+          <div class="pdf-page__num">
+            {{ page.page_number }}
+          </div>
+        </div>
+      </BIMDataResponsiveGrid>
+    </div>
+    <div class="foot">
+      <BIMDataButton
+        width="100%"
+        color="primary"
+        fill
+        radius
+        @click="$emit('select', selectedPage)"
+      >
+        {{ $translate("validate") }}
+      </BIMDataButton>
+    </div>
+  </div>
+</template>
+
+<script>
+// Components
+import BIMDataButton from "../../../BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+import BIMDataIcon from "../../../BIMDataComponents/BIMDataIcon/BIMDataIcon.vue";
+import BIMDataResponsiveGrid from "../../../BIMDataComponents/BIMDataResponsiveGrid/BIMDataResponsiveGrid.vue";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon,
+    BIMDataResponsiveGrid,
+  },
+  inject: ["$translate"],
+  props: {
+    model: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ["select", "close"],
+  data() {
+    return {
+      selectedPage: null,
+    };
+  },
+  computed: {
+    pages() {
+      return [this.model].concat(this.model.children ?? []);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.pdf-page-selector {
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-unit);
+  background-color: var(--color-white);
+  display: flex;
+  flex-direction: column;
+
+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-unit);
+  }
+
+  .body {
+    flex-grow: 1;
+    padding: var(--spacing-unit) calc(var(--spacing-unit) / 2);
+    max-height: calc(100% - 2 * var(--spacing-unit) - 32px);
+    overflow-y: auto;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-unit);
+
+    .pdf-page {
+      cursor: pointer;
+
+      &__img {
+        width: 157px;
+        height: 218px;
+        background-color: var(--color-white);
+        box-shadow: var(--box-shadow);
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      &__num {
+        padding-top: calc(var(--spacing-unit) / 2);
+        text-align: center;
+        font-weight: bold;
+      }
+
+      &.selected .pdf-page__img {
+        border: 4px solid var(--color-primary);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/i18n.js b/src/BIMDataSmartComponents/BIMDataFileManager/i18n.js
@@ -22,6 +22,9 @@ const en = {
   deleteDetail:
     "You are about to permanently delete the following files / folders",
   dmsRoot: "Root of the project's DMS",
+  validate: "Validate",
+  back: "Back",
+  pdfPageSelectorTitle: "Select a page",
 };
 
 const fr = {
@@ -48,6 +51,9 @@ const fr = {
   deleteDetail:
     "Vous êtes sur le point de supprimer définitivement les fichiers/dossiers suivants",
   dmsRoot: "Racine de la GED du projet",
+  validate: "Valider",
+  back: "Retour",
+  pdfPageSelectorTitle: "Sélectionner une page",
 };
 
 const es = {