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

<script setup lang="ts">
import { Panel } from '@vue-flow/additional-components'
import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'
import type { ErdFlowConfig } from './utils'
import { ref, useGlobal, useMetas, useProject, watch } from '#imports'

const { table } = defineProps<{ table?: TableType }>()

const { includeM2M } = useGlobal()

const { tables: projectTables } = useProject()

const { metas, getMeta } = useMetas()

const tables = ref<TableType[]>([])

let isLoading = $ref(true)

const showAdvancedOptions = ref(false)

const config = ref<ErdFlowConfig>({
  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.value.showMMTables ||
        (!config.value.showMMTables && !t.mm) ||
        // Show mm table if it's the selected table
        t.id === table?.id,
    )
    .filter((t) => (!config.value.showViews && t.type !== 'view') || config.value.showViews)

  isLoading = false
}

watch([metas, projectTables], populateTables, {
  flush: 'post',
  immediate: true,
})

watch(config, populateTables, {
  flush: 'post',
  deep: true,
})

watch(
  () => config.value.showAllColumns,
  () => {
    config.value.showPkAndFk = config.value.showAllColumns
  },
)
</script>

<template>
  <div
    class="w-full"
    style="height: inherit"
    :class="{
      'nc-erd-vue-flow': !config.singleTableMode,
      'nc-erd-vue-flow-single-table': config.singleTableMode,
    }"
  >
    <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>

    <div class="relative h-full">
      <LazyErdFlow :tables="tables" :config="config">
        <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="!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>
    </div>
  </div>
</template>