feat(files-manager): add file-upload feature + some fixes on file man…

…agement

src/components/generic/generic-table/GenericTable.scss

@@ -26,6 +26,14 @@
       th {
         font-weight: bold;
         color: $color-primary;
+
+        &.cell-sub-header {
+          min-height: 0;
+          padding: 0;
+          text-align: left;
+          font-weight: normal;
+          color: $color-tertiary-darkest;
+        }
       }
 
       td {

src/components/generic/generic-table/GenericTable.vue

@@ -30,6 +30,14 @@
               </th>
             </template>
           </tr>
+          <tr key="head-row-1">
+            <th
+              class="cell-sub-header"
+              :colspan="columns.length + (selectable ? 1 : 0)"
+            >
+              <slot name="sub-header"></slot>
+            </th>
+          </tr>
         </thead>
         <tbody>
           <template

src/components/generic/mapbox-wrapper/MapboxWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mapbox-wrapper" id="mapbox-container">
+  <div id="mapbox-container" class="mapbox-wrapper">
     <!-- Mapbox will be displayed here -->
   </div>
 </template>

src/components/specific/files/file-upload-button/FileUploadButton.vue

@@ -15,10 +15,7 @@
 </template>
 
 <script>
-import Uppy from "@uppy/core";
-import XHRUpload from "@uppy/xhr-upload";
 import { ref } from "vue";
-import { useAuth } from "@/state/auth";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
@@ -36,69 +33,21 @@ export default {
     height: {
       type: String,
       default: "32px"
-    },
-    project: {
-      type: Object,
-      required: true
-    },
-    folder: {
-      type: Object
     }
   },
-  emits: ["upload-completed", "upload-failed"],
+  emits: ["upload"],
   setup(props, { emit }) {
-    const { accessToken } = useAuth();
-
     const fileInput = ref(null);
 
-    const uppy = new Uppy({
-      id: `project-file-${props.project.id}`,
-      autoProceed: true,
-      restrictions: {
-        maxFileSize: +process.env.VUE_APP_MAX_UPLOAD_SIZE,
-        minNumberOfFiles: 1
-      }
-    });
-    uppy.use(XHRUpload, {
-      method: "POST",
-      endpoint: `${process.env.VUE_APP_API_BASE_URL}/cloud/${props.project.cloud.id}/project/${props.project.id}/document`,
-      fieldName: "file",
-      metaFields: ["name", "parent_id"],
-      headers: {
-        Authorization: `Bearer ${accessToken.value}`
-      }
-    });
-    uppy.on("file-added", () => {
-      // loading.value = true;
-    });
-    uppy.on("upload-error", () => {
-      // loading.value = false;
-      emit("upload-failed");
-    });
-    uppy.on("complete", event => {
-      const document = event.successful[0].response.body;
-      // loading.value = false;
-      uppy.reset(); // reset Uppy instance
-      emit("upload-completed", document);
-    });
-
     const selectFile = () => {
       fileInput.value.click();
     };
     const uploadFile = event => {
       const files = Array.from(event.target.files);
-      files.forEach(file => {
-        if (file) {
-          uppy.addFile({
-            name: file.name,
-            type: file.type,
-            data: file,
-            meta: {
-              parent_id: props.folder.id
-            }
-          });
-        }
-      });
+      if (files.length > 0) {
+        fileInput.value.value = "";
+        emit("upload", files);
+      }
     };
 
     return {

src/components/specific/files/files-manager/FilesManager.vue

@@ -15,8 +15,7 @@
           <FileUploadButton
             class="files-manager__actions__btn-new-file"
             width="194px"
-            :project="project"
-            :folder="currentFolder"
+            @upload="uploadFiles"
           />
           <BIMDataSearch
             class="files-manager__actions__input-search"
@@ -39,18 +38,21 @@
               v-show="selection.length > 0"
               class="files-manager__files__action-bar"
               :files="selection"
-              @delete-clicked="openDeleteModal"
-              @download-clicked="downloadFiles"
-              @move-clicked="() => {}"
+              @delete="openDeleteModal"
+              @download="downloadFiles"
+              @move="moveFiles"
             />
           </transition>
           <FilesTable
             class="files-manager__files__table"
             :project="project"
+            :folder="currentFolder"
             :files="displayedFiles"
-            @delete-clicked="openDeleteModal([$event])"
-            @download-clicked="downloadFiles([$event])"
+            :filesToUpload="filesToUpload"
+            @delete="openDeleteModal([$event])"
+            @download="downloadFiles([$event])"
             @file-clicked="onFileSelected"
+            @file-uploaded="onFileUploaded"
             @selection-changed="setSelection"
           />
         </div>
@@ -110,7 +112,8 @@ export default {
       required: true
     }
   },
-  setup(props) {
+  emits: ["file-uploaded"],
+  setup(props, { emit }) {
     const handler = inject("fileStructureHandler");
     const currentFolder = ref(null);
     const currentFiles = ref([]);
@@ -172,6 +175,14 @@ export default {
       selection.value = models;
     };
 
+    const filesToUpload = ref([]);
+    const uploadFiles = files => {
+      filesToUpload.value = files;
+    };
+    const onFileUploaded = () => {
+      emit("file-uploaded");
+    };
+
     const filesToDelete = ref([]);
     const showDeleteModal = ref(false);
     const openDeleteModal = models => {
@@ -183,6 +194,10 @@ export default {
       showDeleteModal.value = false;
     };
 
+    const moveFiles = () => {
+      // TODO
+    };
+
     const downloadFiles = async files => {
       let filesToDownload = files.filter(f => f.type !== "Folder");
       for (const file of filesToDownload) {
@@ -203,15 +218,19 @@ export default {
       currentFolder,
       displayedFiles,
       filesToDelete,
+      filesToUpload,
       searchText,
       selection,
       showDeleteModal,
       // Methods
       closeDeleteModal,
       downloadFiles,
+      moveFiles,
       onFileSelected,
+      onFileUploaded,
       openDeleteModal,
-      setSelection
+      setSelection,
+      uploadFiles
     };
   }
 };

src/components/specific/files/files-manager/files-action-bar/FilesActionBar.vue

@@ -5,7 +5,7 @@
       color="high"
       ghost
       squared
-      @click="$emit('delete-clicked', files)"
+      @click="$emit('delete', files)"
     >
       <BIMDataIcon name="delete" size="xs" />
       <span>{{ $t("FilesActionBar.deleteButtonText") }}</span>
@@ -15,7 +15,7 @@
       color="secondary"
       ghost
       squared
-      @click="$emit('move-clicked', files)"
+      @click="$emit('move', files)"
     >
       <BIMDataIcon name="folderOpen" size="xs" />
       <span>{{ $t("FilesActionBar.moveButtonText") }}</span>
@@ -24,7 +24,7 @@
       width="120px"
       ghost
       squared
-      @click="$emit('download-clicked', files)"
+      @click="$emit('download', files)"
     >
       <BIMDataIcon name="download" size="s" />
       <span>{{ $t("FilesActionBar.downloadButtonText") }}</span>
@@ -47,7 +47,7 @@ export default {
       default: () => []
     }
   },
-  emits: ["delete-clicked", "download-clicked", "move-clicked"]
+  emits: ["delete", "download", "move"]
 };
 </script>
 

src/components/specific/files/files-table/FilesTable.vue

@@ -9,6 +9,20 @@
     @selection-changed="$emit('selection-changed', $event)"
     :placeholder="$t('FilesTable.emptyTablePlaceholder')"
   >
+    <template #sub-header>
+      <transition-group name="list">
+        <FileUploadCell
+          v-for="file of fileUploads"
+          :key="file.key"
+          :project="project"
+          :folder="folder"
+          :file="file"
+          @upload-completed="onUploadCompleted(file.key, $event)"
+          @upload-canceled="cleanUpload(file.key, 6000)"
+          @upload-failed="cleanUpload(file.key, 12000)"
+        />
+      </transition-group>
+    </template>
     <template #cell-name="{ row: file }">
       <FileNameCell
         :project="project"
@@ -36,9 +50,9 @@
     <template #cell-actions="{ row: file }">
       <FileActionsCell
         :file="file"
-        @delete-clicked="$emit('delete-clicked', $event)"
-        @download-clicked="$emit('download-clicked', $event)"
-        @update-clicked="nameEditMode[file.id] = true"
+        @delete="$emit('delete', $event)"
+        @download="$emit('download', $event)"
+        @update="nameEditMode[file.id] = true"
       />
     </template>
   </GenericTable>
@@ -56,6 +70,7 @@ import FileLastUpdateCell from "./file-last-update-cell/FileLastUpdateCell";
 import FileNameCell from "./file-name-cell/FileNameCell";
 import FileTagsCell from "./file-tags-cell/FileTagsCell";
 import FileTypeCell from "./file-type-cell/FileTypeCell";
+import FileUploadCell from "./file-upload-cell/FileUploadCell";
 
 export default {
   components: {
@@ -64,25 +79,35 @@ export default {
     FileLastUpdateCell,
     FileNameCell,
     FileTagsCell,
-    FileTypeCell
+    FileTypeCell,
+    FileUploadCell
   },
   props: {
     project: {
       type: Object,
       required: true
     },
+    folder: {
+      type: Object,
+      required: true
+    },
     files: {
       type: Array,
       required: true
+    },
+    filesToUpload: {
+      type: Array,
+      default: () => []
     }
   },
   emits: [
-    "delete-clicked",
-    "download-clicked",
+    "delete",
+    "download",
     "file-clicked",
+    "file-uploaded",
     "selection-changed"
   ],
-  setup(props) {
+  setup(props, { emit }) {
     const { locale, t } = useI18n();
 
     const columns = ref([]);
@@ -109,10 +134,38 @@ export default {
       { immediate: true }
     );
 
+    const fileUploads = ref([]);
+    watch(
+      () => props.filesToUpload,
+      () => {
+        fileUploads.value = fileUploads.value.concat(
+          props.filesToUpload.map((file, i) =>
+            Object.assign(file, { key: `${i}-${file.name}` })
+          )
+        );
+      },
+      { immediate: true }
+    );
+
+    const onUploadCompleted = (key, file) => {
+      cleanUpload(key, 500);
+      emit("file-uploaded", file);
+    };
+
+    const cleanUpload = (key, delay = 100) => {
+      setTimeout(() => {
+        const index = fileUploads.value.findIndex(f => f.key === key);
+        fileUploads.value.splice(index, 1);
+      }, delay);
+    };
+
     return {
       // References
+      cleanUpload,
       columns,
+      fileUploads,
       nameEditMode,
+      onUploadCompleted,
       // Methods
       formatBytes
     };