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

refactor(nc-gui): use panel for erd config options

pull/4071/head
braks 2 years ago
parent
aa224a8c3d
commit
9f50084bdd
2 changed files with 56 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      packages/nc-gui/components/erd/Flow.vue
  2. 104
      packages/nc-gui/components/erd/View.vue

4
packages/nc-gui/components/erd/Flow.vue
Unescape View File

@ -65,7 +65,7 @@ onScopeDispose($destroy)
<template> <template>
<VueFlow v-model="elements"> <VueFlow v-model="elements">
<Controls class="rounded" position="top-right" :show-fit-view="false" :show-interactive="false" /> <Controls class="rounded" position="bottom-left" :show-fit-view="false" :show-interactive="false" />
<template #node-custom="{ data }"> <template #node-custom="{ data }">
<ErdTableNode :data="data" :show-skeleton="showSkeleton" /> <ErdTableNode :data="data" :show-skeleton="showSkeleton" />
@ -104,6 +104,8 @@ onScopeDispose($destroy)
Zoom in to view columns Zoom in to view columns
</div> </div>
</Transition> </Transition>
<slot />
</VueFlow> </VueFlow>
</template> </template>

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

@ -1,4 +1,5 @@
<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 { ErdFlowConfig } from './utils'
@ -104,57 +105,58 @@ watch(
</GeneralOverlay> </GeneralOverlay>
<div class="relative h-full"> <div class="relative h-full">
<LazyErdFlow :tables="tables" :config="config" /> <LazyErdFlow :tables="tables" :config="config">
<Panel
<div class="flex flex-col bg-white border-1 rounded border-gray-200 z-50 px-3 py-1 nc-erd-context-menu"
class="absolute top-3.5 right-12 flex-col bg-white shadow-sm px-3 py-0.75 border-1 border-gray-100 rounded z-50 space-y-1 nc-erd-context-menu z-50" position="top-right"
> >
<div class="flex flex-row items-center"> <div class="flex items-center gap-2">
<a-checkbox <a-checkbox
v-model:checked="config.showAllColumns" v-model:checked="config.showAllColumns"
v-e="['c:erd:showAllColumns']" v-e="['c:erd:showAllColumns']"
class="nc-erd-showColumns-checkbox" class="nc-erd-showColumns-checkbox"
/> />
<span <span class="select-none nc-erd-showColumns-label" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">
class="ml-2 select-none nc-erd-showColumns-label" {{ $t('activity.erd.showColumns') }}
style="font-size: 0.65rem" </span>
@dblclick="showAdvancedOptions = true" </div>
>
{{ $t('activity.erd.showColumns') }} <div class="flex items-center gap-2">
</span> <a-checkbox
</div> v-model:checked="config.showPkAndFk"
<div class="flex flex-row items-center"> v-e="['c:erd:showPkAndFk']"
<a-checkbox class="nc-erd-showPkAndFk-checkbox"
v-model:checked="config.showPkAndFk" :class="{
v-e="['c:erd:showPkAndFk']" 'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
class="nc-erd-showPkAndFk-checkbox" 'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
:class="{ 'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns, 'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns, }"
'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk, :disabled="!config.showAllColumns"
'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk, />
}" <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
:disabled="!config.showAllColumns" </div>
/>
<span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span> <div v-if="!table" class="flex items-center gap-2">
</div> <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
<div v-if="!table" class="flex flex-row items-center"> <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
<a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" /> </div>
<span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
</div> <div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
<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" />
<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>
<span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span> </div>
</div>
<div v-if="showAdvancedOptions && includeM2M" class="flex flex-row items-center"> <div v-if="showAdvancedOptions && includeM2M" class="flex items-center gap-2">
<a-checkbox <a-checkbox
v-model:checked="config.showJunctionTableNames" v-model:checked="config.showJunctionTableNames"
v-e="['c:erd:showJunctionTableNames']" v-e="['c:erd:showJunctionTableNames']"
class="nc-erd-showJunctionTableNames-checkbox" class="nc-erd-showJunctionTableNames-checkbox"
/> />
<span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span> <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
</div> </div>
</div> </Panel>
</LazyErdFlow>
</div> </div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save