github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): node height

pull/4071/head
braks 2 years ago
parent
8ce6904edb
commit
b84e5d78fe
2 changed files with 45 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 71
      packages/nc-gui/components/erd/TableNode.vue
  2. 22
      packages/nc-gui/components/erd/utils.ts

71
packages/nc-gui/components/erd/TableNode.vue
Unescape View File

@ -3,41 +3,30 @@ import type { NodeProps } from '@vue-flow/core'
import { Handle, Position } from '@vue-flow/core'
import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
import { UITypes, isVirtualCol } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { MetaInj, computed, provide, toRefs, useNuxtApp } from '#imports'
import { MetaInj, provide, toRef, useNuxtApp } from '#imports'
interface NodeData {
table: TableType
pkAndFkColumns: ColumnType[]
nonPkColumns: ColumnType[]
showPkAndFk: boolean
showAllColumns: boolean
color: string
}
interface Props extends NodeProps {
data: TableType & { showPkAndFk: boolean; showAllColumns: boolean; color: string }
interface Props extends NodeProps<NodeData> {
data: NodeData
showSkeleton: boolean
}
const props = defineProps<Props>()
const { data, showSkeleton } = defineProps<Props>()
const { data } = toRefs(props)
const table = toRef(data, 'table')
provide(MetaInj, data as Ref<TableType>)
provide(MetaInj, table)
const { $e } = useNuxtApp()
const columns = computed(() => {
// Hide hm ltar created for `mm` relations
return data.value.columns?.filter((col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1))
})
const pkAndFkColumns = computed(() => {
return columns.value
?.filter(() => data.value.showPkAndFk && data.value.showAllColumns)
.filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
})
const nonPkColumns = computed(() => {
return columns.value
?.filter(
(col: ColumnType) => data.value.showAllColumns || (!data.value.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
)
.filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
})
const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
colOptions.type === 'mm' ? colOptions.fk_parent_column_id : colOptions.fk_child_column_id
</script>
@ -46,23 +35,23 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
<div
class="relative h-full flex flex-col justify-center items-center bg-slate-50 min-w-16 rounded-lg nc-erd-table-node"
:class="[
`nc-erd-table-node-${data.table_name}`,
`nc-erd-table-node-${table.table_name}`,
showSkeleton ? 'cursor-pointer bg-slate-200 min-h-200px min-w-300px px-4' : '',
]"
@click="$e('c:erd:node-click')"
>
<GeneralTooltip class="h-full flex flex-1 justify-center items-center" modifier-key="Alt">
<template #title> {{ data.table_name }} </template>
<template #title> {{ table.table_name }} </template>
<div
:class="[showSkeleton ? '' : 'bg-primary bg-opacity-10 border-b-1']"
class="text-slate-600 text-md py-2 border-slate-500 rounded-t-lg w-full h-full px-3 font-semibold flex items-center"
>
<MdiTableLarge v-if="data.type === 'table'" class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
<MdiTableLarge v-if="table.type === 'table'" class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
<MdiEyeCircleOutline v-else class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
<div :class="showSkeleton ? 'text-6xl' : ''" class="flex px-2">
{{ data.title }}
{{ table.title }}
</div>
</div>
</GeneralTooltip>
@ -72,30 +61,30 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
<Handle style="right: -15px" class="opacity-0" :position="Position.Right" type="source" :connectable="false" />
</div>
<div v-else-if="nonPkColumns.length || pkAndFkColumns.length">
<div v-else-if="data.nonPkColumns.length || data.pkAndFkColumns.length">
<div
v-for="col in pkAndFkColumns"
v-for="col in data.pkAndFkColumns"
:key="col.title"
class="w-full border-b-1 py-2 border-slate-200 bg-slate-100"
:class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
:class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
>
<LazySmartsheetHeaderCell v-if="col" :column="col" :hide-menu="true" />
</div>
<div v-if="nonPkColumns.length" class="w-full mb-1"></div>
<div v-if="data.nonPkColumns.length" class="w-full mb-1"></div>
<div v-for="(col, index) in nonPkColumns" :key="col.title">
<div v-for="(col, index) in data.nonPkColumns" :key="col.title">
<div
class="relative w-full h-full flex items-center min-w-32 border-slate-200 py-2 px-1"
:class="index + 1 === nonPkColumns.length ? 'rounded-b-lg' : 'border-b-1'"
:class="index + 1 === data.nonPkColumns.length ? 'rounded-b-lg' : 'border-b-1'"
>
<div
v-if="col.uidt === UITypes.LinkToAnotherRecord"
class="flex w-full"
:class="`nc-erd-table-node-${data.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
:class="`nc-erd-table-node-${table.table_name}-column-${col.title?.toLowerCase().replace(' ', '_')}`"
>
<Handle
:id="`s-${relatedColumnId(col.colOptions)}-${data.id}`"
:id="`s-${relatedColumnId(col.colOptions)}-${table.id}`"
class="opacity-0 !right-[-1px]"
type="source"
:position="Position.Right"
@ -103,7 +92,7 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
/>
<Handle
:id="`d-${relatedColumnId(col.colOptions)}-${data.id}`"
:id="`d-${relatedColumnId(col.colOptions)}-${table.id}`"
class="opacity-0 !left-[-1px]"
type="target"
:position="Position.Left"
@ -117,14 +106,14 @@ const relatedColumnId = (colOptions: LinkToAnotherRecordType | any) =>
v-else-if="isVirtualCol(col)"
:column="col"
:hide-menu="true"
:class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
:class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
/>
<LazySmartsheetHeaderCell
v-else
:column="col"
:hide-menu="true"
:class="`nc-erd-table-node-${data.table_name}-column-${col.column_name}`"
:class="`nc-erd-table-node-${table.table_name}-column-${col.column_name}`"
/>
</div>
</div>

22
packages/nc-gui/components/erd/utils.ts
Unescape View File

@ -27,7 +27,7 @@ interface Relation {
}
const nodeWidth = 300
const nodeHeight = 50
const nodeHeight = 35
export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ErdFlowConfig>) {
const elements = ref<Elements>([])
@ -145,17 +145,27 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
const columns =
metasWithIdAsKey.value[table.id].columns?.filter(
(col) => config.showAllColumns || (!config.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord),
(col) => !(col.uidt === UITypes.LinkToAnotherRecord && col.system === 1),
) || []
const pkAndFkColumns = columns
.filter(() => config.showPkAndFk && config.showAllColumns)
.filter((col) => col.pk || col.uidt === UITypes.ForeignKey)
const nonPkColumns = columns
.filter((col) => config.showAllColumns || (!config.showAllColumns && col.uidt === UITypes.LinkToAnotherRecord))
.filter((col: ColumnType) => !col.pk && col.uidt !== UITypes.ForeignKey)
return [
{
id: table.id,
data: {
...metasWithIdAsKey.value[table.id],
table: metasWithIdAsKey.value[table.id],
pkAndFkColumns,
nonPkColumns,
showPkAndFk: config.showPkAndFk,
showAllColumns: config.showAllColumns,
columnLength: columns.length,
columnLength: pkAndFkColumns.length + nonPkColumns.length,
},
type: 'custom',
position: { x: 0, y: 0 },
@ -254,11 +264,9 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<Er
elements.value.forEach((el) => {
if (isNode(el)) {
console.log(el.data.columnLength)
dagreGraph.setNode(el.id, {
width: skeleton ? nodeWidth * 2.5 : nodeWidth,
height: nodeHeight + (skeleton ? 250 : nodeHeight * el.data.columnLength),
height: 50 + (skeleton ? 250 : nodeHeight * el.data.columnLength),
})
} else if (isEdge(el)) {
// avoid duplicate edges when using skeleton

Write Preview
Loading…
Cancel
Save