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

packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue

@@ -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,19 +120,38 @@ 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
@@ -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
+        <a-form-item class="nc-relation-settings-table-row disabled nc-ltar-source-table">
-          class="nc-relation-settings-table-row disabled nc-ltar-source-table"
-          v-bind="validateInfos['custom.base_id']"
-        >
           <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 {

packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@@ -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>

packages/nc-gui/composables/useColumnCreateStore.ts

@@ -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)
@@ -337,12 +339,10 @@ 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) {
+            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 {
-            }else {
+              getMeta(formState.value.childId, true).then(() => {})
-              getMeta(formState.value.childId, true).then(() => {
-              })
             }
           }