clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-02 17:57:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nc-gui): update oss and edit source modal

Browse Source
This commit is contained in:
Ramesh Mane
2024-08-06 06:57:03 +00:00
parent da5dabc502
commit 6e6bd728a6
2 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
View File

@@ -435,10 +435,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
<div class="h-6 self-start flex items-center">
<GeneralIcon icon="server1" class="!text-green-700 !h-4 !w-4" />
</div>
<div class="flex-1">
<div class="flex-1 text-base font-weight-700">New Source</div>
<div class="text-xs text-gray-600">Connect with a new external data source, directly in real time.</div>
</div>
<div class="flex-1 text-base font-weight-700">Add Data Source</div>
<div class="flex items-center gap-3">
<div class="w-[15px] h-[15px] cursor-pointer" @dblclick="onEasterEgg"></div>
@@ -483,7 +480,7 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
</NcButton>
</div>
</div>
<div class="h-[calc(100%_-_66px)] flex">
<div class="h-[calc(100%_-_58px)] flex">
<div class="nc-add-source-left-panel nc-scrollbar-thin">
<div class="create-source bg-white relative flex flex-col gap-2 w-full max-w-[768px]">
<a-form
@@ -496,11 +493,10 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
class="flex flex-col gap-5.5"
>
<div class="nc-form-section">
<div class="nc-form-section-title">Source details</div>
<div class="nc-form-section-body">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="Source name" v-bind="validateInfos.title">
<a-form-item label="Data Source Name" v-bind="validateInfos.title">
<a-input v-model:value="formState.title" @input="populateName(formState.title)" />
</a-form-item>
</a-col>
@@ -562,9 +558,6 @@ const filterIntegrationCategory = (c: IntegrationCategoryItemType) => [Integrati
<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>

40
packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
View File

@@ -48,6 +48,8 @@ const easterEgg = ref(false)
const easterEggCount = ref(0)
const advancedOptionsExpansionPanel = ref<string[]>([])
const onEasterEgg = () => {
easterEggCount.value += 1
if (easterEggCount.value >= 2) {
@@ -335,8 +337,17 @@ const allowDataWrite = computed({
},
})
const handleUpdateAdvancedOptionsExpansionPanel = (open: boolean) => {
if (open) {
advancedOptionsExpansionPanel.value = ['1']
handleAutoScroll(true, 'nc-source-advanced-options')
} else {
advancedOptionsExpansionPanel.value = []
}
}
let timer: any
const handleAutoScroll = (scroll: boolean, className: string) => {
function handleAutoScroll(scroll: boolean, className: string) {
if (scroll) {
if (timer) {
clearTimeout(timer)
@@ -369,11 +380,10 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
class="flex flex-col gap-5.5"
>
<div class="nc-form-section">
<div class="nc-form-section-title">Source details</div>
<div class="nc-form-section-body">
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="Source name" v-bind="validateInfos.title">
<a-form-item label="Data Source Name" v-bind="validateInfos.title">
<a-input v-model:value="formState.title" class="nc-extdb-proj-name" />
</a-form-item>
</a-col>
@@ -420,8 +430,6 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
</div>
<div class="nc-form-section">
<div class="nc-form-section-title">Connection details</div>
<div class="nc-form-section-body">
<!-- SQLite File -->
<template v-if="formState.dataSource.client === ClientType.SQLITE"> </template>
@@ -515,14 +523,14 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
<template
v-if="![ClientType.SQLITE, ClientType.SNOWFLAKE, ClientType.DATABRICKS].includes(formState.dataSource.client)"
>
<a-collapse
ghost
expand-icon-position="right"
class="nc-source-advanced-options !mt-4"
@change="handleAutoScroll(!!$event?.length, 'nc-source-advanced-options')"
>
<a-collapse v-model:active-key="advancedOptionsExpansionPanel" ghost class="nc-source-advanced-options !mt-4">
<template #expandIcon="{ isActive }">
<NcButton type="text" size="xsmall">
<NcButton
type="text"
size="small"
class="!-ml-1.5"
@click="handleUpdateAdvancedOptionsExpansionPanel(!advancedOptionsExpansionPanel.length)"
>
<GeneralIcon
icon="chevronDown"
class="flex-none cursor-pointer transform transition-transform duration-500"
@@ -530,11 +538,9 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
/>
</NcButton>
</template>
<a-collapse-panel key="1">
<a-collapse-panel key="1" collapsible="disabled">
<template #header>
<div class="flex">
<div class="nc-form-section-title">Advanced options</div>
</div>
<span></span>
</template>
<div class="flex flex-col gap-4">
@@ -631,7 +637,7 @@ const handleAutoScroll = (scroll: boolean, className: string) => {
@apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
}
:deep(.ant-collapse-header) {
@apply !-mt-4 !p-0 flex items-center;
@apply !-mt-4 !p-0 flex items-center !cursor-default children:first:flex;
}
:deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
@apply !right-0;