feat(project-files): create file manager, file-tree and file-table co…

…mponents

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

@@ -3,7 +3,7 @@
     <div
       class="generic-table__container"
       :style="{
-        height: paginated ? `${(perPage + 1) * rowHeight}px` : undefined
+        height: paginated ? `${(perPage + 1) * rowHeight}px` : '100%'
       }"
     >
       <table>

src/components/specific/files/file-tree/FileTree.scss

@@ -0,0 +1,23 @@
+.file-tree {
+  &:deep() {
+    .file-tree-node {
+      &__node {
+        display: flex;
+        align-items: center;
+        gap: $spacing-unit * 2/3;
+        margin: $spacing-unit * 2/3 0;
+        color: $color-primary;
+        cursor: pointer;
+
+        &__name {
+          @include noselect;
+          align-self: flex-end;
+        }
+      }
+
+      &__children {
+        padding-left: $spacing-unit * 3/2;
+      }
+    }
+  }
+}

src/components/specific/files/file-tree/FileTree.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="file-tree">
+    <FileTreeNode v-if="fileStructure" :file="fileStructure" />
+  </div>
+</template>
+
+<script>
+import { provide } from "@vue/runtime-core";
+import FileTreeNode from "./file-tree-node/FileTreeNode";
+
+export default {
+  components: {
+    FileTreeNode
+  },
+  props: {
+    project: {
+      type: Object,
+      required: true
+    },
+    fileStructure: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["file-selected"],
+  setup(props, { emit }) {
+    provide("selectFile", file => {
+      emit("file-selected", file);
+    });
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./FileTree.scss"></style>

src/components/specific/files/file-tree/file-tree-node/FileTreeNode.vue

@@ -0,0 +1,47 @@
+<script>
+import { h } from "@vue/runtime-core";
+import FileTreeNodeTemplate from "./FileTreeNodeTemplate";
+
+let FileTreeNode;
+
+FileTreeNode = {
+  props: {
+    file: {
+      type: Object,
+      required: true
+    },
+    depth: {
+      type: Number,
+      default: 0
+    }
+  },
+  render() {
+    const file = this.$props.file;
+    const depth = this.$props.depth;
+    const children = (file.children || []).filter(
+      child => child.type === "Folder"
+    );
+
+    const node = h(
+      FileTreeNodeTemplate,
+      {
+        key: file.id,
+        file,
+        depth,
+        hasChildren: children.length > 0
+      },
+      {
+        default() {
+          return children.map(child =>
+            h(FileTreeNode, { file: child, depth: depth + 1 })
+          );
+        }
+      }
+    );
+
+    return node;
+  }
+};
+
+export default FileTreeNode;
+</script>

src/components/specific/files/file-tree/file-tree-node/FileTreeNodeTemplate.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="file-tree-node">
+    <div class="file-tree-node__node">
+      <BIMDataIcon
+        class="file-tree-node__node__icon-arrow"
+        name="chevron"
+        size="xxs"
+        :rotate="isOpen ? 90 : 0"
+        :style="{
+          visibility: hasChildren ? 'visible' : 'hidden'
+        }"
+        @click="toggle"
+      />
+      <BIMDataIcon
+        class="file-tree-node__node__icon-folder"
+        :name="isOpen ? 'folderOpen' : 'folder'"
+        size="s"
+      />
+      <span class="file-tree-node__node__name" @click="select">
+        {{ file.name }}
+      </span>
+    </div>
+    <transition name="fade">
+      <div class="file-tree-node__children" v-show="isOpen">
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { ref } from "@vue/reactivity";
+import { inject } from "@vue/runtime-core";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+
+export default {
+  components: {
+    BIMDataIcon
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true
+    },
+    depth: {
+      type: Number,
+      default: 0
+    },
+    hasChildren: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const isOpen = ref(false);
+    const selectFile = inject("selectFile");
+
+    const toggle = () => {
+      if (props.hasChildren) {
+        isOpen.value = !isOpen.value;
+      }
+    };
+
+    const select = () => {
+      selectFile(props.file);
+    };
+
+    return {
+      // References
+      isOpen,
+      // Methods
+      toggle,
+      select
+    };
+  }
+};
+</script>

src/components/specific/files/file-upload-card/FileUploadCard.vue

@@ -17,7 +17,7 @@
         <template v-if="uploading">
           <span>{{
             `${formatBytes(progress.uploaded)} of ${formatBytes(file.size)}` +
-              ` (${progress.percentage}% done)`
+            ` (${progress.percentage}% done)`
           }}</span>
           <span>{{
             progress.rate ? `${formatBytes(progress.rate)}/s` : ""

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

@@ -1,7 +1,39 @@
 .files-manager {
   &:deep() {
     .bimdata-card__content {
-      height: calc(100% - 35px);
+      height: calc(100% - 35px - 26px);
+
+      display: grid;
+      grid-template-columns: 400px 1fr;
+      grid-template-rows: 32px 1fr;
+      gap: $spacing-unit;
+      grid-template-areas:
+        "actions actions"
+        "tree    table";
+
+      .files-manager__actions {
+        grid-area: actions;
+        display: flex;
+        gap: $spacing-unit;
+
+        &__input-search {
+          font-size: 1rem;
+          background-color: $color-tertiary-lightest;
+          &.focus {
+            background-color: $color-white;
+          }
+        }
+      }
+
+      .files-manager__tree {
+        grid-area: tree;
+        padding: $spacing-unit;
+        @include box-shadow;
+      }
+
+      .files-manager__table {
+        grid-area: table;
+      }
     }
   }
 }