From 39f9c03ed3e5b393b860a8838ddc0834f0d38125 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 4 Oct 2023 06:16:19 +0000
Subject: [PATCH] fix(nc-gui): Fixed ERD view for non opened projects

---
 .../dashboard/TreeView/ProjectNode.vue        |  1 +
 packages/nc-gui/components/dlg/ProjectErd.vue | 34 ++++++++++++++++++-
 packages/nc-gui/components/erd/TableNode.vue  | 10 ------
 packages/nc-gui/components/erd/View.vue       | 11 +++++-
 packages/nc-gui/composables/useMetas.ts       | 16 ++++++---
 5 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index bfbe544c0a..8fd9243f0e 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -297,6 +297,7 @@ function openErdView(source: SourceType) {
     'modelValue': isOpen,
     'sourceId': source!.id,
     'onUpdate:modelValue': () => closeDialog(),
+    'baseId': base.value.id,
   })
 
   function closeDialog() {
diff --git a/packages/nc-gui/components/dlg/ProjectErd.vue b/packages/nc-gui/components/dlg/ProjectErd.vue
index 03dde3144e..5c18099f25 100644
--- a/packages/nc-gui/components/dlg/ProjectErd.vue
+++ b/packages/nc-gui/components/dlg/ProjectErd.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 const props = defineProps<{
+  baseId: string
   sourceId: string
   modelValue: boolean
 }>()
@@ -9,12 +10,43 @@ 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]">
-      <LazyDashboardSettingsErd :source-id="activeSourceId" />
+      <ErdView v-if="!isLoading" :source-id="activeSourceId" :base-id="baseId" />
     </div>
   </GeneralModal>
 </template>
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 6df4f85978..8c39a7322a 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -41,16 +41,6 @@ watch(
     isZooming.value = true
   },
 )
-
-watch(
-  () => data,
-  () => {
-    console.log('data changed', data)
-  },
-  {
-    immediate: true,
-  },
-)
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index e70e4be8d4..ac5c35d9b3 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -17,9 +17,18 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  baseId: {
+    type: String,
+    default: '',
+  },
 })
 
-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()
 
diff --git a/packages/nc-gui/composables/useMetas.ts b/packages/nc-gui/composables/useMetas.ts
index 9c0d4e2510..5992994ee5 100644
--- a/packages/nc-gui/composables/useMetas.ts
+++ b/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`)