From 02805348d2a5d44237c584d50690d5fae27da0ae Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 30 Sep 2022 09:52:32 +0200
Subject: [PATCH] feat(nc-gui): add search tables input to tree view

---
 packages/nc-gui/assets/style.scss             | 22 +++++++++++++
 .../nc-gui/components/dashboard/TreeView.vue  | 31 ++++++++++++++-----
 .../pages/[projectType]/[projectId]/index.vue |  2 +-
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index f1d7e48405..3caa6abf4c 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -168,6 +168,28 @@ a {
   transform: translate(-100%, 0);
 }
 
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 400ms ease;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translate(100%, 0%);
+  opacity: 0;
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 400ms ease;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  transform: translate(-100%, 0%);
+  opacity: 0;
+}
+
 .glow-enter-active,
 .glow-leave-active {
   @apply transition-all duration-300 ease-in-out;
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index d8a0c5ae63..6bba577e05 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -14,6 +14,7 @@ import {
   useProject,
   useTable,
   useTabs,
+  useToggle,
   useUIPermission,
   watchEffect,
 } from '#imports'
@@ -33,6 +34,8 @@ const { deleteTable } = useTable()
 
 const { isUIAllowed } = useUIPermission()
 
+const [searchActive, toggleSearchActive] = useToggle()
+
 const isLocked = inject('TreeViewIsLockedInj')
 
 let key = $ref(0)
@@ -126,8 +129,6 @@ const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
 const setMenuContext = (type: 'table' | 'main', value?: any) => {
   contextMenuTarget.type = type
   contextMenuTarget.value = value
-
-  // $e('c:table:create:navdraw:right-click')
 }
 
 const reloadTables = async () => {
@@ -215,12 +216,26 @@ function openTableCreateDialog() {
   <div class="nc-treeview-container flex flex-col">
     <a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
       <div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
-        <div class="py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
-          <span class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
-            {{ $t('objects.tables') }}
-
-            <template v-if="tables?.length"> ({{ tables.length }}) </template>
-          </span>
+        <div class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
+          <Transition name="slide-left" mode="out-in">
+            <a-input
+              v-if="searchActive"
+              v-model:value="filterQuery"
+              class="flex-1 rounded"
+              :placeholder="$t('placeholder.searchProjectTree')"
+            />
+
+            <span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
+              {{ $t('objects.tables') }}
+
+              <template v-if="tables?.length"> ({{ tables.length }}) </template>
+            </span>
+          </Transition>
+
+          <Transition name="layout" mode="out-in">
+            <MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="toggleSearchActive(false)" />
+            <IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
+          </Transition>
         </div>
 
         <div class="flex-1">
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index a2781409d7..e92b11b5d0 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -186,7 +186,7 @@ onBeforeUnmount(reset)
       >
         <div
           style="height: var(--header-height)"
-          :class="isOpen ? 'pl-6' : ''"
+          :class="isOpen ? 'pl-4' : ''"
           class="flex items-center !bg-primary text-white px-1 gap-2"
         >
           <div