mirror of https://github.com/nocodb/nocodb
Ramesh Mane
5 months ago
2 changed files with 18 additions and 314 deletions
@ -1,311 +0,0 @@
|
||||
<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> |
||||
|
Loading…
Reference in new issue