|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import {Form, message} from 'ant-design-vue' |
|
|
|
|
import type {SelectHandler} from 'ant-design-vue/es/vc-select/Select' |
|
|
|
|
import {SourceRestriction} from 'nocodb-sdk' |
|
|
|
|
import { Form, message } from 'ant-design-vue' |
|
|
|
|
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select' |
|
|
|
|
import { SourceRestriction } from 'nocodb-sdk' |
|
|
|
|
import { |
|
|
|
|
type CertTypes, |
|
|
|
|
ClientType, |
|
|
|
@ -21,12 +21,12 @@ const vOpen = useVModel(props, 'open', emit)
|
|
|
|
|
const connectionType = computed(() => props.connectionType ?? ClientType.MYSQL) |
|
|
|
|
|
|
|
|
|
const baseStore = useBase() |
|
|
|
|
const {loadProject} = useBases() |
|
|
|
|
const {base} = storeToRefs(baseStore) |
|
|
|
|
const { loadProject } = useBases() |
|
|
|
|
const { base } = storeToRefs(baseStore) |
|
|
|
|
|
|
|
|
|
const {loadProjectTables} = useTablesStore() |
|
|
|
|
const { loadProjectTables } = useTablesStore() |
|
|
|
|
|
|
|
|
|
const {refreshCommandPalette} = useCommandPalette() |
|
|
|
|
const { refreshCommandPalette } = useCommandPalette() |
|
|
|
|
|
|
|
|
|
const _projectId = inject(ProjectIdInj, undefined) |
|
|
|
|
const baseId = computed(() => _projectId?.value ?? base.value?.id) |
|
|
|
@ -39,31 +39,30 @@ const testingConnection = ref(false)
|
|
|
|
|
|
|
|
|
|
const form = ref<typeof Form>() |
|
|
|
|
|
|
|
|
|
const {api} = useApi() |
|
|
|
|
const { api } = useApi() |
|
|
|
|
|
|
|
|
|
const {$e} = useNuxtApp() |
|
|
|
|
const { $e } = useNuxtApp() |
|
|
|
|
|
|
|
|
|
const {t} = useI18n() |
|
|
|
|
const { t } = useI18n() |
|
|
|
|
|
|
|
|
|
const creatingSource = ref(false) |
|
|
|
|
|
|
|
|
|
const formState = ref<ProjectCreateForm>({ |
|
|
|
|
title: '', |
|
|
|
|
dataSource: {...getDefaultConnectionConfig(ClientType.MYSQL)}, |
|
|
|
|
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
|
|
|
|
inflection: { |
|
|
|
|
inflectionColumn: 'none', |
|
|
|
|
inflectionTable: 'none', |
|
|
|
|
}, |
|
|
|
|
sslUse: SSLUsage.No, |
|
|
|
|
extraParameters: [], |
|
|
|
|
'is_schema_readonly': true, |
|
|
|
|
'is_data_readonly': false, |
|
|
|
|
}, |
|
|
|
|
is_schema_readonly: true, |
|
|
|
|
is_data_readonly: false, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const customFormState = ref<ProjectCreateForm>({ |
|
|
|
|
title: '', |
|
|
|
|
dataSource: {...getDefaultConnectionConfig(ClientType.MYSQL)}, |
|
|
|
|
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
|
|
|
|
inflection: { |
|
|
|
|
inflectionColumn: 'none', |
|
|
|
|
inflectionTable: 'none', |
|
|
|
@ -134,14 +133,14 @@ const validators = computed(() => {
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const {validate, validateInfos} = useForm(formState.value, validators) |
|
|
|
|
const { validate, validateInfos } = useForm(formState.value, validators) |
|
|
|
|
|
|
|
|
|
const populateName = (v: string) => { |
|
|
|
|
formState.value.dataSource.connection.database = `${v.trim()}_noco` |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onClientChange = () => { |
|
|
|
|
formState.value.dataSource = {...getDefaultConnectionConfig(formState.value.dataSource.client)} |
|
|
|
|
formState.value.dataSource = { ...getDefaultConnectionConfig(formState.value.dataSource.client) } |
|
|
|
|
populateName(formState.value.title) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -182,7 +181,7 @@ const updateSSLUse = () => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const addNewParam = () => { |
|
|
|
|
formState.value.extraParameters.push({key: '', value: ''}) |
|
|
|
|
formState.value.extraParameters.push({ key: '', value: '' }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const removeParam = (index: number) => { |
|
|
|
@ -208,7 +207,7 @@ const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const sslFilesRequired = computed( |
|
|
|
|
() => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed, |
|
|
|
|
() => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed, |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
function getConnectionConfig() { |
|
|
|
@ -221,8 +220,8 @@ function getConnectionConfig() {
|
|
|
|
|
|
|
|
|
|
if ('ssl' in connection && connection.ssl) { |
|
|
|
|
if ( |
|
|
|
|
formState.value.sslUse === SSLUsage.No || |
|
|
|
|
(typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined)) |
|
|
|
|
formState.value.sslUse === SSLUsage.No || |
|
|
|
|
(typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined)) |
|
|
|
|
) { |
|
|
|
|
delete connection.ssl |
|
|
|
|
} |
|
|
|
@ -234,7 +233,7 @@ const focusInvalidInput = () => {
|
|
|
|
|
form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const {$poller} = useNuxtApp() |
|
|
|
|
const { $poller } = useNuxtApp() |
|
|
|
|
|
|
|
|
|
const createSource = async () => { |
|
|
|
|
try { |
|
|
|
@ -251,7 +250,7 @@ const createSource = async () => {
|
|
|
|
|
|
|
|
|
|
const connection = getConnectionConfig() |
|
|
|
|
|
|
|
|
|
const config = {...formState.value.dataSource, connection} |
|
|
|
|
const config = { ...formState.value.dataSource, connection } |
|
|
|
|
|
|
|
|
|
const jobData = await api.source.create(baseId.value, { |
|
|
|
|
alias: formState.value.title, |
|
|
|
@ -264,36 +263,36 @@ const createSource = async () => {
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
$poller.subscribe( |
|
|
|
|
{id: jobData.id}, |
|
|
|
|
async (data: { |
|
|
|
|
id: string |
|
|
|
|
status?: string |
|
|
|
|
data?: { |
|
|
|
|
error?: { |
|
|
|
|
message: string |
|
|
|
|
} |
|
|
|
|
message?: string |
|
|
|
|
result?: any |
|
|
|
|
{ id: jobData.id }, |
|
|
|
|
async (data: { |
|
|
|
|
id: string |
|
|
|
|
status?: string |
|
|
|
|
data?: { |
|
|
|
|
error?: { |
|
|
|
|
message: string |
|
|
|
|
} |
|
|
|
|
}) => { |
|
|
|
|
if (data.status !== 'close') { |
|
|
|
|
if (data.status === JobStatus.COMPLETED) { |
|
|
|
|
$e('a:base:create:extdb') |
|
|
|
|
|
|
|
|
|
if (baseId.value) { |
|
|
|
|
await loadProject(baseId.value, true) |
|
|
|
|
await loadProjectTables(baseId.value, true) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
emit('sourceCreated') |
|
|
|
|
vOpen.value = false |
|
|
|
|
creatingSource.value = false |
|
|
|
|
} else if (status === JobStatus.FAILED) { |
|
|
|
|
message.error('Failed to create base') |
|
|
|
|
creatingSource.value = false |
|
|
|
|
message?: string |
|
|
|
|
result?: any |
|
|
|
|
} |
|
|
|
|
}) => { |
|
|
|
|
if (data.status !== 'close') { |
|
|
|
|
if (data.status === JobStatus.COMPLETED) { |
|
|
|
|
$e('a:base:create:extdb') |
|
|
|
|
|
|
|
|
|
if (baseId.value) { |
|
|
|
|
await loadProject(baseId.value, true) |
|
|
|
|
await loadProjectTables(baseId.value, true) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
emit('sourceCreated') |
|
|
|
|
vOpen.value = false |
|
|
|
|
creatingSource.value = false |
|
|
|
|
} else if (status === JobStatus.FAILED) { |
|
|
|
|
message.error('Failed to create base') |
|
|
|
|
creatingSource.value = false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
) |
|
|
|
|
} catch (e: any) { |
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
|
|
@ -350,11 +349,11 @@ const testConnection = async () => {
|
|
|
|
|
const handleImportURL = async () => { |
|
|
|
|
if (!importURL.value || importURL.value === '') return |
|
|
|
|
|
|
|
|
|
const connectionConfig = await api.utils.urlToConfig({url: importURL.value}) |
|
|
|
|
const connectionConfig = await api.utils.urlToConfig({ url: importURL.value }) |
|
|
|
|
|
|
|
|
|
if (connectionConfig) { |
|
|
|
|
formState.value.dataSource.client = connectionConfig.client |
|
|
|
|
formState.value.dataSource.connection = {...connectionConfig.connection} |
|
|
|
|
formState.value.dataSource.connection = { ...connectionConfig.connection } |
|
|
|
|
} else { |
|
|
|
|
message.error(t('msg.error.invalidURL')) |
|
|
|
|
} |
|
|
|
@ -363,27 +362,27 @@ const handleImportURL = async () => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handleEditJSON = () => { |
|
|
|
|
customFormState.value = {...formState.value} |
|
|
|
|
customFormState.value = { ...formState.value } |
|
|
|
|
configEditDlg.value = true |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handleOk = () => { |
|
|
|
|
formState.value = {...customFormState.value} |
|
|
|
|
formState.value = { ...customFormState.value } |
|
|
|
|
configEditDlg.value = false |
|
|
|
|
updateSSLUse() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// reset test status on config change |
|
|
|
|
watch( |
|
|
|
|
() => formState.value.dataSource, |
|
|
|
|
() => (testSuccess.value = false), |
|
|
|
|
{deep: true}, |
|
|
|
|
() => formState.value.dataSource, |
|
|
|
|
() => (testSuccess.value = false), |
|
|
|
|
{ deep: true }, |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
// populate database name based on title |
|
|
|
|
watch( |
|
|
|
|
() => formState.value.title, |
|
|
|
|
(v) => populateName(v), |
|
|
|
|
() => formState.value.title, |
|
|
|
|
(v) => populateName(v), |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
// select and focus title field on load |
|
|
|
@ -400,12 +399,12 @@ onMounted(async () => {
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
|
connectionType, |
|
|
|
|
(v) => { |
|
|
|
|
formState.value.dataSource.client = v |
|
|
|
|
onClientChange() |
|
|
|
|
}, |
|
|
|
|
{immediate: true}, |
|
|
|
|
connectionType, |
|
|
|
|
(v) => { |
|
|
|
|
formState.value.dataSource.client = v |
|
|
|
|
onClientChange() |
|
|
|
|
}, |
|
|
|
|
{ immediate: true }, |
|
|
|
|
) |
|
|
|
|
const toggleModal = (val: boolean) => { |
|
|
|
|
vOpen.value = val |
|
|
|
@ -434,54 +433,54 @@ const allowDataWrite = computed({
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<GeneralModal |
|
|
|
|
:visible="vOpen" |
|
|
|
|
:closable="!creatingSource" |
|
|
|
|
:keyboard="!creatingSource" |
|
|
|
|
:mask-closable="false" |
|
|
|
|
size="medium" |
|
|
|
|
@update:visible="toggleModal" |
|
|
|
|
:visible="vOpen" |
|
|
|
|
:closable="!creatingSource" |
|
|
|
|
:keyboard="!creatingSource" |
|
|
|
|
:mask-closable="false" |
|
|
|
|
size="medium" |
|
|
|
|
@update:visible="toggleModal" |
|
|
|
|
> |
|
|
|
|
<div class="py-6 px-8"> |
|
|
|
|
<div class="create-source bg-white relative flex flex-col justify-center gap-2 w-full"> |
|
|
|
|
<h1 class="prose-xl font-bold self-start mb-4 flex items-center gap-2"> |
|
|
|
|
{{ $t('title.newBase') }} |
|
|
|
|
<DashboardSettingsDataSourcesInfo/> |
|
|
|
|
<DashboardSettingsDataSourcesInfo /> |
|
|
|
|
<span class="flex-grow"></span> |
|
|
|
|
</h1> |
|
|
|
|
|
|
|
|
|
<a-form |
|
|
|
|
ref="form" |
|
|
|
|
:model="formState" |
|
|
|
|
name="external-base-create-form" |
|
|
|
|
layout="horizontal" |
|
|
|
|
no-style |
|
|
|
|
:label-col="{ span: 8 }" |
|
|
|
|
ref="form" |
|
|
|
|
:model="formState" |
|
|
|
|
name="external-base-create-form" |
|
|
|
|
layout="horizontal" |
|
|
|
|
no-style |
|
|
|
|
:label-col="{ span: 8 }" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
class="nc-scrollbar-md" |
|
|
|
|
:style="{ |
|
|
|
|
class="nc-scrollbar-md" |
|
|
|
|
:style="{ |
|
|
|
|
maxHeight: '60vh', |
|
|
|
|
}" |
|
|
|
|
> |
|
|
|
|
<a-form-item label="Source Name" v-bind="validateInfos.title"> |
|
|
|
|
<a-input v-model:value="formState.title" class="nc-extdb-proj-name"/> |
|
|
|
|
<a-input v-model:value="formState.title" class="nc-extdb-proj-name" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="formState.dataSource.client" |
|
|
|
|
class="nc-extdb-db-type" |
|
|
|
|
dropdown-class-name="nc-dropdown-ext-db-type" |
|
|
|
|
@change="onClientChange" |
|
|
|
|
v-model:value="formState.dataSource.client" |
|
|
|
|
class="nc-extdb-db-type" |
|
|
|
|
dropdown-class-name="nc-dropdown-ext-db-type" |
|
|
|
|
@change="onClientChange" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"> |
|
|
|
|
<div class="flex items-center gap-2 justify-between"> |
|
|
|
|
<div>{{ client.text }}</div> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.check" |
|
|
|
|
v-if="formState.dataSource.client === client.value" |
|
|
|
|
id="nc-selected-item-icon" |
|
|
|
|
class="text-primary w-4 h-4" |
|
|
|
|
:is="iconMap.check" |
|
|
|
|
v-if="formState.dataSource.client === client.value" |
|
|
|
|
id="nc-selected-item-icon" |
|
|
|
|
class="text-primary w-4 h-4" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</a-select-option> |
|
|
|
@ -490,41 +489,40 @@ const allowDataWrite = computed({
|
|
|
|
|
|
|
|
|
|
<!-- SQLite File --> |
|
|
|
|
<a-form-item |
|
|
|
|
v-if="formState.dataSource.client === ClientType.SQLITE" |
|
|
|
|
:label="$t('labels.sqliteFile')" |
|
|
|
|
v-bind="validateInfos['dataSource.connection.connection.filename']" |
|
|
|
|
v-if="formState.dataSource.client === ClientType.SQLITE" |
|
|
|
|
:label="$t('labels.sqliteFile')" |
|
|
|
|
v-bind="validateInfos['dataSource.connection.connection.filename']" |
|
|
|
|
> |
|
|
|
|
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename"/> |
|
|
|
|
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<template v-else> |
|
|
|
|
<!-- Host Address --> |
|
|
|
|
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> |
|
|
|
|
<a-input |
|
|
|
|
v-model:value="(formState.dataSource.connection as DefaultConnection).host" |
|
|
|
|
class="nc-extdb-host-address" |
|
|
|
|
v-model:value="(formState.dataSource.connection as DefaultConnection).host" |
|
|
|
|
class="nc-extdb-host-address" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<!-- Port Number --> |
|
|
|
|
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']"> |
|
|
|
|
<a-input-number |
|
|
|
|
v-model:value="(formState.dataSource.connection as DefaultConnection).port" |
|
|
|
|
class="!w-full nc-extdb-host-port" |
|
|
|
|
v-model:value="(formState.dataSource.connection as DefaultConnection).port" |
|
|
|
|
class="!w-full nc-extdb-host-port" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<!-- Username --> |
|
|
|
|
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']"> |
|
|
|
|
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" |
|
|
|
|
class="nc-extdb-host-user"/> |
|
|
|
|
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<!-- Password --> |
|
|
|
|
<a-form-item :label="$t('labels.password')"> |
|
|
|
|
<a-input-password |
|
|
|
|
v-model:value="(formState.dataSource.connection as DefaultConnection).password" |
|
|
|
|
class="nc-extdb-host-password" |
|
|
|
|
v-model:value="(formState.dataSource.connection as DefaultConnection).password" |
|
|
|
|
class="nc-extdb-host-password" |
|
|
|
|
/> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
@ -532,19 +530,19 @@ const allowDataWrite = computed({
|
|
|
|
|
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
|
|
|
|
<!-- Database : create if not exists --> |
|
|
|
|
<a-input |
|
|
|
|
v-model:value="formState.dataSource.connection.database" |
|
|
|
|
:placeholder="$t('labels.dbCreateIfNotExists')" |
|
|
|
|
class="nc-extdb-host-database" |
|
|
|
|
v-model:value="formState.dataSource.connection.database" |
|
|
|
|
:placeholder="$t('labels.dbCreateIfNotExists')" |
|
|
|
|
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" |
|
|
|
|
:label="$t('labels.schemaName')" |
|
|
|
|
v-bind="validateInfos['dataSource.searchPath.0']" |
|
|
|
|
v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath" |
|
|
|
|
:label="$t('labels.schemaName')" |
|
|
|
|
v-bind="validateInfos['dataSource.searchPath.0']" |
|
|
|
|
> |
|
|
|
|
<a-input v-model:value="formState.dataSource.searchPath[0]"/> |
|
|
|
|
<a-input v-model:value="formState.dataSource.searchPath[0]" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item> |
|
|
|
|
<template #label> |
|
|
|
@ -556,7 +554,7 @@ const allowDataWrite = computed({
|
|
|
|
|
<template #title> |
|
|
|
|
<span>{{ $t('tooltip.allowMetaWrite') }}</span> |
|
|
|
|
</template> |
|
|
|
|
<GeneralIcon class="text-gray-500" icon="info"/> |
|
|
|
|
<GeneralIcon class="text-gray-500" icon="info" /> |
|
|
|
|
</NcTooltip> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
@ -565,9 +563,9 @@ const allowDataWrite = computed({
|
|
|
|
|
<a-form-item> |
|
|
|
|
<template #label> |
|
|
|
|
<div class="flex gap-1 justify-end"> |
|
|
|
|
<span> |
|
|
|
|
{{ $t('labels.allowDataWrite') }} |
|
|
|
|
</span> |
|
|
|
|
<span> |
|
|
|
|
{{ $t('labels.allowDataWrite') }} |
|
|
|
|
</span> |
|
|
|
|
<NcTooltip> |
|
|
|
|
<template #title> |
|
|
|
|
<span>{{ $t('tooltip.allowDataWrite') }}</span> |
|
|
|
@ -582,10 +580,10 @@ const allowDataWrite = computed({
|
|
|
|
|
{{ $t('tooltip.dataWriteOptionDisabled') }} |
|
|
|
|
</template> |
|
|
|
|
<a-switch |
|
|
|
|
v-model:checked="allowDataWrite" |
|
|
|
|
:disabled="allowMetaWrite" |
|
|
|
|
data-testid="nc-allow-data-write" |
|
|
|
|
size="small" |
|
|
|
|
v-model:checked="allowDataWrite" |
|
|
|
|
:disabled="allowMetaWrite" |
|
|
|
|
data-testid="nc-allow-data-write" |
|
|
|
|
size="small" |
|
|
|
|
></a-switch> |
|
|
|
|
</NcTooltip> |
|
|
|
|
</div> |
|
|
|
@ -593,8 +591,7 @@ const allowDataWrite = computed({
|
|
|
|
|
|
|
|
|
|
<div class="flex items-right justify-end gap-2"> |
|
|
|
|
<!-- Use Connection URL --> |
|
|
|
|
<NcButton type="ghost" size="small" class="nc-extdb-btn-import-url !rounded-md" |
|
|
|
|
@click.stop="importURLDlg = true"> |
|
|
|
|
<NcButton type="ghost" size="small" class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true"> |
|
|
|
|
{{ $t('activity.useConnectionUrl') }} |
|
|
|
|
</NcButton> |
|
|
|
|
</div> |
|
|
|
@ -606,18 +603,18 @@ const allowDataWrite = computed({
|
|
|
|
|
</template> |
|
|
|
|
<a-form-item label="SSL mode"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="formState.sslUse" |
|
|
|
|
dropdown-class-name="nc-dropdown-ssl-mode" |
|
|
|
|
@select="onSSLModeChange" |
|
|
|
|
v-model:value="formState.sslUse" |
|
|
|
|
dropdown-class-name="nc-dropdown-ssl-mode" |
|
|
|
|
@select="onSSLModeChange" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt"> |
|
|
|
|
<div class="flex items-center gap-2 justify-between"> |
|
|
|
|
<div>{{ opt }}</div> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.check" |
|
|
|
|
v-if="formState?.sslUse === opt" |
|
|
|
|
id="nc-selected-item-icon" |
|
|
|
|
class="text-primary w-4 h-4" |
|
|
|
|
:is="iconMap.check" |
|
|
|
|
v-if="formState?.sslUse === opt" |
|
|
|
|
id="nc-selected-item-icon" |
|
|
|
|
class="text-primary w-4 h-4" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</a-select-option> |
|
|
|
@ -632,8 +629,7 @@ const allowDataWrite = computed({
|
|
|
|
|
<span>{{ $t('tooltip.clientCert') }}</span> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<NcButton size="small" :disabled="!sslFilesRequired" class="shadow" |
|
|
|
|
@click="certFileInput?.click()"> |
|
|
|
|
<NcButton size="small" :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()"> |
|
|
|
|
{{ $t('labels.clientCert') }} |
|
|
|
|
</NcButton> |
|
|
|
|
</a-tooltip> |
|
|
|
@ -643,8 +639,7 @@ const allowDataWrite = computed({
|
|
|
|
|
<template #title> |
|
|
|
|
<span>{{ $t('tooltip.clientKey') }}</span> |
|
|
|
|
</template> |
|
|
|
|
<NcButton size="small" :disabled="!sslFilesRequired" class="shadow" |
|
|
|
|
@click="keyFileInput?.click()"> |
|
|
|
|
<NcButton size="small" :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()"> |
|
|
|
|
{{ $t('labels.clientKey') }} |
|
|
|
|
</NcButton> |
|
|
|
|
</a-tooltip> |
|
|
|
@ -655,69 +650,65 @@ const allowDataWrite = computed({
|
|
|
|
|
<span>{{ $t('tooltip.clientCA') }}</span> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<NcButton size="small" :disabled="!sslFilesRequired" class="shadow" |
|
|
|
|
@click="caFileInput?.click()"> |
|
|
|
|
<NcButton size="small" :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()"> |
|
|
|
|
{{ $t('labels.serverCA') }} |
|
|
|
|
</NcButton> |
|
|
|
|
</a-tooltip> |
|
|
|
|
</div> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<input ref="caFileInput" type="file" class="!hidden" |
|
|
|
|
@change="onFileSelect(CertTypes.ca, caFileInput)"/> |
|
|
|
|
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" /> |
|
|
|
|
|
|
|
|
|
<input ref="certFileInput" type="file" class="!hidden" |
|
|
|
|
@change="onFileSelect(CertTypes.cert, certFileInput)"/> |
|
|
|
|
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" /> |
|
|
|
|
|
|
|
|
|
<input ref="keyFileInput" type="file" class="!hidden" |
|
|
|
|
@change="onFileSelect(CertTypes.key, keyFileInput)"/> |
|
|
|
|
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" /> |
|
|
|
|
|
|
|
|
|
<a-divider/> |
|
|
|
|
<a-divider /> |
|
|
|
|
|
|
|
|
|
<!-- Extra connection parameters --> |
|
|
|
|
<a-form-item |
|
|
|
|
class="mb-2" |
|
|
|
|
:label="$t('labels.extraConnectionParameters')" |
|
|
|
|
v-bind="validateInfos.extraParameters" |
|
|
|
|
class="mb-2" |
|
|
|
|
:label="$t('labels.extraConnectionParameters')" |
|
|
|
|
v-bind="validateInfos.extraParameters" |
|
|
|
|
> |
|
|
|
|
<a-card> |
|
|
|
|
<div v-for="(item, index) of formState.extraParameters" :key="index"> |
|
|
|
|
<div class="flex py-1 items-center gap-1"> |
|
|
|
|
<a-input v-model:value="item.key"/> |
|
|
|
|
<a-input v-model:value="item.key" /> |
|
|
|
|
|
|
|
|
|
<span>:</span> |
|
|
|
|
|
|
|
|
|
<a-input v-model:value="item.value"/> |
|
|
|
|
<a-input v-model:value="item.value" /> |
|
|
|
|
|
|
|
|
|
<component |
|
|
|
|
:is="iconMap.close" |
|
|
|
|
:style="{ 'font-size': '1.5em', 'color': 'red' }" |
|
|
|
|
@click="removeParam(index)" |
|
|
|
|
:is="iconMap.close" |
|
|
|
|
:style="{ 'font-size': '1.5em', 'color': 'red' }" |
|
|
|
|
@click="removeParam(index)" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<NcButton size="small" type="dashed" class="w-full caption mt-2" @click="addNewParam"> |
|
|
|
|
<div class="flex items-center justify-center"> |
|
|
|
|
<component :is="iconMap.plus"/> |
|
|
|
|
<component :is="iconMap.plus" /> |
|
|
|
|
</div> |
|
|
|
|
</NcButton> |
|
|
|
|
</a-card> |
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
|
|
<a-divider/> |
|
|
|
|
<a-divider /> |
|
|
|
|
<a-form-item :label="$t('labels.inflection.tableName')"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="formState.inflection.inflectionTable" |
|
|
|
|
dropdown-class-name="nc-dropdown-inflection-table-name" |
|
|
|
|
v-model:value="formState.inflection.inflectionTable" |
|
|
|
|
dropdown-class-name="nc-dropdown-inflection-table-name" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp"> |
|
|
|
|
<div class="flex items-center gap-2 justify-between"> |
|
|
|
|
<div>{{ tp }}</div> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.check" |
|
|
|
|
v-if="formState?.inflection?.inflectionTable === tp" |
|
|
|
|
id="nc-selected-item-icon" |
|
|
|
|
class="text-primary w-4 h-4" |
|
|
|
|
:is="iconMap.check" |
|
|
|
|
v-if="formState?.inflection?.inflectionTable === tp" |
|
|
|
|
id="nc-selected-item-icon" |
|
|
|
|
class="text-primary w-4 h-4" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</a-select-option> |
|
|
|
@ -726,18 +717,17 @@ const allowDataWrite = computed({
|
|
|
|
|
|
|
|
|
|
<a-form-item :label="$t('labels.inflection.columnName')"> |
|
|
|
|
<a-select |
|
|
|
|
v-model:value="formState.inflection.inflectionColumn" |
|
|
|
|
dropdown-class-name="nc-dropdown-inflection-column-name" |
|
|
|
|
v-model:value="formState.inflection.inflectionColumn" |
|
|
|
|
dropdown-class-name="nc-dropdown-inflection-column-name" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp" |
|
|
|
|
> |
|
|
|
|
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp"> |
|
|
|
|
<div class="flex items-center gap-2 justify-between"> |
|
|
|
|
<div>{{ tp }}</div> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.check" |
|
|
|
|
v-if="formState?.inflection?.inflectionColumn === tp" |
|
|
|
|
id="nc-selected-item-icon" |
|
|
|
|
class="text-primary w-4 h-4" |
|
|
|
|
:is="iconMap.check" |
|
|
|
|
v-if="formState?.inflection?.inflectionColumn === tp" |
|
|
|
|
id="nc-selected-item-icon" |
|
|
|
|
class="text-primary w-4 h-4" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</a-select-option> |
|
|
|
@ -759,23 +749,23 @@ const allowDataWrite = computed({
|
|
|
|
|
<div class="flex justify-end gap-2"> |
|
|
|
|
<div class="w-[15px] h-[15px] cursor-pointer" @dblclick="onEasterEgg"></div> |
|
|
|
|
<NcButton |
|
|
|
|
:type="testSuccess ? 'ghost' : 'primary'" |
|
|
|
|
size="small" |
|
|
|
|
class="nc-extdb-btn-test-connection !rounded-md" |
|
|
|
|
:loading="testingConnection" |
|
|
|
|
@click="testConnection" |
|
|
|
|
:type="testSuccess ? 'ghost' : 'primary'" |
|
|
|
|
size="small" |
|
|
|
|
class="nc-extdb-btn-test-connection !rounded-md" |
|
|
|
|
:loading="testingConnection" |
|
|
|
|
@click="testConnection" |
|
|
|
|
> |
|
|
|
|
<GeneralIcon v-if="testSuccess" icon="circleCheck" class="text-primary mr-2"/> |
|
|
|
|
<GeneralIcon v-if="testSuccess" icon="circleCheck" class="text-primary mr-2" /> |
|
|
|
|
{{ $t('activity.testDbConn') }} |
|
|
|
|
</NcButton> |
|
|
|
|
|
|
|
|
|
<NcButton |
|
|
|
|
size="small" |
|
|
|
|
type="primary" |
|
|
|
|
:disabled="!testSuccess" |
|
|
|
|
:loading="creatingSource" |
|
|
|
|
class="nc-extdb-btn-submit !rounded-md" |
|
|
|
|
@click="createSource" |
|
|
|
|
size="small" |
|
|
|
|
type="primary" |
|
|
|
|
:disabled="!testSuccess" |
|
|
|
|
:loading="creatingSource" |
|
|
|
|
class="nc-extdb-btn-submit !rounded-md" |
|
|
|
|
@click="createSource" |
|
|
|
|
> |
|
|
|
|
{{ $t('general.submit') }} |
|
|
|
|
</NcButton> |
|
|
|
@ -784,26 +774,26 @@ const allowDataWrite = computed({
|
|
|
|
|
</a-form> |
|
|
|
|
|
|
|
|
|
<a-modal |
|
|
|
|
v-model:visible="configEditDlg" |
|
|
|
|
:title="$t('activity.editConnJson')" |
|
|
|
|
width="600px" |
|
|
|
|
wrap-class-name="nc-modal-edit-connection-json" |
|
|
|
|
@ok="handleOk" |
|
|
|
|
v-model:visible="configEditDlg" |
|
|
|
|
:title="$t('activity.editConnJson')" |
|
|
|
|
width="600px" |
|
|
|
|
wrap-class-name="nc-modal-edit-connection-json" |
|
|
|
|
@ok="handleOk" |
|
|
|
|
> |
|
|
|
|
<MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full"/> |
|
|
|
|
<MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" /> |
|
|
|
|
</a-modal> |
|
|
|
|
|
|
|
|
|
<!-- Use Connection URL --> |
|
|
|
|
<a-modal |
|
|
|
|
v-model:visible="importURLDlg" |
|
|
|
|
:title="$t('activity.useConnectionUrl')" |
|
|
|
|
width="500px" |
|
|
|
|
:ok-text="$t('general.ok')" |
|
|
|
|
:cancel-text="$t('general.cancel')" |
|
|
|
|
wrap-class-name="nc-modal-connection-url" |
|
|
|
|
@ok="handleImportURL" |
|
|
|
|
v-model:visible="importURLDlg" |
|
|
|
|
:title="$t('activity.useConnectionUrl')" |
|
|
|
|
width="500px" |
|
|
|
|
:ok-text="$t('general.ok')" |
|
|
|
|
:cancel-text="$t('general.cancel')" |
|
|
|
|
wrap-class-name="nc-modal-connection-url" |
|
|
|
|
@ok="handleImportURL" |
|
|
|
|
> |
|
|
|
|
<a-input v-model:value="importURL"/> |
|
|
|
|
<a-input v-model:value="importURL" /> |
|
|
|
|
</a-modal> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|