Merge pull request #6565 from nocodb/nc-fix/base-source-erd

Base source erd dropdown option fixed

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

@@ -289,22 +289,22 @@ const onProjectClick = async (base: NcProject, ignoreNavigation?: boolean, toggl
 }
 
 function openErdView(source: SourceType) {
-  activeBaseId.value = source.id
-  isErdModalOpen.value = !isErdModalOpen.value
-}
+  $e('c:project:relation')
 
-async function openProjectErdView(_project: BaseType) {
-  if (!_project.id) return
+  const isOpen = ref(true)
 
-  if (!basesStore.isProjectPopulated(_project.id)) {
-    await loadProject(_project.id)
-  }
+  const { close } = useDialog(resolveComponent('DlgProjectErd'), {
+    'modelValue': isOpen,
+    'sourceId': source!.id,
+    'onUpdate:modelValue': () => closeDialog(),
+    'baseId': base.value.id,
+  })
 
-  const base = bases.value.get(_project.id)
+  function closeDialog() {
+    isOpen.value = false
 
-  const source = base?.sources?.[0]
-  if (!source) return
-  openErdView(source)
+    close(1000)
+  }
 }
 
 const reloadTables = async () => {
@@ -545,7 +545,7 @@ const projectDelete = () => {
                     key="erd"
                     v-e="['c:base:erd']"
                     data-testid="nc-sidebar-base-relations"
-                    @click="openProjectErdView(base)"
+                    @click="openErdView(base?.sources?.[0]!)"
                   >
                     <GeneralIcon icon="erd" />
                     {{ $t('title.relations') }}

packages/nc-gui/components/dlg/ProjectErd.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  baseId: string
+  sourceId: string
+  modelValue: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = useVModel(props, 'modelValue', emit)
+
+const activeSourceId = computed(() => props.sourceId)
+
+const { openedProject: base } = storeToRefs(useBases())
+
+const { baseTables } = storeToRefs(useTablesStore())
+const { loadProjectTables } = useTablesStore()
+
+const isLoading = ref(true)
+
+const { getMeta } = useMetas()
+
+const baseId = computed(() => props.baseId || base.value?.id)
+
+onMounted(async () => {
+  if (baseId.value && baseTables.value.get(baseId.value)) {
+    return (isLoading.value = false)
+  }
+
+  try {
+    await loadProjectTables(baseId.value!)
+
+    await Promise.all(
+      baseTables.value.get(baseId.value!)!.map(async (table) => {
+        await getMeta(table.id!, false, false, baseId.value!)
+      }),
+    )
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isLoading.value = false
+  }
+})
+</script>
+
+<template>
+  <GeneralModal v-model:visible="isOpen" size="large">
+    <div class="h-[80vh]">
+      <ErdView v-if="!isLoading" :source-id="activeSourceId" :base-id="baseId" />
+    </div>
+  </GeneralModal>
+</template>

packages/nc-gui/components/erd/TableNode.vue

@@ -29,6 +29,12 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
 
 const hasColumns = computed(() => data.pkAndFkColumns.length || data.nonPkColumns.length)
 
+const nonPkColumns = computed(() =>
+  data.nonPkColumns
+    // Removed MM system column from the table node
+    .filter((col) => !(col.system && isLinksOrLTAR(col) && /nc_.*___nc_m2m_.*/.test(col.title!))),
+)
+
 watch(
   () => viewport.value.zoom,
   () => {
@@ -80,10 +86,10 @@ watch(
           <LazySmartsheetHeaderCell v-if="col" class="nc-erd-table-node-column" :column="col" :hide-menu="true" />
         </div>
 
-        <div v-for="(col, index) in data.nonPkColumns" :key="col.title">
+        <div v-for="(col, index) in nonPkColumns" :key="col.title">
           <div
             class="relative w-full h-full flex items-center min-w-32 py-2 px-1"
-            :class="index + 1 === data.nonPkColumns.length ? 'rounded-b-lg' : ''"
+            :class="index + 1 === nonPkColumns.length ? 'rounded-b-lg' : ''"
           >
             <div
               v-if="isLinksOrLTAR(col)"

packages/nc-gui/components/erd/View.vue

@@ -17,9 +17,18 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  baseId: {
+    type: String,
+    default: undefined,
+  },
 })
 
-const { sources, tables: baseTables } = storeToRefs(useBase())
+const { baseTables: _baseTables } = storeToRefs(useTablesStore())
+const { sources, base } = storeToRefs(useBase())
+
+const baseId = computed(() => props.baseId ?? base.value!.id)
+
+const baseTables = computed(() => _baseTables.value.get(baseId.value) ?? [])
 
 const { metas, getMeta } = useMetas()
 

packages/nc-gui/composables/useMetas.ts

@@ -6,7 +6,8 @@ import { extractSdkResponseErrorMsg, storeToRefs, useBase, useNuxtApp, useState,
 export function useMetas() {
   const { $api } = useNuxtApp()
 
-  const { tables } = storeToRefs(useBase())
+  const { tables: _tables } = storeToRefs(useBase())
+  const { baseTables } = storeToRefs(useTablesStore())
 
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
 
@@ -26,8 +27,16 @@ export function useMetas() {
   }
 
   // todo: this needs a proper refactor, arbitrary waiting times are usually not a good idea
-  const getMeta = async (tableIdOrTitle: string, force = false, skipIfCacheMiss = false): Promise<TableType | null> => {
+  const getMeta = async (
+    tableIdOrTitle: string,
+    force = false,
+    skipIfCacheMiss = false,
+    baseId?: string,
+  ): Promise<TableType | null> => {
     if (!tableIdOrTitle) return null
+
+    const tables = (baseId ? baseTables.value.get(baseId) : _tables.value) ?? []
+
     /** wait until loading is finished if requesting same meta
      * use while to recheck loading state since it can be changed by other requests
      * */
@@ -72,8 +81,7 @@ export function useMetas() {
         return metas.value[tableIdOrTitle]
       }
 
-      const modelId = (tables.value.find((t) => t.id === tableIdOrTitle) || tables.value.find((t) => t.title === tableIdOrTitle))
-        ?.id
+      const modelId = (tables.find((t) => t.id === tableIdOrTitle) || tables.find((t) => t.title === tableIdOrTitle))?.id
 
       if (!modelId) {
         console.warn(`Table '${tableIdOrTitle}' is not found in the table list`)