refactor(gui-v2): corrections and improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/lib/types.ts

@@ -33,7 +33,13 @@ export type ReadonlyState = Readonly<Pick<State, 'token' | 'user'>> & Omit<State
 
 export type GlobalState = Getters & Actions & ToRefs<ReadonlyState>
 
-export type ClientType = 'mysql2' | 'mssql' | 'pg' | 'sqlite3' | 'vitess'
+export enum ClientType {
+  MYSQL = 'mysql2',
+  MSSQL = 'mssql',
+  PG = 'pg',
+  SQLITE = 'sqlite3',
+  VITESS = 'vitess',
+}
 
 export interface ProjectCreateForm {
   title: string
@@ -59,8 +65,8 @@ export interface ProjectCreateForm {
         }
   }
   inflection: {
-    inflection_column?: string
+    inflectionColumn?: string
-    inflection_table?: string
+    inflectionTable?: string
   }
   sslUse?: any
 }

packages/nc-gui-v2/pages/project/index/[id].vue

@@ -6,7 +6,7 @@ import { ref } from 'vue'
 import { useToast } from 'vue-toastification'
 import { navigateTo, useNuxtApp, useRoute } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { projectTitleValidator } from '~/utils/projectCreateUtils'
+import { projectTitleValidator } from '~/utils/validation'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
 const loading = ref(false)

packages/nc-gui-v2/pages/project/index/create-external.vue

@@ -1,22 +1,22 @@
 <script lang="ts" setup>
 import { onMounted } from '@vue/runtime-core'
+import { Form, Modal } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
-import { Form, Modal } from 'ant-design-vue'
 import { ref } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import type { ProjectCreateForm } from '~/lib/types'
+import { ClientType } from '~/lib/types'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { readFile } from '~/utils/fileUtils'
 import {
   clientTypes,
-  fieldRequiredValidator,
   generateUniqueName,
   getDefaultConnectionConfig,
   getTestDatabaseName,
-  projectTitleValidator,
   sslUsage,
 } from '~/utils/projectCreateUtils'
-import { readFile } from '~/utils/fileUtils'
+import { fieldRequiredValidator, projectTitleValidator } from '~/utils/validation'
 
 const useForm = Form.useForm
 const loading = ref(false)
@@ -28,10 +28,10 @@ const { t } = useI18n()
 
 const formState = $ref<ProjectCreateForm>({
   title: '',
-  dataSource: { ...getDefaultConnectionConfig('mysql2') },
+  dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
   inflection: {
-    inflection_column: 'camelize',
+    inflectionColumn: 'camelize',
-    inflection_table: 'camelize',
+    inflectionTable: 'camelize',
   },
   sslUse: 'No',
 })
