From 6ffdc57b44825d6c61845a78d47e9a72204eb1af Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 24 Nov 2021 15:34:47 +0530
Subject: [PATCH] feat(gui): add table list filter option

re #783

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/ProjectTreeView.vue     | 79 +++++++++++++------
 1 file changed, 57 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui/components/ProjectTreeView.vue b/packages/nc-gui/components/ProjectTreeView.vue
index 6905481f0f..f53a8d887b 100644
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/packages/nc-gui/components/ProjectTreeView.vue
@@ -26,16 +26,24 @@
                   &lt;!&ndash;        <v-icon v-else>mdi-arrow-expand-horizontal</v-icon>&ndash;&gt;
 
                 </v-btn>-->
-          <!--      <v-text-field-->
-          <!--        v-model="search"-->
-          <!--        label="Search Project"-->
-          <!--        dense-->
-          <!--        solo-->
-          <!--        hide-details-->
-          <!--        clearable-->
-          <!--        clear-icon="mdi-close-circle-outline"-->
-          <!--        class="pa-2"-->
-          <!--      ></v-text-field>-->
+          <v-text-field
+            v-model="search"
+            placeholder="Search tables"
+            dense
+            hide-details
+            class="elevation-0 mr-2  pl-3 pr-1 caption nc-table-list-filter"
+          >
+            <template #prepend-inner>
+              <v-icon small class="mt-2 ml-2 mr-1 ">
+                mdi-magnify
+              </v-icon>
+            </template>
+            <template #append>
+              <v-icon v-if="search" class="mt-3 mr-3" color="grey" x-small @click="search=''">
+                mdi-close
+              </v-icon>
+            </template>
+          </v-text-field>
 
           <v-skeleton-loader
             v-if="!projects || !projects.length"
@@ -108,7 +116,7 @@
               </v-tooltip>
             </template>
           </v-treeview>
-          <v-container v-else fluid class="px-1">
+          <v-container v-else fluid class="px-1 pt-0">
             <v-list dense expand class="nc-project-tree nc-single-env-project-tree">
               <template v-for="item in listViewArr">
                 <!--                   v-if="item.children && item.children.length"-->
@@ -116,7 +124,7 @@
                   v-if="isNested(item) && showNode(item)"
                   :key="item.type"
                   color="textColor"
-                  :value="isActiveList(item)"
+                  :value="isActiveList(item) || search"
                   @click="
                     !(item.children && item.children.length) && addTab({ ...item }, false, false)
                   "
@@ -131,7 +139,7 @@
                     <v-list-item-icon>
                       <v-icon
                         v-if="open && icons[item._nodes.type].openIcon"
-                        x-small
+                        small
                         style="cursor: auto"
                         :color="icons[item._nodes.type].openColor"
                       >
@@ -139,7 +147,7 @@
                       </v-icon>
                       <v-icon
                         v-else
-                        x-small
+                        small
                         style="cursor: auto"
                         :color="icons[item._nodes.type].color"
                       >
@@ -149,17 +157,25 @@
                     <v-list-item-title>
                       <v-tooltip v-if="!isNonAdminAccessAllowed(item)" top>
                         <template #activator="{ on }">
-                          <span class="caption font-weight-regular" v-on="on">
+                          <span v-if="item.type === 'tableDir'" class="caption font-weight-regular" v-on="on">
+                            Tables<template v-if="item.children && item.children.length"> ({{
+                              item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
+                            }})</template></span>
+                          <span v-else class="caption font-weight-regular" v-on="on">
                             {{ item.name }}</span>
                         </template>
                         <span class="caption">Only visible to Creator</span>
                       </v-tooltip>
-                      <span
+                      <template
                         v-else
-                        class="caption font-weight-regular"
-                        @dblclick="showSqlClient = true"
                       >
-                        {{ item.name }}</span>
+                        <span v-if="item.type === 'tableDir'" class="caption font-weight-regular" v-on="on">
+                          Tables<template v-if="item.children && item.children.length"> ({{
+                            item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
+                          }})</template></span>
+                        <span v-else class="caption font-weight-regular" v-on="on">
+                          {{ item.name }}</span>
+                      </template>
                     </v-list-item-title>
 
                     <v-spacer />
@@ -186,6 +202,7 @@
                   <v-list-item-group :value="selectedItem">
                     <v-list-item
                       v-for="child in item.children || []"
+                      v-show="!search || child.name.toLowerCase().includes(search.toLowerCase())"
                       :key="child.key"
                       color="x-active"
                       active-class="font-weight-bold"
@@ -713,7 +730,7 @@ export default {
     open: [],
     search: null,
     menuVisible: false,
-    excelImportDialog:false,
+    excelImportDialog: false,
     x: 0,
     y: 0,
     menuItem: null,
@@ -934,7 +951,7 @@ export default {
         this.miniExpanded = false;
       }
     },
-    onExcelImport(){
+    onExcelImport() {
       if (!this.menuItem || this.menuItem.type !== 'tableDir') {
         this.menuItem = this.listViewArr.find(n => n.type === 'tableDir');
       }
@@ -1165,7 +1182,7 @@ export default {
             await this.loadViews(this.menuItem);
             this.$toast.success('Views refreshed').goAway(1000);
           } else if (action === 'IMPORT_EXCEL') {
-           this.excelImportDialog=true
+            this.excelImportDialog = true
           } else if (action === 'ENV_DB_FUNCTIONS_REFRESH') {
             await this.loadFunctions(this.menuItem);
             this.$toast.success('Functions refreshed').goAway(1000);
@@ -1768,6 +1785,24 @@ export default {
 .nested:hover .action {
   opacity: 1;
 }
+
+/deep/ .nc-table-list-filter .v-input__slot {
+  min-height: 30px !important;
+}
+/deep/ .nc-table-list-filter .v-input__slot label {
+  top: 6px;
+}
+
+
+
+/deep/ .nc-table-list-filter.theme--light.v-text-field > .v-input__control > .v-input__slot:before {
+  border-top-color: rgba(0, 0, 0, 0.12) !important;
+}
+
+/deep/ .nc-table-list-filter.theme--dark.v-text-field > .v-input__control > .v-input__slot:before {
+  border-top-color: rgba(255, 255, 255, 0.12) !important;
+}
+
 </style>
 
 <!--