MINOR: feat: display pdf page selection in file manager

bimdata · Aug 16, 2023 · 33a5aa1 · 33a5aa1
1 parent 31e525a
commit 33a5aa1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/src/BIMDataFileManager/BIMDataFileManager.vue b/src/BIMDataFileManager/BIMDataFileManager.vue
@@ -66,16 +66,8 @@
         v-if="navigationShown"
         class="bimdata-file-manager__navigation__content"
       >
-        <BIMDataButton
-          color="default"
-          icon
-          radius
-          ghost
-          width="33px"
-          height="31px"
-          @click="back"
-        >
-          <BIMDataIconArrow />
+        <BIMDataButton ghost radius icon @click="back">
+          <BIMDataIconArrow size="xxs" />
         </BIMDataButton>
         <BIMDataTextbox
           :text="currentFolder.name"
@@ -115,11 +107,12 @@
             @rename="onRename(file)"
             @delete="onDelete(file)"
             @view="onView(file)"
-            @dowload="onDowload(file)"
+            @download="onDownload(file)"
             @loaded="onFileLoaded(file, $event)"
             :writeAccess="currentFolder.user_permission >= 100"
             :viewPdf="viewPdf"
             :pdfModelLoading="pdfModelLoading === file.id"
+            :pdfPage="selectedPdfPage(file)"
           />
         </BIMDataResponsiveGrid>
       </div>
@@ -443,7 +436,7 @@ export default {
         }
       }, SUCCESS_TIME);
     },
-    onDowload(entity) {
+    onDownload(entity) {
       try {
         downloadFiles(getFlattenTree(entity), {
           projectId: this.projectId,
@@ -570,6 +563,9 @@ export default {
     isFileSelected(file) {
       return this.selectedFiles.some(({ document }) => file === document);
     },
+    selectedPdfPage(file) {
+      return this.selectedFiles.find(({ document }) => file === document)?.pdfPage;
+    },
     onBreadcrumClick(step) {
       this.currentFolder = step;
     },

diff --git a/src/BIMDataFileManager/components/FileCard.vue b/src/BIMDataFileManager/components/FileCard.vue
@@ -34,9 +34,9 @@
           >
             <BIMDataIconEllipsis size="l" fill color="granite-light" />
           </BIMDataButton>
-          <div v-else-if="!isFolder">
+          <div v-else-if="!isFolder" class="selection-box">
             <template v-if="pdfModelLoading">
-              <BIMDataSpinner style="margin: 10px" />
+              <BIMDataSpinner style="margin: 6px" />
             </template>
             <template v-else>
               <BIMDataCheckbox
@@ -53,6 +53,9 @@
                 name="BIMDataFileCardRadio"
               />
             </template>
+            <div v-if="pdfPage" class="selection-text">
+              {{ `page ${pdfPage.page_number}` }}
+            </div>
           </div>
         </div>
         <template v-if="file.nature === 'Folder'">
@@ -191,6 +194,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfPage: {
+      type: Object,
+      default: null
+    },
   },
   emits: [
     "rename",
@@ -279,7 +286,7 @@ export default {
     },
     onDownloadClick() {
       this.menuDisplayed = false;
-      this.$emit("dowload");
+      this.$emit("download");
     },
     onDeleteClick() {
       this.menuDisplayed = false;
@@ -373,6 +380,18 @@ export default {
           top: 6px;
           right: 6px;
         }
+
+        .selection-box {
+          position: relative;
+          .selection-text {
+            position: absolute;
+            right: 0;
+            margin-top: 12px;
+            margin-right: 6px;
+            font-size: 12px;
+            white-space: nowrap;
+          }
+        }
       }
     }