diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue index 7f2be5e8d5..b46f845417 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue +++ b/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>(ViewListInj, ref([])) +const meta = inject(MetaInj) + const { addTab } = useTabs() const { api } = useApi() +const router = useRouter() + /** Selected view(s) for menu */ const selected = ref([]) @@ -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 */ diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue index 0bd84edd61..e4e800d936 100644 --- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue +++ b/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) {