Browse Source

feat(nc-gui): relations made modal

pull/6425/head
reenphygeorge 1 year ago
parent
commit
207cccbc36
  1. 14
      packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
  2. 31
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  3. 9
      packages/nc-gui/components/erd/Flow.vue
  4. 1
      packages/nc-gui/components/erd/TableNode.vue
  5. 1
      packages/nc-gui/components/general/Modal.vue
  6. 2
      packages/nc-gui/components/smartsheet/toolbar/Reload.vue
  7. 2
      packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue

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

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

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

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

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

@ -19,6 +19,7 @@ const {
$destroy, $destroy,
fitView, fitView,
viewport, viewport,
setMaxZoom,
onNodeDoubleClick, onNodeDoubleClick,
zoomIn: internalZoomIn, zoomIn: internalZoomIn,
zoomOut: internalZoomOut, 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) onScopeDispose($destroy)
</script> </script>

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

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

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

@ -60,7 +60,6 @@ const visible = useVModel(props, 'visible', emits)
v-model:visible="visible" v-model:visible="visible"
:class="{ active: visible }" :class="{ active: visible }"
:width="width" :width="width"
:centered="true"
:closable="false" :closable="false"
wrap-class-name="nc-modal-wrapper" wrap-class-name="nc-modal-wrapper"
:footer="null" :footer="null"

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

@ -35,7 +35,7 @@ watch(isReloading, () => {
> >
<component <component
:is="iconMap.reload" :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' : ''" :class="isReloading ? 'animate-spin' : ''"
@click="onClick" @click="onClick"
/> />

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

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

Loading…
Cancel
Save