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

fix(nc-gui): on toggle validate field error

pull/8367/head
Ramesh Mane 4 months ago
parent
e5eb471499
commit
1b04bac817
3 changed files with 58 additions and 25 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. 58
      packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
  2. 5
      packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
  3. 8
      packages/nc-gui/composables/useColumnCreateStore.ts

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

@ -35,7 +35,7 @@ const meta = inject(MetaInj, ref({} as TableType))
const vModel = useVModel(props, 'value', emit)
const { validateInfos, setAdditionalValidations, onDataTypeChange } = useColumnCreateStoreOrThrow()
const { validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
// const baseStore = useBase()
// const { base } = storeToRefs(baseStore)
@ -55,7 +55,6 @@ vModel.value.custom = {
junc_base_id: meta.value?.base_id,
}
console.log('meta', meta.value, vModel.value)
const { basesList, bases } = storeToRefs(useBases())
const tablesStore = useTablesStore()
const { baseTables, activeTable, activeTables: sourceTables } = storeToRefs(tablesStore)
@ -121,20 +120,39 @@ const juncTableColumns = computed(() => {
const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
const resetSelectedColumns = (isJunction: boolean = false) => {
const resetSelectedColumns = (isJunction: boolean = false, resetOnChangeDataType: boolean = false) => {
if (isJunction) {
if (vModel.value.custom.junc_column_id) {
if (resetOnChangeDataType) {
if (sourceColumn.value?.dt !== juncTableColumns.value.find((c) => c.id === vModel.value.custom.junc_column_id)?.dt) {
vModel.value.custom.junc_column_id = null
}
} else {
vModel.value.custom.junc_column_id = null
}
}
if (vModel.value.custom.junc_ref_column_id) {
if (resetOnChangeDataType) {
if (sourceColumn.value?.dt !== juncTableColumns.value.find((c) => c.id === vModel.value.custom.junc_ref_column_id)?.dt) {
vModel.value.custom.junc_ref_column_id = null
}
} else {
vModel.value.custom.junc_ref_column_id = null
}
}
} else {
if (vModel.value.custom.ref_column_id) {
if (resetOnChangeDataType) {
if (sourceColumn.value?.dt !== refTableColumns.value.find((c) => c.id === vModel.value.custom.ref_column_id)?.dt) {
vModel.value.custom.ref_column_id = null
}
} else {
vModel.value.custom.ref_column_id = null
}
}
}
}
const onModelIdChange = async (modelId: string, isJunctionModel: boolean = false) => {
// todo: optimise
await getMeta(modelId, false, false, vModel.value.custom.base_id)
@ -159,6 +177,12 @@ const onBaseChange = async (baseId, isJunctionBase: boolean = false) => {
}
}
const onSourceColumnChange = async () => {
await onDataTypeChange()
resetSelectedColumns(true, true)
resetSelectedColumns(false, true)
}
const getBaseIconColor = (base, selectedBaseId) => {
if (base.id === selectedBaseId) {
return undefined
@ -183,7 +207,7 @@ watch(pkColumn, () => {
<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-form-item class="nc-relation-settings-table-row disabled nc-ltar-source-base">
<a-select
:value="meta.base_id"
show-search
@ -209,10 +233,7 @@ watch(pkColumn, () => {
</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-form-item class="nc-relation-settings-table-row disabled nc-ltar-source-table">
<a-select
:value="activeTable?.id"
show-search
@ -245,7 +266,7 @@ watch(pkColumn, () => {
:filter-option="filterOption"
:bordered="false"
dropdown-class-name="nc-dropdown-ltar-source-column !text-xs"
@change="onDataTypeChange"
@change="onSourceColumnChange"
>
<a-select-option v-for="column of columns" :key="column.title" :value="column.id">
<div class="flex w-full items-center gap-2">
@ -273,7 +294,7 @@ watch(pkColumn, () => {
<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-base" v-bind="validateInfos['custom.junc_base_id']">
<a-form-item class="nc-relation-settings-table-row nc-ltar-junction-base">
<a-select
v-model:value="vModel.custom.junc_base_id"
show-search
@ -341,7 +362,12 @@ watch(pkColumn, () => {
dropdown-class-name="nc-dropdown-ltar-source-junction-column"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id" :disabled="sourceColumn?.dt !== column.dt">
<a-select-option
v-for="column of juncTableColumns"
:key="column.title"
:value="column.id"
:disabled="sourceColumn?.dt !== column.dt"
>
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<SmartsheetHeaderVirtualCellIcon
@ -378,7 +404,12 @@ watch(pkColumn, () => {
dropdown-class-name="nc-dropdown-ltar-child-junction-column"
@change="onDataTypeChange"
>
<a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id" :disabled="sourceColumn?.dt !== column.dt">
<a-select-option
v-for="column of juncTableColumns"
:key="column.title"
:value="column.id"
:disabled="sourceColumn?.dt !== column.dt"
>
<div class="flex w-full items-center gap-2">
<div class="min-w-5 flex items-center justify-center">
<SmartsheetHeaderVirtualCellIcon
@ -406,7 +437,7 @@ watch(pkColumn, () => {
<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-form-item class="nc-relation-settings-table-row nc-ltar-child-base">
<a-select
v-model:value="vModel.custom.base_id"
show-search
@ -537,7 +568,6 @@ watch(pkColumn, () => {
.nc-table-icon {
@apply text-gray-500;
}
.nc-relation-settings-table-connector-point {

5
packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
Unescape View File

@ -220,7 +220,7 @@ const onCustomSwitchToggle = () => {
<div class="mt-3">
<LazySmartsheetColumnLinkAdvancedOptions v-if="vModel.is_custom_link" v-model:value="vModel" />
<template v-else>
<a-form-item class="flex w-full pb-2 nc-ltar-child-table" v-bind="validateInfos.childId">
<a-form-item class="flex w-full pb-2 nc-ltar-child-table" v-bind="validateInfos['childId']">
<a-select
v-model:value="referenceTableChildId"
show-search
@ -244,6 +244,9 @@ const onCustomSwitchToggle = () => {
</NcTooltip>
</div>
</a-select-option>
<template #suffixIcon>
<GeneralIcon class="" icon="chevronDown" />
</template>
</a-select>
</a-form-item>
</template>

8
packages/nc-gui/composables/useColumnCreateStore.ts
Unescape View File

@ -79,6 +79,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
const formState = ref<Record<string, any>>({
title: '',
uidt: fromTableExplorer?.value ? defaultType : null,
custom: {},
...clone(column.value || {}),
})
@ -89,6 +90,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
const colProp = sqlUi.value.getDataTypeForUiType(formState.value as { uidt: UITypes }, idType ?? undefined)
formState.value = {
custom: {},
...(!isEdit.value && {
// only take title, column_name and uidt when creating a column
// to avoid the extra props from being taken (e.g. SingleLineText -> LTAR -> SingleLineText)
@ -338,11 +340,9 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
/** if LTAR column then force reload related table meta */
if (isLinksOrLTAR(formState.value) && meta.value?.id !== formState.value.childId) {
if (formState.value.is_custom_link) {
getMeta(formState.value.custom?.ref_model_id, true).then(() => {
})
getMeta(formState.value.custom?.ref_model_id, true).then(() => {})
} else {
getMeta(formState.value.childId, true).then(() => {
})
getMeta(formState.value.childId, true).then(() => {})
}
}

Write Preview
Loading…
Cancel
Save