@@ -46,7 +46,7 @@ const validators = computed(() => {
       projectTitleValidator,
     ],
     'dataSource.client': [fieldRequiredValidator],
-    ...(formState.dataSource.client === 'sqlite3'
+    ...(formState.dataSource.client === ClientType.SQLITE
       ? {
           'dataSource.connection.connection.filename': [fieldRequiredValidator],
         }
@@ -56,7 +56,7 @@ const validators = computed(() => {
           'dataSource.connection.user': [fieldRequiredValidator],
           'dataSource.connection.password': [fieldRequiredValidator],
           'dataSource.connection.database': [fieldRequiredValidator],
-          ...(['pg', 'mssql'].includes(formState.dataSource.client)
+          ...([ClientType.PG, ClientType.MSSQL].includes(formState.dataSource.client)
             ? {
                 'dataSource.connection.searchPath.0': [fieldRequiredValidator],
               }
@@ -131,8 +131,8 @@ const createProject = async () => {
         {
           type: formState.dataSource.client,
           config,
-          inflection_column: formState.inflection.inflection_column,
+          inflection_column: formState.inflection.inflectionColumn,
-          inflection_table: formState.inflection.inflection_table,
+          inflection_table: formState.inflection.inflectionTable,
         },
       ],
       external: true,
@@ -155,7 +155,7 @@ const testConnection = async () => {
   }
   $e('a:project:create:extdb:test-connection', [])
   try {
-    if (formState.dataSource.client === 'sqlite3') {
+    if (formState.dataSource.client === ClientType.SQLITE) {
       testSuccess.value = true
     } else {
       const connection: any = getConnectionConfig()
@@ -242,7 +242,7 @@ onMounted(() => {
 
       <!-- SQLite File -->
       <a-form-item
-        v-if="formState.dataSource.client === 'sqlite3'"
+        v-if="formState.dataSource.client === ClientType.SQLITE"
         :label="$t('labels.sqliteFile')"
         v-bind="validateInfos['dataSource.connection.connection.filename']"
       >
@@ -286,7 +286,7 @@ onMounted(() => {
         </a-form-item>
         <!-- Schema name -->
         <a-form-item
-          v-if="['mssql', 'pg'].includes(formState.dataSource.client)"
+          v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client)"
           :label="$t('labels.schemaName')"
           v-bind="validateInfos['dataSource.connection.searchPath.0']"
         >
@@ -339,12 +339,12 @@ onMounted(() => {
             <input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect('key', keyFileInput)" />
 
             <a-form-item :label="$t('labels.inflection.tableName')">
-              <a-select v-model:value="formState.inflection.inflection_table" size="small" @change="onClientChange">
+              <a-select v-model:value="formState.inflection.inflectionTable" size="small" @change="onClientChange">
                 <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
               </a-select>
             </a-form-item>
             <a-form-item :label="$t('labels.inflection.columnName')">
-              <a-select v-model:value="formState.inflection.inflection_column" size="small" @change="onClientChange">
+              <a-select v-model:value="formState.inflection.inflectionColumn" size="small" @change="onClientChange">
                 <a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option>
               </a-select>
             </a-form-item>
@@ -370,7 +370,7 @@ onMounted(() => {
 
     <v-dialog v-model="configEditDlg">
       <a-card>
-        <Monaco v-if="configEditDlg" v-model="formState" class="h-[400px] w-[600px]"></Monaco>
+        <MonacoEditor v-if="configEditDlg" v-model="formState" class="h-[400px] w-[600px]" />
       </a-card>
     </v-dialog>
   </a-card>

packages/nc-gui-v2/pages/project/index/create.vue

@@ -5,7 +5,7 @@ import { useToast } from 'vue-toastification'
 import { nextTick, ref } from '#imports'
 import { navigateTo, useNuxtApp } from '#app'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
-import { projectTitleValidator } from '~/utils/projectCreateUtils'
+import { projectTitleValidator } from '~/utils/validation'
 import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 
 const name = ref('')

packages/nc-gui-v2/pages/projects/index.vue

@@ -59,7 +59,6 @@ const deleteProject = (project: ProjectType) => {
   })
 }
 
-console.log(route.name)
 const visible = ref(true)
 </script>
 

packages/nc-gui-v2/utils/projectCreateUtils.ts

@@ -175,23 +175,6 @@ export const getDefaultConnectionConfig = (client: ClientType): ProjectCreateFor
   }
 }
 
-export const projectTitleValidator = {
-  validator: (rule: any, value: any, callback: (errMsg?: string) => void) => {
-    if (value?.length > 50) {
-      callback('Project name exceeds 50 characters')
-    }
-    if (value[0] === ' ') {
-      callback('Project name cannot start with space')
-    }
-
-    callback()
-  },
-}
-export const fieldRequiredValidator = {
-  required: true,
-  message: 'Field is required',
-}
-
 export const sslUsage = ['No', 'Preferred', 'Required', 'Required-CA', 'Required-IDENTITY']
 
 export const generateUniqueName = () => {

packages/nc-gui-v2/utils/validation.ts

@@ -65,3 +65,20 @@ export function validateColumnName(v: string, isGQL = false) {
     return true
   }
 }
+
+export const projectTitleValidator = {
+  validator: (rule: any, value: any, callback: (errMsg?: string) => void) => {
+    if (value?.length > 50) {
+      callback('Project name exceeds 50 characters')
+    }
+    if (value[0] === ' ') {
+      callback('Project name cannot start with space')
+    }
+
+    callback()
+  },
+}
+export const fieldRequiredValidator = {
+  required: true,
+  message: 'Field is required',
+}