From b85cfd96a6e824c4434b69ab99a25a188e8aedb2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 2 Jun 2023 11:49:43 +0530
Subject: [PATCH] fix: on table create/duplicate after completion scroll to the
 new table in treeview

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 20 ++++++++++++++++++-
 .../nc-gui/components/dlg/TableCreate.vue     |  3 ++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 5940b634c5..58760fff5d 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { nextTick } from '@vue/runtime-core'
 import type { TableType } from 'nocodb-sdk'
 import type { Input } from 'ant-design-vue'
 import { Dropdown, Tooltip, message } from 'ant-design-vue'
 import Sortable from 'sortablejs'
 import GithubButton from 'vue-github-button'
-import { Icon } from '@iconify/vue'
 import type { VNodeRef } from '#imports'
 import {
   ClientType,
@@ -279,6 +279,15 @@ function openAirtableImportDialog(baseId?: string) {
   }
 }
 
+function scrollToTable(table: TableType) {
+  // get the table node in the tree view using the data-id attribute
+  const el = document.querySelector(`.nc-tree-item[data-id="${table?.id}"]`)
+  // scroll to the table node if found
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth' })
+  }
+}
+
 function openTableCreateDialog(baseId?: string) {
   $e('c:table:create:navdraw')
 
@@ -288,6 +297,12 @@ function openTableCreateDialog(baseId?: string) {
     'modelValue': isOpen,
     'baseId': baseId || bases.value[0].id,
     'onUpdate:modelValue': closeDialog,
+    'onCreate': (table: TableType) => {
+      // on new table created scroll to the table in the tree view
+      nextTick(() => {
+        scrollToTable(table)
+      })
+    },
   })
 
   function closeDialog() {
@@ -405,6 +420,9 @@ const duplicateTable = async (table: TableType) => {
           await loadTables()
           const newTable = tables.value.find((el) => el.id === data?.result?.id)
           if (newTable) addTableTab(newTable)
+          await nextTick(() => {
+            scrollToTable(newTable)
+          })
         } else if (status === JobStatus.FAILED) {
           message.error('Failed to duplicate table')
           await loadTables()
diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 3478159dc0..c1688a39fb 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
   baseId: string
 }>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'create'])
 
 const dialogShow = useVModel(props, 'modelValue', emit)
 
@@ -40,6 +40,7 @@ const { table, createTable, generateUniqueTitle, tables, project } = useTable(as
     type: TabType.TABLE,
   })
 
+  emit('create', table)
   dialogShow.value = false
 }, props.baseId)