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

fix(nc-gui): add relation settings tables

pull/8367/head
Ramesh Mane 4 months ago
parent
16e13e18a2
commit
f54ef63b3e
2 changed files with 636 additions and 204 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. 529
      packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
  2. 311
      packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions1.vue

529
packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
Unescape View File

@ -1,15 +1,27 @@
<script setup lang="ts">
import { useColumnCreateStoreOrThrow, useVModel, computed, inject, MetaInj, ref, useI18n,useBase,
useBases, storeToRefs, useMetas } from '#imports'
import {
useColumnCreateStoreOrThrow,
useVModel,
computed,
inject,
MetaInj,
ref,
useI18n,
useBase,
useBases,
storeToRefs,
useMetas,
} from '#imports'
import {
isCreatedOrLastModifiedByCol,
isCreatedOrLastModifiedTimeCol,
isVirtualCol,
ModelTypes,
RelationTypes,
} from "nocodb-sdk";
import {useTable} from "../../../composables/useTable";
import {useTablesStore} from "../../../store/tables";
type TableType,
} from 'nocodb-sdk'
import { useTable } from '../../../composables/useTable'
import { useTablesStore } from '../../../store/tables'
const props = defineProps<{
value: any
@ -19,30 +31,32 @@ const emit = defineEmits(['update:value'])
const { t } = useI18n()
const meta = inject(MetaInj, ref())
const meta = inject(MetaInj, ref({} as TableType))
const vModel = useVModel(props, 'value', emit)
const { validateInfos, setAdditionalValidations, onDataTypeChange } = useColumnCreateStoreOrThrow()
const baseStore = useBase()
// const { tables } = storeToRefs(baseStore)
// const baseStore = useBase()
// const { base } = storeToRefs(baseStore)
const { metas, getMeta } = useMetas()
const isMm = computed(() => vModel.value.type === RelationTypes.MANY_TO_MANY)
// set default value
vModel.value.custom = {
base_id: meta.value?.base_id
base_id: meta.value?.base_id,
}
console.log('meta', meta.value, vModel.value)
const { basesList, bases } = storeToRefs(useBases())
const tablesStore = useTablesStore()
const { baseTables } = storeToRefs(tablesStore)
const { baseTables, activeTable, activeTables: sourceTables } = storeToRefs(tablesStore)
const currentDisplayValueColumn = computed(() => {
return meta?.value?.columns?.find((f) => f.pv)
})
/*const refTables = computed(() =>{
@ -52,23 +66,23 @@ const { baseTables } = storeToRefs(tablesStore)
return tables.value.filter((t) => t.type === ModelTypes.TABLE && t.source_id === meta.value?.source_id)
})*/
const refTables = computed(() =>{
const refTables = computed(() => {
if (!baseTables.value.get(vModel.value.custom.base_id)) {
return []
}
return [...baseTables.value.get(vModel.value.custom.base_id).filter((t) => t.type === ModelTypes.TABLE),
...(vModel.value.custom.base_id !== meta.value?.base_id ? baseTables.value.get(meta.value.base_id).filter((t) => t.type === ModelTypes.TABLE) : [])
]
return [...baseTables.value.get(vModel.value.custom.base_id).filter((t) => t.type === ModelTypes.TABLE)]
})
const columns = computed(() => {
if (!meta.value?.columns) {
return []
}
return meta.value.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c));
return meta.value.columns?.filter(
(c) => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c),
)
})
const refTableColumns = computed(() => {
@ -76,8 +90,9 @@ const refTableColumns = computed(() => {
return []
}
return metas.value[vModel.value.custom?.ref_model_id]?.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c))
return metas.value[vModel.value.custom?.ref_model_id]?.columns?.filter(
(c) => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c),
)
})
const juncTableColumns = computed(() => {
@ -85,22 +100,21 @@ const juncTableColumns = computed(() => {
return []
}
return metas.value[vModel.value.custom?.junc_model_id]?.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c))
return metas.value[vModel.value.custom?.junc_model_id]?.columns?.filter(
(c) => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c),
)
})
const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
const onModelIdChange =async (modelId:string) =>{
const onModelIdChange = async (modelId: string) => {
// todo: optimise
await getMeta(modelId, false, false, vModel.value.custom.base_id)
await getMeta(modelId)
await onDataTypeChange()
}
const onBaseChange = async (baseId) =>{
const onBaseChange = async (baseId) => {
await tablesStore.loadProjectTables(baseId)
vModel.value.custom.ref_model_id = null
}
@ -108,203 +122,310 @@ const onBaseChange = async (baseId) =>{
<template>
<div v-if="validateInfos">
<div class="flex flex-row space-x-2">
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Column"
v-bind="validateInfos['custom.column_id']"
>
<a-select
v-model:value="vModel.custom.column_id"
<div class="mb-2">Relation Settings</div>
<div class="flex items-start gap-3">
<div class="nc-relation-settings-table flex flex-col">
<div class="nc-relation-settings-table-header">Source</div>
<a-form-item class="nc-relation-settings-table-row disabled nc-ltar-source-base" v-bind="validateInfos['custom.base_id']">
<a-select
:value="meta.base_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange"
>
<a-select-option v-for="column of columns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
disabled
:bordered="false"
dropdown-class-name="nc-dropdown-ltar-source-base"
>
<a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<!-- <GeneralTableIcon :meta="base" class="text-gray-500" /> -->
<GeneralProjectIcon :color="parseProp(base.meta).iconColor" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ base.title }}</template>
<span>{{ base.title }}</span>
</NcTooltip>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Target base"
v-bind="validateInfos['custom.base_id']"
>
<a-select
v-model:value="vModel.custom.base_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onBaseChange(vModel.custom.base_id)"
>
<a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="base" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ base.title }}</template>
<span>{{ base.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
<div class="flex flex-row space-x-2">
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Ref table"
v-bind="validateInfos['custom.ref_model_id']"
>
<a-select
v-model:value="vModel.custom.ref_model_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onModelIdChange(vModel.custom.ref_model_id)"
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
<a-form-item
class="nc-relation-settings-table-row disabled nc-ltar-source-table"
v-bind="validateInfos['custom.base_id']"
>
<a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="table" class="text-gray-500" />
<a-select
:value="activeTable?.id"
show-search
:filter-option="filterOption"
disabled
:bordered="false"
dropdown-class-name="nc-dropdown-ltar-source-table"
>
<a-select-option v-for="table of sourceTables" :key="table.title" :value="table.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="table" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ table.title }}</template>
<span>{{ table.title }}</span>
</NcTooltip>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ table.title }}</template>
<span>{{ table.title }} <span class="text-8px">({{bases.get(table.base_id)?.title }})</span></span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Ref column"
v-bind="validateInfos['custom.ref_column_id']"
>
<a-select
v-model:value="vModel.custom.ref_column_id"
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
<a-form-item class="nc-relation-settings-table-row nc-ltar-source-column" v-bind="validateInfos['custom.column_id']">
<a-select
v-model:value="vModel.custom.column_id"
show-search
placeholder="-select field-"
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
:bordered="false"
:default-value="currentDisplayValueColumn?.id"
dropdown-class-name="nc-dropdown-ltar-source-column !text-xs"
@change="onDataTypeChange"
>
<a-select-option v-for="column of refTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
>
<a-select-option v-for="column of columns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<SmartsheetHeaderVirtualCellIcon
v-if="isVirtualCol(column)"
:column-meta="column"
></SmartsheetHeaderVirtualCellIcon>
<SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
<template v-if="isMm">
<div class="flex flex-row space-x-2">
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Junction table"
v-bind="validateInfos['custom.junc_model_id']"
>
<a-select
v-model:value="vModel.custom.junc_model_id"
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
</div>
<template v-if="isMm">
<div class="nc-relation-settings-table flex flex-col">
<div class="nc-relation-settings-table-header">Junction</div>
<a-form-item
class="nc-relation-settings-table-row nc-ltar-junction-table"
v-bind="validateInfos['custom.junc_model_id']"
>
<a-select
v-model:value="vModel.custom.junc_model_id"
show-search
:bordered="false"
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onModelIdChange(vModel.custom.junc_model_id)"
>
<a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="table" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ table.title }}</template>
<span
>{{ table.title }} <span class="text-8px">({{ bases.get(table.base_id)?.title }})</span></span
>
</NcTooltip>
</div>
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
<a-form-item
class="nc-relation-settings-table-row nc-ltar-junction-column"
v-bind="validateInfos['custom.junc_column_id']"
>
<a-select
v-model:value="vModel.custom.junc_column_id"
show-search
:bordered="false"
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<SmartsheetHeaderVirtualCellIcon
v-if="isVirtualCol(column)"
:column-meta="column"
></SmartsheetHeaderVirtualCellIcon>
<SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Ref column in jn table"
v-bind="validateInfos['custom.junc_ref_column_id']"
>
<a-select
v-model:value="vModel.custom.junc_ref_column_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
</template>
<div class="nc-relation-settings-table flex flex-col">
<div class="nc-relation-settings-table-header">Child</div>
<a-form-item class="nc-relation-settings-table-row nc-ltar-child-base" v-bind="validateInfos['custom.base_id']">
<a-select
v-model:value="vModel.custom.base_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onModelIdChange(vModel.custom.junc_model_id)"
>
<a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="table" class="text-gray-500" />
:bordered="false"
dropdown-class-name="nc-dropdown-ltar-child-base"
@change="onBaseChange(vModel.custom.base_id)"
>
<a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralProjectIcon :color="parseProp(base.meta).iconColor" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ base.title }}</template>
<span>{{ base.title }}</span>
</NcTooltip>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ table.title }}</template>
<span>{{ table.title }} <span class="text-8px">({{bases.get(table.base_id)?.title }})</span></span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
<div class="flex flex-row space-x-2">
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Column in jn table"
v-bind="validateInfos['custom.junc_column_id']"
>
<a-select
v-model:value="vModel.custom.junc_column_id"
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
<a-form-item class="nc-relation-settings-table-row nc-ltar-child-table" v-bind="validateInfos['custom.ref_model_id']">
<a-select
v-model:value="vModel.custom.ref_model_id"
show-search
placeholder="-select table-"
:filter-option="filterOption"
:bordered="false"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
@change="onModelIdChange(vModel.custom.ref_model_id)"
>
<a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="table" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ table.title }}</template>
<span>{{ table.title }}</span>
</NcTooltip>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Ref column in jn table"
v-bind="validateInfos['custom.junc_ref_column_id']"
>
<a-select
v-model:value="vModel.custom.junc_ref_column_id"
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
<a-form-item class="nc-relation-settings-table-row nc-ltar-child-column" v-bind="validateInfos['custom.ref_column_id']">
<a-select
v-model:value="vModel.custom.ref_column_id"
show-search
placeholder="-select field-"
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
:bordered="false"
dropdown-class-name="nc-dropdown-ltar-child-column !text-xs"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
>
<a-select-option v-for="column of refTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<SmartsheetHeaderVirtualCellIcon
v-if="isVirtualCol(column)"
:column-meta="column"
></SmartsheetHeaderVirtualCellIcon>
<SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
</div>
</div>
</template>
</div>
</template>
<style lang="scss" scoped>
.nc-relation-settings-table {
@apply min-w-[180px] w-[180px] flex flex-col border-1 border-gray-200 rounded-lg;
.nc-relation-settings-table-header {
@apply px-3 py-2 flex items-center space-x-3 bg-gray-100 text-xs font-semibold border-b border-gray-200;
}
.nc-relation-settings-table-row {
@apply py-[1px] w-full flex items-center space-x-2 !my-0;
&:not(:last-child) {
@apply border-b border-gray-200;
}
&.disabled {
@apply bg-gray-50 text-gray-400;
}
:deep(.ant-select-selector) {
@apply px-4 text-xs;
.ant-select-selection-search-input {
@apply pl-2;
}
}
:deep(.ant-select-arrow) {
@apply mr-2;
}
}
}
</style>

