Browse Source

fix(gui-v2): tab navigation

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2934/head
Pranav C 2 years ago
parent
commit
3ea5069e8c
  1. 19
      packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
  2. 23
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  3. 6
      packages/nc-gui-v2/composables/useTabs.ts

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

@ -6,11 +6,12 @@ import { notification } from 'ant-design-vue'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import Sortable from 'sortablejs' import Sortable from 'sortablejs'
import RenameableMenuItem from './RenameableMenuItem.vue' import RenameableMenuItem from './RenameableMenuItem.vue'
import { Meta } from '#head/components'
import { inject, onMounted, ref, useApi, useTabs, watch } from '#imports' import { inject, onMounted, ref, useApi, useTabs, watch } from '#imports'
import { extractSdkResponseErrorMsg } from '~/utils' import { extractSdkResponseErrorMsg } from '~/utils'
import type { TabItem } from '~/composables/useTabs' import type { TabItem } from '~/composables/useTabs'
import { TabType } from '~/composables/useTabs' import { TabType } from '~/composables/useTabs'
import { ActiveViewInj, ViewListInj } from '~/context' import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
interface Emits { interface Emits {
(event: 'openModal', data: { type: ViewTypes; title?: string }): void (event: 'openModal', data: { type: ViewTypes; title?: string }): void
@ -24,10 +25,14 @@ const activeView = inject(ActiveViewInj, ref())
const views = inject<Ref<any[]>>(ViewListInj, ref([])) const views = inject<Ref<any[]>>(ViewListInj, ref([]))
const meta = inject(MetaInj)
const { addTab } = useTabs() const { addTab } = useTabs()
const { api } = useApi() const { api } = useApi()
const router = useRouter()
/** Selected view(s) for menu */ /** Selected view(s) for menu */
const selected = ref<string[]>([]) const selected = ref<string[]>([])
@ -136,17 +141,9 @@ const initSortable = (el: HTMLElement) => {
onMounted(() => menuRef && initSortable(menuRef.$el)) onMounted(() => menuRef && initSortable(menuRef.$el))
// todo: fix view type, alias is missing for some reason? // 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 }) { function changeView(view: { id: string; alias?: string; title?: string; type: ViewTypes }) {
activeView.value = view router.push({ params: { viewTitle: (view.alias ?? view.title) || '' } })
const tabProps: TabItem = {
id: view.id,
title: (view.alias ?? view.title) || '',
type: TabType.VIEW,
}
addTab(tabProps)
} }
/** Rename a view */ /** Rename a view */

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

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

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

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

Loading…
Cancel
Save