Browse Source

refactor(nc-gui): move panels into separate components

pull/4071/head
braks 2 years ago
parent
commit
c97b1168be
  1. 61
      packages/nc-gui/components/erd/ConfigPanel.vue
  2. 24
      packages/nc-gui/components/erd/Flow.vue
  3. 19
      packages/nc-gui/components/erd/HistogramPanel.vue
  4. 63
      packages/nc-gui/components/erd/View.vue
  5. 4
      packages/nc-gui/components/erd/utils.ts

61
packages/nc-gui/components/erd/ConfigPanel.vue

@ -0,0 +1,61 @@
<script lang="ts" setup>
import { Panel } from '@vue-flow/additional-components'
import type { ERDConfig } from './utils'
import { ref, useGlobal, useVModel } from '#imports'
const props = defineProps<{
config: ERDConfig
}>()
const { includeM2M } = useGlobal()
const config = useVModel(props, 'config')
const showAdvancedOptions = ref(false)
</script>
<template>
<Panel class="flex flex-col bg-white border-1 rounded border-gray-200 z-50 px-3 py-1 nc-erd-context-menu" position="top-right">
<div class="flex items-center gap-2">
<a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" class="nc-erd-showColumns-checkbox" />
<span class="select-none nc-erd-showColumns-label" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">
{{ $t('activity.erd.showColumns') }}
</span>
</div>
<div class="flex items-center gap-2">
<a-checkbox
v-model:checked="config.showPkAndFk"
v-e="['c:erd:showPkAndFk']"
class="nc-erd-showPkAndFk-checkbox"
:class="{
'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
}"
:disabled="!config.showAllColumns"
/>
<span class="select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
</div>
<div v-if="!config.singleTableMode" class="flex items-center gap-2">
<a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
<span class="select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
</div>
<div v-if="!config.singleTableMode && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
<a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
<span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span>
</div>
<div v-if="showAdvancedOptions && includeM2M" class="flex items-center gap-2">
<a-checkbox
v-model:checked="config.showJunctionTableNames"
v-e="['c:erd:showJunctionTableNames']"
class="nc-erd-showJunctionTableNames-checkbox"
/>
<span class="select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
</div>
</Panel>
</template>

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

@ -1,14 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { Background, Controls, Panel } from '@vue-flow/additional-components' import { Background, Controls } from '@vue-flow/additional-components'
import { VueFlow, useVueFlow } from '@vue-flow/core' import { VueFlow, useVueFlow } from '@vue-flow/core'
import type { TableType } from 'nocodb-sdk' import type { TableType } from 'nocodb-sdk'
import type { ErdFlowConfig } from './utils' import type { ERDConfig } from './utils'
import { useErdElements } from './utils' import { useErdElements } from './utils'
import { computed, onScopeDispose, toRefs, watch } from '#imports' import { computed, onScopeDispose, toRefs, watch } from '#imports'
interface Props { interface Props {
tables: TableType[] tables: TableType[]
config: ErdFlowConfig config: ERDConfig
} }
const props = defineProps<Props>() const props = defineProps<Props>()
@ -77,24 +77,6 @@ onScopeDispose($destroy)
<Background :size="showSkeleton ? 2 : undefined" :gap="showSkeleton ? 50 : undefined" /> <Background :size="showSkeleton ? 2 : undefined" :gap="showSkeleton ? 50 : undefined" />
<Panel
v-if="!config.singleTableMode"
class="text-xs bg-white border-1 rounded border-gray-200 z-50 nc-erd-histogram"
position="bottom-right"
>
<div class="flex flex-col divide-y-1">
<div class="flex items-center gap-1 p-2">
<MdiTableLarge class="text-primary" />
<div>{{ $t('objects.table') }}</div>
</div>
<div class="flex items-center gap-1 p-2">
<MdiEyeCircleOutline class="text-primary" />
<div>{{ $t('objects.sqlVIew') }}</div>
</div>
</div>
</Panel>
<Transition name="layout"> <Transition name="layout">
<div <div
v-if="showSkeleton && config.showAllColumns" v-if="showSkeleton && config.showAllColumns"

19
packages/nc-gui/components/erd/HistogramPanel.vue

