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

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;

src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.vue

@@ -119,6 +119,7 @@
             @loaded="onFileLoaded(file, $event)"
             :writeAccess="currentFolder.user_permission >= 100"
             :viewPdf="viewPdf"
+            :pdfModelLoading="pdfModelLoading === file.id"
           />
         </BIMDataResponsiveGrid>
       </div>
@@ -130,6 +131,16 @@
       </div>
     </template>
     <BIMDataLoading v-else />
+    <div
+      v-if="pdfPageSelectorDisplayed"
+      class="bimdata-file-manager__pdf-page-selector"
+    >
+      <PdfPageSelector
+        :model="pdfModel"
+        @select="selectPdfPage"
+        @close="selectPdfPage"
+      />
+    </div>
     <div class="bimdata-file-manager__modal" v-if="modalDisplayed">
       <RenameModal
         :projectId="projectId"
@@ -171,6 +182,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 +209,7 @@ export default {
     RenameModal,
     DeleteModal,
     BIMDataPDFViewer,
+    PdfPageSelector,
   },
   provide() {
     return {
@@ -256,6 +269,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfPageSelect: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -270,6 +287,9 @@ export default {
       entityDeletable: false,
       successFileIds: [],
       pdfToView: null,
+      pdfModel: null,
+      pdfModelLoading: null,
+      pdfPageSelectorDisplayed: false,
     };
   },
   computed: {
@@ -524,21 +544,44 @@ 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 pdfPage = null;
+        if (this.pdfPageSelect && file.model_type === "PDF") {
+          // If 'pdfPageSelect' mode is on and the selected file is a PDF model
+          // fetch the corresponding model to check its children (pages)
+          this.pdfModelLoading = file.id;
+          const model = await this.apiClient.modelApi.getModel(
+            this.spaceId,
+            file.model_id,
+            this.projectId
+          );
+          this.pdfModelLoading = null;
+          if (model.children?.length > 0) {
+            // If this is a multipage PDF open the page selector
+            this.pdfModel = model;
+            this.pdfPageSelectorDisplayed = true;
+            pdfPage = await new Promise(res => (this.selectPdfPage = res));
+            this.pdfPageSelectorDisplayed = false;
+            this.pdfModel = null;
+            if (!pdfPage) return; // If no page has been selected then the file is not selected
+          }
+        }
+
+        this.selectedFiles.push({ document: file, pdfPage });
       }
       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;

src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard.vue

@@ -36,19 +36,24 @@
             <BIMDataIcon name="ellipsis" size="l" fill color="granite-light" />
           </BIMDataButton>
           <div v-else-if="!isFolder">
-            <BIMDataCheckbox
-              :disabled="disabled"
-              v-if="multiSelect"
-              :modelValue="selected"
-              class="file-card__content__header__btn-menu__checkbox"
-            />
-            <BIMDataRadio
-              :disabled="disabled"
-              v-else
-              big
-              :modelValue="selected"
-              name="BIMDataFileCardRadio"
-            />
+            <template v-if="pdfModelLoading">
+              <BIMDataSpinner style="margin: 10px" />
+            </template>
+            <template v-else>
+              <BIMDataCheckbox
+                :disabled="disabled"
+                v-if="multiSelect"
+                :modelValue="selected"
+                class="file-card__content__header__btn-menu__checkbox"
+              />
+              <BIMDataRadio
+                :disabled="disabled"
+                v-else
+                big
+                :modelValue="selected"
+                name="BIMDataFileCardRadio"
+              />
+            </template>
           </div>
         </div>
         <template v-if="file.nature === 'Folder'">
@@ -126,6 +131,7 @@ import BIMDataIcon from "../../../BIMDataComponents/BIMDataIcon/BIMDataIcon.vue"
 import BIMDataRadio from "../../../BIMDataComponents/BIMDataRadio/BIMDataRadio.vue";
 import BIMDataCheckbox from "../../../BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue";
 import BIMDataFileIcon from "../../../BIMDataComponents/BIMDataFileIcon/BIMDataFileIcon.vue";
+import BIMDataSpinner from "../../../BIMDataComponents/BIMDataSpinner/BIMDataSpinner.vue";
 import clickaway from "../../../BIMDataDirectives/click-away.js";
 
 import PieProgressSpinner from "./PieProgressSpinner.vue";
@@ -138,6 +144,7 @@ export default {
     BIMDataRadio,
     BIMDataCheckbox,
     BIMDataFileIcon,
+    BIMDataSpinner,
     PieProgressSpinner,
     MultiLineTextBox,
   },
@@ -196,6 +203,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfModelLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     "rename",

src/BIMDataSmartComponents/BIMDataFileManager/components/PdfPageSelector.vue

@@ -0,0 +1,158 @@
+<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="title">
+        <BIMDataIcon name="filePdfPolychrome" size="m" margin="0 6px 0 0" />
+        <BIMDataTextbox :text="model.name" />
+      </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 = selectedPage?.id === page.id ? null : 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";
+import BIMDataTextbox from "../../../BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon,
+    BIMDataResponsiveGrid,
+    BIMDataTextbox,
+  },
+  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);
+
+    .title {
+      max-width: calc(100% - 180px);
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .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>

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 = {