wip(gui-v2): route based tab navigation

Signed-off-by: Pranav C <pranavxc@gmail.com>

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)

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>
+<style scoped></style>
-.nc-main-tab {
-}
-</style>

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>

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>