From f8e6ec7d6d897063e0164cd79b330418957a387e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 16 Nov 2022 14:31:01 +0800
Subject: [PATCH] fix(nc-gui): validateDuplicateAlias validator & show missing
 errors

---
 .../nc-gui/components/dlg/TableCreate.vue     | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 875364fa42..7c36fa06e7 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/packages/nc-gui/components/dlg/TableCreate.vue
@@ -32,13 +32,21 @@ const { table, createTable, generateUniqueTitle, tables, project } = useTable(as
 
 const useForm = Form.useForm
 
-const validateDuplicateAlias = (v: string) => (tables.value || []).every((t) => t.title !== (v || '')) || 'Duplicate table alias'
-
 const validators = computed(() => {
   return {
     title: [
       validateTableName,
-      validateDuplicateAlias,
+      {
+        validator: (_: any, value: any) => {
+          // validate duplicate alias
+          return new Promise((resolve, reject) => {
+            if ((tables.value || []).some((t) => t.title === (value || ''))) {
+              return reject(new Error('Duplicate table alias'))
+            }
+            return resolve(true)
+          })
+        },
+      },
       {
         validator: (rule: any, value: any) => {
           return new Promise<void>((resolve, reject) => {
@@ -62,13 +70,23 @@ const validators = computed(() => {
     table_name: [validateTableName],
   }
 })
-const { validateInfos } = useForm(table, validators)
+const { validate, validateInfos } = useForm(table, validators)
 
 const systemColumnsCheckboxInfo = SYSTEM_COLUMNS.map((c, index) => ({
   value: c,
   disabled: index === 0,
 }))
 
+const _createTable = async () => {
+  try {
+    await validate()
+  } catch (e: any) {
+    e.errorFields.map((f: Record<string, any>) => message.error(f.errors.join(',')))
+    if (e.errorFields.length) return
+  }
+  await createTable()
+}
+
 onMounted(() => {
   generateUniqueTitle()
 
@@ -87,11 +105,11 @@ onMounted(() => {
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" size="large" type="primary" @click="createTable()">{{ $t('general.submit') }}</a-button>
+      <a-button key="submit" size="large" type="primary" @click="_createTable">{{ $t('general.submit') }}</a-button>
     </template>
 
     <div class="pl-10 pr-10 pt-5">
-      <a-form :model="table" name="create-new-table-form" @keydown.enter="createTable">
+      <a-form :model="table" name="create-new-table-form" @keydown.enter="_createTable">
         <!-- Create A New Table -->
         <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>