Merge pull request #2934 from nocodb/fix/gui-v2-tab-navigation

fix(gui-v2): tab navigation

packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@@ -8,9 +8,7 @@ import Sortable from 'sortablejs'
 import RenameableMenuItem from './RenameableMenuItem.vue'
 import { inject, onMounted, ref, useApi, useTabs, watch } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
-import type { TabItem } from '~/composables/useTabs'
-import { TabType } from '~/composables/useTabs'
-import { ActiveViewInj, ViewListInj } from '~/context'
+import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
 
 interface Emits {
   (event: 'openModal', data: { type: ViewTypes; title?: string }): void
@@ -24,10 +22,14 @@ const activeView = inject(ActiveViewInj, ref())
 
 const views = inject<Ref<any[]>>(ViewListInj, ref([]))
 
+const meta = inject(MetaInj)
+
 const { addTab } = useTabs()
 
 const { api } = useApi()
 
+const router = useRouter()
+
 /** Selected view(s) for menu */
 const selected = ref<string[]>([])
 
@@ -136,17 +138,9 @@ const initSortable = (el: HTMLElement) => {
 onMounted(() => menuRef && initSortable(menuRef.$el))
 
 // todo: fix view type, alias is missing for some reason?
-/** Navigate to view and add new tab if necessary */
+/** Navigate to view by changing url param */
 function changeView(view: { id: string; alias?: string; title?: string; type: ViewTypes }) {
-  activeView.value = view
-
-  const tabProps: TabItem = {
-    id: view.id,
-    title: (view.alias ?? view.title) || '',
-    type: TabType.VIEW,
-  }
-
-  addTab(tabProps)
+  router.push({ params: { viewTitle: (view.alias ?? view.title) || '' } })
 }
 
 /** Rename a view */

packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@@ -16,6 +16,8 @@ const { views, loadViews } = useViews(meta)
 
 const { api } = useApi()
 
+const route = useRoute()
+
 provide(ViewListInj, views)
 
 /** Sidebar visible */
@@ -32,11 +34,18 @@ let viewCreateTitle = $ref('')
 /** is view creation modal open */
 let modalOpen = $ref(false)
 
-/** Watch current views and on change set the next active view */
+/** Watch route param and change active view based on `viewTitle` */
 watch(
-  views,
-  (nextViews) => {
-    if (nextViews.length) {
+  [views, () => route.params.viewTitle],
+  ([nextViews, viewTitle]) => {
+    if (viewTitle) {
+      const view = nextViews.find((v) => v.title === viewTitle)
+      if (view) {
+        activeView.value = view
+      }
+    }
+    /** if active view is not found, set it to first view */
+    if (!activeView.value && nextViews.length) {
       activeView.value = nextViews[0]
     }
   },
@@ -73,7 +82,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
       <template #start>
         <a-tooltip placement="left">
-          <template #title> {{ $t('objects.webhooks') }} </template>
+          <template #title> {{ $t('objects.webhooks') }}</template>
 
           <div class="nc-sidebar-right-item hover:after:bg-gray-300">
             <MdiHook />
@@ -83,7 +92,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
         <div class="dot" />
 
         <a-tooltip placement="left">
-          <template #title> Get API Snippet </template>
+          <template #title> Get API Snippet</template>
 
           <div class="nc-sidebar-right-item group hover:after:bg-yellow-500">
             <MdiXml class="group-hover:(!text-white)" />

packages/nc-gui-v2/composables/useTabs.ts

@@ -11,6 +11,8 @@ export interface TabItem {
   type: TabType
   title: string
   id?: string
+  viewTitle?: string
+  viewId?: string
 }
 
 function getPredicate(key: Partial<TabItem>) {
@@ -60,9 +62,9 @@ export function useTabs() {
 
         switch (tab.type) {
           case TabType.TABLE:
-            return navigateTo(`/nc/${route.params.projectId}/table/${tab?.title}`)
+            return navigateTo(`/nc/${route.params.projectId}/table/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
           case TabType.VIEW:
-            return navigateTo(`/nc/${route.params.projectId}/view/${tab?.title}`)
+            return navigateTo(`/nc/${route.params.projectId}/view/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
           case TabType.AUTH:
             return navigateTo(`/nc/${route.params.projectId}/auth`)
         }