mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.6 KiB
102 lines
2.6 KiB
<script setup lang="ts"> |
|
import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk' |
|
import { UITypes } from 'nocodb-sdk' |
|
import type { ERDConfig } from './utils' |
|
import { reactive, ref, useMetas, useProject, watch } from '#imports' |
|
|
|
const { table } = defineProps<{ table?: TableType }>() |
|
|
|
const { tables: projectTables } = useProject() |
|
|
|
const { metas, getMeta } = useMetas() |
|
|
|
const tables = ref<TableType[]>([]) |
|
|
|
let isLoading = $ref(true) |
|
|
|
const config = reactive<ERDConfig>({ |
|
showPkAndFk: true, |
|
showViews: false, |
|
showAllColumns: true, |
|
singleTableMode: !!table, |
|
showMMTables: false, |
|
showJunctionTableNames: false, |
|
}) |
|
|
|
const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => { |
|
await Promise.all( |
|
localTables |
|
.filter((table) => !metas.value[table.id!]) |
|
.map(async (table) => { |
|
await getMeta(table.id!) |
|
}), |
|
) |
|
} |
|
|
|
const populateTables = async () => { |
|
let localTables: TableType[] |
|
|
|
if (table) { |
|
// if table is provided only get the table and its related tables |
|
localTables = projectTables.value.filter( |
|
(t) => |
|
t.id === table.id || |
|
table.columns?.find( |
|
(column) => |
|
column.uidt === UITypes.LinkToAnotherRecord && |
|
(column.colOptions as LinkToAnotherRecordType)?.fk_related_model_id === t.id, |
|
), |
|
) |
|
} else { |
|
localTables = projectTables.value |
|
} |
|
|
|
await loadMetaOfTablesNotInMetas(localTables) |
|
|
|
tables.value = localTables |
|
.filter( |
|
(t) => |
|
config.showMMTables || |
|
(!config.showMMTables && !t.mm) || |
|
// Show mm table if it's the selected table |
|
t.id === table?.id, |
|
) |
|
.filter((t) => config.singleTableMode || (!config.showViews && t.type !== 'view') || config.showViews) |
|
|
|
isLoading = false |
|
} |
|
|
|
watch([metas, projectTables], populateTables, { |
|
flush: 'post', |
|
immediate: true, |
|
}) |
|
|
|
watch(config, populateTables, { |
|
flush: 'post', |
|
deep: true, |
|
}) |
|
|
|
watch( |
|
() => config.showAllColumns, |
|
() => { |
|
config.showPkAndFk = config.showAllColumns |
|
}, |
|
) |
|
</script> |
|
|
|
<template> |
|
<div class="w-full" style="height: inherit" :class="[`nc-erd-vue-flow${config.singleTableMode ? '-single-table' : ''}`]"> |
|
<div class="relative h-full"> |
|
<LazyErdFlow :tables="tables" :config="config"> |
|
<GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50"> |
|
<div class="h-full w-full flex flex-col justify-center items-center"> |
|
<a-spin size="large" /> |
|
</div> |
|
</GeneralOverlay> |
|
|
|
<ErdConfigPanel :config="config" /> |
|
<ErdHistogramPanel v-if="!config.singleTableMode" /> |
|
</LazyErdFlow> |
|
</div> |
|
</div> |
|
</template>
|
|
|