feat(files-manager): sort files and add filter feature + create file …

…action menu
bimdata · Jun 4, 2021 · d7e7ad6 · d7e7ad6
1 parent 672425e
commit d7e7ad6
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 15 deletions.
diff --git a/src/components/specific/files/files-manager/FilesManager.vue b/src/components/specific/files/files-manager/FilesManager.vue
@@ -34,6 +34,8 @@
           class="files-manager__actions__input-search"
           width="400px"
           :placeholder="$t('FilesManager.searchInputPlaceholder')"
+          v-model="searchText"
+          clear
         />
       </div>
       <FileTree
@@ -47,7 +49,7 @@
       <FilesTable
         class="files-manager__table"
         :project="project"
-        :files="currentFiles"
+        :files="displayedFiles"
         @file-selected="onFileSelected"
       />
 
@@ -57,7 +59,7 @@
 </template>
 
 <script>
-import { ref, watch } from "@vue/runtime-core";
+import { ref, watch, watchEffect } from "vue";
 // Components
 import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataCard.js";
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
@@ -96,27 +98,57 @@ export default {
   setup(props) {
     const currentFolder = ref(null);
     const currentFiles = ref([]);
-
     watch(
       () => props.fileStructure,
       () => (currentFolder.value = props.fileStructure),
       { immediate: true }
     );
     watch(
       () => currentFolder.value,
-      folder => (currentFiles.value = folder.children),
+      folder => {
+        const childrenFolders = folder.children
+          .filter(child => child.type === "Folder")
+          .sort((a, b) => (a.name < b.name ? -1 : 1));
+        const childrenFiles = folder.children
+          .filter(child => child.type !== "Folder")
+          .sort((a, b) => (a.name < b.name ? -1 : 1));
+        currentFiles.value = childrenFolders.concat(childrenFiles);
+      },
       { immediate: true }
     );
-
     const onFileSelected = file => {
       if (file.type === "Folder") {
         currentFolder.value = file;
       }
     };
 
+    const displayedFiles = ref([]);
+    watch(
+      () => currentFiles.value,
+      () => (displayedFiles.value = currentFiles.value),
+      { immediate: true }
+    );
+
+    const searchText = ref("");
+    const filterFiles = value => {
+      const text = value.trim().toLowerCase();
+      if (text) {
+        displayedFiles.value = currentFiles.value.filter(a =>
+          a.name.toLowerCase().includes(text)
+        );
+      } else {
+        displayedFiles.value = currentFiles.value;
+      }
+    };
+    watchEffect(() => filterFiles(searchText.value));
+
     return {
-      currentFiles,
+      // References
+      // currentFiles,
       currentFolder,
+      displayedFiles,
+      searchText,
+      // Methods
       onFileSelected
     };
   }

diff --git a/src/components/specific/files/files-table/FilesTable.vue b/src/components/specific/files/files-table/FilesTable.vue
@@ -3,6 +3,7 @@
     class="files-table"
     :columns="columns"
     :rows="files"
+    :rowHeight="44"
     :selectable="true"
     :placeholder="$t('FilesTable.emptyTablePlaceholder')"
   >

diff --git a/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.scss b/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.scss
@@ -1,5 +1,24 @@
 .file-actions-cell {
+  position: relative;
+
   &__btn {
     color: $color-tertiary-dark;
   }
+
+  &__menu {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+    padding: $spacing-unit/2 0;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+    background-color: $color-white;
+
+    &__btn {
+      justify-content: flex-start;
+    }
+  }
 }
diff --git a/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue b/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue
@@ -1,31 +1,67 @@
 <template>
-  <div class="file-actions-cell">
+  <div class="file-actions-cell" v-click-away="closeMenu">
     <BIMDataButton
       class="file-actions-cell__btn"
       ripple
       rounded
       icon
-      @click="() => {}"
+      @click="toggleMenu"
     >
       <BIMDataIcon name="ellipsis" size="l" />
     </BIMDataButton>
 
     <transition name="fade">
-      <div class="file-actions-cell__menu">
-        <!-- TODO -->
+      <div class="file-actions-cell__menu" v-show="showMenu">
+        <BIMDataButton class="file-actions-cell__menu__btn" ghost squared>
+          {{ $t("FileActionsCell.addTagsButtonText") }}
+        </BIMDataButton>
+        <BIMDataButton class="file-actions-cell__menu__btn" ghost squared>
+          {{ $t("FileActionsCell.validationRequestButtonText") }}
+        </BIMDataButton>
+        <BIMDataButton class="file-actions-cell__menu__btn" ghost squared>
+          {{ $t("FileActionsCell.renameButtonText") }}
+        </BIMDataButton>
+        <BIMDataButton class="file-actions-cell__menu__btn" ghost squared>
+          {{ $t("FileActionsCell.downloadButtonText") }}
+        </BIMDataButton>
+        <BIMDataButton class="file-actions-cell__menu__btn" ghost squared>
+          {{ $t("FileActionsCell.addVersionButtonText") }}
+        </BIMDataButton>
+        <BIMDataButton class="file-actions-cell__menu__btn" ghost squared>
+          {{ $t("FileActionsCell.manageAccessButtonText") }}
+        </BIMDataButton>
       </div>
     </transition>
   </div>
 </template>
 
 <script>
+import { ref } from "@vue/reactivity";
+// Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
 import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
 
 export default {
   components: {
     BIMDataButton,
     BIMDataIcon
+  },
+  setup() {
+    const showMenu = ref(false);
+    const closeMenu = () => {
+      showMenu.value = false;
+    };
+    const toggleMenu = () => {
+      showMenu.value = !showMenu.value;
+    };
+
+    return {
+      // References
+      showMenu,
+      // Methods
+      closeMenu,
+      toggleMenu
+    };
   }
 };
 </script>

diff --git a/src/components/specific/files/files-table/file-name-cell/FileNameCell.scss b/src/components/specific/files/files-table/file-name-cell/FileNameCell.scss
@@ -3,4 +3,8 @@
   align-items: center;
   gap: $spacing-unit/2;
   cursor: pointer;
+
+  &__icon-folder {
+    color: $color-primary;
+  }
 }
