Fix/upload files with folder selector

package.json

@@ -17,35 +17,35 @@
     "@bimdata/components": "1.10.3",
     "@bimdata/design-system": "2.4.4",
     "@bimdata/typescript-fetch-api-client": "10.48.0",
-    "@bimdata/viewer": "2.20.1",
+    "@bimdata/viewer": "2.20.2-beta.4",
     "@paddle/paddle-js": "^1.6.5",
     "async": "^3.2.6",
     "lodash": "^4.18.1",
-    "maplibre-gl": "^6.10.0",
+    "maplibre-gl": "^6.15.0",
     "oidc-client-ts": "^3.5.0",
     "seedrandom": "^3.0.5",
-    "vue": "^3.5.43",
-    "vue-i18n": "^11.4.12",
-    "vue-router": "^5.3.1"
+    "vue": "^3.5.44",
+    "vue-i18n": "^11.4.16",
+    "vue-router": "^5.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^8.0.5",
-    "@babel/preset-env": "^8.0.5",
+    "@babel/core": "^8.0.7",
+    "@babel/preset-env": "^8.0.7",
     "@semantic-release/changelog": "^7.0.0",
     "@semantic-release/git": "^11.0.1",
-    "@vitejs/plugin-vue": "^6.0.9",
-    "babel-jest": "^30.5.1",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "babel-jest": "^30.5.2",
     "conventional-changelog-eslint": "^6.1.0",
-    "cypress": "^16.1.0",
-    "eslint": "^10.10.0",
+    "cypress": "^16.2.0",
+    "eslint": "^10.13.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-vue": "^10.11.0",
-    "jest": "^30.5.1",
-    "prettier": "^3.9.8",
-    "sass-embedded": "^1.104.1",
+    "eslint-plugin-prettier": "^5.5.7",
+    "eslint-plugin-vue": "^10.11.1",
+    "jest": "^30.5.2",
+    "prettier": "^3.9.10",
+    "sass-embedded": "^1.105.2",
     "semantic-release": "^25.0.9",
-    "vite": "^8.3.0",
+    "vite": "^8.3.4",
     "vite-plugin-environment": "^1.1.4"
   }
 }

src/components/specific/files/file-uploader/FileUploader.vue

@@ -8,6 +8,7 @@
           :key="file.key"
           :project="project"
           :file="file"
+          :folder="folder"
           @upload-completed="onUploadCompleted(file.key, $event)"
           @upload-canceled="cleanUpload(file.key, 6000)"
           @upload-failed="cleanUpload(file.key, 12000)"
@@ -43,9 +44,9 @@
         radius
         color="primary"
         @click="
-          fileUploadInput('file', event => uploadFiles(event), {
+          fileUploadInput('file', (event) => uploadFiles(event), {
             accept: allowedFileTypes,
-            multiple: true
+            multiple: true,
           })
         "
       >
@@ -65,35 +66,43 @@ import FileUploadCard from "../file-upload-card/FileUploadCard.js";
 
 export default {
   components: {
-    FileUploadCard
+    FileUploadCard,
   },
   props: {
     isModelUploader: {
       type: Boolean,
-      default: false
+      default: false,
     },
     autoclose: {
       type: Boolean,
-      default: false
+      default: false,
     },
     project: {
       type: Object,
-      required: true
+      required: true,
     },
     allowedFileTypes: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     forbiddenFileTypes: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
+    folder: {
+      type: Object,
+      default: null,
+    },
+    // targetFolder: {
+    //   type: Object,
+    //   default: null,
+    // },
   },
   emits: ["close", "file-uploaded", "forbidden-upload-attempt"],
   setup(props, { emit }) {
     const fileUploads = ref([]);
 
-    const uploadFiles = event => {
+    const uploadFiles = (event) => {
       let files = null;
       if (event.dataTransfer) {
         // Files from drag & drop
@@ -103,22 +112,22 @@ export default {
         files = Array.from(event.target.files);
       }
       const forbiddenUploads = [];
-      files = files.filter(file => {
+      files = files.filter((file) => {
         let shouldUpload = true;
         let fileType = file.type.toLowerCase();
         let fileExt = fileExtension(file.name).toLowerCase();
 
         if (props.allowedFileTypes.length > 0) {
           // Only keep allowed files
           shouldUpload = props.allowedFileTypes
-            .map(type => type.toLowerCase())
-            .some(type => type === fileType || type === fileExt);
+            .map((type) => type.toLowerCase())
+            .some((type) => type === fileType || type === fileExt);
         }
         if (props.forbiddenFileTypes.length > 0) {
           // Discard forbidden files
           shouldUpload = !props.forbiddenFileTypes
-            .map(type => type.toLowerCase())
-            .some(type => type === fileType || type === fileExt);
+            .map((type) => type.toLowerCase())
+            .some((type) => type === fileType || type === fileExt);
         }
         if (!shouldUpload) {
           forbiddenUploads.push(file);
@@ -129,9 +138,7 @@ export default {
       if (forbiddenUploads.length > 0) {
         emit("forbidden-upload-attempt", forbiddenUploads);
       }
-      files = files.map(file =>
-        Object.assign(file, { key: generateFileKey(file) })
-      );
+      files = files.map((file) => Object.assign(file, { key: generateFileKey(file) }));
       fileUploads.value = fileUploads.value.concat(files);
     };
 
@@ -142,7 +149,7 @@ export default {
 
     const cleanUpload = (key, delay = 100) => {
       setTimeout(() => {
-        const index = fileUploads.value.findIndex(f => f.key === key);
+        const index = fileUploads.value.findIndex((f) => f.key === key);
         fileUploads.value.splice(index, 1);
         if (props.autoclose && fileUploads.value.length === 0) {
           setTimeout(() => close(), 800);
@@ -163,9 +170,9 @@ export default {
       close,
       onUploadCompleted,
       uploadFiles,
-      fileUploadInput
+      fileUploadInput,
     };
-  }
+  },
 };
 </script>
 

src/components/specific/files/folder-selector/FolderSelector.scss

@@ -9,6 +9,7 @@
   color: var(--color-primary);
 
   &__head {
+    padding: 0 10px;
     display: flex;
     align-items: center;
     gap: var(--spacing-unit);
@@ -34,14 +35,18 @@
   &__body {
     flex-grow: 1;
     overflow-y: auto;
-    padding: var(--spacing-unit) calc(var(--spacing-unit) / 2);
+    padding: calc(var(--spacing-unit) / 2) 0;
 
     &__item {
       display: flex;
       align-items: center;
-      padding: calc(var(--spacing-unit) / 2);
+      padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
       cursor: pointer;
 
+      &__content {
+        width: inherit;
+      }
+
       &.selected {
         background-color: var(--color-silver);
       }
@@ -61,7 +66,7 @@
 
       &__name {
         flex-grow: 1;
-        max-width: calc(100% - 50px);
+        max-width: calc(100% - 30px);
         padding: 0 calc(var(--spacing-unit) / 2);
       }
     }
@@ -83,7 +88,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    padding: var(--spacing-unit) calc(var(--spacing-unit) / 2);
+    padding: calc(var(--spacing-unit) / 2);
 
     &__text {
       width: 100%;