mirror of
https://github.com/nocodb/nocodb.git
synced 2026-04-30 04:36:43 +00:00
feat: Improved UI (#6222)
* feat: Improved ui (#6156) * refactor: revert Signed-off-by: Pranav C <pranavxc@gmail.com> feat: shared base Signed-off-by: Pranav C <pranavxc@gmail.com> fix: remove duplicate import statement Signed-off-by: Pranav C <pranavxc@gmail.com> fix: disable starred & license menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix airtable wait issue Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable mysql in ci Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix checkbox order for sqlite Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: disable quick tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: fix dbType env variable for CI Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: workspace API access error fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite CI CD Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: use DB_TYPE env variable Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: enable SQLite UT Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: isHub cleanup Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: add check for EE Timezone spec Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> chore: cleanup Signed-off-by: Pranav C <pranavxc@gmail.com> test: EE check fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: test correction Signed-off-by: Pranav C <pranavxc@gmail.com> chore: sync latest changes Signed-off-by: Pranav C <pranavxc@gmail.com> test: set EE=false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> test: set NC Edition to community in workflow file Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> chore: update sdk build command Signed-off-by: Pranav C <pranavxc@gmail.com> refactor: i18n and other changes Signed-off-by: Pranav C <pranavxc@gmail.com> feat: new ui Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: lint Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: shared view/base related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: checkbox verification sort order fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix sqlite reset Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable selfhosted runners Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table ops (draft) Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * Docs: screenshots for table-operations.md * refactor: introduce missing buttons Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: get all fields Signed-off-by: Pranav C <pranavxc@gmail.com> * test: UT fix- new data API response Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: EE is false Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: webhook lookup as string in CE Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: include created_at and updated_at Signed-off-by: Pranav C <pranavxc@gmail.com> * test: fix UT newDataAPI response for PG Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: separate api for webhook related plugins Signed-off-by: Pranav C <pranavxc@gmail.com> * test: msyql filter corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: mysql group by test corrections Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix datatype for rating field in groupby spec for pg Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: kanban datatype correction Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: column edit for mysql- rating field Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: misc fixes Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 4 workers Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: enable 2 workers per shard only Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: table CRUD * Rename table-operations.md to table-crud.md * Create column-crud.md * docs: row CRUD * Rename row.md to row-crud.md * docs: project crud * docs: toolbar (skeleton) * refactor: single page UI and bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: sync tests playwright Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing dependency Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: single page ui, test corrections Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: tests Signed-off-by: Pranav C <pranavxc@gmail.com> * test: project rename test correction Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: remove only Signed-off-by: Pranav C <pranavxc@gmail.com> * test: remove wrong import statement Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: delete option not visible in project context menu Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: move ws access within isEE() Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: fix groupby * test: groupby fix Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: signup & landing page * docs: project crud * docs: project-crud misc * docs: toolbar fields * docs: toolbar / filters * docs: toolbar / group by * docs: toolbar / sort * docs: toolbar / row height * docs: filters additional options * docs: file re-order Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: add links to column types * docs: code snippets * docs: links * docs: lookup * docs: rollup * docs: formula * docs: primary key * docs: display value * docs: development setup * docs: swagger * fix(nc-gui): encodeURIComponent for row id - closes: #6202 * docs: language * docs: expanded record * docs: import airtable * docs: airtable * docs: webhook * docs: revert file rename Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * docs: account settings * docs: audit * docs: meta management * docs: project settings * docs: shared base * docs: shared view * docs: meta sync * docs: team-auth * docs: views * docs: fix URL * docs: URL corrections * fix: shared base, view related bugs Signed-off-by: Pranav C <pranavxc@gmail.com> * test: EE check for WSaccess Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * test: exclude EE tests Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> * fix: missing project delete closes #6215 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: merge existing project meta if found closes #6216 Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refactor: docs and other bug fixes Signed-off-by: Pranav C <pranavxc@gmail.com> * feat: populate default project on super admin signup Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: include created project details in signup response if avail, missing Dockerfile Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: use custom function for resolving ts path aliases Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: add missing generate script Signed-off-by: Pranav C <pranavxc@gmail.com> * chore: webpack build correction - ts path resolve Signed-off-by: Pranav C <pranavxc@gmail.com> --------- Signed-off-by: Pranav C <pranavxc@gmail.com> Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: mertmit <mertmit99@gmail.com> Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com> Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Wing-Kam Wong <wingkwong.code@gmail.com>
This commit is contained in:
Pranav C
@@ -6,6 +6,7 @@ import type { DefaultConnection, ProjectCreateForm, SQLiteConnection } from '#im
|
||||
import {
|
||||
CertTypes,
|
||||
ClientType,
|
||||
ProjectIdInj,
|
||||
SSLUsage,
|
||||
clientTypes,
|
||||
computed,
|
||||
@@ -29,12 +30,15 @@ const props = defineProps<{
|
||||
baseId: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['baseUpdated'])
|
||||
const emit = defineEmits(['baseUpdated', 'close'])
|
||||
|
||||
const projectStore = useProject()
|
||||
const { loadProject } = projectStore
|
||||
const projectsStore = useProjects()
|
||||
const { project } = storeToRefs(projectStore)
|
||||
|
||||
const _projectId = inject(ProjectIdInj, undefined)
|
||||
const projectId = computed(() => _projectId?.value ?? project.value?.id)
|
||||
|
||||
const useForm = Form.useForm
|
||||
|
||||
const testSuccess = ref(false)
|
||||
@@ -47,8 +51,6 @@ const { $e } = useNuxtApp()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const toggleDialog = inject(ToggleDialogInj, () => {})
|
||||
|
||||
const formState = ref<ProjectCreateForm>({
|
||||
title: '',
|
||||
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) },
|
||||
@@ -224,10 +226,9 @@ const editBase = async () => {
|
||||
|
||||
$e('a:base:edit:extdb')
|
||||
|
||||
await loadProject()
|
||||
await projectsStore.loadProject(projectId.value!, true)
|
||||
emit('baseUpdated')
|
||||
message.success('Base updated!')
|
||||
toggleDialog(true, 'dataSources', '')
|
||||
emit('close')
|
||||
} catch (e: any) {
|
||||
message.error(await extractSdkResponseErrorMsg(e))
|
||||
}
|
||||
@@ -344,7 +345,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="edit-base max-w-800px bg-white relative flex flex-col justify-start gap-2 w-full p-2">
|
||||
<div class="edit-base bg-white relative flex flex-col justify-start gap-2 w-full p-2">
|
||||
<h1 class="prose-2xl font-bold self-start">Edit Base</h1>
|
||||
|
||||
<a-form
|
||||
@@ -355,234 +356,241 @@ onMounted(async () => {
|
||||
no-style
|
||||
:label-col="{ span: 8 }"
|
||||
>
|
||||
<a-form-item label="Base Name" v-bind="validateInfos.title">
|
||||
<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"
|
||||
>
|
||||
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
|
||||
>{{ client.text }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<!-- SQLite File -->
|
||||
<a-form-item
|
||||
v-if="formState.dataSource.client === ClientType.SQLITE"
|
||||
:label="$t('labels.sqliteFile')"
|
||||
v-bind="validateInfos['dataSource.connection.connection.filename']"
|
||||
<div
|
||||
class="nc-scrollbar-md"
|
||||
:style="{
|
||||
maxHeight: '60vh',
|
||||
}"
|
||||
>
|
||||
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" />
|
||||
</a-form-item>
|
||||
|
||||
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE">
|
||||
<!-- Account -->
|
||||
<a-form-item label="Account" v-bind="validateInfos['dataSource.connection.account']">
|
||||
<a-input v-model:value="formState.dataSource.connection.account" class="nc-extdb-account" />
|
||||
<a-form-item label="Base Name" v-bind="validateInfos.title">
|
||||
<a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- Username -->
|
||||
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.username']">
|
||||
<a-input v-model:value="formState.dataSource.connection.username" class="nc-extdb-host-user" />
|
||||
<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"
|
||||
>
|
||||
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value"
|
||||
>{{ client.text }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<!-- Password -->
|
||||
<a-form-item :label="$t('labels.password')" v-bind="validateInfos['dataSource.connection.password']">
|
||||
<a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- Warehouse -->
|
||||
<a-form-item label="Warehouse" v-bind="validateInfos['dataSource.connection.warehouse']">
|
||||
<a-input v-model:value="formState.dataSource.connection.warehouse" />
|
||||
</a-form-item>
|
||||
|
||||
<!-- Database -->
|
||||
<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"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<!-- Schema name -->
|
||||
<a-form-item :label="$t('labels.schemaName')" v-bind="validateInfos['dataSource.connection.schema']">
|
||||
<a-input v-model:value="formState.dataSource.connection.schema" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<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" />
|
||||
</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"
|
||||
/>
|
||||
</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-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"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<!-- Database -->
|
||||
<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"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<!-- Schema name -->
|
||||
<!-- SQLite File -->
|
||||
<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="formState.dataSource.client === ClientType.SQLITE"
|
||||
:label="$t('labels.sqliteFile')"
|
||||
v-bind="validateInfos['dataSource.connection.connection.filename']"
|
||||
>
|
||||
<a-input v-model:value="formState.dataSource.searchPath[0]" />
|
||||
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" />
|
||||
</a-form-item>
|
||||
<!-- Use Connection URL -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<a-button type="primary" class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true">
|
||||
{{ $t('activity.useConnectionUrl') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<a-collapse ghost expand-icon-position="right" class="!mt-6">
|
||||
<a-collapse-panel key="1">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ $t('title.advancedParameters') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<a-form-item label="SSL mode">
|
||||
<a-select 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">{{ opt }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="SSL keys">
|
||||
<div class="flex gap-2">
|
||||
<a-tooltip placement="top">
|
||||
<!-- Select .cert file -->
|
||||
<template #title>
|
||||
<span>{{ $t('tooltip.clientCert') }}</span>
|
||||
</template>
|
||||
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE && false">
|
||||
<!-- Account -->
|
||||
<a-form-item label="Account" v-bind="validateInfos['dataSource.connection.account']">
|
||||
<a-input v-model:value="formState.dataSource.connection.account" class="nc-extdb-account" />
|
||||
</a-form-item>
|
||||
|
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()">
|
||||
{{ $t('labels.clientCert') }}
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<!-- Username -->
|
||||
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.username']">
|
||||
<a-input v-model:value="formState.dataSource.connection.username" class="nc-extdb-host-user" />
|
||||
</a-form-item>
|
||||
|
||||
<a-tooltip placement="top">
|
||||
<!-- Select .key file -->
|
||||
<template #title>
|
||||
<span>{{ $t('tooltip.clientKey') }}</span>
|
||||
</template>
|
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()">
|
||||
{{ $t('labels.clientKey') }}
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<!-- Password -->
|
||||
<a-form-item :label="$t('labels.password')" v-bind="validateInfos['dataSource.connection.password']">
|
||||
<a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" />
|
||||
</a-form-item>
|
||||
|
||||
<a-tooltip placement="top">
|
||||
<!-- Select CA file -->
|
||||
<template #title>
|
||||
<span>{{ $t('tooltip.clientCA') }}</span>
|
||||
</template>
|
||||
<!-- Warehouse -->
|
||||
<a-form-item label="Warehouse" v-bind="validateInfos['dataSource.connection.warehouse']">
|
||||
<a-input v-model:value="formState.dataSource.connection.warehouse" />
|
||||
</a-form-item>
|
||||
|
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()">
|
||||
{{ $t('labels.serverCA') }}
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<!-- Database -->
|
||||
<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"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" />
|
||||
<!-- Schema name -->
|
||||
<a-form-item :label="$t('labels.schemaName')" v-bind="validateInfos['dataSource.connection.schema']">
|
||||
<a-input v-model:value="formState.dataSource.connection.schema" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" />
|
||||
<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" />
|
||||
</a-form-item>
|
||||
|
||||
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" />
|
||||
<!-- 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"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-divider />
|
||||
<!-- 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-form-item>
|
||||
|
||||
<!-- Extra connection parameters -->
|
||||
<a-form-item 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" />
|
||||
<!-- 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"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<span>:</span>
|
||||
<!-- Database -->
|
||||
<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"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-input v-model:value="item.value" />
|
||||
|
||||
<component
|
||||
:is="iconMap.close"
|
||||
:style="{ 'font-size': '1.5em', 'color': 'red' }"
|
||||
@click="removeParam(index)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 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']"
|
||||
>
|
||||
<a-input v-model:value="formState.dataSource.searchPath[0]" />
|
||||
</a-form-item>
|
||||
<!-- Use Connection URL -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<a-button type="primary" class="nc-extdb-btn-import-url !rounded-md" @click.stop="importURLDlg = true">
|
||||
{{ $t('activity.useConnectionUrl') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<a-collapse ghost expand-icon-position="right" class="!mt-6">
|
||||
<a-collapse-panel key="1">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<span>{{ $t('title.advancedParameters') }}</span>
|
||||
</div>
|
||||
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">
|
||||
<div class="flex items-center justify-center"><component :is="iconMap.plus" /></div>
|
||||
</template>
|
||||
<a-form-item label="SSL mode">
|
||||
<a-select 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">{{ opt }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="SSL keys">
|
||||
<div class="flex gap-2">
|
||||
<a-tooltip placement="top">
|
||||
<!-- Select .cert file -->
|
||||
<template #title>
|
||||
<span>{{ $t('tooltip.clientCert') }}</span>
|
||||
</template>
|
||||
|
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()">
|
||||
{{ $t('labels.clientCert') }}
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-tooltip placement="top">
|
||||
<!-- Select .key file -->
|
||||
<template #title>
|
||||
<span>{{ $t('tooltip.clientKey') }}</span>
|
||||
</template>
|
||||
<a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()">
|
||||
{{ $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" class="shadow" @click="caFileInput?.click()">
|
||||
{{ $t('labels.serverCA') }}
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<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="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" />
|
||||
|
||||
<a-divider />
|
||||
|
||||
<!-- Extra connection parameters -->
|
||||
<a-form-item 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" />
|
||||
|
||||
<span>:</span>
|
||||
|
||||
<a-input v-model:value="item.value" />
|
||||
|
||||
<component
|
||||
:is="iconMap.close"
|
||||
:style="{ 'font-size': '1.5em', 'color': 'red' }"
|
||||
@click="removeParam(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">
|
||||
<div class="flex items-center justify-center"><component :is="iconMap.plus" /></div>
|
||||
</a-button>
|
||||
</a-card>
|
||||
</a-form-item>
|
||||
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
dropdown-class-name="nc-dropdown-inflection-column-name"
|
||||
>
|
||||
<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 type="primary" class="!rounded-md" @click="handleEditJSON()">
|
||||
<!-- Edit connection JSON -->
|
||||
{{ $t('activity.editConnJson') }}
|
||||
</a-button>
|
||||
</a-card>
|
||||
</a-form-item>
|
||||
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
dropdown-class-name="nc-dropdown-inflection-column-name"
|
||||
>
|
||||
<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 type="primary" class="!rounded-md" @click="handleEditJSON()">
|
||||
<!-- Edit connection JSON -->
|
||||
{{ $t('activity.editConnJson') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<a-form-item class="flex justify-end !mt-5">
|
||||
<div class="flex justify-end gap-2">
|
||||
<a-button type="text" class="nc-extdb-btn-test-connection" @click="testConnection">
|
||||
<a-button type="secondary" class="nc-extdb-btn-test-connection !rounded-md" @click="testConnection">
|
||||
{{ $t('activity.testDbConn') }}
|
||||
</a-button>
|
||||
|
||||
@@ -592,8 +600,8 @@ onMounted(async () => {
|
||||
</div>
|
||||
</a-form-item>
|
||||
<div class="w-full flex items-center mt-2 text-[#e65100]">
|
||||
<component :is="iconMap.warning" class="mr-1" />
|
||||
Please make sure database you are trying to connect is valid! This operation can cause schema loss!!
|
||||
<component :is="iconMap.warning" class="mr-2 mb-5.9" />
|
||||
<div>Please make sure database you are trying to connect is valid! This operation can cause schema loss!!</div>
|
||||
</div>
|
||||
</a-form>
|
||||
|
||||
@@ -647,7 +655,7 @@ onMounted(async () => {
|
||||
:deep(.ant-input-affix-wrapper),
|
||||
:deep(.ant-input),
|
||||
:deep(.ant-select) {
|
||||
@apply !appearance-none border-1 border-solid rounded;
|
||||
@apply !appearance-none border-solid rounded;
|
||||
}
|
||||
|
||||
:deep(.ant-input-password) {
|
||||
|
||||
Reference in New Issue
Block a user