Browse Source

wip: project create improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2716/head
Pranav C 2 years ago
parent
commit
6a58a294e0
  1. 170
      packages/nc-gui-v2/helpers/projectCreateUtils.ts
  2. 82
      packages/nc-gui-v2/pages/projects/create-external.vue

170
packages/nc-gui-v2/helpers/projectCreateUtils.ts

@ -0,0 +1,170 @@
const testDataBaseNames = {
mysql2: null,
mysql: null,
pg: 'postgres',
oracledb: 'xe',
mssql: undefined,
sqlite3: 'a.sqlite',
}
export type ClientType = 'mysql2' | 'mssql' | 'pg' | 'sqlite3' | 'vitess'
export const getTestDatabaseName = (db: { client: ClientType; connection?: { database?: string } }) => {
if (db.client === 'pg')
return db.connection?.database
return testDataBaseNames[db.client]
}
export const clientTypes = [{
text: 'MySql',
value: 'mysql2',
}, {
text: 'MSSQL',
value: 'mssql',
}, {
text: 'PostgreSQL',
value: 'pg',
}, {
text: 'SQLite',
value: 'sqlite',
},
]
const homeDir = ''
const sampleConnectionData = {
pg: {
host: 'localhost',
port: '5432',
user: 'postgres',
password: 'password',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
mysql2: {
host: 'localhost',
port: '3306',
user: 'root',
password: 'password',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
vitess: {
host: 'localhost',
port: '15306',
user: 'root',
password: 'password',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
tidb: {
host: 'localhost',
port: '4000',
user: 'root',
password: '',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
yugabyte: {
host: 'localhost',
port: '5432',
user: 'postgres',
password: '',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
citusdb: {
host: 'localhost',
port: '5432',
user: 'postgres',
password: '',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
cockroachdb: {
host: 'localhost',
port: '5432',
user: 'postgres',
password: '',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
greenplum: {
host: 'localhost',
port: '5432',
user: 'postgres',
password: '',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
mssql: {
host: 'localhost',
port: 1433,
user: 'sa',
password: 'Password123.',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
oracledb: {
host: 'localhost',
port: '1521',
user: 'system',
password: 'Oracle18',
database: '_test',
ssl: {
ca: '',
key: '',
cert: '',
},
},
sqlite3: {
client: 'sqlite3',
database: homeDir,
connection: {
filename: homeDir,
},
useNullAsDefault: true,
},
}
export const getDefaultConnectionConfig = (client: ClientType): { client: ClientType; connection: any } => {
return {
client,
connection: sampleConnectionData[client],
}
}

82
packages/nc-gui-v2/pages/projects/create-external.vue

@ -1,48 +1,26 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import { useToast } from 'vue-toastification'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useToast } from 'vue-toastification'
import { useNuxtApp, useRouter } from '#app' import { useNuxtApp, useRouter } from '#app'
import { extractSdkResponseErrorMsg } from '~/helpers/errorUtils' import { extractSdkResponseErrorMsg } from '~/helpers/errorUtils'
import { clientTypes, getDefaultConnectionConfig, getTestDatabaseName } from '~/helpers/projectCreateUtils'
const clientTypes = [
{
text: 'MySql',
value: 'mysql2',
}, {
text: 'MSSQL',
value: 'mssql',
}, {
text: 'PostgreSQL',
value: 'pg',
}, {
text: 'SQLite',
value: 'sqlite',
},
]
const name = ref('') const name = ref('')
const loading = ref(false) const loading = ref(false)
const valid = ref(false) const valid = ref(false)
const projectDatasource = reactive({ const testSuccess = ref(false)
client: 'mysql2', const projectDatasource = ref(getDefaultConnectionConfig('mysql2'))
connection: {
user: 'root',
password: 'password',
port: 3306,
host: 'localhost',
database: '',
},
})
const inflection = reactive({ const inflection = reactive({
tableName: 'camelize', tableName: 'camelize',
columnName: 'camelize', columnName: 'camelize',
}) })
const $router = useRouter() const $router = useRouter()
const { $api } = useNuxtApp() const { $api, $e } = useNuxtApp()
const { user } = useUser() const { user } = useUser()
const toast = useToast() const toast = useToast()
const { t: $t } = useI18n()
const titleValidationRule = [ const titleValidationRule = [
v => !!v || 'Title is required', v => !!v || 'Title is required',
@ -56,8 +34,8 @@ const createProject = async () => {
title: name.value, title: name.value,
bases: [ bases: [
{ {
type: projectDatasource.client, type: projectDatasource.value.client,
config: projectDatasource, config: projectDatasource.value,
inflection_column: inflection.columnName, inflection_column: inflection.columnName,
inflection_table: inflection.tableName, inflection_table: inflection.tableName,
}, },
@ -73,6 +51,40 @@ const createProject = async () => {
} }
loading.value = false loading.value = false
} }
const testConnection = async () => {
$e('a:project:create:extdb:test-connection')
try {
// this.handleSSL(projectDatasource)
if (projectDatasource.value.client === 'sqlite3') {
testSuccess.value = true
}
else {
const testConnectionConfig = {
...projectDatasource,
connection: {
...projectDatasource.value.connection,
database: getTestDatabaseName(projectDatasource.value),
},
}
const result = await $api.utils.testConnection(testConnectionConfig)
if (result.code === 0) {
testSuccess.value = true
}
else {
testSuccess.value = false
toast.error($t('msg.error.dbConnectionFailed') + result.message)
}
}
}
catch (e) {
testSuccess.value = false
toast.error(await extractSdkResponseErrorMsg(e))
}
}
</script> </script>
<template> <template>
@ -167,9 +179,10 @@ const createProject = async () => {
</v-row> </v-row>
</v-container> </v-container>
<div class="text-center"> <div class=" d-flex justify-center" style="gap: 4px">
<v-btn <v-btn
class="mt-3 mx-auto" :disabled="!testSuccess"
class=""
large large
:loading="loading" :loading="loading"
color="primary" color="primary"
@ -181,6 +194,11 @@ const createProject = async () => {
<!-- Create --> <!-- Create -->
<span class="mr-1">{{ $t("general.create") }} </span> <span class="mr-1">{{ $t("general.create") }} </span>
</v-btn> </v-btn>
<v-btn size="sm" class="text-sm text-capitalize">
<!-- Test Database Connection -->
{{ $t("activity.testDbConn") }}
</v-btn>
</div> </div>
</v-container> </v-container>
</v-card> </v-card>

Loading…
Cancel
Save