Browse Source

wip(gui-v2): route based tab navigation

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2819/head
Pranav C 2 years ago
parent
commit
6292e1f2aa
  1. 37
      packages/nc-gui-v2/composables/useTabs.ts
  2. 31
      packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
  3. 9
      packages/nc-gui-v2/pages/nc/[projectId]/index/index/table/[title]/[viewTitle]/index.vue
  4. 9
      packages/nc-gui-v2/pages/nc/[projectId]/index/index/table/[title]/index.vue

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

@ -15,7 +15,42 @@ function getPredicate(key: Partial<TabItem>) {
export default () => {
const tabs = useState<TabItem[]>('tabs', () => [])
const activeTab = useState<number>('activeTab', () => 0)
// const activeTab = useState<number>('activeTab', () => 0)
const route = useRoute()
const router = useRouter()
const { tables } = useProject()
const activeTab: WritableComputedRef<number> = computed({
get() {
if ((route?.name as string)?.startsWith('nc-projectId-index-index-table-title') && tables?.value?.length) {
const tab: Partial<TabItem> = { type: 'table', title: route.params.title as string }
const id = tables.value?.find((t) => t.title === tab.title)?.id
tab.id = id as string
let index = tabs.value.findIndex((t) => t.id === tab.id)
if (index === -1) {
tabs.value.push(tab as TabItem)
index = tabs.value.length - 1
}
return index
}
return -1
},
set(index: number) {
if (index === -1) {
router.push(`/nc/${route.params.projectId}`)
} else {
router.push(`/nc/${route.params.projectId}/table/${tabs.value?.[index]?.title}`)
}
},
// if (route.params.title) {
// const tab = tabs.value.find(t => t.id === route.params.tab)
// if (tab) {
// activeTab.value = tabs.value.indexOf(tab)
// }
// }
})
const addTab = (tabMeta: TabItem) => {
const tabIndex = tabs.value.findIndex((tab) => tab.id === tabMeta.id)

31
packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue

@ -1,11 +1,32 @@
<script lang="ts" setup>
<script setup lang="ts">
import useTabs from '~/composables/useTabs'
const { tabs, activeTab, closeTab } = useTabs()
const tableCreateDialog = ref(false)
</script>
<template>
<div>
<!-- <v-tabs v-model="activeTab" height="32" density="compact" color="primary">
<v-tab v-for="(tab, i) in tabs" :key="i" :value="i" class="text-capitalize">
{{ tab.title }}
<MdiCloseIcon class="ml-2 text-gray-500/50" @click.stop="closeTab(i)"></MdiCloseIcon>
</v-tab>
<MdiPlusIcon @click="tableCreateDialog = true" />
<DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
</v-tabs> -->
<a-tabs v-model:activeKey="activeTab" size="small" type="editable-card" @edit="closeTab">
<a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
</a-tabs>
<NuxtPage />
<!-- <v-window v-model="activeTab">
<v-window-item v-for="(tab, i) in tabs" :key="i" :value="i">
<TabsSmartsheet :tab-meta="tab" />
</v-window-item>
</v-window> -->
</div>
</template>
<style scoped>
.nc-main-tab {
}
</style>
<style scoped></style>

9
packages/nc-gui-v2/pages/nc/[projectId]/index/index/table/[title]/[viewTitle]/index.vue

@ -0,0 +1,9 @@
<script>
export default {
name: 'Index',
}
</script>
<template></template>
<style scoped></style>

9
packages/nc-gui-v2/pages/nc/[projectId]/index/index/table/[title]/index.vue

@ -0,0 +1,9 @@
<script>
export default {
name: 'Index',
}
</script>
<template>test</template>
<style scoped></style>
Loading…
Cancel
Save