From 9f70a3d6f85f3e50b21487e55275bca9331d3edd Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 16 Feb 2022 16:37:00 +0530
Subject: [PATCH] fix: enforce validation if table name invalid

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../components/utils/dlgTableCreate.vue       | 205 +++++++++---------
 1 file changed, 104 insertions(+), 101 deletions(-)

diff --git a/packages/nc-gui/components/utils/dlgTableCreate.vue b/packages/nc-gui/components/utils/dlgTableCreate.vue
index 6bb4d092a9..a7a2ebf5b5 100644
--- a/packages/nc-gui/components/utils/dlgTableCreate.vue
+++ b/packages/nc-gui/components/utils/dlgTableCreate.vue
@@ -7,112 +7,114 @@
     @keydown.enter="$emit('create', table)"
   >
     <v-card class="elevation-1 backgroundColor nc-create-table-card">
-      <v-card-title class="primary subheading white--text py-2">
-        Create A New Table
-      </v-card-title>
+      <v-form ref="form" v-model="valid">
+        <v-card-title class="primary subheading white--text py-2">
+          Create A New Table
+        </v-card-title>
 
-      <v-card-text class=" py-6 px-10 ">
-        <v-text-field
-          ref="input"
-          v-model="table.alias"
-          solo
-          flat
-          persistent-hint
-          dense
-          hide-details1
-          :rules="[validateTableName]"
-          hint="Enter table name"
-          class="mt-4 caption nc-table-name"
-        />
+        <v-card-text class=" py-6 px-10 ">
+          <v-text-field
+            ref="input"
+            v-model="table.alias"
+            solo
+            flat
+            persistent-hint
+            dense
+            hide-details1
+            :rules="[validateTableName]"
+            hint="Enter table name"
+            class="mt-4 caption nc-table-name"
+          />
 
-        <v-text-field
-          v-if="!projectPrefix"
-          v-model="table.name"
-          solo
-          flat
-          dense
-          persistent-hint
-          hint="Table name as saved in database"
-          class="mt-4 caption nc-table-name-alias"
-        />
+          <v-text-field
+            v-if="!projectPrefix"
+            v-model="table.name"
+            solo
+            flat
+            dense
+            persistent-hint
+            hint="Table name as saved in database"
+            class="mt-4 caption nc-table-name-alias"
+          />
 
-        <div class=" mt-5">
-          <label class="add-default-title grey--text">Add Default Columns</label>
+          <div class=" mt-5">
+            <label class="add-default-title grey--text">Add Default Columns</label>
 
-          <div class=" d-flex caption justify-space-between">
-            <v-checkbox
-              v-model="table.columns"
-              dense
-              class="mt-0 "
-              color="info"
-              hide-details
-              value="id"
-              @click.capture.prevent.stop="()=>{
-                $toast.info('ID column is required, you can rename this later if required.').goAway(3000);
-                if(!table.columns.includes('id')){
-                  table.columns.push('id');
-                }
-              }"
-            >
-              <template #label>
-                <span class="caption">id</span>
-              </template>
-            </v-checkbox>
-            <v-checkbox
-              v-model="table.columns"
-              dense
-              class="mt-0 "
-              color="info"
-              hide-details
-              value="title"
-            >
-              <template #label>
-                <span class="caption">title</span>
-              </template>
-            </v-checkbox>
-            <v-checkbox
-              v-model="table.columns"
-              dense
-              class="mt-0 "
-              color="info"
-              hide-details
-              value="created_at"
-            >
-              <template #label>
-                <span class="caption">created_at</span>
-              </template>
-            </v-checkbox>
-            <v-checkbox
-              v-model="table.columns"
-              dense
-              class="mt-0 "
-              color="info"
-              hide-details
-              value="updated_at"
-            >
-              <template #label>
-                <span class="caption">updated_at</span>
-              </template>
-            </v-checkbox>
+            <div class=" d-flex caption justify-space-between">
+              <v-checkbox
+                v-model="table.columns"
+                dense
+                class="mt-0 "
+                color="info"
+                hide-details
+                value="id"
+                @click.capture.prevent.stop="()=>{
+                  $toast.info('ID column is required, you can rename this later if required.').goAway(3000);
+                  if(!table.columns.includes('id')){
+                    table.columns.push('id');
+                  }
+                }"
+              >
+                <template #label>
+                  <span class="caption">id</span>
+                </template>
+              </v-checkbox>
+              <v-checkbox
+                v-model="table.columns"
+                dense
+                class="mt-0 "
+                color="info"
+                hide-details
+                value="title"
+              >
+                <template #label>
+                  <span class="caption">title</span>
+                </template>
+              </v-checkbox>
+              <v-checkbox
+                v-model="table.columns"
+                dense
+                class="mt-0 "
+                color="info"
+                hide-details
+                value="created_at"
+              >
+                <template #label>
+                  <span class="caption">created_at</span>
+                </template>
+              </v-checkbox>
+              <v-checkbox
+                v-model="table.columns"
+                dense
+                class="mt-0 "
+                color="info"
+                hide-details
+                value="updated_at"
+              >
+                <template #label>
+                  <span class="caption">updated_at</span>
+                </template>
+              </v-checkbox>
+            </div>
           </div>
-        </div>
-      </v-card-text>
-      <v-divider />
+        </v-card-text>
+        <v-divider />
 
-      <v-card-actions class="py-4 px-10">
-        <v-spacer />
-        <v-btn class="" @click="dialogShow = false">
-          Cancel
-        </v-btn>
-        <v-btn
-          :disabled="!(table.name && table.name.length) || !(table.alias && table.alias.length)"
-          color="primary"
-          class="nc-create-table-submit"
-          @click="$emit('create',table)"
-        >
-          Submit
-        </v-btn>
-      </v-card-actions>
+        <v-card-actions class="py-4 px-10">
+          <v-spacer />
+          <v-btn class="" @click="dialogShow = false">
+            Cancel
+          </v-btn>
+          <v-btn
+            :disabled="!(table.name && table.name.length) || !(table.alias && table.alias.length) || !valid"
+            color="primary"
+            class="nc-create-table-submit"
+            @click="$emit('create',table)"
+          >
+            Submit
+          </v-btn>
+        </v-card-actions>
+      </v-form>
     </v-card>
   </v-dialog>
 </template>
@@ -134,7 +136,8 @@ export default {
           'created_at',
           'updated_at']
       },
-      validateTableName
+      validateTableName,
+      valid: false
     }
   },
   computed: {