add folderSelector into ProjectOverview for upload file

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,39 @@ 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,
+    },
   },
   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 +108,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 +134,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 +145,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 +166,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,12 +35,12 @@
   &__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;
 
       &.selected {
@@ -61,7 +62,7 @@
 
       &__name {
         flex-grow: 1;
-        max-width: calc(100% - 50px);
+        max-width: calc(100% - 30px);
         padding: 0 calc(var(--spacing-unit) / 2);
       }
     }
@@ -83,7 +84,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%;

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

@@ -2,29 +2,27 @@
   <div class="folder-selector">
     <div class="folder-selector__head">
       <BIMDataButton
+        v-show="currentFolder.id !== fileStructure.id"
         class="folder-selector__head__btn-back"
         ghost
         rounded
         icon
         :disabled="currentFolder.id === fileStructure.id"
         @click="exitFolder"
+        width="13px"
       >
-        <BIMDataIconArrow size="xs" />
+        <BIMDataIconArrow size="xxs" />
       </BIMDataButton>
 
-      <BIMDataIconFolder size="xs" />
-      <BIMDataTextbox
-        class="folder-selector__head__name"
-        maxWidth="120px"
-        :text="currentFolder.name"
-      />
-      <BIMDataButton
-        class="folder-selector__head__btn-close"
-        ghost
-        rounded
-        icon
-        @click="close"
-      >
+      <div class="flex items-center">
+        <BIMDataIconFolder size="xs" margin="0 6px 0 0" />
+        <BIMDataTextbox
+          class="folder-selector__head__name"
+          maxWidth="180px"
+          :text="currentFolder.name"
+        />
+      </div>
+      <BIMDataButton class="folder-selector__head__btn-close" ghost rounded icon @click="close">
         <BIMDataIconClose size="xxs" />
       </BIMDataButton>
     </div>
@@ -35,7 +33,7 @@
         :key="file.id"
         :class="{
           folder: isFolder(file),
-          selected: selectedFolder && selectedFolder.id === file.id
+          selected: selectedFolder && selectedFolder.id === file.id,
         }"
         @click="selectFolder(file)"
         @dblclick="enterFolder(file)"
@@ -49,16 +47,9 @@
           :text="file.name"
           :tooltip="false"
         />
-        <BIMDataIconChevron
-          v-if="isFolder(file)"
-          size="xxs"
-          @click.stop="enterFolder(file)"
-        />
+        <BIMDataIconChevron v-if="isFolder(file)" size="xxs" @click.stop="enterFolder(file)" />
       </div>
-      <div
-        v-show="displayedFiles.length === 0"
-        class="folder-selector__body__placeholder"
-      >
+      <div v-show="displayedFiles.length === 0" class="folder-selector__body__placeholder">
         <BIMDataIconFolderOpen
           class="folder-selector__body__placeholder__icon"
           size="xxxl"
@@ -68,15 +59,12 @@
       </div>
     </div>
     <div class="folder-selector__footer">
-      <div
-        class="folder-selector__footer__text"
-        :class="{ visibility: selectedFolder }"
-      >
+      <div class="folder-selector__footer__text" :class="{ visibility: selectedFolder }">
         {{ $t("FolderSelector.selectedFolder") }}:
         <BIMDataTextbox
           style="font-weight: bold"
           width="auto"
-          maxWidth="100px"
+          maxWidth="calc(100% - 130px)"
           :text="selectedFolder ? selectedFolder.name : ''"
         />
       </div>
@@ -89,7 +77,13 @@
         @click="submit"
         :disabled="isAllowedToMoveFile"
       >
-        {{ selectedFolder ? $t("t.validate") : $t("FolderSelector.moveHere") }}
+        {{
+          context === "upload"
+            ? $t("FolderSelector.uploadHere")
+            : selectedFolder
+              ? $t("t.validate")
+              : $t("FolderSelector.moveHere")
+        }}
       </BIMDataButton>
     </div>
   </div>
@@ -105,20 +99,25 @@ export default {
   props: {
     project: {
       type: Object,
-      required: true
+      required: true,
     },
     fileStructure: {
       type: Object,
-      required: true
+      required: true,
     },
     files: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     initialFolder: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
+    context: {
+      type: String,
+      default: "move",
+      validator: (value) => ["move", "upload"].includes(value),
+    },
   },
   emits: ["close", "folder-selected"],
   setup(props, { emit }) {
@@ -133,21 +132,20 @@ export default {
       handler
         .children(currentFolder.value)
         .filter(
-          child =>
-            !props.files.some(f => child.id === f.id) &&
-            hasAdminPerm(props.project, child)
+          (child) =>
+            !props.files.some((f) => child.id === f.id) && hasAdminPerm(props.project, child),
         )
         .sort((a, b) => {
           if (isFolder(a) && !isFolder(b)) return -1;
           if (!isFolder(a) && isFolder(b)) return 1;
 
           return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
-        })
+        }),
     );
 
     const isAllowedToMoveFile = computed(() => {
       const activeFolder = (selectedFolder.value || currentFolder.value).id;
-      return props.files.some(f => activeFolder === f.parent_id);
+      return props.files.some((f) => activeFolder === f.parent_id);
     });
 
     const set = () => {
@@ -170,7 +168,7 @@ export default {
       close();
     };
 
-    const enterFolder = folder => {
+    const enterFolder = (folder) => {
       if (!isFolder(folder)) return;
 
       folderPath.value.push(currentFolder.value);
@@ -182,7 +180,7 @@ export default {
       currentFolder.value = folderPath.value.pop();
     };
 
-    const selectFolder = folder => {
+    const selectFolder = (folder) => {
       if (!isFolder(folder)) return;
 
       if (selectedFolder.value && selectedFolder.value.id === folder.id) {
@@ -195,7 +193,7 @@ export default {
     watch(
       () => props.initialFolder,
       () => set(),
-      { immediate: true }
+      { immediate: true },
     );
 
     return {
@@ -211,9 +209,9 @@ export default {
       selectFolder,
       submit,
       isAllowedToMoveFile,
-      isFolder
+      isFolder,
     };
-  }
+  },
 };
 </script>
 

src/components/specific/models/models-manager/generic-models-manager/GenericModelsManager.scss

@@ -31,6 +31,13 @@
     }
   }
 
+  .folder-selector {
+    position: absolute;
+    top: 48px;
+    right: 6px;
+    z-index: 10;
+  }
+
   &__separator {
     width: 100%;
     height: 1px;