Browse Source

fix(nc-gui): useTabs not redirecting correctly

pull/3801/head
braks 2 years ago
parent
commit
8679d1d25d
  1. 9
      packages/nc-gui/components.d.ts
  2. 32
      packages/nc-gui/components/dlg/TableRename.vue
  3. 46
      packages/nc-gui/composables/useTabs.ts

9
packages/nc-gui/components.d.ts vendored

@ -82,6 +82,15 @@ declare module '@vue/runtime-core' {
IcRoundSearch: typeof import('~icons/ic/round-search')['default'] IcRoundSearch: typeof import('~icons/ic/round-search')['default']
IcTwotoneWidthFull: typeof import('~icons/ic/twotone-width-full')['default'] IcTwotoneWidthFull: typeof import('~icons/ic/twotone-width-full')['default']
IcTwotoneWidthNormal: typeof import('~icons/ic/twotone-width-normal')['default'] IcTwotoneWidthNormal: typeof import('~icons/ic/twotone-width-normal')['default']
LazyDashboardSettingsAppInstall: typeof import('~icons/la/zy-dashboard-settings-app-install')['default']
LazyMonacoEditor: typeof import('~icons/la/zy-monaco-editor')['default']
LazyVirtualCellBelongsTo: typeof import('~icons/la/zy-virtual-cell-belongs-to')['default']
LazyVirtualCellCount: typeof import('~icons/la/zy-virtual-cell-count')['default']
LazyVirtualCellFormula: typeof import('~icons/la/zy-virtual-cell-formula')['default']
LazyVirtualCellHasMany: typeof import('~icons/la/zy-virtual-cell-has-many')['default']
LazyVirtualCellLookup: typeof import('~icons/la/zy-virtual-cell-lookup')['default']
LazyVirtualCellManyToMany: typeof import('~icons/la/zy-virtual-cell-many-to-many')['default']
LazyVirtualCellRollup: typeof import('~icons/la/zy-virtual-cell-rollup')['default']
LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default'] LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default']
LogosRedditIcon: typeof import('~icons/logos/reddit-icon')['default'] LogosRedditIcon: typeof import('~icons/logos/reddit-icon')['default']
LogosSwagger: typeof import('~icons/logos/swagger')['default'] LogosSwagger: typeof import('~icons/logos/swagger')['default']

32
packages/nc-gui/components/dlg/TableRename.vue

