feat(nc-gui): relations made modal

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

@@ -52,6 +52,10 @@ const editMode = ref(false)
 
 const tempTitle = ref('')
 
+const activeBaseId = ref('')
+
+const isErdModalOpen = ref<Boolean>(false)
+
 const { t } = useI18n()
 
 const input = ref<HTMLInputElement>()
@@ -268,7 +272,8 @@ const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, to
 }
 
 function openErdView(base: BaseType) {
-  navigateTo(`/nc/${base.project_id}/erd/${base.id}`)
+  activeBaseId.value = base.id
+  isErdModalOpen.value = !isErdModalOpen.value
 }
 
 async function openProjectErdView(_project: ProjectType) {
@@ -282,7 +287,7 @@ async function openProjectErdView(_project: ProjectType) {
 
   const base = project?.bases?.[0]
   if (!base) return
-  navigateTo(`/nc/${base.project_id}/erd/${base.id}`)
+  openErdView(base)
 }
 
 const reloadTables = async () => {
@@ -732,6 +737,11 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
     :project="selectedProjectToDuplicate"
     :on-ok="DlgProjectDuplicateOnOk"
   />
+  <GeneralModal v-model:visible="isErdModalOpen" size="large">
+    <div class="h-[80vh]">
+      <LazyDashboardSettingsErd :base-id="activeBaseId" />
+    </div>
+  </GeneralModal>
 </template>
 
 <style lang="scss" scoped>

packages/nc-gui/components/dashboard/settings/DataSources.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import Draggable from 'vuedraggable'
 import type { BaseType } from 'nocodb-sdk'
-import CreateBase from './data-sources/CreateBase.vue'
-import EditBase from './data-sources/EditBase.vue'
-import Metadata from './Metadata.vue'
-import UIAcl from './UIAcl.vue'
-import Erd from './Erd.vue'
-import BaseAudit from './BaseAudit.vue'
 import { ClientType, DataSourcesSubTab, storeToRefs, useCommandPalette, useNuxtApp, useProject } from '#imports'
 
 interface Props {
@@ -511,37 +505,42 @@ const isEditBaseModalOpen = computed({
       </div>
       <GeneralModal v-model:visible="isNewBaseModalOpen" size="medium">
         <div class="py-6 px-8">
-          <CreateBase :connection-type="clientType" @base-created="loadBases(true)" @close="isNewBaseModalOpen = false" />
+          <LazyDashboardSettingsDataSourcesCreateBase
+            :connection-type="clientType"
+            @base-created="loadBases(true)"
+            @close="isNewBaseModalOpen = false"
+          />
         </div>
       </GeneralModal>
       <GeneralModal v-model:visible="isErdModalOpen" size="large">
         <div
-          class="p-6"
-          :style="{
-            height: '80vh',
-          }"
+          class="h-[80vh]"
         >
-          <Erd :base-id="activeBaseId" />
+          <LazyDashboardSettingsErd :base-id="activeBaseId" />
         </div>
       </GeneralModal>
       <GeneralModal v-model:visible="isMetaDataModal" size="medium">
         <div class="p-6">
-          <Metadata :base-id="activeBaseId" @base-synced="loadBases(true)" />
+          <LazyDashboardSettingsMetadata :base-id="activeBaseId" @base-synced="loadBases(true)" />
         </div>
       </GeneralModal>
       <GeneralModal v-model:visible="isUIAclModalOpen" class="!w-[60rem]">
         <div class="p-6">
-          <UIAcl :base-id="activeBaseId" />
+          <LazyDashboardSettingsUIAcl :base-id="activeBaseId" />
         </div>
       </GeneralModal>
       <GeneralModal v-model:visible="isEditBaseModalOpen" size="medium">
         <div class="p-6">
-          <EditBase :base-id="activeBaseId" @base-updated="loadBases(true)" @close="isEditBaseModalOpen = false" />
+          <LazyDashboardSettingsDataSourcesEditBase
+            :base-id="activeBaseId"
+            @base-updated="loadBases(true)"
+            @close="isEditBaseModalOpen = false"
+          />
         </div>
       </GeneralModal>
       <GeneralModal v-model:visible="isBaseAuditModalOpen" class="!w-[70rem]">
         <div class="p-6">
-          <BaseAudit :base-id="activeBaseId" @close="isBaseAuditModalOpen = false" />
+          <LazyDashboardSettingsBaseAudit :base-id="activeBaseId" @close="isBaseAuditModalOpen = false" />
         </div>
       </GeneralModal>
       <GeneralDeleteModal v-model:visible="isDeleteBaseModalOpen" entity-name="base" :on-delete="deleteBase">

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

@@ -19,6 +19,7 @@ const {
   $destroy,
   fitView,
   viewport,
+  setMaxZoom,
   onNodeDoubleClick,
   zoomIn: internalZoomIn,
   zoomOut: internalZoomOut,
@@ -58,6 +59,14 @@ watch(showSkeleton, async (isSkeleton) => {
   })
 })
 
+watch(elements, (elements) => {
+  if (elements.length > 3) {
+    setMaxZoom(2)
+  } else {
+    setMaxZoom(1.25)
+  }
+})
+
 onScopeDispose($destroy)
 </script>
 

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

@@ -33,6 +33,7 @@ watch(
   () => viewport.value.zoom,
   () => {
     isZooming.value = true
+    console.log(viewport.value.zoom)
   },
 )
 </script>

packages/nc-gui/components/general/Modal.vue

@@ -57,24 +57,23 @@ const visible = useVModel(props, 'visible', emits)
 
 <template>
   <a-modal
-    v-model:visible="visible"
-    :class="{ active: visible }"
-    :width="width"
-    :centered="true"
-    :closable="false"
-    wrap-class-name="nc-modal-wrapper"
-    :footer="null"
-    :destroy-on-close="destroyOnClose"
-    @keydown.esc="visible = false"
-  >
-    <div
-      class="nc-modal"
-      :style="{
-        maxHeight: height,
-      }"
+      v-model:visible="visible"
+      :class="{ active: visible }"
+      :width="width"
+      :closable="false"
+      wrap-class-name="nc-modal-wrapper"
+      :footer="null"
+      :destroy-on-close="destroyOnClose"
+      @keydown.esc="visible = false"
     >
-      <slot />
-    </div>
+      <div
+        class="nc-modal"
+        :style="{
+          maxHeight: height,
+        }"
+      >
+        <slot />
+      </div>
   </a-modal>
 </template>
 

packages/nc-gui/components/smartsheet/toolbar/Reload.vue

@@ -35,7 +35,7 @@ watch(isReloading, () => {
     >
       <component
         :is="iconMap.reload"
-        class="group-hover:(text-primary) h-4 nc-icon-reload"
+        class="group-hover:(text-primary) h-4 nc-icon-reload text-gray-400"
         :class="isReloading ? 'animate-spin' : ''"
         @click="onClick"
       />

packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue

@@ -28,7 +28,7 @@ const { activeTable } = storeToRefs(useTablesStore())
       {{ activeTable?.title }}
     </span>
 
-    <div class="px-2 text-gray-500">/</div>
+    <div class="px-2 text-gray-300">/</div>
     <LazyGeneralEmojiPicker :emoji="selectedView?.meta?.icon" readonly size="xsmall">
       <template #default>
         <GeneralViewIcon :meta="{ type: selectedView?.type }" class="min-w-4.5 text-lg flex" />