From c58e09e08c84e6fff3b4d9ce4240120c49943fdc Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 23 Jul 2022 12:51:04 +0530
Subject: [PATCH] refactor(gui-v2): add table rename validation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/dlg/TableRename.vue  | 49 +++++++++++--------
 packages/nc-gui-v2/utils/validation.ts        |  5 ++
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/TableRename.vue b/packages/nc-gui-v2/components/dlg/TableRename.vue
index df47a2dc2f..fe96160e11 100644
--- a/packages/nc-gui-v2/components/dlg/TableRename.vue
+++ b/packages/nc-gui-v2/components/dlg/TableRename.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, watchEffect } from '@vue/runtime-core'
+import { watchEffect } from '@vue/runtime-core'
 import { Form } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
@@ -31,24 +31,33 @@ const { loadTables } = useProject()
 const { project, tables } = useProject()
 
 const prefix = computed(() => project?.value?.prefix || '')
-const validateDuplicateAlias = (v: string) => {
-  return (tables?.value || []).every((t) => t.title !== (v || '')) || 'Duplicate table alias'
-}
-const validateLeadingOrTrailingWhiteSpace = (v: string) => {
-  return !/^\s+|\s+$/.test(v) || 'Leading or trailing whitespace not allowed in table name'
-}
-const validateDuplicate = (v: string) => {
-  return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
-}
+
 const inputEl = $ref<any>()
+let loading = $ref(false)
 const useForm = Form.useForm
 const formState = reactive({
   title: '',
 })
 const validators = computed(() => {
   return {
-    title: [validateTableName, validateDuplicateAlias],
-    table_name: [validateTableName],
+    title: [
+      validateTableName,
+      {
+        validator: (rule: any, value: any, callback: (errMsg?: string) => void) => {
+          if (/^\s+|\s+$/.test(value)) {
+            callback('Leading or trailing whitespace not allowed in table name')
+          }
+          if (
+            !(tables?.value || []).every(
+              (t) => t.id === tableMeta.id || t.table_name.toLowerCase() !== (value || '').toLowerCase(),
+            )
+          ) {
+            callback('Duplicate table alias')
+          }
+          callback()
+        },
+      },
+    ],
   }
 })
 const { resetFields, validate, validateInfos } = useForm(formState, validators)
@@ -64,38 +73,36 @@ watchEffect(() => {
 })
 
 const renameTable = async () => {
+  loading = true
   try {
     await $api.dbTable.update(tableMeta?.id as string, {
       title: formState.title,
     })
-
+    dialogShow.value = false
     loadTables()
     updateTab({ id: tableMeta?.id }, { title: formState.title })
     toast.success('Table renamed successfully')
     $e('a:table:rename')
+    dialogShow.value = false
   } catch (e) {
     toast.error(await extractSdkResponseErrorMsg(e))
   }
+  loading = false
 }
 </script>
 
 <template>
-  <a-modal v-model:visible="dialogShow" @keydown.esc="dialogShow = false" @finish="renameTable" title="Rename Table">
+  <a-modal v-model:visible="dialogShow" title="Rename Table" @keydown.esc="dialogShow = false" @finish="renameTable">
     <template #footer>
       <a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
-      <a-button key="submit" type="primary" @click="renameTable">{{ $t('general.submit') }}</a-button>
+      <a-button key="submit" type="primary" :loading="loading" @click="renameTable">{{ $t('general.submit') }}</a-button>
     </template>
     <div class="pl-10 pr-10 pt-5">
       <a-form :model="formState" name="create-new-table-form">
         <!-- hint="Enter table name" -->
         <div class="mb-2">Table Name</div>
         <a-form-item v-bind="validateInfos.title">
-          <a-input
-            ref="inputEl"
-            v-model:value="formState.title"
-            hide-details
-            :placeholder="$t('msg.info.enterTableName')"
-          />
+          <a-input ref="inputEl" v-model:value="formState.title" hide-details :placeholder="$t('msg.info.enterTableName')" />
         </a-form-item>
       </a-form>
     </div>
diff --git a/packages/nc-gui-v2/utils/validation.ts b/packages/nc-gui-v2/utils/validation.ts
index 7bd40613d2..8093a39da5 100644
--- a/packages/nc-gui-v2/utils/validation.ts
+++ b/packages/nc-gui-v2/utils/validation.ts
@@ -78,7 +78,12 @@ export const projectTitleValidator = {
     callback()
   },
 }
+
 export const fieldRequiredValidator = {
   required: true,
   message: 'Field is required',
 }
+export const getRequiredValidator = (field = 'Field') => ({
+  required: true,
+  message: `${field} is required`,
+})