Browse Source

feat(nc-gui): Added fullscreen support to ERD

pull/4911/head
Muhammed Mustafa 2 years ago
parent
commit
cc309a48ba
  1. 2
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  2. 2
      packages/nc-gui/components/dashboard/settings/Erd.vue
  3. 28
      packages/nc-gui/components/erd/FullScreenToggle.vue
  4. 14
      packages/nc-gui/components/erd/View.vue
  5. 1
      packages/nc-gui/components/erd/utils.ts

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

@ -381,7 +381,7 @@ watch(
<div v-else-if="vState === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto"> <div v-else-if="vState === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto">
<UIAcl :base-id="activeBaseId" /> <UIAcl :base-id="activeBaseId" />
</div> </div>
<div v-else-if="vState === DataSourcesSubTab.ERD" class="max-h-600px overflow-y-auto"> <div v-else-if="vState === DataSourcesSubTab.ERD" class="h-full overflow-y-auto">
<Erd :base-id="activeBaseId" /> <Erd :base-id="activeBaseId" />
</div> </div>
<div v-else-if="vState === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto"> <div v-else-if="vState === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto">

2
packages/nc-gui/components/dashboard/settings/Erd.vue

@ -5,7 +5,7 @@ const props = defineProps<{
</script> </script>
<template> <template>
<div class="w-full h-full !p-0 h-70vh"> <div class="w-full h-full !p-0">
<ErdView :base-id="props.baseId" /> <ErdView :base-id="props.baseId" />
</div> </div>
</template> </template>

28
packages/nc-gui/components/erd/FullScreenToggle.vue

@ -0,0 +1,28 @@
<script lang="ts" setup>
import { Panel, PanelPosition } from '@vue-flow/additional-components'
import type { ERDConfig } from './utils'
import MiFullscreen from '~icons/material-symbols/fullscreen'
import MiFullscreenExit from '~icons/material-symbols/fullscreen-exit'
const props = defineProps<{
config: ERDConfig
}>()
const config = useVModel(props, 'config')
const toggleFullScreen = () => {
config.value.isFullScreen = !config.value.isFullScreen
}
</script>
<template>
<Panel
class="text-xs bg-white border-1 rounded-md p-0.5 border-gray-50 z-50 nc-erd-histogram cursor-pointer hover:bg-gray-100"
:position="PanelPosition.TopLeft"
>
<div class="flex">
<MiFullscreenExit v-if="config.isFullScreen" class="h-5 w-5" @click="() => toggleFullScreen()" />
<MiFullscreen v-else class="h-5 w-5" @click="() => toggleFullScreen()" />
</div>
</Panel>
</template>

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

@ -21,6 +21,7 @@ const config = reactive<ERDConfig>({
singleTableMode: !!props.table, singleTableMode: !!props.table,
showMMTables: false, showMMTables: false,
showJunctionTableNames: false, showJunctionTableNames: false,
isFullScreen: false,
}) })
const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => { const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => {
@ -86,7 +87,15 @@ watch(
</script> </script>
<template> <template>
<div class="w-full" style="height: inherit" :class="[`nc-erd-vue-flow${config.singleTableMode ? '-single-table' : ''}`]"> <div
class="w-full bg-white"
:class="{
'z-100 h-screen w-screen fixed top-0 left-0 right-0 bottom-0': config.isFullScreen,
'nc-erd-vue-flow-single-table': config.singleTableMode,
'nc-erd-vue-flow': !config.singleTableMode,
}"
:style="!config.isFullScreen ? 'height: inherit' : ''"
>
<div class="relative h-full"> <div class="relative h-full">
<LazyErdFlow :tables="filteredTables" :config="config"> <LazyErdFlow :tables="filteredTables" :config="config">
<GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50"> <GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50">
@ -95,7 +104,8 @@ watch(
</div> </div>
</GeneralOverlay> </GeneralOverlay>
<ErdConfigPanel :config="config" /> <ErdFullScreenToggle :config="config" />
<ErdConfigPanel />
<ErdHistogramPanel v-if="!config.singleTableMode" /> <ErdHistogramPanel v-if="!config.singleTableMode" />
</LazyErdFlow> </LazyErdFlow>
</div> </div>

1
packages/nc-gui/components/erd/utils.ts

@ -15,6 +15,7 @@ export interface ERDConfig {
singleTableMode: boolean singleTableMode: boolean
showJunctionTableNames: boolean showJunctionTableNames: boolean
showMMTables: boolean showMMTables: boolean
isFullScreen: boolean
} }
export interface NodeData { export interface NodeData {

Loading…
Cancel
Save