feat(gui-v2): template validation on table name

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

@@ -86,12 +86,14 @@ const data = reactive(<any>{
 
 const validators = computed(() => {
   // TODO: centralise
+  const tnValidator = [{ required: true, message: 'Please fill in table name', trigger: 'change' }]
   const cnValidator = [{ required: true, message: 'Please fill in column name', trigger: 'change' }]
   const uidtValidator = [{ required: true, message: 'Please fill in column type', trigger: 'change' }]
   // TODO: check existing validation logic
   const dtxpValidator = [{}]
   let res: any = {}
   for (let i = 0; i < data.tables.length; i++) {
+    res[`tables.${i}.table_name`] = tnValidator
     for (let j = 0; j < data.tables[i].columns.length; j++) {
       res[`tables.${i}.columns.${j}.column_name`] = cnValidator
       res[`tables.${i}.columns.${j}.uidt`] = uidtValidator
@@ -317,8 +319,8 @@ const importTemplate = async () => {
       <a-collapse v-if="data.tables && data.tables.length" v-model:activeKey="expansionPanel">
         <a-collapse-panel v-for="(table, i) in data.tables" :key="i">
           <template #header>
+            <a-form-item v-if="editableTn[i]" v-bind="validateInfos[`tables.${i}.table_name`]" noStyle>
               <a-input
-              v-if="editableTn[i]"
                 v-model:value="table.table_name"
                 style="max-width: 300px"
                 hide-details
@@ -326,6 +328,8 @@ const importTemplate = async () => {
                 @blur="setEditableTn(i, false)"
                 @keydown.enter="setEditableTn(i, false)"
               />
+            </a-form-item>
+
             <span v-else class="font-weight-bold" @click="(e) => (e.stopPropagation(), setEditableTn(i, true))">
               <MdiTableIcon />
               {{ table.table_name }}