feat(files): add create folder feature for onboarding

bimdata · Jun 15, 2021 · 93e7c7a · 93e7c7a
1 parent 8e03fd8
commit 93e7c7a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git a/src/components/specific/files/files-manager/FilesManager.vue b/src/components/specific/files/files-manager/FilesManager.vue
@@ -72,6 +72,7 @@
         <FilesManagerOnboarding
           class="files-manager__onboarding"
           :project="project"
+          :rootFolder="fileStructure"
         />
       </template>
     </template>

diff --git a/...ponents/specific/files/files-manager/files-manager-onboarding/FilesManagerOnboarding.scss b/...ponents/specific/files/files-manager/files-manager-onboarding/FilesManagerOnboarding.scss
@@ -10,4 +10,22 @@
     display: flex;
     gap: $spacing-unit;
   }
+
+  &__overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: $spacing-unit;
+    background-color: rgba(255, 255, 255, 0.5);
+
+    &__folder-form {
+      position: relative;
+      top: 33%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 440px;
+      padding: $spacing-unit;
+      @include box-shadow;
+    }
+  }
 }
diff --git a/...mponents/specific/files/files-manager/files-manager-onboarding/FilesManagerOnboarding.vue b/...mponents/specific/files/files-manager/files-manager-onboarding/FilesManagerOnboarding.vue
@@ -24,28 +24,56 @@
         {{ $t("FilesManagerOnboarding.createFolderButtonText") }}
       </BIMDataButton>
     </div>
+    <transition name="fade">
+      <div
+        v-show="showFolderForm"
+        class="files-manager-onboarding__overlay"
+      >
+        <FolderCreationForm
+          v-if="showFolderForm"
+          class="files-manager-onboarding__overlay__folder-form"
+          :project="project" :folder="rootFolder"
+          @close="showFolderForm = false"
+          @success="showFolderForm = false"
+        />
+      </div>
+    </transition>
   </div>
 </template>
 
 <script>
+import { ref } from "vue";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import FolderCreationForm from "@/components/specific/files/folder-creation-form/FolderCreationForm";
 
 export default {
   components: {
-    BIMDataButton
+    BIMDataButton,
+    FolderCreationForm
   },
   props: {
     project: {
       type: Object,
       required: true
+    },
+    rootFolder: {
+      type: Object,
+      required: true
     }
   },
   setup() {
+    const showFolderForm  = ref(false);
+
     const uploadFile = () => {};
-    const createFolder = () => {};
+
+    const createFolder = () => {
+      showFolderForm.value = true;
+    };
 
     return {
+      // References
+      showFolderForm,
       // Methods
       createFolder,
       uploadFile

diff --git a/src/state/projects.js b/src/state/projects.js
@@ -37,7 +37,7 @@ const loadProjectUsers = async project => {
   const { mapUsers } = useUser();
   let users = [];
   if (project.isAdmin) {
-    await ProjectService.fetchProjectUsers(project);
+    users = await ProjectService.fetchProjectUsers(project);
     users = mapUsers(users);
     users.sort((a, b) =>
       `${a.firstname}${a.lastname}` < `${b.firstname}${b.lastname}` ? -1 : 1