github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor: move edit connection to tabs

nc-refactor/ds
Pranav C 1 month ago
parent
d36e0eca7a
commit
2dbc3013f0
4 changed files with 54 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 153
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  2. 45
      packages/nc-gui/components/dashboard/settings/Modal.vue
  3. 2
      packages/nc-gui/components/dashboard/settings/UIAcl.vue
  4. 1
      packages/nc-gui/lang/en.json

153
packages/nc-gui/components/dashboard/settings/DataSources.vue
Unescape View File

@ -253,67 +253,13 @@ const isNewBaseModalOpen = computed({
},
})
const isErdModalOpen = computed({
get: () => {
return [DataSourcesSubTab.ERD].includes(vState.value as any)
},
set: (val) => {
if (!val) {
vState.value = ''
}
},
})
const isMetaDataModal = computed({
get: () => {
return [DataSourcesSubTab.Metadata].includes(vState.value as any)
},
set: (val) => {
if (!val) {
vState.value = ''
}
},
})
const isUIAclModalOpen = computed({
get: () => {
return [DataSourcesSubTab.UIAcl].includes(vState.value as any)
},
set: (val) => {
if (!val) {
vState.value = ''
}
},
})
const isBaseAuditModalOpen = computed({
get: () => {
return [DataSourcesSubTab.Audit].includes(vState.value as any)
},
set: (val) => {
if (!val) {
vState.value = ''
}
},
})
const isEditBaseModalOpen = computed({
get: () => {
return [DataSourcesSubTab.Edit].includes(vState.value as any)
},
set: (val) => {
if (!val) {
vState.value = ''
}
},
})
const activeSource = ref<SourceType>(null)
const openedTab = ref('erd')
</script>
<template>
<div class="flex flex-col h-full">
<div class="px-4 py-2">
<div class="px-4 py-2 flex justify-between">
<a-breadcrumb separator=">" class="w-full cursor-pointer font-weight-bold">
<a-breadcrumb-item @click="activeSource = null">
<a class="!no-underline">Data Sources</a>
@ -322,6 +268,19 @@ const openedTab = ref('erd')
<span class="capitalize">{{ activeSource.alias || 'Default Source' }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
<NcButton
v-if="!isDataSourceLimitReached && !activeSource"
size="large"
class="z-10 !px-2"
type="primary"
@click="vState = DataSourcesSubTab.New"
>
<div class="flex flex-row items-center w-full gap-x-1">
<component :is="iconMap.plus" />
<div class="flex">{{ $t('activity.newSource') }}</div>
</div>
</NcButton>
</div>
<div data-testid="nc-settings-datasources" class="flex flex-row w-full h-full nc-data-sources-view flex-grow">
<template v-if="activeSource">
@ -332,26 +291,42 @@ const openedTab = ref('erd')
<div>{{ $t('title.erdView') }}</div>
</div>
</template>
<div class="h-[80vh]">
<div class="h-[300vh]">
<LazyDashboardSettingsErd class="mt-4 overflow-scroll" :source-id="activeSource.id" :show-all-columns="false" />
</div>
</a-tab-pane>
<a-tab-pane key="acl">
<a-tab-pane v-if="activeSource.is_meta || activeSource.is_local" key="audit">
<template #tab>
<div class="tab" data-testid="nc-acl-tab">
<div>{{ $t('labels.uiAcl') }}</div>
<div class="tab" data-testid="nc-audit-tab">
<div>{{ $t('title.auditLogs') }}</div>
</div>
</template>
<LazyDashboardSettingsUIAcl class="mt-4" :source-id="activeSource.id" />
<LazyDashboardSettingsBaseAudit class="mt-4" :source-id="activeSource.id" />
</a-tab-pane>
<a-tab-pane v-if="activeSource.is_meta || activeSource.is_local" key="audit">
<a-tab-pane v-if="!activeSource.is_meta && !activeSource.is_local" key="audit">
<template #tab>
<div class="tab" data-testid="nc-audit-tab">
<div>{{ $t('title.audit') }}</div>
<div>{{ $t('labels.connectionDetails') }}</div>
</div>
</template>
<div class="p-6 mt-4 flex">
<LazyDashboardSettingsDataSourcesEditBase
class="w-600px"
:source-id="activeSource.id"
@source-updated="loadBases(true)"
@close="activeSource = null"
/>
</div>
</a-tab-pane>
<LazyDashboardSettingsBaseAudit class="mt-4" :source-id="activeSource.id" />
<a-tab-pane key="acl">
<template #tab>
<div class="tab" data-testid="nc-acl-tab">
<div>{{ $t('labels.uiAcl') }}</div>
</div>
</template>
<LazyDashboardSettingsUIAcl class="mt-4" :source-id="activeSource.id" />
</a-tab-pane>
<a-tab-pane key="meta-sync">
<template #tab>
@ -359,25 +334,12 @@ const openedTab = ref('erd')
<div>{{ $t('labels.metaSync') }}</div>
</div>
</template>
<LazyDashboardSettingsMetadata class="mt-4" :source-id="activeSource.id" @source-synced="loadBases(true)" />
<LazyDashboardSettingsMetadata class="mt-4 w-full" :source-id="activeSource.id" @source-synced="loadBases(true)" />
</a-tab-pane>
</NcTabs>
</template>
<div v-else class="flex flex-col w-full overflow-auto">
<div class="flex flex-row w-full justify-end mt-6.5 mb-2">
<NcButton
v-if="!isDataSourceLimitReached"
size="large"
class="z-10 !px-2"
type="primary"
@click="vState = DataSourcesSubTab.New"
>
<div class="flex flex-row items-center w-full gap-x-1">
<component :is="iconMap.plus" />
<div class="flex">{{ $t('activity.newSource') }}</div>
</div>
</NcButton>
</div>
<div v-else class="flex flex-col w-full overflow-auto mt-1">
<div
class="overflow-y-auto nc-scrollbar-md"
:style="{
@ -440,8 +402,7 @@ const openedTab = ref('erd')
<template #item="{ element: source, index }">
<div v-if="index !== 0" class="ds-table-row border-gray-200 cursor-pointer" @click="activeSource = source">
<div class="ds-table-col ds-table-enabled">
<div class="flex items-center gap-1"
@click.stop>
<div class="flex items-center gap-1" @click.stop>
<GeneralIcon v-if="sources.length > 2" icon="dragVertical" small class="ds-table-handle" />
<a-tooltip>
<template #title>
@ -470,21 +431,7 @@ const openedTab = ref('erd')
<span class="text-gray-700 capitalize">{{ source.type }}</span>
</div>
</div>
<div class="ds-table-col justify-end gap-x-1 ds-table-actions">
<NcTooltip>
<template #title>
{{ $t('general.edit') }}
</template>
<NcButton
v-if="!source.is_meta && !source.is_local"
size="small"
class="nc-action-btn cursor-pointer outline-0 !w-8 !px-1 !rounded-lg"
type="text"
@click.stop="baseAction(source.id, DataSourcesSubTab.Edit)"
>
<GeneralIcon icon="edit" class="text-gray-600" />
</NcButton>
</NcTooltip>
<div class="ds-table-col justify-end gap-x-1 ds-table-actions">
<NcTooltip>
<template #title>
{{ $t('general.remove') }}
@ -510,16 +457,6 @@ const openedTab = ref('erd')
:connection-type="clientType"
@source-created="loadBases(true)"
/>
<GeneralModal v-model:visible="isEditBaseModalOpen" closable :mask-closable="false" size="medium">
<div class="p-6">
<LazyDashboardSettingsDataSourcesEditBase
:source-id="activeBaseId"
@source-updated="loadBases(true)"
@close="isEditBaseModalOpen = false"
/>
</div>
</GeneralModal>
<GeneralDeleteModal
v-model:visible="isDeleteBaseModalOpen"
:entity-name="$t('general.datasource')"
@ -586,4 +523,8 @@ const openedTab = ref('erd')
.ds-table-body .ds-table-row:hover {
@apply bg-gray-50/60;
}
:deep(.ant-tabs-content){
@apply !h-full !overflow-auto;
}
</style>

45
packages/nc-gui/components/dashboard/settings/Modal.vue
Unescape View File

@ -155,12 +155,13 @@ watch(
:class="{ active: vModel }"
:footer="null"
width="max(90vw, 600px)"
height="80vh"
:closable="false"
wrap-class-name="nc-modal-settings"
@cancel="emits('update:modelValue', false)"
>
<!-- Settings -->
<div class="min-h-[75vh]">
<!-- Settings -->
<div class="flex flex-row justify-between w-full items-center mb-1">
<a-typography-title class="ml-4 select-none" type="secondary" :level="5">
{{ $t('activity.settings') }}
@ -176,7 +177,7 @@ watch(
</a-button>
</div>
<a-layout class="mt-3 h-[75vh] overflow-y-auto flex">
<a-layout class="mt-3 overflow-y-auto flex">
<!-- Side tabs -->
<a-layout-sider>
<a-menu v-model:selected-keys="selectedTabKeys" class="tabs-menu h-full" :open-keys="[]">
@ -209,43 +210,6 @@ watch(
{{ tab.title }}
</a-menu-item>
</a-menu>
<div v-else-if="false">
<div class="flex items-center">
<a-breadcrumb class="w-full cursor-pointer">
<a-breadcrumb-item v-if="vDataState !== ''" @click="vDataState = ''">
<a class="!no-underline">Data Sources</a>
</a-breadcrumb-item>
<a-breadcrumb-item v-else @click="vDataState = ''">Data Sources</a-breadcrumb-item>
<a-breadcrumb-item v-if="vDataState !== ''">{{ vDataState }}</a-breadcrumb-item>
</a-breadcrumb>
<div v-if="vDataState === ''" class="flex flex-row justify-end items-center w-full gap-1">
<a-button
v-if="!isDataSourceLimitReached"
type="primary"
class="self-start !rounded-md nc-btn-new-datasource"
@click="vDataState = DataSourcesSubTab.New"
>
<div v-if="vDataState === ''" class="flex items-center gap-2 font-light">
<component :is="iconMap.plusCircle" class="group-hover:text-accent" />
New
</div>
</a-button>
<!-- Reload -->
<a-button
v-e="['a:proj-meta:data-sources:reload']"
type="text"
class="self-start !rounded-md nc-btn-metasync-reload"
@click="dataSourcesReload = true"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<component :is="iconMap.reload" :class="{ 'animate-infinite animate-spin !text-success': dataSourcesReload }" />
{{ $t('general.reload') }}
</div>
</a-button>
</div>
</div>
<a-divider style="margin: 10px 0" />
</div>
<div class="h-[600px]">
<component
@ -267,6 +231,7 @@ watch(
</div>
</a-layout-content>
</a-layout>
</div>
</a-modal>
</template>

2
packages/nc-gui/components/dashboard/settings/UIAcl.vue
Unescape View File

@ -131,7 +131,7 @@ const toggleSelectAll = (role: Role) => {
<template>
<div class="flex flex-row w-full items-center justify-center">
<div class="flex flex-col w-[900px]">
<div class="flex flex-col">
<NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate" show-on-truncate-only>
<template #title>{{ base.title }}</template>
<span> UI ACL : {{ base.title }} </span>

1
packages/nc-gui/lang/en.json
Unescape View File

@ -448,6 +448,7 @@
"noResultsMatchedYourSearch": "Your search did not yield any matching results"
},
"labels": {
"connectionDetails": "Connection Details",
"metaSync": "Meta Sync",
"today": "Today",
"workspace": "Workspace",

Write Preview
Loading…
Cancel
Save