diff --git a/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue b/src/components/specific/files/files-table/file-name-cell/FileNameCell.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="file-name-cell">
-    <BIMDataIcon v-if="file.type === 'Folder'" name="folder" size="s" />
+    <BIMDataIcon
+      v-if="file.type === 'Folder'"
+      class="file-name-cell__icon-folder"
+      name="folder"
+      size="m"
+    />
     <FileIcon v-else-if="file.type === 'Ifc'" name="ifc" size="20" />
     <FileIcon v-else :name="fileExtension(file.name)" size="20" />
     <span>{{ file.name }}</span>

diff --git a/src/i18n/lang/en.js b/src/i18n/lang/en.js
@@ -87,8 +87,13 @@ export default {
     message: "Hi {name}, it's great to see you again !"
   },
 
-  FileLastUpdateCell: {
-    at: "at"
+  FileActionsCell: {
+    addTagsButtonText: "Add tags",
+    validationRequestButtonText: "Validation request",
+    renameButtonText: "Rename",
+    downloadButtonText: "Download",
+    addVersionButtonText: "Add version",
+    manageAccessButtonText: "Manage access"
   },
 
   FilesManager: {

diff --git a/src/i18n/lang/fr.js b/src/i18n/lang/fr.js
@@ -87,8 +87,13 @@ export default {
     message: "Bonjour {name}, content de vous revoir !"
   },
 
-  FileLastUpdateCell: {
-    at: "à"
+  FileActionsCell: {
+    addTagsButtonText: "Ajouter des tags",
+    validationRequestButtonText: "Demande de validation",
+    renameButtonText: "Renommer",
+    downloadButtonText: "Télécharger",
+    addVersionButtonText: "Ajouter une version",
+    manageAccessButtonText: "Gérer les accès"
   },
 
   FilesManager: {