From 4f731a888793a4494f130b2daff21b35eb361770 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 24 Oct 2022 15:11:42 +0800
Subject: [PATCH] fix(nc-gui): infinite import validation errors

---
 .../nc-gui/components/template/Editor.vue     | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 3ebed993f7..5714c9caa7 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -123,30 +123,36 @@ const validators = computed(() =>
 
 const { validate, validateInfos } = useForm(data, validators)
 
-// TODO(import): show error message once
-const isValid = computed(() => {
-  if (importDataOnly) {
-    for (const tn of Object.keys(srcDestMapping.value)) {
-      if (!atLeastOneEnabledValidation(tn)) {
-        return false
-      }
-      for (const record of srcDestMapping.value[tn]) {
-        if (!fieldsValidation(record, tn)) {
-          return false
+const isValid = ref(false)
+
+watch(
+  () => srcDestMapping.value,
+  () => {
+    let res = true
+    if (importDataOnly) {
+      for (const tn of Object.keys(srcDestMapping.value)) {
+        if (!atLeastOneEnabledValidation(tn)) {
+          res = false
+        }
+        for (const record of srcDestMapping.value[tn]) {
+          if (!fieldsValidation(record, tn)) {
+            return false
+          }
         }
       }
-    }
-  } else {
-    for (const [_, o] of Object.entries(validateInfos)) {
-      if (o?.validateStatus) {
-        if (o.validateStatus === 'error') {
-          return false
+    } else {
+      for (const [_, o] of Object.entries(validateInfos)) {
+        if (o?.validateStatus) {
+          if (o.validateStatus === 'error') {
+            res = false
+          }
         }
       }
     }
-  }
-  return true
-})
+    isValid.value = res
+  },
+  { deep: true },
+)
 
 const prevEditableTn = ref<string[]>([])
 
@@ -158,6 +164,10 @@ onMounted(() => {
   // and updating the key in importData
   prevEditableTn.value = data.tables.map((t) => t.table_name)
 
+  if (importDataOnly) {
+    mapDefaultColumns()
+  }
+
   nextTick(() => {
     inputRefs.value[0]?.focus()
   })
@@ -569,12 +579,6 @@ defineExpose({
   isValid,
 })
 
-onMounted(() => {
-  if (importDataOnly) {
-    mapDefaultColumns()
-  }
-})
-
 function handleEditableTnChange(idx: number) {
   const oldValue = prevEditableTn.value[idx]
   const newValue = data.tables[idx].table_name