@ -100,21 +100,27 @@ const validators = computed(() => {
const { validateInfos } = useForm(formState, validators) const { validateInfos } = useForm(formState, validators)
watchEffect(() => { watchEffect(
if (tableMeta?.title) formState.title = tableMeta?.title () => {
// todo: replace setTimeout and follow better approach if (tableMeta?.title) formState.title = `${tableMeta.title}`
nextTick(() => {
const input = inputEl?.$el // todo: replace setTimeout and follow better approach
input.setSelectionRange(0, formState.title.length) nextTick(() => {
input.focus() const input = inputEl?.$el
}) input.setSelectionRange(0, formState.title.length)
}) input.focus()
})
},
{ flush: 'post' },
)
const renameTable = async () => { const renameTable = async () => {
if (!tableMeta) return
loading = true loading = true
try { try {
await $api.dbTable.update(tableMeta?.id as string, { await $api.dbTable.update(tableMeta.id as string, {
project_id: tableMeta?.project_id, project_id: tableMeta.project_id,
table_name: formState.title, table_name: formState.title,
}) })
@ -122,10 +128,10 @@ const renameTable = async () => {
await loadTables() await loadTables()
updateTab({ id: tableMeta?.id }, { title: formState.title }) updateTab({ id: tableMeta.id }, { title: formState.title })
// update metas // update metas
await setMeta(await $api.dbTable.read(tableMeta?.id as string)) await setMeta(await $api.dbTable.read(tableMeta.id as string))
// Table renamed successfully // Table renamed successfully
message.success(t('msg.success.tableRenamed')) message.success(t('msg.success.tableRenamed'))

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

@ -1,5 +1,5 @@
import type { WritableComputedRef } from '@vue/reactivity' import type { WritableComputedRef } from '@vue/reactivity'
import { computed, navigateTo, useProject, useRoute, useRouter, useState } from '#imports' import { computed, navigateTo, ref, useInjectionState, useProject, useRoute, useRouter, watch } from '#imports'
import type { TabItem } from '~/lib' import type { TabItem } from '~/lib'
import { TabType } from '~/lib' import { TabType } from '~/lib'
@ -10,8 +10,8 @@ function getPredicate(key: Partial<TabItem>) {
(!('type' in key) || tab.type === key.type) (!('type' in key) || tab.type === key.type)
} }
export function useTabs() { const [setup, use] = useInjectionState(() => {
const tabs = useState<TabItem[]>('tabs', () => []) const tabs = ref<TabItem[]>([])
const route = useRoute() const route = useRoute()
@ -21,28 +21,32 @@ export function useTabs() {
const projectType = $computed(() => route.params.projectType as string) const projectType = $computed(() => route.params.projectType as string)
const previousActiveTabIndex = ref(-1)
const activeTabIndex: WritableComputedRef<number> = computed({ const activeTabIndex: WritableComputedRef<number> = computed({
get() { get() {
if ((route.name as string)?.startsWith('projectType-projectId-index-index-type-title-viewTitle') && tables.value?.length) { const routeName = route.name as string
const tab: Partial<TabItem> = { type: route.params.type as TabType, title: route.params.title as string }
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 id = tables.value?.find((t) => t.title === tab.title)?.id const currentTable = tables.value.find((t) => t.title === tab.title)
if (!id) return -1 if (!currentTable) return -1
tab.id = id as string tab.id = currentTable.id
let index = tabs.value.findIndex((t) => t.id === tab.id) let index = tabs.value.findIndex((t) => t.id === tab.id)
if (index === -1) { if (index === -1) {
tabs.value.push(tab as TabItem) tabs.value.push(tab)
index = tabs.value.length - 1 index = tabs.value.length - 1
} }
return index return index
} else if ((route.name as string)?.startsWith('nc-projectId-index-index-auth')) { } else if (routeName.startsWith('nc-projectId-index-index-auth')) {
return tabs.value.findIndex((t) => t.type === 'auth') return tabs.value.findIndex((t) => t.type === 'auth')
} }
// by default, it's showing Team & Auth // by default, it's showing Team & Auth
return 0 return 0
}, },
@ -53,11 +57,16 @@ export function useTabs() {
const tab = tabs.value[index] const tab = tabs.value[index]
if (!tab) return if (!tab) return
return navigateToTab(tab) return navigateToTab(tab)
} }
}, },
}) })
watch(activeTabIndex, (_, old) => {
previousActiveTabIndex.value = old
})
const activeTab = computed(() => tabs.value?.[activeTabIndex.value]) const activeTab = computed(() => tabs.value?.[activeTabIndex.value])
const addTab = (tabMeta: TabItem) => { const addTab = (tabMeta: TabItem) => {
@ -79,15 +88,19 @@ export function useTabs() {
const closeTab = async (key: number | Partial<TabItem>) => { const closeTab = async (key: number | Partial<TabItem>) => {
const index = typeof key === 'number' ? key : tabs.value.findIndex(getPredicate(key)) const index = typeof key === 'number' ? key : tabs.value.findIndex(getPredicate(key))
if (activeTabIndex.value === index) { if (activeTabIndex.value === index) {
let newTabIndex = index - 1 let newTabIndex = index - 1
if (newTabIndex < 0 && tabs.value?.length > 1) newTabIndex = index + 1 if (newTabIndex < 0 && tabs.value?.length > 1) newTabIndex = index + 1
if (newTabIndex === -1) { if (newTabIndex === -1) {
await navigateTo(`/${projectType}/${route.params.projectId}`) await navigateTo(`/${projectType}/${route.params.projectId}`)
} else { } else {
await navigateToTab(tabs.value?.[newTabIndex]) await navigateToTab(tabs.value?.[newTabIndex])
} }
} }
tabs.value.splice(index, 1) tabs.value.splice(index, 1)
} }
@ -108,8 +121,9 @@ export function useTabs() {
const updateTab = (key: number | Partial<TabItem>, newTabItemProps: Partial<TabItem>) => { const updateTab = (key: number | Partial<TabItem>, newTabItemProps: Partial<TabItem>) => {
const tab = typeof key === 'number' ? tabs.value[key] : tabs.value.find(getPredicate(key)) const tab = typeof key === 'number' ? tabs.value[key] : tabs.value.find(getPredicate(key))
if (tab) { if (tab) {
const isActive = tabs.value.indexOf(tab) === activeTabIndex.value const isActive = tabs.value.indexOf(tab) === previousActiveTabIndex.value
Object.assign(tab, newTabItemProps) Object.assign(tab, newTabItemProps)
@ -123,4 +137,14 @@ export function useTabs() {
} }
return { tabs, addTab, activeTabIndex, activeTab, clearTabs, closeTab, updateTab } return { tabs, addTab, activeTabIndex, activeTab, clearTabs, closeTab, updateTab }
})
export function useTabs() {
const state = use()
if (!state) {
return setup()
}
return state
} }

Loading…
Cancel
Save