From 6358a4bc3911d6687bef0b0c9587a5aee850329d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 24 Nov 2021 13:25:04 +0530
Subject: [PATCH 1/3] refactor: optimize tab reload on tab switch

re #767

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/project/spreadsheet/rowsXcDataTable.vue | 10 +++++++++-
 packages/nc-gui/components/project/table.vue           |  4 +++-
 packages/nc-gui/components/projectTabs.vue             |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 6be60c7fd3..2ffee39118 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -583,6 +583,7 @@ export default {
   },
   mixins: [spreadsheet],
   props: {
+    isActive: Boolean,
     tabId: String,
     env: String,
     nodes: Object,
@@ -670,6 +671,11 @@ export default {
     rowContextMenu: null
   }),
   watch: {
+    isActive(n, o) {
+      if (!o && n) {
+        this.reload()
+      }
+    },
     page(p) {
       this.$store.commit('tabs/MutSetTabState', {
         id: this.uniqueId,
@@ -1159,7 +1165,9 @@ export default {
     }
   },
   computed: {
-    tabsState() { return this.$store.state.tabs.tabsState || {} },
+    tabsState() {
+      return this.$store.state.tabs.tabsState || {}
+    },
     uniqueId() {
       return `${this.tabId}_${this.selectedViewId}`
     },
diff --git a/packages/nc-gui/components/project/table.vue b/packages/nc-gui/components/project/table.vue
index 29e3090256..3a0ea1c9d3 100644
--- a/packages/nc-gui/components/project/table.vue
+++ b/packages/nc-gui/components/project/table.vue
@@ -317,6 +317,7 @@
           >
             <rows-xc-data-table
               ref="tabs7"
+              :is-active="isActive"
               :tab-id="tabId"
               :show-tabs="relationTabs && relationTabs.length"
               :table="nodes.tn"
@@ -384,6 +385,7 @@
             <template>
               <rows-xc-data-table
                 ref="tabs7"
+                :is-active="isActive"
                 :show-tabs="relationTabs && relationTabs.length"
                 :table="nodes.tn"
                 :nodes="nodes"
@@ -639,7 +641,7 @@ export default {
   head() {
     return {}
   },
-  props: ['nodes', 'hideLogWindows', 'tabId']
+  props: ['nodes', 'hideLogWindows', 'tabId', 'isActive']
 }
 </script>
 
diff --git a/packages/nc-gui/components/projectTabs.vue b/packages/nc-gui/components/projectTabs.vue
index 89cbd7d27e..bab9ad1370 100644
--- a/packages/nc-gui/components/projectTabs.vue
+++ b/packages/nc-gui/components/projectTabs.vue
@@ -61,8 +61,8 @@
           >
             <!--          <sqlLogAndOutput :hide="hideLogWindows">-->
             <TableView
-              v-if="activeTab === `${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
               :ref="'tabs'+index"
+              :is-active="activeTab === `${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
               :tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
               :hide-log-windows.sync="hideLogWindows"
               :nodes="tab._nodes"

From 489db0532499fb00a489f39acd37db46dacb3bb3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 24 Nov 2021 13:25:14 +0530
Subject: [PATCH 2/3] feat: load tables list in alphabetic order

re #737

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts b/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
index b181164a09..9e7d8310ee 100644
--- a/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
+++ b/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
@@ -4568,7 +4568,9 @@ export default class NcMetaMgr {
               result[d.title].disabled[d.role] = !!d.disabled;
             }
 
-            return Object.values(result);
+            return Object.values(result)?.sort((a: any, b: any) =>
+              (a?._tn || a?.tn)?.localeCompare(b?._tn || b?.tn)
+            );
           }
           break;
         case 'view':

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 3/3] 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>
 
 <!--