wip(gui-v2): import csv validation

packages/nc-gui-v2/components/template/Editor.vue

@@ -2,7 +2,7 @@
 import { useToast } from 'vue-toastification'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
-import { Form } from 'ant-design-vue'
+import { Form, notification } from 'ant-design-vue'
 import { srcDestMappingColumns, tableColumns } from './utils'
 import { computed, onMounted } from '#imports'
 import MdiTableIcon from '~icons/mdi/table'
@@ -182,7 +182,123 @@ function remapColNames(batchData: any[], columns: ColumnType[]) {
   )
 }
 
+function missingRequiredColumnsValidation() {
+  const missingRequiredColumns = columns.value.filter(
+    (c: Record<string, any>) =>
+      (c.pk ? !c.ai && !c.cdf : !c.cdf && c.rqd) && !srcDestMapping.value.some((r) => r.destCn === c.title),
+  )
+  if (missingRequiredColumns.length) {
+    notification.error({
+      message: `Following columns are required : ${missingRequiredColumns.map((c) => c.title).join(', ')}`,
+      duration: 3,
+    })
+    return false
+  }
+  return true
+}
+
+function atLeastOneEnabledValidation() {
+  if (srcDestMapping.value.filter((v) => v.enabled === true).length == 0) {
+    notification.error({
+      message: 'At least one column has to be selected',
+      duration: 3,
+    })
+    return false
+  }
+  return true
+}
+
+function fieldsValidation(table: Record<string, any>, record: Record<string, any>) {
+  console.log(importData[table.ref_table_name].slice(0, 500))
+  // if it is not selected, then pass validation
+  if (!record.enabled) {
+    return true
+  }
+
+  if (srcDestMapping.value.filter((v) => v.destCn === record.destCn).length > 1) {
+    notification.error({
+      message: 'Duplicate mapping found, please remove one of the mapping',
+      duration: 3,
+    })
+    return false
+  }
+
+  const v = columns.value.find((c) => c.title === record.destCn) as Record<string, any>
+
+  // check if the input contains null value for a required column
+  if (v.pk ? !v.ai && !v.cdf : !v.cdf && v.rqd) {
+    if (
+      importData[table.ref_table_name]
+        .slice(0, 500)
+        .some((r: Record<string, any>) => r[record.srcCn] === null || r[record.srcCn] === undefined || r[record.srcCn] === '')
+    ) {
+      notification.error({
+        message: 'null value violates not-null constraint',
+        duration: 3,
+      })
+    }
+  }
+
+  switch (v.uidt) {
+    case UITypes.Number:
+      if (
+        importData[table.ref_table_name]
+          .slice(0, 500)
+          .some(
+            (r: Record<string, any>) => r[record.sourceCn] !== null && r[record.srcCn] !== undefined && isNaN(+r[record.srcCn]),
+          )
+      ) {
+        notification.error({
+          message: 'Source data contains some invalid numbers',
+          duration: 3,
+        })
+        return false
+      }
+      break
+    case UITypes.Checkbox:
+      if (
+        importData[table.ref_table_name].slice(0, 500).some((r: Record<string, any>) => {
+          if ((r: Record<string, any>) => r[record.srcCn] !== null && r[record.srcCn] !== undefined) {
+            let input = r[record.srcCn]
+            if (typeof input === 'string') {
+              input = input.replace(/["']/g, '').toLowerCase().trim()
+              return !(
+                input == 'false' ||
+                input == 'no' ||
+                input == 'n' ||
+                input == '0' ||
+                input == 'true' ||
+                input == 'yes' ||
+                input == 'y' ||
+                input == '1'
+              )
+            }
+            return input != 1 && input != 0 && input != true && input != false
+          }
+          return false
+        })
+      ) {
+        notification.error({
+          message: 'Source data contains some invalid boolean values',
+          duration: 3,
+        })
+        return false
+      }
+      break
+  }
+  return true
+}
+
 async function importTemplate() {
+  console.log('importTemplate')
+  if (importOnly) {
+    // validate required columns
+    if (!missingRequiredColumnsValidation()) return
+    // validate at least one column needs to be selected
+    if (!atLeastOneEnabledValidation()) return
+
+    // TODO: ok
+  } else {
     // check if form is valid
     try {
       await validate()
@@ -274,6 +390,7 @@ async function importTemplate() {
       isImporting.value = false
     }
   }
+}
 
 const isValid = computed(() => {
   for (const [_, o] of Object.entries(validateInfos)) {
@@ -352,8 +469,13 @@ onMounted(() => {
                 <span>{{ record.srcCn }}</span>
               </template>
               <template v-else-if="column.key === 'destination_column'">
-                <a-form-item>
-                  <a-select v-model:value="record.destCn" class="w-52" show-search :filter-option="filterOption">
+                <a-select
+                  v-model:value="record.destCn"
+                  class="w-52"
+                  show-search
+                  :filter-option="filterOption"
+                  @change="fieldsValidation(table, record)"
+                >
                   <a-select-option v-for="(column, i) of columns" :key="i" :value="column.title">
                     <div class="flex items-center">
                       <component :is="getUIDTIcon(column.uidt)" />
@@ -361,11 +483,10 @@ onMounted(() => {
                     </div>
                   </a-select-option>
                 </a-select>
-                </a-form-item>
               </template>
 
               <template v-if="column.key === 'action'">
-                <a-checkbox v-model:checked="record.enabled" />
+                <a-checkbox v-model:checked="record.enabled" @change="fieldsValidation(table, record)" />
               </template>
             </template>
           </a-table>