311
packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions1.vue
Unescape View File

@ -0,0 +1,311 @@
<script setup lang="ts">
import { useColumnCreateStoreOrThrow, useVModel, computed, inject, MetaInj, ref, useI18n,useBase,
useBases, storeToRefs, useMetas } from '#imports'
import {
isCreatedOrLastModifiedByCol,
isCreatedOrLastModifiedTimeCol,
isVirtualCol,
ModelTypes,
RelationTypes,
} from "nocodb-sdk";
import {useTable} from "../../../composables/useTable";
import {useTablesStore} from "../../../store/tables";
const props = defineProps<{
value: any
}>()
const emit = defineEmits(['update:value'])
const { t } = useI18n()
const meta = inject(MetaInj, ref())
const vModel = useVModel(props, 'value', emit)
const { validateInfos, setAdditionalValidations, onDataTypeChange } = useColumnCreateStoreOrThrow()
const baseStore = useBase()
// const { tables } = storeToRefs(baseStore)
const { metas, getMeta } = useMetas()
const isMm = computed(() => vModel.value.type === RelationTypes.MANY_TO_MANY)
// set default value
vModel.value.custom = {
base_id: meta.value?.base_id
}
const { basesList, bases } = storeToRefs(useBases())
const tablesStore = useTablesStore()
const { baseTables } = storeToRefs(tablesStore)
/*const refTables = computed(() =>{
if (!tables.value || !tables.value.length) {
return []
}
return tables.value.filter((t) => t.type === ModelTypes.TABLE && t.source_id === meta.value?.source_id)
})*/
const refTables = computed(() =>{
if (!baseTables.value.get(vModel.value.custom.base_id)) {
return []
}
return [...baseTables.value.get(vModel.value.custom.base_id).filter((t) => t.type === ModelTypes.TABLE),
...(vModel.value.custom.base_id !== meta.value?.base_id ? baseTables.value.get(meta.value.base_id).filter((t) => t.type === ModelTypes.TABLE) : [])
]
})
const columns = computed(() => {
if (!meta.value?.columns) {
return []
}
return meta.value.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c));
})
const refTableColumns = computed(() => {
if (!vModel.value.custom?.ref_model_id || !metas.value[vModel.value.custom?.ref_model_id]) {
return []
}
return metas.value[vModel.value.custom?.ref_model_id]?.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c))
})
const juncTableColumns = computed(() => {
if (!vModel.value.custom?.junc_model_id || !metas.value[vModel.value.custom?.junc_model_id]) {
return []
}
return metas.value[vModel.value.custom?.junc_model_id]?.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c))
})
const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
const onModelIdChange =async (modelId:string) =>{
// todo: optimise
await getMeta(modelId, false, false, vModel.value.custom.base_id)
await getMeta(modelId)
await onDataTypeChange()
}
const onBaseChange = async (baseId) =>{
await tablesStore.loadProjectTables(baseId)
vModel.value.custom.ref_model_id = null
}
</script>
<template>
<div v-if="validateInfos">
<div class="flex flex-row space-x-2">
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Column"
v-bind="validateInfos['custom.column_id']"
>
<a-select
v-model:value="vModel.custom.column_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange"
>
<a-select-option v-for="column of columns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Target base"
v-bind="validateInfos['custom.base_id']"
>
<a-select
v-model:value="vModel.custom.base_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onBaseChange(vModel.custom.base_id)"
>
<a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="base" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ base.title }}</template>
<span>{{ base.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
<div class="flex flex-row space-x-2">
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Ref table"
v-bind="validateInfos['custom.ref_model_id']"
>
<a-select
v-model:value="vModel.custom.ref_model_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onModelIdChange(vModel.custom.ref_model_id)"
>
<a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="table" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ table.title }}</template>
<span>{{ table.title }} <span class="text-8px">({{bases.get(table.base_id)?.title }})</span></span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Ref column"
v-bind="validateInfos['custom.ref_column_id']"
>
<a-select
v-model:value="vModel.custom.ref_column_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange"
>
<a-select-option v-for="column of refTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
<template v-if="isMm">
<div class="flex flex-row space-x-2">
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Junction table"
v-bind="validateInfos['custom.junc_model_id']"
>
<a-select
v-model:value="vModel.custom.junc_model_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onModelIdChange(vModel.custom.junc_model_id)"
>
<a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="table" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ table.title }}</template>
<span>{{ table.title }} <span class="text-8px">({{bases.get(table.base_id)?.title }})</span></span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
<div class="flex flex-row space-x-2">
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Column in jn table"
v-bind="validateInfos['custom.junc_column_id']"
>
<a-select
v-model:value="vModel.custom.junc_column_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
class="flex w-full pb-2 mt-4 nc-ltar-child-table"
label="Ref column in jn table"
v-bind="validateInfos['custom.junc_ref_column_id']"
>
<a-select
v-model:value="vModel.custom.junc_ref_column_id"
show-search
:filter-option="filterOption"
dropdown-class-name="nc-dropdown-ltar-child-table"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<GeneralTableIcon :meta="column" class="text-gray-500" />
</div>
<NcTooltip class="flex-1 truncate" show-on-truncate-only>
<template #title>{{ column.title }}</template>
<span>{{ column.title }}</span>
</NcTooltip>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
</template>
</div>
</template>
Write Preview
Loading…
Cancel
Save