diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue index 7e29aad957..a440280f77 100644 --- a/packages/nc-gui/components/dashboard/TreeView.vue +++ b/packages/nc-gui/components/dashboard/TreeView.vue @@ -48,7 +48,7 @@ const menuRef = $ref() 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>((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" diff --git a/packages/nc-gui/composables/useTabs.ts b/packages/nc-gui/composables/useTabs.ts index cf7c3492d4..28982dc529 100644 --- a/packages/nc-gui/composables/useTabs.ts +++ b/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, }, }) }