wip(gui-v2): change useProject composable to work using shared base id

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

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

@@ -16,7 +16,7 @@ const { $api, $e } = useNuxtApp()
 
 const route = useRoute()
 
-const { tables, loadTables } = useProject(route.params.projectId as string)
+const { tables, loadTables } = useProject()
 const { activeTab } = useTabs()
 const { deleteTable } = useTable()
 

packages/nc-gui-v2/components/general/MiniSidebar.vue

@@ -106,7 +106,7 @@ const logout = () => {
         <div
           :class="[route.name.includes('nc-projectId') ? 'active' : 'pointer-events-none !text-gray-400']"
           class="nc-mini-sidebar-item"
-          @click="navigateTo(`/nc/${route.params.projectId}`)"
+          @click="navigateTo(`/${route.params.projectType}/${route.params.projectId}`)"
         >
           <MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
         </div>

packages/nc-gui-v2/composables/useApi/interceptors.ts

@@ -18,7 +18,7 @@ export function addAxiosInterceptors(api: Api<any>) {
     }
 
     if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) {
-      if (route && route.params && route.params.shared_base_id) config.headers['xc-shared-base-id'] = route.params.shared_base_id
+      if (route && route.params && route.params.projectType === 'base') config.headers['xc-shared-base-id'] = route.params.projectId
     }
 
     return config

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

@@ -1,17 +1,19 @@
 import { SqlUiFactory } from 'nocodb-sdk'
 import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
-import { useNuxtApp, useState } from '#app'
+import { useNuxtApp, useRoute, useState } from '#app'
 import { USER_PROJECT_ROLES } from '~/lib'
 
 export function useProject(projectId?: MaybeRef<string>) {
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
   const { $api } = useNuxtApp()
-
-  const _projectId = $computed(() => unref(projectId))
+  let _projectId = $ref('')
 
   const project = useState<ProjectType>('project')
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
+  const route = useRoute()
+
+  const projectType = $computed(() => route.params.projectType as string)
 
   async function loadProjectRoles() {
     projectRoles.value = {}
@@ -29,14 +31,21 @@ export function useProject(projectId?: MaybeRef<string>) {
     }
   }
 
-  async function loadProject(id: string) {
-    project.value = await $api.project.read(id)
-    await loadProjectRoles()
+  async function loadProject() {
+    if(unref(projectId)){
+      _projectId = unref(projectId)!
+    } else if (projectType === 'base') {
+      const baseData = await $api.public.sharedBaseGet(route.params.projectId as string)
+      _projectId = baseData.project_id!
+    } else {
+      _projectId = route.params.projectId as string
+    }
+    project.value = await $api.project.read(_projectId!)
   }
 
   watchEffect(async () => {
-    if (_projectId) {
-      await loadProject(_projectId)
+    if (project?.value ) {
+      await loadProjectRoles()
       await loadTables()
     }
   })

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

@@ -1,6 +1,9 @@
 import type { WritableComputedRef } from '@vue/reactivity'
 import { navigateTo, useProject, useRoute, useState } from '#imports'
 
+import type { RouterConfig } from '@nuxt/schema'
+
+
 export enum TabType {
   TABLE = 'table',
   VIEW = 'view',
@@ -29,9 +32,11 @@ export function useTabs() {
   const router = useRouter()
   const { tables } = useProject()
 
+  const projectType = $computed(() => route.params.projectType as string)
+
   const activeTabIndex: WritableComputedRef<number> = computed({
     get() {
-      if ((route.name as string)?.startsWith('nc-projectId-index-index-type-title-viewTitle') && tables.value?.length) {
+      if ((route.name as string)?.startsWith('projectType-projectId-index-index-type-title-viewTitle') && tables.value?.length) {
         const tab: Partial<TabItem> = { type: route.params.type as TabType, title: route.params.title as string }
 
         const id = tables.value?.find((t) => t.title === tab.title)?.id
@@ -56,7 +61,7 @@ export function useTabs() {
     },
     set(index: number) {
       if (index === -1) {
-        navigateTo(`/nc/${route.params.projectId}`)
+        navigateTo(`/${projectType}/${route.params.projectId}`)
       } else {
         const tab = tabs.value[index]
 
@@ -91,7 +96,7 @@ export function useTabs() {
       let newTabIndex = index - 1
       if (newTabIndex < 0 && tabs.value?.length > 1) newTabIndex = index + 1
       if (newTabIndex === -1) {
-        await navigateTo(`/nc/${route.params.projectId}`)
+        await navigateTo(`/${projectType}/${route.params.projectId}`)
       } else {
         await navigateToTab(tabs.value?.[newTabIndex])
       }
@@ -102,11 +107,15 @@ export function useTabs() {
   function navigateToTab(tab: TabItem) {
     switch (tab.type) {
       case TabType.TABLE:
-        return navigateTo(`/nc/${route.params.projectId}/table/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
+        return navigateTo(
+          `/${projectType}/${route.params.projectId}/table/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`,
+        )
       case TabType.VIEW:
-        return navigateTo(`/nc/${route.params.projectId}/view/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`)
+        return navigateTo(
+          `/${projectType}/${route.params.projectId}/view/${tab?.title}${tab.viewTitle ? `/${tab.viewTitle}` : ''}`,
+        )
       case TabType.AUTH:
-        return navigateTo(`/nc/${route.params.projectId}/auth`)
+        return navigateTo(`/${projectType}/${route.params.projectId}/auth`)
     }
   }
 

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

@@ -5,7 +5,7 @@ import { openLink } from '~/utils'
 
 const route = useRoute()
 
-const { project, loadProject, loadTables } = useProject(route.params.projectId as string)
+const { project, loadProject, loadTables } = useProject()
 
 const { addTab, clearTabs } = useTabs()
 
@@ -39,7 +39,7 @@ function toggleDialog(value?: boolean, key?: string) {
   openDialogKey.value = key
 }
 
-await loadProject(route.params.projectId as string)
+await loadProject()
 
 await loadTables()
 </script>