PATCH: fix: apply migration changes

bimdata · Jul 4, 2023 · 25492cf · 25492cf
1 parent 8e11518
commit 25492cf
Show file tree

Hide file tree

Showing 12 changed files with 253 additions and 51 deletions.
diff --git a/src/BIMDataFileManager/BIMDataFileManager.scss b/src/BIMDataFileManager/BIMDataFileManager.scss
@@ -1,5 +1,3 @@
-@import "@bimdata/design-system/dist/scss/BIMDataVariables.scss";
-
 .bimdata-file-manager {
   width: 100%;
 
@@ -68,6 +66,14 @@
     }
   }
 
+  &__pdf-page-selector {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   &__modal {
     position: absolute;
     top: 0px;
@@ -107,9 +113,9 @@
         align-items: center;
         justify-content: center;
         font-size: small;
-        color: $color-granite;
+        color: var(--color-granite);
         span {
-          margin-top: calc($spacing-unit * 2);
+          margin-top: calc(var(--spacing-unit) * 2);
         }
       }
     }

diff --git a/src/BIMDataFileManager/BIMDataFileManager.vue b/src/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"
@@ -158,11 +169,13 @@
 <script>
 import { makeBIMDataApiClient } from "@bimdata/typescript-fetch-api-client";
 
+import BIMDataPDFViewer from "../BIMDataPDFViewer/BIMDataPDFViewer.vue";
 import FileCard from "./components/FileCard.vue";
 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";
@@ -182,6 +195,8 @@ export default {
     UploadFileButton,
     RenameModal,
     DeleteModal,
+    BIMDataPDFViewer,
+    PdfPageSelector,
   },
   provide() {
     return {
@@ -241,6 +256,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfPageSelect: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -255,6 +274,9 @@ export default {
       entityDeletable: false,
       successFileIds: [],
       pdfToView: null,
+      pdfModel: null,
+      pdfModelLoading: null,
+      pdfPageSelectorDisplayed: false,
     };
   },
   computed: {
@@ -359,15 +381,16 @@ export default {
   },
   methods: {
     isDisabled(file) {
-      if (file.file) {
-        const extensionMatch = file.file_name.match(/\.(\w+$)/);
-        const fileExtension = extensionMatch && extensionMatch[1];
-        return (
-          this.select &&
-          this.selectableFileTypes.length > 0 &&
-          !(fileExtension && this.selectableFileTypes.includes(fileExtension))
-        );
-      }
+      if (file.nature === "Folder") return false;
+
+      const extensionMatch = file.file_name?.match(/\.(\w+$)/);
+      const fileExtension = extensionMatch && extensionMatch[1];
+
+      return (
+        this.select &&
+        this.selectableFileTypes.length > 0 &&
+        !(fileExtension && this.selectableFileTypes.includes(fileExtension))
+      );
     },
     onKeyDown(e) {
       if (e.key === "Escape") {
@@ -508,21 +531,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;

diff --git a/src/BIMDataFileManager/components/FileCard.vue b/src/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'">
@@ -183,6 +188,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfModelLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     "rename",
@@ -301,8 +310,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@bimdata/design-system/dist/scss/BIMDataVariables.scss";
-
 .file-card {
   height: 192px;
   display: flex;

diff --git a/src/BIMDataFileManager/components/MultiLineTextBox/MultiLineTextBox.vue b/src/BIMDataFileManager/components/MultiLineTextBox/MultiLineTextBox.vue
@@ -19,9 +19,7 @@
           <div class="multi-line-text-box__content__tail__text">
             <span>{{ text }} </span>
           </div>
-          <div class="multi-line-text-box__content__tail__ellipsis">
-            ...
-          </div>
+          <div class="multi-line-text-box__content__tail__ellipsis">...</div>
         </div>
       </template>
       <span class="multi-line-text-box__content__full" v-else>
@@ -98,7 +96,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .multi-line-text-box {
   position: relative;
   line-height: var(--textbox-line-height, 14px);

diff --git a/src/BIMDataFileManager/components/MultiLineTextBox/Tooltip.vue b/src/BIMDataFileManager/components/MultiLineTextBox/Tooltip.vue
@@ -16,7 +16,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .multi-line-textbox-tooltip {
   width: 100%;
   &__content {
@@ -35,6 +35,7 @@ export default {
   }
   &::before {
     content: "";
+    display: block;
     position: absolute;
     top: -8px;
     border: var(--color-primary) solid 8px;