|
|
|
|
@ -1,28 +1,36 @@
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { onMounted } from '@vue/runtime-core' |
|
|
|
|
import { Form, Modal, message } from 'ant-design-vue' |
|
|
|
|
import { useI18n } from 'vue-i18n' |
|
|
|
|
import { computed, ref, useSidebar, watch } from '#imports' |
|
|
|
|
import { navigateTo, useNuxtApp } from '#app' |
|
|
|
|
import { ClientType } from '~/lib' |
|
|
|
|
import type { ProjectCreateForm } from '~/utils' |
|
|
|
|
import { |
|
|
|
|
clientTypes, |
|
|
|
|
computed, |
|
|
|
|
extractSdkResponseErrorMsg, |
|
|
|
|
fieldRequiredValidator, |
|
|
|
|
generateUniqueName, |
|
|
|
|
getDefaultConnectionConfig, |
|
|
|
|
getTestDatabaseName, |
|
|
|
|
navigateTo, |
|
|
|
|
nextTick, |
|
|
|
|
onMounted, |
|
|
|
|
projectTitleValidator, |
|
|
|
|
readFile, |
|
|
|
|
ref, |
|
|
|
|
sslUsage, |
|
|
|
|
} from '~/utils' |
|
|
|
|
useApi, |
|
|
|
|
useI18n, |
|
|
|
|
useNuxtApp, |
|
|
|
|
useSidebar, |
|
|
|
|
watch, |
|
|
|
|
} from '#imports' |
|
|
|
|
import { ClientType } from '~/lib' |
|
|
|
|
import type { ProjectCreateForm } from '~/utils' |
|
|
|
|
|
|
|
|
|
const useForm = Form.useForm |
|
|
|
|
const loading = ref(false) |
|
|
|
|
|
|
|
|
|
const testSuccess = ref(false) |
|
|
|
|
|
|
|
|
|
const { $api, $e } = useNuxtApp() |
|
|
|
|
const { api, isLoading } = useApi() |
|
|
|
|
|
|
|
|
|
const { $e } = useNuxtApp() |
|
|
|
|
|
|
|
|
|
useSidebar({ hasSidebar: false }) |
|
|
|
|
|
|
|
|
|
@ -123,11 +131,13 @@ const createProject = async () => {
|
|
|
|
|
focusInvalidInput() |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
loading.value = true |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
const connection = getConnectionConfig() |
|
|
|
|
|
|
|
|
|
const config = { ...formState.dataSource, connection } |
|
|
|
|
const result = await $api.project.create({ |
|
|
|
|
|
|
|
|
|
const result = await api.project.create({ |
|
|
|
|
title: formState.title, |
|
|
|
|
bases: [ |
|
|
|
|
{ |
|
|
|
|
@ -139,12 +149,13 @@ const createProject = async () => {
|
|
|
|
|
], |
|
|
|
|
external: true, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
$e('a:project:create:extdb') |
|
|
|
|
|
|
|
|
|
await navigateTo(`/nc/${result.id}`) |
|
|
|
|
} catch (e: any) { |
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
|
|
|
} |
|
|
|
|
loading.value = false |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const testConnection = async () => { |
|
|
|
|
@ -154,19 +165,23 @@ const testConnection = async () => {
|
|
|
|
|
focusInvalidInput() |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$e('a:project:create:extdb:test-connection', []) |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
if (formState.dataSource.client === ClientType.SQLITE) { |
|
|
|
|
testSuccess.value = true |
|
|
|
|
} else { |
|
|
|
|
const connection: any = getConnectionConfig() |
|
|
|
|
connection.database = getTestDatabaseName(formState.dataSource) |
|
|
|
|
const connection = getConnectionConfig() |
|
|
|
|
|
|
|
|
|
connection.database = getTestDatabaseName(formState.dataSource)! |
|
|
|
|
|
|
|
|
|
const testConnectionConfig = { |
|
|
|
|
...formState.dataSource, |
|
|
|
|
connection, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const result = await $api.utils.testConnection(testConnectionConfig) |
|
|
|
|
const result = await api.utils.testConnection(testConnectionConfig) |
|
|
|
|
|
|
|
|
|
if (result.code === 0) { |
|
|
|
|
testSuccess.value = true |
|
|
|
|
@ -183,11 +198,13 @@ const testConnection = async () => {
|
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
testSuccess.value = false |
|
|
|
|
|
|
|
|
|
message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} catch (e: any) { |
|
|
|
|
testSuccess.value = false |
|
|
|
|
|
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -213,19 +230,23 @@ onMounted(() => {
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<a-card class="max-w-[600px] !mx-auto !mt-100px !mb-5 !shadow-md"> |
|
|
|
|
<GeneralNocoIcon /> |
|
|
|
|
<div |
|
|
|
|
class="overflow-auto md:bg-primary bg-opacity-5 pb-4 create-external h-full min-h-[600px] flex flex-col justify-center items-end" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
class="bg-white mt-275px relative flex flex-col justify-center gap-2 w-full max-w-[500px] !mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)" |
|
|
|
|
> |
|
|
|
|
<general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" /> |
|
|
|
|
|
|
|
|
|
<h3 class="text-3xl text-center font-semibold mt-8 mb-4">{{ $t('activity.createProject') }}</h3> |
|
|
|
|
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.createProject') }}</h1> |
|
|
|
|
|
|
|
|
|
<a-form |
|
|
|
|
ref="form" |
|
|
|
|
:model="formState" |
|
|
|
|
name="external-project-create-form" |
|
|
|
|
layout="horizontal" |
|
|
|
|
:label-col="{ span: 8 }" |
|
|
|
|
:wrapper-col="{ span: 18 }" |
|
|
|
|
class="!pr-5" |
|
|
|
|
no-style |
|
|
|
|
:label-col="{ span: 10 }" |
|
|
|
|
> |
|
|
|
|
<a-form-item :label="$t('placeholder.projName')" v-bind="validateInfos.title"> |
|
|
|
|
<a-input v-model:value="formState.title" size="small" class="nc-extdb-proj-name" /> |
|
|
|
|
@ -256,7 +277,11 @@ onMounted(() => {
|
|
|
|
|
|
|
|
|
|
<!-- Port Number --> |
|
|
|
|
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']"> |
|
|
|
|
<a-input-number v-model:value="formState.dataSource.connection.port" class="!w-full nc-extdb-host-port" size="small" /> |
|
|
|
|
<a-input-number |
|
|
|
|
v-model:value="formState.dataSource.connection.port" |
|
|
|
|
class="!w-full nc-extdb-host-port" |
|
|
|
|
size="small" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<!-- Username --> |
|
|
|
|
@ -283,6 +308,7 @@ onMounted(() => {
|
|
|
|
|
class="nc-extdb-host-database" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<!-- Schema name --> |
|
|
|
|
<a-form-item |
|
|
|
|
v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath" |
|
|
|
|
@ -292,7 +318,7 @@ onMounted(() => {
|
|
|
|
|
<a-input v-model:value="formState.dataSource.searchPath[0]" size="small" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<a-collapse ghost expand-icon-position="right" class="mt-6"> |
|
|
|
|
<a-collapse ghost expand-icon-position="right" class="!mt-6"> |
|
|
|
|
<a-collapse-panel key="1" :header="$t('title.advancedParameters')"> |
|
|
|
|
<!-- todo: add in i18n --> |
|
|
|
|
<a-form-item label="SSL mode"> |
|
|
|
|
@ -308,10 +334,12 @@ onMounted(() => {
|
|
|
|
|
<template #title> |
|
|
|
|
<span>{{ $t('tooltip.clientCert') }}</span> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<a-button :disabled="!sslFilesRequired" size="small" class="shadow" @click="certFileInput.click()"> |
|
|
|
|
{{ $t('labels.clientCert') }} |
|
|
|
|
</a-button> |
|
|
|
|
</a-tooltip> |
|
|
|
|
|
|
|
|
|
<a-tooltip placement="top"> |
|
|
|
|
<!-- Select .key file --> |
|
|
|
|
<template #title> |
|
|
|
|
@ -321,11 +349,13 @@ onMounted(() => {
|
|
|
|
|
{{ $t('labels.clientKey') }} |
|
|
|
|
</a-button> |
|
|
|
|
</a-tooltip> |
|
|
|
|
|
|
|
|
|
<a-tooltip placement="top"> |
|
|
|
|
<!-- Select CA file --> |
|
|
|
|
<template #title> |
|
|
|
|
<span>{{ $t('tooltip.clientCA') }}</span> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<a-button :disabled="!sslFilesRequired" size="small" class="shadow" @click="caFileInput.click()"> |
|
|
|
|
{{ $t('labels.serverCA') }} |
|
|
|
|
</a-button> |
|
|
|
|
@ -334,7 +364,9 @@ onMounted(() => {
|
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect('ca', caFileInput)" /> |
|
|
|
|
|
|
|
|
|
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect('cert', certFileInput)" /> |
|
|
|
|
|
|
|
|
|
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect('key', keyFileInput)" /> |
|
|
|
|
|
|
|
|
|
<a-form-item :label="$t('labels.inflection.tableName')"> |
|
|
|
|
@ -342,13 +374,15 @@ onMounted(() => {
|
|
|
|
|
<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.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> |
|
|
|
|
|
|
|
|
|
<div class="flex justify-end"> |
|
|
|
|
<a-button size="small" class="!shadow-md" @click="configEditDlg = true"> |
|
|
|
|
<a-button class="!shadow-md" @click="configEditDlg = true"> |
|
|
|
|
<!-- Edit connection JSON --> |
|
|
|
|
{{ $t('activity.editConnJson') }} |
|
|
|
|
</a-button> |
|
|
|
|
@ -357,11 +391,12 @@ onMounted(() => {
|
|
|
|
|
</a-collapse> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<a-form-item class="flex justify-center mt-5"> |
|
|
|
|
<a-form-item class="flex justify-center !mt-5"> |
|
|
|
|
<div class="flex justify-center gap-2"> |
|
|
|
|
<a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection"> |
|
|
|
|
{{ $t('activity.testDbConn') }} |
|
|
|
|
</a-button> |
|
|
|
|
|
|
|
|
|
<a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="createProject"> |
|
|
|
|
Submit |
|
|
|
|
</a-button> |
|
|
|
|
@ -369,15 +404,18 @@ onMounted(() => {
|
|
|
|
|
</a-form-item> |
|
|
|
|
</a-form> |
|
|
|
|
|
|
|
|
|
<!-- todo: needs replacement |
|
|
|
|
<v-dialog v-model="configEditDlg"> |
|
|
|
|
<a-card> |
|
|
|
|
<MonacoEditor v-if="configEditDlg" v-model="formState" class="h-[400px] w-[600px]" /> |
|
|
|
|
</a-card> |
|
|
|
|
</v-dialog> |
|
|
|
|
</a-card> |
|
|
|
|
--> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
:deep(.ant-collapse-header) { |
|
|
|
|
@apply !pr-10 !-mt-4 text-right justify-end; |
|
|
|
|
} |
|
|
|
|
@ -401,4 +439,12 @@ onMounted(() => {
|
|
|
|
|
:deep(.ant-card-head-title) { |
|
|
|
|
@apply !text-3xl; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.create-external { |
|
|
|
|
:deep(.ant-input-affix-wrapper), |
|
|
|
|
:deep(.ant-input), |
|
|
|
|
:deep(.ant-select) { |
|
|
|
|
@apply !appearance-none my-1 border-1 border-solid border-primary/50 rounded; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
braks
2 years ago