feat(files): add drag & drop to specific folder

README.md

@@ -67,7 +67,7 @@ Before you can run the tests you need to have a working test environment.
 To do so copy the example env file:
 
 ```
-$ cp cyress.env.example cypress.env.json
+$ cp cyress.env.json.example cypress.env.json
 ```
 
 Then open it and set variables values as appropriate:

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@bimdata/bcf-components": "4.1.0-rc.7",
     "@bimdata/building-maker": "1.5.2",
-    "@bimdata/design-system": "2.0.0-rc.2",
+    "@bimdata/design-system": "2.0.0-rc.4",
     "@bimdata/guided-tour-components": "1.0.3",
     "@bimdata/typescript-fetch-api-client": "9.6.4",
     "@bimdata/viewer": "^1.10.0-rc.50",

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

@@ -217,9 +217,9 @@
             @download="downloadFiles([$event])"
             @file-clicked="onFileSelected"
             @file-uploaded="$emit('file-uploaded')"
-            @dragover.prevent="() => {}"
+            @dragover.prevent
             @drop.prevent="uploadFiles"
-            @row-drop="({ data, event }) => null"
+            @row-drop="({ event, data }) => uploadFiles(event, data)"
             @selection-changed="setSelection"
             @manage-access="openAccessManager"
             @open-visa-manager="openVisaManager"
@@ -464,17 +464,14 @@ export default {
 
     const filesToUpload = ref([]);
     const foldersToUpload = ref([]);
-    const uploadFiles = async (event, folder) => {
+    const uploadFiles = async (event, folder = currentFolder.value) => {
       const { files, folders } = await getFilesFromEvent(event);
+      files.forEach(file => (file.folder = folder));
 
       filesToUpload.value = files;
       foldersToUpload.value = await Promise.all(
         folders.map(f =>
-          FileService.createFolderStructure(
-            props.project,
-            folder ?? currentFolder.value,
-            f
-          )
+          FileService.createFolderStructure(props.project, folder, f)
         )
       );
 

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

@@ -6,12 +6,13 @@
     tableLayout="fixed"
     :columns="columns"
     :rows="files"
+    :canDragOverRow="file => !file.file"
     rowKey="id"
     :rowHeight="54"
     :selectable="true"
     @selection-changed="$emit('selection-changed', $event)"
+    @row-drop="onRowDrop"
     :placeholder="$t('FilesTable.emptyTablePlaceholder')"
-    @row-dropped-over="$emit('row-dropped-over', $event)"
   >
     <template #sub-header>
       <div
@@ -40,7 +41,7 @@
           :key="file.key"
           condensed
           :project="project"
-          :folder="folder"
+          :folder="file.folder"
           :file="file"
           @upload-completed="onUploadCompleted(file.key, $event)"
           @upload-canceled="cleanUpload(file.key, 6000)"
@@ -166,10 +167,10 @@ export default {
     "manage-access",
     "open-versioning-manager",
     "open-visa-manager",
-    "selection-changed",
     "open-tag-manager",
     "remove-model",
-    "row-dropped-over"
+    "row-drop",
+    "selection-changed"
   ],
   setup(props, { emit }) {
     const { t } = useI18n();
@@ -194,6 +195,12 @@ export default {
       }));
     });
 
+    const onRowDrop = ({ event, data }) => {
+      event.preventDefault();
+      event.stopPropagation();
+      emit("row-drop", { event, data });
+    };
+
     let nameEditMode;
     watch(
       () => props.files,
@@ -255,10 +262,18 @@ export default {
       cleanUpload,
       formatBytes,
       isFolder,
+      onRowDrop,
       onUploadCompleted,
       // Responsive breakpoints
       isXL
     };
   }
 };
 </script>
+
+<style>
+.bimdata-table__row--drag-overed {
+  outline: solid var(--color-primary) 1px;
+  outline-offset: -1px;
+}
+</style>

src/utils/async.js

@@ -4,9 +4,9 @@ function delay(ms) {
 
 function debounce(callback, ms) {
   let timeoutID = null;
-  return () => {
+  return (...args) => {
     clearTimeout(timeoutID);
-    timeoutID = setTimeout(callback, ms);
+    timeoutID = setTimeout(() => callback(...args), ms);
   };
 }