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.
312 lines
11 KiB
312 lines
11 KiB
5 months ago
|
<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>
|
||
|
|
|