feat(gui-v2): render smartsheet based on route

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

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -192,7 +192,7 @@ const reloadTables = async () => {
 }
 const addTableTab = (table: TableType) => {
   $e('a:table:open')
-  addTab({ title: table.title, id: table.id })
+  addTab({ title: table.title, id: table.id, type: table.type as any })
 }
 </script>
 

packages/nc-gui-v2/components/tabs/Smartsheet.vue

@@ -1,25 +1,22 @@
 <script setup lang="ts">
-import { useEventBus } from '@vueuse/core'
+import type { ColumnType, ViewType } from 'nocodb-sdk'
-import type { ColumnType, FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
-import { computed, onMounted, provide, watch } from '#imports'
+import { computed, inject, onMounted, provide, watch, watchEffect } from '#imports'
 import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/context'
 import useMetas from '~/composables/useMetas'
 
-const { tabMeta } = defineProps({
-  tabMeta: Object,
-})
-
 const { getMeta, metas } = useMetas()
 
-const activeView = ref<GridType | FormType | KanbanType | GalleryType>()
+const activeView = ref<ViewType>()
 const el = ref<any>()
 const fields = ref<ColumnType[]>([])
 
-const meta = computed(() => metas.value?.[tabMeta?.id])
+const tabMeta = inject(TabMetaInj)
+
+const meta = computed(() => metas.value?.[tabMeta?.value?.id as string])
 
-onMounted(async () => {
+watchEffect(async () => {
-  await getMeta(tabMeta?.id)
+  await getMeta(tabMeta?.value?.id as string)
 })
 
 const reloadEventHook = createEventHook<void>()

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

@@ -23,11 +23,12 @@ export default () => {
   const router = useRouter()
   const { tables } = useProject()
 
-  const activeTab: WritableComputedRef<number> = computed({
+  const activeTabIndex: WritableComputedRef<number> = computed({
     get() {
-      if ((route?.name as string)?.startsWith('nc-projectId-index-index-table-title') && tables?.value?.length) {
+      console.log(route?.name)
+      if ((route?.name as string)?.startsWith('nc-projectId-index-index-type-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
+        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) {
@@ -35,6 +36,8 @@ export default () => {
           index = tabs.value.length - 1
         }
         return index
+      } else if ((route?.name as string)?.startsWith('nc-projectId-index-index-auth')) {
+        return tabs.value.findIndex((t) => t.type === 'auth')
       }
       return -1
     },
@@ -42,21 +45,31 @@ export default () => {
       if (index === -1) {
         router.push(`/nc/${route.params.projectId}`)
       } else {
-        router.push(`/nc/${route.params.projectId}/table/${tabs.value?.[index]?.title}`)
+        const tab = tabs.value[index]
+        if (!tab) {
+        } else if (tab.type === 'table') {
+          router.push(`/nc/${route.params.projectId}/table/${tab?.title}`)
+        } else if (tab.type === 'view') {
+          router.push(`/nc/${route.params.projectId}/view/${tab?.title}`)
+        } else if (tab.type === 'auth') {
+          router.push(`/nc/${route.params.projectId}/auth`)
+        }
       }
     },
   })
 
+  const activeTab = computed(() => tabs.value?.[activeTabIndex.value])
+
   const addTab = (tabMeta: TabItem) => {
     const tabIndex = tabs.value.findIndex((tab) => tab.id === tabMeta.id)
     // if tab already found make it active
     if (tabIndex > -1) {
-      activeTab.value = tabIndex
+      activeTabIndex.value = tabIndex
     }
     // if tab not found add it
     else {
       tabs.value = [...(tabs.value || []), tabMeta]
-      activeTab.value = tabs.value.length - 1
+      activeTabIndex.value = tabs.value.length - 1
     }
   }
   const clearTabs = () => {
@@ -64,7 +77,7 @@ export default () => {
   }
   const closeTab = async (key: number | Partial<TabItem>) => {
     const index = typeof key === 'number' ? key : tabs.value.findIndex(getPredicate(key))
-    if (activeTab.value === index) {
+    if (activeTabIndex.value === index) {
       let newTabIndex = index - 1
       if (newTabIndex < 0 && tabs.value?.length > 1) newTabIndex = index + 1
       if (newTabIndex === -1) {
@@ -83,5 +96,5 @@ export default () => {
     }
   }
 
-  return { tabs, addTab, activeTab, clearTabs, closeTab, updateTab }
+  return { tabs, addTab, activeTabIndex, activeTab, clearTabs, closeTab, updateTab }
 }

packages/nc-gui-v2/context/index.ts

@@ -1,11 +1,12 @@
 import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
-import type { InjectionKey, Ref } from 'vue'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { EventHook } from '@vueuse/core'
 import type { useViewData } from '#imports'
+import type { TabItem } from '~/composables/useTabs'
 
 export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
 export const MetaInj: InjectionKey<Ref<TableType>> = Symbol('meta-injection')
-export const TabMetaInj: InjectionKey<any> = Symbol('tab-meta-injection')
+export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')
 export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['paginationData']> =
   Symbol('pagination-data-injection')
 export const ChangePageInj: InjectionKey<ReturnType<typeof useViewData>['changePage']> = Symbol('pagination-data-injection')

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import useTabs from '~/composables/useTabs'
+
 const route = useRoute()
 const { loadProject, loadTables } = useProject(route.params.projectId as string)
 const { clearTabs, addTab } = useTabs()

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import useTabs from '~/composables/useTabs'
+import { TabMetaInj } from '~/context'
 
-const { tabs, activeTab, closeTab } = useTabs()
+const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 const tableCreateDialog = ref(false)
+
+provide(TabMetaInj, activeTab)
 </script>
 
 <template>
@@ -15,8 +18,7 @@ const tableCreateDialog = ref(false)
       <MdiPlusIcon @click="tableCreateDialog = true" />
       <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
     </v-tabs> -->
-
+    <a-tabs v-model:activeKey="activeTabIndex" size="small" type="editable-card" @edit="closeTab">
-    <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>
 

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

@@ -4,6 +4,8 @@ export default {
 }
 </script>
 
-<template></template>
+<template>
+  <TabsSmartsheet />
+</template>
 
 <style scoped></style>

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

@@ -4,6 +4,8 @@ export default {
 }
 </script>
 
-<template>test</template>
+<template>
+  <TabsSmartsheet />
+</template>
 
 <style scoped></style>

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

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h2 class="text-3xl mt-3">Team & Auth</h2>
+  </div>
+</template>

packages/nc-gui-v2/pages/project/index/create-external.vue

@@ -8,7 +8,6 @@ import { navigateTo, useNuxtApp } from '#app'
 import { ClientType } from '~/lib/enums'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { readFile } from '~/utils/fileUtils'
-
 import type { ProjectCreateForm } from '~/utils/projectCreateUtils'
 import {
   clientTypes,

packages/nocodb-sdk/src/lib/helperFunctions.ts

@@ -12,12 +12,13 @@ const getSystemColumnsIds = (columns) => {
 const getSystemColumns = (columns) => columns.filter(isSystemColumn) || [];
 
 const isSystemColumn = (col) =>
-  col.uidt === UITypes.ForeignKey ||
+  col &&
+  (col.uidt === UITypes.ForeignKey ||
     col.column_name === 'created_at' ||
     col.column_name === 'updated_at' ||
     (col.pk && (col.ai || col.cdf)) ||
     (col.pk && col.meta && col.meta.ag) ||
-  col.system;
+    col.system);
 
 export {
   filterOutSystemColumns,