mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-02 16:37:06 +00:00
fix(nc-gui): add data source, additional details appear after selection of connection
This commit is contained in:
Ramesh Mane
@@ -471,7 +471,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
|
||||
<NcButton
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="!testSuccess"
|
||||
:disabled="!testSuccess || !selectedIntegration"
|
||||
:loading="creatingSource"
|
||||
class="nc-extdb-btn-submit"
|
||||
@click="createSource"
|
||||
@@ -560,162 +560,159 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nc-form-section">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="nc-form-section-title">Connection details</div>
|
||||
</div>
|
||||
<div class="nc-form-section-body">
|
||||
<!-- SQLite File -->
|
||||
<template v-if="formState.dataSource.client === ClientType.SQLITE"> </template>
|
||||
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<!-- Database -->
|
||||
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
|
||||
<a-input
|
||||
v-model:value="(formState.dataSource.connection as SnowflakeConnection).database"
|
||||
class="nc-extdb-host-database"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<!-- Schema -->
|
||||
<a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
|
||||
<a-input
|
||||
v-model:value="(formState.dataSource.connection as SnowflakeConnection).schema"
|
||||
class="nc-extdb-host-database"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<template v-else-if="formState.dataSource.client === ClientType.DATABRICKS">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="Database" v-bind="validateInfos['dataSource.connection.database']">
|
||||
<a-input
|
||||
v-model:value="(formState.dataSource.connection as DatabricksConnection).database"
|
||||
class="nc-extdb-host-database"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
|
||||
<a-input
|
||||
v-model:value="(formState.dataSource.connection as DatabricksConnection).schema"
|
||||
class="nc-extdb-host-schema"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<!-- 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-col>
|
||||
<a-col :span="12">
|
||||
<!-- Schema name -->
|
||||
<a-form-item
|
||||
v-if="
|
||||
([ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) ||
|
||||
[ClientType.MSSQL, ClientType.PG].includes(selectedIntegration?.sub_type)) &&
|
||||
formState.dataSource.searchPath
|
||||
"
|
||||
:label="$t('labels.schemaName')"
|
||||
v-bind="validateInfos['dataSource.searchPath.0']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formState.dataSource.searchPath[0]"
|
||||
:placeholder="selectedIntegrationSchema && `${selectedIntegrationSchema} (default)`"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nc-form-section">
|
||||
<div class="nc-form-section-title">Permissions</div>
|
||||
<div class="nc-form-section-body">
|
||||
<DashboardSettingsDataSourcesSourceRestrictions
|
||||
v-model:allowMetaWrite="allowMetaWrite"
|
||||
v-model:allowDataWrite="allowDataWrite"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template
|
||||
v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
|
||||
>
|
||||
<a-collapse
|
||||
v-model:active-key="advancedOptionsExpansionPanel"
|
||||
ghost
|
||||
class="nc-source-advanced-options !mt-4"
|
||||
>
|
||||
<template #expandIcon="{ isActive }">
|
||||
<NcButton
|
||||
type="text"
|
||||
size="small"
|
||||
class="!-ml-1.5"
|
||||
@click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
|
||||
>
|
||||
<div class="nc-form-section-title">Advanced options</div>
|
||||
|
||||
<GeneralIcon
|
||||
icon="chevronDown"
|
||||
class="ml-2 flex-none cursor-pointer transform transition-transform duration-500"
|
||||
:class="{ '!rotate-180': isActive }"
|
||||
/>
|
||||
</NcButton>
|
||||
</template>
|
||||
<a-collapse-panel key="1" collapsible="disabled">
|
||||
<template #header>
|
||||
<span></span>
|
||||
<template v-if="selectedIntegration">
|
||||
<div class="nc-form-section">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="nc-form-section-title">Connection details</div>
|
||||
</div>
|
||||
<div class="nc-form-section-body">
|
||||
<!-- SQLite File -->
|
||||
<template v-if="formState.dataSource.client === ClientType.SQLITE"> </template>
|
||||
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<!-- Database -->
|
||||
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']">
|
||||
<a-input
|
||||
v-model:value="(formState.dataSource.connection as SnowflakeConnection).database"
|
||||
class="nc-extdb-host-database"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<!-- Schema -->
|
||||
<a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
|
||||
<a-input
|
||||
v-model:value="(formState.dataSource.connection as SnowflakeConnection).schema"
|
||||
class="nc-extdb-host-database"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item :label="$t('labels.inflection.tableName')">
|
||||
<NcSelect
|
||||
v-model:value="formState.inflection.inflectionTable"
|
||||
class="nc-select-shadow"
|
||||
dropdown-class-name="nc-dropdown-inflection-table-name"
|
||||
>
|
||||
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
|
||||
</NcSelect>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item :label="$t('labels.inflection.columnName')">
|
||||
<NcSelect
|
||||
v-model:value="formState.inflection.inflectionColumn"
|
||||
class="nc-select-shadow"
|
||||
dropdown-class-name="nc-dropdown-inflection-column-name"
|
||||
>
|
||||
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
|
||||
</NcSelect>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
<template v-else-if="formState.dataSource.client === ClientType.DATABRICKS">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="Database" v-bind="validateInfos['dataSource.connection.database']">
|
||||
<a-input
|
||||
v-model:value="(formState.dataSource.connection as DatabricksConnection).database"
|
||||
class="nc-extdb-host-database"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="Schema" v-bind="validateInfos['dataSource.connection.schema']">
|
||||
<a-input
|
||||
v-model:value="(formState.dataSource.connection as DatabricksConnection).schema"
|
||||
class="nc-extdb-host-schema"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<!-- 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-col>
|
||||
<a-col :span="12">
|
||||
<!-- Schema name -->
|
||||
<a-form-item
|
||||
v-if="
|
||||
([ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) ||
|
||||
[ClientType.MSSQL, ClientType.PG].includes(selectedIntegration?.sub_type)) &&
|
||||
formState.dataSource.searchPath
|
||||
"
|
||||
:label="$t('labels.schemaName')"
|
||||
v-bind="validateInfos['dataSource.searchPath.0']"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formState.dataSource.searchPath[0]"
|
||||
:placeholder="selectedIntegrationSchema && `${selectedIntegrationSchema} (default)`"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nc-form-section">
|
||||
<div class="nc-form-section-title">Permissions</div>
|
||||
<div class="nc-form-section-body">
|
||||
<DashboardSettingsDataSourcesSourceRestrictions
|
||||
v-model:allowMetaWrite="allowMetaWrite"
|
||||
v-model:allowDataWrite="allowDataWrite"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template
|
||||
v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
|
||||
>
|
||||
<a-collapse v-model:active-key="advancedOptionsExpansionPanel" ghost class="nc-source-advanced-options !mt-4">
|
||||
<template #expandIcon="{ isActive }">
|
||||
<NcButton
|
||||
type="text"
|
||||
size="small"
|
||||
class="!-ml-1.5"
|
||||
@click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
|
||||
>
|
||||
<div class="nc-form-section-title">Advanced options</div>
|
||||
|
||||
<GeneralIcon
|
||||
icon="chevronDown"
|
||||
class="ml-2 flex-none cursor-pointer transform transition-transform duration-500"
|
||||
:class="{ '!rotate-180': isActive }"
|
||||
/>
|
||||
</NcButton>
|
||||
</template>
|
||||
<a-collapse-panel key="1" collapsible="disabled">
|
||||
<template #header>
|
||||
<span></span>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item :label="$t('labels.inflection.tableName')">
|
||||
<NcSelect
|
||||
v-model:value="formState.inflection.inflectionTable"
|
||||
class="nc-select-shadow"
|
||||
dropdown-class-name="nc-dropdown-inflection-table-name"
|
||||
>
|
||||
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
|
||||
</NcSelect>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item :label="$t('labels.inflection.columnName')">
|
||||
<NcSelect
|
||||
v-model:value="formState.inflection.inflectionColumn"
|
||||
class="nc-select-shadow"
|
||||
dropdown-class-name="nc-dropdown-inflection-column-name"
|
||||
>
|
||||
<a-select-option v-for="tp in inflectionTypes" :key="tp" :value="tp">{{ tp }}</a-select-option>
|
||||
</NcSelect>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</template>
|
||||
</template>
|
||||
<div>
|
||||
<!-- For spacing -->
|
||||
</div>
|
||||
@@ -726,7 +723,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
|
||||
</div>
|
||||
</div>
|
||||
<div class="nc-add-source-right-panel">
|
||||
<DashboardSettingsDataSourcesSupportedDocs/>
|
||||
<DashboardSettingsDataSourcesSupportedDocs />
|
||||
<NcDivider />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user