|
|
@ -1,6 +1,7 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
import { useColumnCreateStoreOrThrow, useVModel } from '#imports' |
|
|
|
import { useColumnCreateStoreOrThrow, useVModel, computed, inject, MetaInj, ref, useI18n,useBase, storeToRefs, useMetas } from '#imports' |
|
|
|
import {ModelTypes} from "nocodb-sdk"; |
|
|
|
import {isVirtualCol, ModelTypes, RelationTypes, UITypes} from "nocodb-sdk"; |
|
|
|
|
|
|
|
import type {ColumnType} from "nocodb-sdk"; |
|
|
|
|
|
|
|
|
|
|
|
const props = defineProps<{ |
|
|
|
const props = defineProps<{ |
|
|
|
value: any |
|
|
|
value: any |
|
|
@ -10,6 +11,8 @@ const emit = defineEmits(['update:value']) |
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
const { t } = useI18n() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const meta = inject(MetaInj, ref()) |
|
|
|
|
|
|
|
|
|
|
|
const vModel = useVModel(props, 'value', emit) |
|
|
|
const vModel = useVModel(props, 'value', emit) |
|
|
|
|
|
|
|
|
|
|
|
const { validateInfos, setAdditionalValidations, onDataTypeChange } = useColumnCreateStoreOrThrow() |
|
|
|
const { validateInfos, setAdditionalValidations, onDataTypeChange } = useColumnCreateStoreOrThrow() |
|
|
@ -17,80 +20,11 @@ const { validateInfos, setAdditionalValidations, onDataTypeChange } = useColumnC |
|
|
|
const baseStore = useBase() |
|
|
|
const baseStore = useBase() |
|
|
|
const { tables } = storeToRefs(baseStore) |
|
|
|
const { tables } = storeToRefs(baseStore) |
|
|
|
|
|
|
|
|
|
|
|
setAdditionalValidations({ |
|
|
|
const { metas, getMeta } = useMetas() |
|
|
|
'custom.colId': [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
validator: (_, value: string) => { |
|
|
|
const isMm = computed(() => vModel.value.type === RelationTypes.MANY_TO_MANY) |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
|
|
if (value?.length > 59) { |
|
|
|
|
|
|
|
return reject(t('msg.length59Required')) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
resolve(true) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
'custom.refTableId': [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
validator: (_, value: string) => { |
|
|
|
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
|
|
if (value?.length > 59) { |
|
|
|
|
|
|
|
return reject(t('msg.length59Required')) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
resolve(true) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
'custom.refColId': [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
validator: (_, value: string) => { |
|
|
|
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
|
|
if (value?.length > 59) { |
|
|
|
|
|
|
|
return reject(t('msg.length59Required')) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
resolve(true) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
'custom.juncTableId': [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
validator: (_, value: string) => { |
|
|
|
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
|
|
if (value?.length > 59) { |
|
|
|
|
|
|
|
return reject(t('msg.length59Required')) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
resolve(true) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
'custom.juncColId': [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
validator: (_, value: string) => { |
|
|
|
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
|
|
if (value?.length > 59) { |
|
|
|
|
|
|
|
return reject(t('msg.length59Required')) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
resolve(true) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
'custom.juncRefColId': [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
validator: (_, value: string) => { |
|
|
|
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
|
|
if (value?.length > 59) { |
|
|
|
|
|
|
|
return reject(t('msg.length59Required')) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
resolve(true) |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// set default value |
|
|
|
// set default value |
|
|
|
vModel.value.custom = { |
|
|
|
vModel.value.custom = { |
|
|
@ -107,51 +41,146 @@ const refTables = computed(() =>{ |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const columns = $computed(() => { |
|
|
|
const columns = computed(() => { |
|
|
|
if (!tables || !tables.length) { |
|
|
|
if (!meta.value?.columns) { |
|
|
|
return [] |
|
|
|
return [] |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return meta.value?.columns; |
|
|
|
return meta.value.columns; |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const refTableColumns = $computed(() => { |
|
|
|
const refTableColumns = computed(() => { |
|
|
|
if (!vModel.value.custom?.refTableId) { |
|
|
|
if (!vModel.value.custom?.ref_model_id || !metas.value[vModel.value.custom?.ref_model_id]) { |
|
|
|
return [] |
|
|
|
return [] |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return tables.find(table => table.id === vModel.value.custom?.refTableId)?.columns; |
|
|
|
|
|
|
|
|
|
|
|
return metas.value[vModel.value.custom?.ref_model_id]?.columns.filter( |
|
|
|
|
|
|
|
(c: ColumnType) => !isVirtualCol(c.uidt as UITypes), |
|
|
|
|
|
|
|
) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const juncTableColumns = $computed(() => { |
|
|
|
const juncTableColumns = computed(() => { |
|
|
|
if (!vModel.value.custom?.juncTableId) { |
|
|
|
if (!vModel.value.custom?.junc_model_id || !metas.value[vModel.value.custom?.junc_model_id]) { |
|
|
|
return [] |
|
|
|
return [] |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return tables.find(table => table.id === vModel.value.custom?.juncTableId)?.columns; |
|
|
|
|
|
|
|
|
|
|
|
return metas.value[vModel.value.custom?.junc_model_id]?.columns.filter( |
|
|
|
|
|
|
|
(c: ColumnType) => !isVirtualCol(c.uidt as UITypes), |
|
|
|
|
|
|
|
) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase()) |
|
|
|
const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase()) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onModelIdChange =async (modelId:string) =>{ |
|
|
|
|
|
|
|
await getMeta(modelId) |
|
|
|
|
|
|
|
await onDataTypeChange() |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<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> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="flex flex-row space-x-2"> |
|
|
|
<div class="flex flex-row space-x-2"> |
|
|
|
<a-form-item |
|
|
|
<a-form-item |
|
|
|
class="flex w-full pb-2 mt-4 nc-ltar-child-table" |
|
|
|
class="flex w-full pb-2 mt-4 nc-ltar-child-table" |
|
|
|
:label="$t('labels.childTable')" |
|
|
|
label="Ref table" |
|
|
|
v-bind="validateInfos.childId" |
|
|
|
v-bind="validateInfos['custom.ref_model_id']" |
|
|
|
> |
|
|
|
> |
|
|
|
<a-select |
|
|
|
<a-select |
|
|
|
v-model:value="vModel.custom.refTableId" |
|
|
|
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 tables" :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> |
|
|
|
|
|
|
|
</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 |
|
|
|
show-search |
|
|
|
:filter-option="filterOption" |
|
|
|
:filter-option="filterOption" |
|
|
|
dropdown-class-name="nc-dropdown-ltar-child-table" |
|
|
|
dropdown-class-name="nc-dropdown-ltar-child-table" |
|
|
|
@change="onDataTypeChange" |
|
|
|
@change="onDataTypeChange" |
|
|
|
> |
|
|
|
> |
|
|
|
<a-select-option v-for="table of refTables" :key="table.title" :value="table.id"> |
|
|
|
<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.ref_model_id)" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<a-select-option v-for="table of tables" :key="table.title" :value="table.id"> |
|
|
|
<div class="flex w-full items-center gap-2"> |
|
|
|
<div class="flex w-full items-center gap-2"> |
|
|
|
<div class="min-w-5 flex items-center justify-center"> |
|
|
|
<div class="min-w-5 flex items-center justify-center"> |
|
|
|
<GeneralTableIcon :meta="table" class="text-gray-500" /> |
|
|
|
<GeneralTableIcon :meta="table" class="text-gray-500" /> |
|
|
@ -165,5 +194,66 @@ const filterOption = (value: string, option: { key: string }) => option.key.toLo |
|
|
|
</a-select> |
|
|
|
</a-select> |
|
|
|
</a-form-item> |
|
|
|
</a-form-item> |
|
|
|
</div> |
|
|
|
</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> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|