diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue index 6ce17a7..0977cef 100644 --- a/frontend/src/components/content/ContentPane.vue +++ b/frontend/src/components/content/ContentPane.vue @@ -6,7 +6,7 @@ import ContentValueList from '../content_value/ContentValueList.vue' import ContentValueString from '../content_value/ContentValueString.vue' import ContentValueSet from '../content_value/ContentValueSet.vue' import ContentValueZset from '../content_value/ContentValueZSet.vue' -import { isEmpty, map, toUpper } from 'lodash' +import { get, isEmpty, map, toUpper } from 'lodash' import useTabStore from '../../stores/tab.js' import { useDialog } from 'naive-ui' import useConnectionStore from '../../stores/connections.js' @@ -69,9 +69,9 @@ const onCloseTab = (tabIndex) => { maskClosable: false, transformOrigin: 'center', onPositiveClick: () => { - const removedTab = tabStore.removeTab(tabIndex) - if (removedTab != null) { - connectionStore.closeConnection(removedTab.name) + const tab = get(tabStore.tabs, tabIndex) + if (tab != null) { + connectionStore.closeConnection(tab.name) } }, }) diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue index f040b69..58244c4 100644 --- a/frontend/src/components/sidebar/ConnectionTree.vue +++ b/frontend/src/components/sidebar/ConnectionTree.vue @@ -9,7 +9,6 @@ import ToggleServer from '../icons/ToggleServer.vue' import { indexOf } from 'lodash' import Config from '../icons/Config.vue' import Delete from '../icons/Delete.vue' -import Refresh from '../icons/Refresh.vue' import Unlink from '../icons/Unlink.vue' import CopyLink from '../icons/CopyLink.vue' import Connect from '../icons/Connect.vue' @@ -26,6 +25,7 @@ const dialogStore = useDialogStore() const message = useMessage() const expandedKeys = ref([]) +const selectedKeys = ref([]) onMounted(async () => { try { @@ -65,14 +65,10 @@ const menuOptions = { icon: renderIcon(Delete), }, ], - [ConnectionType.Server]: ({ connected }) => { + [ConnectionType.Server]: ({ name }) => { + const connected = connectionStore.isConnected(name) if (connected) { return [ - { - key: 'server_reload', - label: i18n.t('reload'), - icon: renderIcon(Refresh), - }, { key: 'server_close', label: i18n.t('disconnect'), @@ -149,14 +145,18 @@ const renderPrefix = ({ option }) => { NIcon, { size: 20 }, { - default: () => h(ToggleServer, { modelValue: !!connected }), + default: () => h(ToggleServer, { modelValue: !!connecte }), } ) } } -const onUpdateExpandedKeys = (value, option, meta) => { - expandedKeys.value = value +const onUpdateExpandedKeys = (keys, option, meta) => { + expandedKeys.value = keys +} + +const onUpdateSelectedKeys = (keys, option, meta) => { + selectedKeys.value = keys } /** @@ -199,6 +199,7 @@ const nodeProps = ({ option }) => { contextMenuParam.x = e.clientX contextMenuParam.y = e.clientY contextMenuParam.show = true + selectedKeys.value = [option.key] }) }, } @@ -214,6 +215,10 @@ const handleSelectContextMenu = (key) => { switch (key) { case 'server_open': openConnection(name).then(() => {}) + break + case 'server_close': + connectionStore.closeConnection(name) + break } console.warn('TODO: handle context menu:' + key) } @@ -228,8 +233,10 @@ const handleSelectContextMenu = (key) => { :data="connectionStore.connections" :expand-on-click="true" :expanded-keys="expandedKeys" + :on-update:selected-keys="onUpdateSelectedKeys" :node-props="nodeProps" :on-update:expanded-keys="onUpdateExpandedKeys" + :selected-keys="selectedKeys" :render-label="renderLabel" :render-prefix="renderPrefix" class="fill-height" diff --git a/frontend/src/components/sidebar/DatabaseTree.vue b/frontend/src/components/sidebar/DatabaseTree.vue index cfefc4b..d8a61f7 100644 --- a/frontend/src/components/sidebar/DatabaseTree.vue +++ b/frontend/src/components/sidebar/DatabaseTree.vue @@ -4,7 +4,7 @@ import { ConnectionType } from '../../consts/connection_type.js' import { NIcon, useDialog, useMessage } from 'naive-ui' import Key from '../icons/Key.vue' import ToggleDb from '../icons/ToggleDb.vue' -import { indexOf, remove, startsWith } from 'lodash' +import { indexOf } from 'lodash' import { useI18n } from 'vue-i18n' import Refresh from '../icons/Refresh.vue' import CopyLink from '../icons/CopyLink.vue' @@ -14,15 +14,14 @@ import Delete from '../icons/Delete.vue' import Connect from '../icons/Connect.vue' import useDialogStore from '../../stores/dialog.js' import { ClipboardSetText } from '../../../wailsjs/runtime/runtime.js' -import useTabStore from '../../stores/tab.js' import useConnectionStore from '../../stores/connections.js' const i18n = useI18n() const loading = ref(false) const loadingConnections = ref(false) const expandedKeys = ref([]) +const selectedKeys = ref([]) const connectionStore = useConnectionStore() -const tabStore = useTabStore() const dialogStore = useDialogStore() const contextMenuParam = reactive({ @@ -128,7 +127,7 @@ onMounted(async () => { }) const props = defineProps({ - server: Strig, + server: String, }) const expandKey = (key) => { @@ -140,18 +139,6 @@ const expandKey = (key) => { } } -const collapseKeyAndChildren = (key) => { - remove(expandedKeys.value, (k) => startsWith(k, key)) - // console.log(key) - // const idx = indexOf(expandedKeys.value, key) - // console.log(JSON.stringify(expandedKeys.value)) - // if (idx !== -1) { - // expandedKeys.value.splice(idx, 1) - // return true - // } - // return false -} - const message = useMessage() const dialog = useDialog() const onUpdateExpanded = (value, option, meta) => { @@ -170,6 +157,10 @@ const onUpdateExpanded = (value, option, meta) => { } } +const onUpdateSelectedKeys = (keys, option, meta) => { + selectedKeys.value = keys +} + const renderPrefix = ({ option }) => { switch (option.type) { case ConnectionType.RedisDB: @@ -177,7 +168,7 @@ const renderPrefix = ({ option }) => { NIcon, { size: 20 }, { - default: () => h(ToggleDb, { modelValue: option.opened === true }), + default: () => h(ToggleDb, { modelValue: option.opened === true }, } ) case ConnectionType.RedisKey: @@ -253,6 +244,7 @@ const nodeProps = ({ option }) => { contextMenuParam.x = e.clientX contextMenuParam.y = e.clientY contextMenuParam.show = true + selectedKeys.value = [option.key] }) }, // onMouseover() { @@ -281,14 +273,6 @@ const handleSelectContextMenu = (key) => { contextMenuParam.show = false const { name, db, key: nodeKey, redisKey } = contextMenuParam.currentNode switch (key) { - case 'server_disconnect': - connectionStore.closeConnection(nodeKey).then((success) => { - if (success) { - collapseKeyAndChildren(nodeKey) - tabStore.removeTabByName(name) - } - }) - break // case 'server_reload': // case 'db_reload': // connectionStore.loadKeyValue() @@ -347,9 +331,11 @@ const handleOutsideContextMenu = () => { :data="connectionStore.databases[props.server] || []" :expand-on-click="false" :expanded-keys="expandedKeys" + :on-update:selected-keys="onUpdateSelectedKeys" :node-props="nodeProps" :on-load="onLoadTree" :on-update:expanded-keys="onUpdateExpanded" + :selected-keys="selectedKeys" :render-label="renderLabel" :render-prefix="renderPrefix" :render-suffix="renderSuffix" diff --git a/frontend/src/stores/connections.js b/frontend/src/stores/connections.js index 9550616..fec99c4 100644 --- a/frontend/src/stores/connections.js +++ b/frontend/src/stores/connections.js @@ -196,6 +196,9 @@ const useConnectionStore = defineStore('connections', { } delete this.databases[name] + + const tabStore = useTabStore() + tabStore.removeTabByName(name) return true }, diff --git a/frontend/src/stores/tab.js b/frontend/src/stores/tab.js index cd3e4d3..2e56015 100644 --- a/frontend/src/stores/tab.js +++ b/frontend/src/stores/tab.js @@ -73,9 +73,21 @@ const useTabStore = defineStore('tab', { this._setActivatedIndex(size(this.tabList) - 1) }, - _setActivatedIndex(idx) { + /** + * + * @param idx + * @param {boolean} [switchNav] + * @private + */ + _setActivatedIndex(idx, switchNav) { this.activatedIndex = idx - this.nav = idx >= 0 ? 'structure' : 'server' + if (switchNav === true) { + this.nav = idx >= 0 ? 'structure' : 'server' + } else { + if (idx < 0) { + this.nav = 'server' + } + } }, /** @@ -111,7 +123,7 @@ const useTabStore = defineStore('tab', { tab.ttl = ttl tab.key = key tab.value = value - this._setActivatedIndex(tabIndex) + this._setActivatedIndex(tabIndex, true) // this.activatedTab = tab.name }, @@ -169,12 +181,12 @@ const useTabStore = defineStore('tab', { this.activatedIndex -= 1 if (this.activatedIndex < 0) { if (this.tabList.length > 0) { - this._setActivatedIndex(0) + this._setActivatedIndex(0, false) } else { - this._setActivatedIndex(-1) + this._setActivatedIndex(-1, false) } } else { - this._setActivatedIndex(this.activatedIndex) + this._setActivatedIndex(this.activatedIndex, false) } return size(removed) > 0 ? removed[0] : null