@ -0,0 +1,19 @@
<script lang="ts" setup>
import { Panel } from '@vue-flow/additional-components'
</script>
<template>
<Panel class="text-xs bg-white border-1 rounded border-gray-200 z-50 nc-erd-histogram" position="bottom-right">
<div class="flex flex-col divide-y-1">
<div class="flex items-center gap-1 p-2">
<MdiTableLarge class="text-primary" />
<div>{{ $t('objects.table') }}</div>
</div>
<div class="flex items-center gap-1 p-2">
<MdiEyeCircleOutline class="text-primary" />
<div>{{ $t('objects.sqlVIew') }}</div>
</div>
</div>
</Panel>
</template>

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

@ -1,14 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { Panel } from '@vue-flow/additional-components'
import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk' import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk' import { UITypes } from 'nocodb-sdk'
import type { ErdFlowConfig } from './utils' import type { ERDConfig } from './utils'
import { reactive, ref, useGlobal, useMetas, useProject, watch } from '#imports' import { reactive, ref, useMetas, useProject, watch } from '#imports'
const { table } = defineProps<{ table?: TableType }>() const { table } = defineProps<{ table?: TableType }>()
const { includeM2M } = useGlobal()
const { tables: projectTables } = useProject() const { tables: projectTables } = useProject()
const { metas, getMeta } = useMetas() const { metas, getMeta } = useMetas()
@ -17,9 +14,7 @@ const tables = ref<TableType[]>([])
let isLoading = $ref(true) let isLoading = $ref(true)
const showAdvancedOptions = ref(false) const config = reactive<ERDConfig>({
const config = reactive<ErdFlowConfig>({
showPkAndFk: true, showPkAndFk: true,
showViews: false, showViews: false,
showAllColumns: true, showAllColumns: true,
@ -106,56 +101,8 @@ watch(
</div> </div>
</GeneralOverlay> </GeneralOverlay>
<Panel <ErdConfigPanel :config="config" />
class="flex flex-col bg-white border-1 rounded border-gray-200 z-50 px-3 py-1 nc-erd-context-menu" <ErdHistogramPanel v-if="!config.singleTableMode" />
position="top-right"
>
<div class="flex items-center gap-2">
<a-checkbox
v-model:checked="config.showAllColumns"
v-e="['c:erd:showAllColumns']"
class="nc-erd-showColumns-checkbox"
/>
<span class="select-none nc-erd-showColumns-label" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">
{{ $t('activity.erd.showColumns') }}
</span>
</div>
<div class="flex items-center gap-2">
<a-checkbox
v-model:checked="config.showPkAndFk"
v-e="['c:erd:showPkAndFk']"
class="nc-erd-showPkAndFk-checkbox"
:class="{
'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
}"
:disabled="!config.showAllColumns"
/>
<span class="select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
</div>
<div v-if="!table" class="flex items-center gap-2">
<a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
<span class="select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
</div>
<div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
<a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
<span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span>
</div>
<div v-if="showAdvancedOptions && includeM2M" class="flex items-center gap-2">
<a-checkbox
v-model:checked="config.showJunctionTableNames"
v-e="['c:erd:showJunctionTableNames']"
class="nc-erd-showJunctionTableNames-checkbox"
/>
<span class="select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
</div>
</Panel>
</LazyErdFlow> </LazyErdFlow>
</div> </div>
</div> </div>

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

@ -8,7 +8,7 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale'
import tinycolor from 'tinycolor2' import tinycolor from 'tinycolor2'
import { computed, ref, unref, useMetas, useTheme } from '#imports' import { computed, ref, unref, useMetas, useTheme } from '#imports'
export interface ErdFlowConfig { export interface ERDConfig {
showPkAndFk: boolean showPkAndFk: boolean
showViews: boolean showViews: boolean
showAllColumns: boolean showAllColumns: boolean
@ -47,7 +47,7 @@ interface Relation {
const nodeWidth = 300 const nodeWidth = 300
const nodeHeight = 50 const nodeHeight = 50
export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ErdFlowConfig>) { export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ERDConfig>) {
const elements = ref<Elements<NodeData | EdgeData>>([]) const elements = ref<Elements<NodeData | EdgeData>>([])
const { theme } = useTheme() const { theme } = useTheme()

Loading…
Cancel
Save