feat: front-end allow multiple base per project

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { UITypes } from 'nocodb-sdk'
-import { computed, useColumnCreateStoreOrThrow, useProject, useVModel } from '#imports'
+import { computed, useColumnCreateStoreOrThrow, useVModel } from '#imports'
 
 const props = defineProps<{
   value: any
@@ -10,9 +10,7 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-const { sqlUi } = useProject()
-
-const { onAlter, onDataTypeChange, validateInfos } = useColumnCreateStoreOrThrow()
+const { onAlter, onDataTypeChange, validateInfos, sqlUi } = useColumnCreateStoreOrThrow()
 
 // todo: 2nd argument of `getDataTypeListForUiType` is missing!
 const dataTypes = computed(() => sqlUi.value.getDataTypeListForUiType(vModel.value as { uidt: UITypes }, '' as any))

packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@@ -14,9 +14,9 @@ const vModel = useVModel(props, 'value', emit)
 
 const meta = $(inject(MetaInj, ref()))
 
-const { setAdditionalValidations, validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, onDataTypeChange, sqlUi } = useColumnCreateStoreOrThrow()
 
-const { tables, sqlUi } = $(useProject())
+const { tables } = $(useProject())
 
 setAdditionalValidations({
   childId: [{ required: true, message: 'Required' }],

packages/nc-gui/components/template/Editor.vue

@@ -64,7 +64,9 @@ const { $api } = useNuxtApp()
 
 const { addTab } = useTabs()
 
-const { sqlUi, project, loadTables } = useProject()
+const { sqlUis, project, loadTables } = useProject()
+
+const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
 
 const hasSelectColumn = ref<boolean[]>([])
 

packages/nc-gui/composables/useColumnCreateStore.ts

@@ -27,8 +27,7 @@ interface ValidationsObj {
 
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
   (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
-    const { sqlUi } = useProject()
-
+    const { sqlUis } = useProject()
     const { $api } = useNuxtApp()
 
     const { getMeta } = useMetas()
@@ -37,7 +36,9 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const { $e } = useNuxtApp()
 
-    const isEdit = computed(() => !!column.value?.id)
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
+
+    const isEdit = computed(() => !!column?.value?.id)
 
     const idType = null
 

packages/nc-gui/composables/useProject.ts

@@ -1,4 +1,4 @@
-import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
+import type { BaseType, OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { SqlUiFactory } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
 import {
@@ -35,7 +35,7 @@ const [setup, use] = useInjectionState(() => {
   const projectLoadedHook = createEventHook<ProjectType>()
 
   const project = ref<ProjectType>({})
-
+  const bases = computed<BaseType[]>(() => project.value?.bases || [])
   const tables = ref<TableType[]>([])
 
   const projectMetaInfo = ref<ProjectMetaInfo | undefined>()
@@ -55,15 +55,35 @@ const [setup, use] = useInjectionState(() => {
     }
   })
 
-  const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || ClientType.MYSQL)
+  const sqlUis = computed(() => {
+    const temp: Record<string, any> = {}
+    for (const base of bases.value) {
+      if (base.id) {
+        temp[base.id] = SqlUiFactory.create({ client: base.type }) as Exclude<
+          ReturnType<typeof SqlUiFactory['create']>,
+          typeof OracleUi
+        >
+      }
+    }
+    return temp
+  })
+
+  function getBaseType(baseId: string) {
+    return bases.value.find((base) => base.id === baseId)?.type || ClientType.MYSQL
+  }
 
-  const sqlUi = computed(
-    () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
-  )
+  function isMysql(baseId: string) {
+    return ['mysql', ClientType.MYSQL].includes(getBaseType(baseId))
+  }
+
+  function isMssql(baseId: string) {
+    return getBaseType(baseId) === 'mssql'
+  }
+
+  function isPg(baseId: string) {
+    return getBaseType(baseId) === 'pg'
+  }
 
-  const isMysql = computed(() => ['mysql', ClientType.MYSQL].includes(projectBaseType))
-  const isMssql = computed(() => projectBaseType === 'mssql')
-  const isPg = computed(() => projectBaseType === 'pg')
   const isSharedBase = computed(() => projectType === 'base')
 
   async function loadProjectMetaInfo(force?: boolean) {
@@ -151,6 +171,7 @@ const [setup, use] = useInjectionState(() => {
 
   return {
     project,
+    bases,
     tables,
     loadProjectRoles,
     loadProject,
@@ -159,7 +180,7 @@ const [setup, use] = useInjectionState(() => {
     isMysql,
     isMssql,
     isPg,
-    sqlUi,
+    sqlUis,
     isSharedBase,
     loadProjectMetaInfo,
     projectMetaInfo,

packages/nc-gui/composables/useSmartsheetStore.ts

@@ -13,8 +13,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     initialFilters?: Ref<FilterType[]>,
   ) => {
     const { $api } = useNuxtApp()
+    const { sqlUis } = useProject()
 
-    const { sqlUi } = useProject()
+    const sqlUi = ref(meta.value?.base_id ? sqlUis.value[meta.value?.base_id] : sqlUis.value[0])
 
     const cellRefs = ref<HTMLTableDataCellElement[]>([])
 

packages/nc-gui/composables/useTable.ts

@@ -32,8 +32,9 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
   const { loadTables } = useProject()
 
   const { closeTab } = useTabs()
+  const { sqlUis, project, tables } = useProject()
 
-  const { sqlUi, project, tables } = useProject()
+  const sqlUi = ref(sqlUis.value[0])
 
   const createTable = async () => {
     if (!sqlUi?.value) return