feat(gui-v2): create table

packages/nc-gui-v2/components/dlg/TableCreate.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { onMounted } from '@vue/runtime-core'
+import { Form } from 'ant-design-vue'
 import useTableCreate from '../../composables/useTableCreate'
 import useProject from '~/composables/useProject'
 import useTabs from '~/composables/useTabs'
-import { validateTableName } from '~/utils/validation'
+import { useToast } from 'vue-toastification'
+import { fieldRequiredValidator, importUrlValidator, validateTableName } from '~/utils/validation'
 
 const { modelValue = false } = defineProps<{ modelValue?: boolean }>()
 
@@ -14,6 +16,7 @@ const idTypes = [
   { value: 'AG', text: 'Auto generated string' },
 ]
 
+const toast = useToast()
 const dialogShow = computed({
   get() {
     return modelValue
@@ -23,7 +26,6 @@ const dialogShow = computed({
   },
 })
 
-const valid = ref(false)
 const isIdToggleAllowed = ref(false)
 const isAdvanceOptVisible = ref(false)
 
@@ -53,6 +55,25 @@ const validateDuplicate = (v: string) => {
 
 const inputEl = ref<any>()
 
+const useForm = Form.useForm
+const formState = reactive({
+  title: '',
+  table_name: '',
+  columns: {
+    id: true,
+    title: true,
+    created_at: true,
+    updated_at: true,
+  },
+})
+const validators = computed(() => {
+  return {
+    title: [validateTableName, validateDuplicateAlias],
+    table_name: [],
+  }
+})
+const { resetFields, validate, validateInfos } = useForm(formState, validators)
+
 onMounted(() => {
   generateUniqueTitle()
   nextTick(() => {
@@ -64,130 +85,74 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-dialog
+  <a-modal
-    v-model="dialogShow"
+    v-model:visible="dialogShow"
-    persistent
+    width="max(90vw, 600px)"
-    max-width="550"
     @keydown.esc="dialogShow = false"
     @keydown.enter="$emit('create', table)"
   >
+    <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>
+    </template>
+    <div class="pl-10 pr-10 pt-5">
+      <a-form :model="formState" name="create-new-table-form">
         <!-- Create A New Table -->
-    <v-card class="elevation-1 backgroundColor nc-create-table-card">
+        <div class="prose-xl font-bold self-center my-4">{{ $t('activity.createTable') }}</div>
-      <v-form ref="form" v-model="valid">
-        <v-card-title class="primary subheading white--text py-2">
-          {{ $t('activity.createTable') }}
-        </v-card-title>
-
-        <v-card-text class="py-6 px-10">
         <!-- hint="Enter table name" -->
-          <v-text-field
+        <div class="mb-2">Table Name</div>
+        <a-form-item v-bind="validateInfos['title']">
+          <a-input
             ref="inputEl"
-            v-model="table.title"
+            v-model:value="table.title"
-            solo
+            size="large"
-            flat
+            hide-details
-            persistent-hint
+            :placeholder="$t('msg.info.enterTableName')"
-            dense
-            hide-details1
-            :rules="[validateTableName, validateDuplicateAlias]"
-            :hint="$t('msg.info.enterTableName')"
-            class="mt-4 caption nc-table-name"
           />
-
+        </a-form-item>
-          <div class="d-flex justify-end">
+        <div class="flex justify-end">
-            <div class="grey--text caption pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
+          <div class="pointer" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
             {{ isAdvanceOptVisible ? 'Hide' : 'Show' }} more
             <v-icon x-small color="grey">
               {{ isAdvanceOptVisible ? 'mdi-minus-circle-outline' : 'mdi-plus-circle-outline' }}
             </v-icon>
           </div>
         </div>
-
         <div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">
           <!-- hint="Table name as saved in database" -->
-            <v-text-field
+          <div class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
-              v-if="!project.prefix"
+          <a-form-item v-if="!project.prefix" v-bind="validateInfos['table_name']">
-              v-model="table.table_name"
+            <a-input v-model:value="table.table_name" size="large" hide-details :placeholder="$t('msg.info.tableNameInDb')" />
-              solo
+          </a-form-item>
-              flat
+          <div>
-              dense
+            <div class="mb-5">
-              persistent-hint
-              :rules="[validateDuplicate]"
-              :hint="$t('msg.info.tableNameInDb')"
-              class="mt-4 caption nc-table-name-alias"
-            />
-
-            <div class="mt-5">
-              <label class="add-default-title grey--text">
               <!-- Add Default Columns -->
               {{ $t('msg.info.addDefaultColumns') }}
-              </label>
-
-              <div class="d-flex caption justify-space-between align-center">
-                <v-checkbox
-                  key="chk1"
-                  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>
-                    <div>
-                      <span v-if="!isIdToggleAllowed" class="caption" @dblclick="isIdToggleAllowed = true">id</span>
-                      <v-select
-                        v-else
-                        v-model="idType"
-                        style="max-width: 100px"
-                        class="caption"
-                        outlined
-                        dense
-                        hide-details
-                        :items="idTypes"
-                      />
             </div>
+            <a-row>
+              <a-col :span="6">
+                <a-tooltip placement="top">
+                  <template #title>
+                    <span>ID column is required, you can rename this later if required.</span>
                   </template>
-                </v-checkbox>
+                  <a-checkbox disabled v-model:checked="formState.columns.id">ID</a-checkbox>
-                <v-checkbox key="chk2" v-model="table.columns" dense class="mt-0" color="info" hide-details value="title">
+                </a-tooltip>
-                  <template #label>
+              </a-col>
-                    <span class="caption">title</span>
+              <a-col :span="6">
-                  </template>
+                <a-checkbox v-model:checked="formState.columns.title"> title </a-checkbox>
-                </v-checkbox>
+              </a-col>
-                <v-checkbox key="chk3" v-model="table.columns" dense class="mt-0" color="info" hide-details value="created_at">
+              <a-col :span="6">
-                  <template #label>
+                <a-checkbox v-model:checked="formState.columns.created_at"> created_at </a-checkbox>
-                    <span class="caption">created_at</span>
+              </a-col>
-                  </template>
+              <a-col :span="6">
-                </v-checkbox>
+                <a-checkbox v-model:checked="formState.columns.updated_at"> updated_at </a-checkbox>
-                <v-checkbox key="chk4" v-model="table.columns" dense class="mt-0" color="info" hide-details value="updated_at">
+              </a-col>
-                  <template #label>
+            </a-row>
-                    <span class="caption">updated_at</span>
-                  </template>
-                </v-checkbox>
           </div>
         </div>
+      </a-form>
     </div>
-        </v-card-text>
+  </a-modal>
-        <v-divider />
-        <v-card-actions class="py-4 px-10">
-          <v-spacer />
-          <v-btn class="" @click="dialogShow = false">
-            {{ $t('general.cancel') }}
-          </v-btn>
-          <v-btn :disabled="!valid" color="primary" class="nc-create-table-submit" @click="createTable">
-            {{ $t('general.submit') }}
-          </v-btn>
-        </v-card-actions>
-      </v-form>
-    </v-card>
-  </v-dialog>
 </template>
 
 <style scoped lang="scss">