From d61a0874a9001db473ce3a7bdadcad790b56a389 Mon Sep 17 00:00:00 2001 From: mertmit Date: Thu, 6 Oct 2022 13:24:48 +0300 Subject: [PATCH] feat: ui improvements for multiple source Signed-off-by: mertmit --- packages/nc-gui/components.d.ts | 6 ++ .../nc-gui/components/dashboard/TreeView.vue | 43 +++++++++++--- .../dashboard/settings/DataSources.vue | 53 +++++++++++++---- .../components/dashboard/settings/Modal.vue | 58 +++++++------------ .../settings/data-sources/CreateBase.vue | 11 ++++ .../components/general/AddBaseButton.vue | 13 +++-- .../nc-gui/components/general/BaseLogo.vue | 28 +++++++++ packages/nc-gui/nuxt.config.ts | 2 + packages/nc-gui/package-lock.json | 38 ++++++++++++ packages/nc-gui/package.json | 2 + .../pages/[projectType]/[projectId]/index.vue | 14 +++-- 11 files changed, 201 insertions(+), 67 deletions(-) create mode 100644 packages/nc-gui/components/general/BaseLogo.vue diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts index 3af2f902d4..35919a3bb9 100644 --- a/packages/nc-gui/components.d.ts +++ b/packages/nc-gui/components.d.ts @@ -86,6 +86,8 @@ declare module '@vue/runtime-core' { IcTwotoneWidthFull: typeof import('~icons/ic/twotone-width-full')['default'] IcTwotoneWidthNormal: typeof import('~icons/ic/twotone-width-normal')['default'] LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default'] + LogosMysql: typeof import('~icons/logos/mysql')['default'] + LogosPostgresql: typeof import('~icons/logos/postgresql')['default'] LogosRedditIcon: typeof import('~icons/logos/reddit-icon')['default'] LogosSwagger: typeof import('~icons/logos/swagger')['default'] MaterialSymbolsAccountTreeRounded: typeof import('~icons/material-symbols/account-tree-rounded')['default'] @@ -145,6 +147,7 @@ declare module '@vue/runtime-core' { MdiContentSave: typeof import('~icons/mdi/content-save')['default'] MdiContentSaveEdit: typeof import('~icons/mdi/content-save-edit')['default'] MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default'] + MdiDatabaseAlert: typeof import('~icons/mdi/database-alert')['default'] MdiDatabaseLockOutline: typeof import('~icons/mdi/database-lock-outline')['default'] MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default'] MdiDatabasePlusOutline: typeof import('~icons/mdi/database-plus-outline')['default'] @@ -240,7 +243,10 @@ declare module '@vue/runtime-core' { MiCircleWarning: typeof import('~icons/mi/circle-warning')['default'] PhCloudLightningDuotone: typeof import('~icons/ph/cloud-lightning-duotone')['default'] PhFileCsv: typeof import('~icons/ph/file-csv')['default'] + RiTeamFill: typeof import('~icons/ri/team-fill')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + SimpleIconsMicrosoftsqlserver: typeof import('~icons/simple-icons/microsoftsqlserver')['default'] + VscodeIconsFileTypeSqlite: typeof import('~icons/vscode-icons/file-type-sqlite')['default'] } } diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue index 252b94864c..978fc7aefa 100644 --- a/packages/nc-gui/components/dashboard/TreeView.vue +++ b/packages/nc-gui/components/dashboard/TreeView.vue @@ -5,6 +5,7 @@ import Sortable from 'sortablejs' import GithubButton from 'vue-github-button' import type { VNodeRef } from '#imports' import { + ClientType, Empty, TabType, computed, @@ -21,7 +22,7 @@ import { useTabs, useToggle, useUIPermission, - watchEffect, + watchEffect } from '#imports' import MdiView from '~icons/mdi/eye-circle-outline' import MdiTableLarge from '~icons/mdi/table-large' @@ -42,6 +43,8 @@ const route = useRoute() const [searchActive, toggleSearchActive] = useToggle() +const toggleDialog = inject(ToggleDialogInj, () => {}) + let key = $ref(0) const activeKey = ref([]) @@ -360,6 +363,35 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => { {{ $t('labels.requestDataSource') }} + + + + + +
+ + MySQL +
+ + +
+ + Postgres +
+ + +
+ + SQLite +
+ + +
+ + MSSQL +
+ + @@ -439,10 +471,9 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
{ class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent" /> - - diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue index 9dfea5efef..82218baf9b 100644 --- a/packages/nc-gui/components/dashboard/settings/DataSources.vue +++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue @@ -6,7 +6,7 @@ import EditBase from './data-sources/EditBase.vue' import Metadata from './Metadata.vue' import UIAcl from './UIAcl.vue' import Erd from './Erd.vue' -import { DataSourcesSubTab } from '~/lib' +import { ClientType, DataSourcesSubTab } from '~/lib' import { useNuxtApp, useProject } from '#imports' interface Props { @@ -18,7 +18,7 @@ const props = defineProps() const emits = defineEmits(['update:state', 'update:reload']) -const vModel = useVModel(props, 'state', emits) +const vState = useVModel(props, 'state', emits) const vReload = useVModel(props, 'reload', emits) const { $api, $e } = useNuxtApp() @@ -27,6 +27,7 @@ const { project, loadProject } = useProject() let sources = $ref([]) let activeBaseId = $ref('') let metadiffbases = $ref([]) +let clientType = $ref(ClientType.MYSQL) async function loadBases() { try { @@ -64,7 +65,7 @@ async function loadMetaDiff() { const baseAction = (baseId: string, action: string) => { activeBaseId = baseId - vModel.value = action + vState.value = action } const deleteBase = (base: BaseType) => { @@ -105,12 +106,37 @@ watch( } }, ) + +watch( + vState, + (newState) => { + switch (newState) { + case ClientType.MYSQL: + clientType = ClientType.MYSQL + vState.value = DataSourcesSubTab.New + break + case ClientType.PG: + clientType = ClientType.PG + vState.value = DataSourcesSubTab.New + break + case ClientType.SQLITE: + clientType = ClientType.SQLITE + vState.value = DataSourcesSubTab.New + break + case ClientType.MSSQL: + clientType = ClientType.MSSQL + vState.value = DataSourcesSubTab.New + break + } + }, + { immediate: true }, +) @@ -140,7 +169,7 @@ watch(
- + Sync Metadata @@ -179,19 +208,19 @@ watch(
-
- +
+
-
+
-
+
-
+
-
+
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue index 61c0a175a3..9a8aabc5f4 100644 --- a/packages/nc-gui/components/dashboard/settings/Modal.vue +++ b/packages/nc-gui/components/dashboard/settings/Modal.vue @@ -14,8 +14,8 @@ import { DataSourcesSubTab } from '~~/lib' interface Props { modelValue: boolean - openKey?: string - dataSourcesState?: string + openKey: string + dataSourcesState: string } interface SubTabGroup { @@ -37,17 +37,20 @@ interface TabGroup { const props = defineProps() -const emits = defineEmits(['update:modelValue']) +const emits = defineEmits(['update:modelValue', 'update:openKey', 'update:dataSourcesState']) const vModel = useVModel(props, 'modelValue', emits) +const vOpenKey = useVModel(props, 'openKey', emits) + +const vDataState = useVModel(props, 'dataSourcesState', emits) + const { isUIAllowed } = useUIPermission() const { t } = useI18n() const { $e } = useNuxtApp() -const dataSourcesState = ref(props.dataSourcesState) const dataSourcesReload = ref(false) const tabsInfo: TabGroup = { @@ -103,7 +106,7 @@ const tabsInfo: TabGroup = { }, }, onClick: () => { - dataSourcesState.value = '' + vDataState.value = '' $e('c:settings:data-sources') }, }, @@ -141,7 +144,13 @@ const tabsInfo: TabGroup = { const firstKeyOfObject = (obj: object) => Object.keys(obj)[0] // Array of keys of tabs which are selected. In our case will be only one. -let selectedTabKeys = $ref([firstKeyOfObject(tabsInfo)]) +const selectedTabKeys = $computed({ + get: () => [Object.keys(tabsInfo).find((key) => key === vOpenKey.value) || firstKeyOfObject(tabsInfo)], + set: (value) => { + vOpenKey.value = value[0] + }, +}) + const selectedTab = $computed(() => tabsInfo[selectedTabKeys[0]]) let selectedSubTabKeys = $ref([firstKeyOfObject(selectedTab.subTabs)]) @@ -153,29 +162,6 @@ watch( selectedSubTabKeys = [firstKeyOfObject(tabsInfo[newTabKey].subTabs)] }, ) - -watch( - () => props.openKey, - (nextOpenKey) => { - selectedTabKeys = [Object.keys(tabsInfo).find((key) => key === nextOpenKey) || firstKeyOfObject(tabsInfo)] - }, -) - -watch( - () => props.dataSourcesState, - (nextState) => { - dataSourcesState.value = nextState || '' - }, -) - -watch( - () => props.modelValue, - () => { - dataSourcesState.value = props.dataSourcesState || '' - selectedTabKeys = [Object.keys(tabsInfo).find((key) => key === props.openKey) || firstKeyOfObject(tabsInfo)] - }, - { immediate: true }, -)