component / BIMDataPDFViewer

components.js

@@ -31,3 +31,4 @@ export { default as BIMDataTextarea } from "./dist/js/BIMDataComponents/BIMDataT
 export { default as BIMDataTextbox } from "./dist/js/BIMDataComponents/BIMDataTextbox.js";
 export { default as BIMDataToggle } from "./dist/js/BIMDataComponents/BIMDataToggle.js";
 export { default as BIMDataTooltip } from "./dist/js/BIMDataComponents/BIMDataTooltip.js";
+export { default as BIMDataPDFViewer } from "./dist/js/BIMDataComponents/BIMDataPDFViewer.js";

rollup.config.js

@@ -237,6 +237,7 @@ function getSingleComponentConfigurations() {
     "BIMDataTextbox",
     "BIMDataToggle",
     "BIMDataTooltip",
+    "BIMDataPDFViewer",
   ];
 
   return [

src/BIMDataComponents/BIMDataPDFViewer/BIMDataPDFViewer.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="pdf-viewer">
+    <BIMDataLoading v-if="isLoading" />
+    <div v-else class="pdf-viewer__header">
+      <BIMDataButton
+        width="32px"
+        height="32px"
+        color="primary"
+        ghost
+        radius
+        icon
+        @click="onCloseClick"
+      >
+        <BIMDataIcon name="arrow" size="xxs" />
+      </BIMDataButton>
+      <div class="pdf-viewer__header--text text-center">
+        <BIMDataTextbox :text="pdf.name" width="70%" />
+      </div>
+    </div>
+    <object
+      v-if="pdfUrl"
+      type="application/pdf"
+      :data="pdfUrl"
+      width="100%"
+      height="100%"
+    ></object>
+  </div>
+</template>
+
+<script>
+import BIMDataIcon from "../BIMDataIcon/BIMDataIcon.vue";
+import BIMDataButton from "../BIMDataButton/BIMDataButton.vue";
+import BIMDataTextbox from "../BIMDataTextbox/BIMDataTextbox.vue";
+import BIMDataLoading from "../BIMDataLoading/BIMDataLoading.vue";
+
+export default {
+  components: { BIMDataIcon, BIMDataButton, BIMDataTextbox, BIMDataLoading },
+  props: {
+    pdf: {
+      type: [Object, File],
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      pdfUrl: null,
+    };
+  },
+  async created() {
+    this.isLoading = true;
+    if (this.pdf.file) {
+      try {
+        const res = await fetch(this.pdf.file);
+        const blob = await res.blob();
+        this.pdfUrl = window.URL.createObjectURL(blob);
+      } catch (err) {
+        console.err("Error fetching the pdf file", err);
+      }
+    } else {
+      this.pdfUrl = window.URL.createObjectURL(this.pdf);
+    }
+    this.isLoading = false;
+  },
+
+  methods: {
+    onCloseClick() {
+      this.$emit("close-pdf");
+      this.pdfUrl = null;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// import BIMDATA VARIABLES
+@import "../../assets/scss/_BIMDataVariables.scss";
+
+.pdf-viewer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: var(--color-white);
+  overflow: hidden;
+  z-index: 2;
+  &__header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 42px;
+    font-size: 12px;
+    &--text {
+      width: calc(100% - 32px);
+    }
+  }
+  object {
+    height: calc(100% - 42px);
+  }
+}
+</style>

src/BIMDataComponents/index.js

@@ -41,3 +41,4 @@ export { default as BIMDataTextarea } from "./BIMDataTextarea/BIMDataTextarea.vu
 export { default as BIMDataTextbox } from "./BIMDataTextbox/BIMDataTextbox.vue";
 export { default as BIMDataToggle } from "./BIMDataToggle/BIMDataToggle.vue";
 export { default as BIMDataTooltip } from "./BIMDataTooltip/BIMDataTooltip.vue";
+export { default as BIMDataPDFViewer } from "./BIMDataPDFViewer/BIMDataPDFViewer.vue";

src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.scss

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-unit);
+  position: relative;
 
   &__header {
     display: flex;

src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="bimdata-file-manager">
+    <BIMDataPDFViewer
+      v-if="pdfToView"
+      :pdf="pdfToView"
+      @close-pdf="pdfToView = null"
+    />
     <div
       class="bimdata-file-manager__header"
       :class="{
@@ -93,9 +98,11 @@
             @toggle-select="onToggleFileSelect(file)"
             @rename="onRename(file)"
             @delete="onDelete(file)"
+            @view="onView(file)"
             @dowload="onDowload(file)"
             @loaded="onFileLoaded(file, $event)"
             :writeAccess="currentFolder.user_permission >= 100"
+            :viewPdf="viewPdf"
           />
         </BIMDataResponsiveGrid>
       </div>
@@ -141,6 +148,7 @@ import BIMDataLoading from "../../BIMDataComponents/BIMDataLoading/BIMDataLoadin
 import BIMDataIcon from "../../BIMDataComponents/BIMDataIcon/BIMDataIcon.vue";
 import BIMDataButton from "../../BIMDataComponents/BIMDataButton/BIMDataButton.vue";
 import BIMDataTextbox from "../../BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue";
+import BIMDataPDFViewer from "../../BIMDataComponents/BIMDataPDFViewer/BIMDataPDFViewer.vue";
 
 import FileCard from "./components/FileCard.vue";
 import NewFolderButton from "./components/newFolder/NewFolderButton.vue";
@@ -172,6 +180,7 @@ export default {
     BIMDataTextbox,
     RenameModal,
     DeleteModal,
+    BIMDataPDFViewer,
   },
   provide() {
     return {
@@ -227,6 +236,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    viewPdf: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -240,6 +253,7 @@ export default {
       entityRenown: false,
       entityDeletable: false,
       successFileIds: [],
+      pdfToView: null,
     };
   },
   computed: {
@@ -454,6 +468,9 @@ export default {
       });
       this.entityRenown = null;
     },
+    onView(file) {
+      this.pdfToView = file;
+    },
     onResize(entries) {
       entries.forEach(entry => {
         this.width = entry.target.clientWidth;

src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard.vue

@@ -63,6 +63,16 @@
         v-if="menuDisplayed"
         v-clickaway="away"
       >
+        <BIMDataButton
+          v-if="viewPdf && file.model_type === 'PDF'"
+          color="default"
+          ghost
+          radius
+          width="100%"
+          @click.stop="onViewClick"
+        >
+          {{ $translate("view") }}
+        </BIMDataButton>
         <BIMDataButton
           color="default"
           ghost
@@ -182,6 +192,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    viewPdf: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -266,6 +280,10 @@ export default {
       this.menuDisplayed = false;
       this.$emit("delete");
     },
+    onViewClick() {
+      this.menuDisplayed = false;
+      this.$emit("view");
+    },
     onClick() {
       if (this.isFolder) {
         this.$emit("open-folder");
@@ -289,7 +307,7 @@ export default {
 @import "../../../assets/scss/BIMDataVariables";
 
 .file-card {
-  height: 179px;
+  height: 192px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -309,7 +327,7 @@ export default {
       z-index: 1;
       left: calc(var(--spacing-unit) / 3);
       right: calc(var(--spacing-unit) / 3);
-      bottom: var(--spacing-unit);
+      top: calc(var(--spacing-unit) * 3);
       box-shadow: var(--box-shadow);
     }
 
@@ -356,7 +374,7 @@ export default {
     }
 
     &__footer {
-      height: 90px;
+      height: calc(100% - 65px);
       display: flex;
       flex-direction: column;
       justify-content: space-between;

src/BIMDataSmartComponents/BIMDataFileManager/i18n.js

@@ -15,6 +15,7 @@ const en = {
   buttonText: "New folder",
   addFileButtonText: "Upload a file",
   rename: "Rename",
+  view: "View",
   download: "Download",
   delete: "Delete",
   deleteTitle: "Deleting Files",
@@ -40,6 +41,7 @@ const fr = {
   buttonText: "Nouveau dossier",
   addFileButtonText: "Charger un fichier",
   rename: "Renommer",
+  view: "Voir",
   download: "Télécharger",
   delete: "Supprimer",
   deleteTitle: "Supression de fichiers",
@@ -65,6 +67,7 @@ const es = {
   buttonText: "Carpeta nueva",
   addFileButtonText: "Cargar un archivo",
   rename: "Renombrar",
+  view: "Ver",
   download: "Descargar",
   delete: "Borrar",
   deleteTitle: "Eliminar archivos",
@@ -89,6 +92,7 @@ const de = {
   buttonText: "Neuer Ordner",
   addFileButtonText: "Datei laden",
   rename: "Umbenennen",
+  view: "Sehen",
   download: "Herunterladen",
   delete: "Löschen",
   deleteTitle: "Dateien löschen",
@@ -113,6 +117,7 @@ const it = {
   buttonText: "Nuova cartella",
   addFileButtonText: "Carica un file",
   rename: "Rinominare",
+  view: "Vedere",
   download: "Scaricare",
   delete: "Cancellare",
   deleteTitle: "Eliminazione di file",

src/web/views/SmartComponents/FileManager/FileManager.vue

@@ -14,11 +14,12 @@
             :select="selectChecked"
             :multi="multiChecked"
             @selection-change="onSelectionChange"
-            style="resize: auto; overflow: hidden;"
+            style="resize: auto; overflow: hidden"
             :headerButtons="headerButtons"
             :headerSearch="headerSearch"
             :alreadySelectedIds="[2694]"
             :selectableFileTypes="['pdf', 'dwg']"
+            viewPdf
           />
         </template>