feat: use model id instead of title for ui navigation

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components/dashboard/TreeView.vue

@@ -48,7 +48,7 @@ const menuRef = $ref<HTMLLIElement>()
 
 let filterQuery = $ref('')
 
-const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null))
+const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.id : null))
 
 const tablesById = $computed(() =>
   tables.value?.reduce<Record<string, TableType>>((acc, table) => {
@@ -372,7 +372,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     :key="table.id"
                     v-e="['a:table:open']"
                     :class="[
-                      { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                      { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
                       `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                     ]"
                     class="nc-tree-item text-sm cursor-pointer group"
@@ -534,7 +534,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       :key="table.id"
                       v-e="['a:table:open']"
                       :class="[
-                        { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
+                        { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
                         `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                       ]"
                       class="nc-tree-item text-sm cursor-pointer group"

packages/nc-gui/composables/useTabs.ts

@@ -29,7 +29,7 @@ const [setup, use] = useInjectionState(() => {
       if (routeName.startsWith('projectType-projectId-index-index-type-title-viewTitle') && tables.value.length) {
         const tab: TabItem = { type: route.params.type as TabType, title: route.params.title as string }
 
-        const currentTable = tables.value.find((t) => t.title === tab.title)
+        const currentTable = tables.value.find((t) => t.id === tab.title || t.title === tab.title)
 
         if (!currentTable) return -1
 
@@ -37,6 +37,8 @@ const [setup, use] = useInjectionState(() => {
 
         let index = tabs.value.findIndex((t) => t.id === tab.id)
 
+        tab.title = currentTable.title
+
         if (index === -1) {
           tab.sortsState = tab.sortsState || new Map()
           tab.filterState = tab.filterState || new Map()
@@ -111,13 +113,9 @@ const [setup, use] = useInjectionState(() => {
   function navigateToTab(tab: TabItem) {
     switch (tab.type) {
       case TabType.TABLE:
-        return navigateTo(
-          `/${projectType}/${route.params.projectId}/table/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`,
-        )
+        return navigateTo(`/${projectType}/${route.params.projectId}/table/${tab?.id}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
       case TabType.VIEW:
-        return navigateTo(
-          `/${projectType}/${route.params.projectId}/view/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`,
-        )
+        return navigateTo(`/${projectType}/${route.params.projectId}/view/${tab?.id}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
       case TabType.AUTH:
         return navigateTo(`/${projectType}/${route.params.projectId}/auth`)
     }
@@ -131,10 +129,10 @@ const [setup, use] = useInjectionState(() => {
 
       Object.assign(tab, newTabItemProps)
 
-      if (isActive && tab.title)
+      if (isActive && tab.id)
         router.replace({
           params: {
-            title: tab.title,
+            title: tab.id,
           },
         })
     }