|
|
|
@ -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) => { |
|
|
|
@ -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,7 +263,7 @@ const createSource = async () => {
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
$poller.subscribe( |
|
|
|
|
{id: jobData.id}, |
|
|
|
|
{ id: jobData.id }, |
|
|
|
|
async (data: { |
|
|
|
|
id: string |
|
|
|
|
status?: string |
|
|
|
@ -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,12 +362,12 @@ 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() |
|
|
|
|
} |
|
|
|
@ -377,7 +376,7 @@ const handleOk = () => {
|
|
|
|
|
watch( |
|
|
|
|
() => formState.value.dataSource, |
|
|
|
|
() => (testSuccess.value = false), |
|
|
|
|
{deep: true}, |
|
|
|
|
{ deep: true }, |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
// populate database name based on title |
|
|
|
@ -405,7 +404,7 @@ watch(
|
|
|
|
|
formState.value.dataSource.client = v |
|
|
|
|
onClientChange() |
|
|
|
|
}, |
|
|
|
|
{immediate: true}, |
|
|
|
|
{ immediate: true }, |
|
|
|
|
) |
|
|
|
|
const toggleModal = (val: boolean) => { |
|
|
|
|
vOpen.value = val |
|
|
|
@ -445,7 +444,7 @@ const allowDataWrite = computed({
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
@ -464,7 +463,7 @@ const allowDataWrite = computed({
|
|
|
|
|
}" |
|
|
|
|
> |
|
|
|
|
<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']"> |
|
|
|
@ -494,7 +493,7 @@ const allowDataWrite = computed({
|
|
|
|
|
: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> |
|
|
|
@ -516,8 +515,7 @@ const allowDataWrite = computed({
|
|
|
|
|
|
|
|
|
|
<!-- 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 --> |
|
|
|
@ -544,7 +542,7 @@ const allowDataWrite = computed({
|
|
|
|
|
: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> |
|
|
|
@ -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> |
|
|
|
@ -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,24 +650,20 @@ 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 |
|
|
|
@ -683,11 +674,11 @@ const allowDataWrite = computed({
|
|
|
|
|
<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" |
|
|
|
@ -698,13 +689,13 @@ const allowDataWrite = computed({
|
|
|
|
|
</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" |
|
|
|
@ -729,8 +720,7 @@ const allowDataWrite = computed({
|
|
|
|
|
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 |
|
|
|
@ -765,7 +755,7 @@ const allowDataWrite = computed({
|
|
|
|
|
: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> |
|
|
|
|
|
|
|
|
@ -790,7 +780,7 @@ const allowDataWrite = computed({
|
|
|
|
|
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 --> |
|
|
|
@ -803,7 +793,7 @@ const allowDataWrite = computed({
|
|
|
|
|
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> |
|
|
|
|