Add close connection, fix unselect item when right click tree node

This commit is contained in:
tiny-craft 2023-07-01 02:29:50 +08:00
parent dadde8d090
commit a402c6ac30
5 changed files with 53 additions and 45 deletions

View File

@ -6,7 +6,7 @@ import ContentValueList from '../content_value/ContentValueList.vue'
import ContentValueString from '../content_value/ContentValueString.vue' import ContentValueString from '../content_value/ContentValueString.vue'
import ContentValueSet from '../content_value/ContentValueSet.vue' import ContentValueSet from '../content_value/ContentValueSet.vue'
import ContentValueZset from '../content_value/ContentValueZSet.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 useTabStore from '../../stores/tab.js'
import { useDialog } from 'naive-ui' import { useDialog } from 'naive-ui'
import useConnectionStore from '../../stores/connections.js' import useConnectionStore from '../../stores/connections.js'
@ -69,9 +69,9 @@ const onCloseTab = (tabIndex) => {
maskClosable: false, maskClosable: false,
transformOrigin: 'center', transformOrigin: 'center',
onPositiveClick: () => { onPositiveClick: () => {
const removedTab = tabStore.removeTab(tabIndex) const tab = get(tabStore.tabs, tabIndex)
if (removedTab != null) { if (tab != null) {
connectionStore.closeConnection(removedTab.name) connectionStore.closeConnection(tab.name)
} }
}, },
}) })

View File

@ -9,7 +9,6 @@ import ToggleServer from '../icons/ToggleServer.vue'
import { indexOf } from 'lodash' import { indexOf } from 'lodash'
import Config from '../icons/Config.vue' import Config from '../icons/Config.vue'
import Delete from '../icons/Delete.vue' import Delete from '../icons/Delete.vue'
import Refresh from '../icons/Refresh.vue'
import Unlink from '../icons/Unlink.vue' import Unlink from '../icons/Unlink.vue'
import CopyLink from '../icons/CopyLink.vue' import CopyLink from '../icons/CopyLink.vue'
import Connect from '../icons/Connect.vue' import Connect from '../icons/Connect.vue'
@ -26,6 +25,7 @@ const dialogStore = useDialogStore()
const message = useMessage() const message = useMessage()
const expandedKeys = ref([]) const expandedKeys = ref([])
const selectedKeys = ref([])
onMounted(async () => { onMounted(async () => {
try { try {
@ -65,14 +65,10 @@ const menuOptions = {
icon: renderIcon(Delete), icon: renderIcon(Delete),
}, },
], ],
[ConnectionType.Server]: ({ connected }) => { [ConnectionType.Server]: ({ name }) => {
const connected = connectionStore.isConnected(name)
if (connected) { if (connected) {
return [ return [
{
key: 'server_reload',
label: i18n.t('reload'),
icon: renderIcon(Refresh),
},
{ {
key: 'server_close', key: 'server_close',
label: i18n.t('disconnect'), label: i18n.t('disconnect'),
@ -149,14 +145,18 @@ const renderPrefix = ({ option }) => {
NIcon, NIcon,
{ size: 20 }, { size: 20 },
{ {
default: () => h(ToggleServer, { modelValue: !!connected }), default: () => h(ToggleServer, { modelValue: !!connecte }),
} }
) )
} }
} }
const onUpdateExpandedKeys = (value, option, meta) => { const onUpdateExpandedKeys = (keys, option, meta) => {
expandedKeys.value = value expandedKeys.value = keys
}
const onUpdateSelectedKeys = (keys, option, meta) => {
selectedKeys.value = keys
} }
/** /**
@ -199,6 +199,7 @@ const nodeProps = ({ option }) => {
contextMenuParam.x = e.clientX contextMenuParam.x = e.clientX
contextMenuParam.y = e.clientY contextMenuParam.y = e.clientY
contextMenuParam.show = true contextMenuParam.show = true
selectedKeys.value = [option.key]
}) })
}, },
} }
@ -214,6 +215,10 @@ const handleSelectContextMenu = (key) => {
switch (key) { switch (key) {
case 'server_open': case 'server_open':
openConnection(name).then(() => {}) openConnection(name).then(() => {})
break
case 'server_close':
connectionStore.closeConnection(name)
break
} }
console.warn('TODO: handle context menu:' + key) console.warn('TODO: handle context menu:' + key)
} }
@ -228,8 +233,10 @@ const handleSelectContextMenu = (key) => {
:data="connectionStore.connections" :data="connectionStore.connections"
:expand-on-click="true" :expand-on-click="true"
:expanded-keys="expandedKeys" :expanded-keys="expandedKeys"
:on-update:selected-keys="onUpdateSelectedKeys"
:node-props="nodeProps" :node-props="nodeProps"
:on-update:expanded-keys="onUpdateExpandedKeys" :on-update:expanded-keys="onUpdateExpandedKeys"
:selected-keys="selectedKeys"
:render-label="renderLabel" :render-label="renderLabel"
:render-prefix="renderPrefix" :render-prefix="renderPrefix"
class="fill-height" class="fill-height"

View File

@ -4,7 +4,7 @@ import { ConnectionType } from '../../consts/connection_type.js'
import { NIcon, useDialog, useMessage } from 'naive-ui' import { NIcon, useDialog, useMessage } from 'naive-ui'
import Key from '../icons/Key.vue' import Key from '../icons/Key.vue'
import ToggleDb from '../icons/ToggleDb.vue' import ToggleDb from '../icons/ToggleDb.vue'
import { indexOf, remove, startsWith } from 'lodash' import { indexOf } from 'lodash'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Refresh from '../icons/Refresh.vue' import Refresh from '../icons/Refresh.vue'
import CopyLink from '../icons/CopyLink.vue' import CopyLink from '../icons/CopyLink.vue'
@ -14,15 +14,14 @@ import Delete from '../icons/Delete.vue'
import Connect from '../icons/Connect.vue' import Connect from '../icons/Connect.vue'
import useDialogStore from '../../stores/dialog.js' import useDialogStore from '../../stores/dialog.js'
import { ClipboardSetText } from '../../../wailsjs/runtime/runtime.js' import { ClipboardSetText } from '../../../wailsjs/runtime/runtime.js'
import useTabStore from '../../stores/tab.js'
import useConnectionStore from '../../stores/connections.js' import useConnectionStore from '../../stores/connections.js'
const i18n = useI18n() const i18n = useI18n()
const loading = ref(false) const loading = ref(false)
const loadingConnections = ref(false) const loadingConnections = ref(false)
const expandedKeys = ref([]) const expandedKeys = ref([])
const selectedKeys = ref([])
const connectionStore = useConnectionStore() const connectionStore = useConnectionStore()
const tabStore = useTabStore()
const dialogStore = useDialogStore() const dialogStore = useDialogStore()
const contextMenuParam = reactive({ const contextMenuParam = reactive({
@ -128,7 +127,7 @@ onMounted(async () => {
}) })
const props = defineProps({ const props = defineProps({
server: Strig, server: String,
}) })
const expandKey = (key) => { 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 message = useMessage()
const dialog = useDialog() const dialog = useDialog()
const onUpdateExpanded = (value, option, meta) => { 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 }) => { const renderPrefix = ({ option }) => {
switch (option.type) { switch (option.type) {
case ConnectionType.RedisDB: case ConnectionType.RedisDB:
@ -177,7 +168,7 @@ const renderPrefix = ({ option }) => {
NIcon, NIcon,
{ size: 20 }, { size: 20 },
{ {
default: () => h(ToggleDb, { modelValue: option.opened === true }), default: () => h(ToggleDb, { modelValue: option.opened === true },
} }
) )
case ConnectionType.RedisKey: case ConnectionType.RedisKey:
@ -253,6 +244,7 @@ const nodeProps = ({ option }) => {
contextMenuParam.x = e.clientX contextMenuParam.x = e.clientX
contextMenuParam.y = e.clientY contextMenuParam.y = e.clientY
contextMenuParam.show = true contextMenuParam.show = true
selectedKeys.value = [option.key]
}) })
}, },
// onMouseover() { // onMouseover() {
@ -281,14 +273,6 @@ const handleSelectContextMenu = (key) => {
contextMenuParam.show = false contextMenuParam.show = false
const { name, db, key: nodeKey, redisKey } = contextMenuParam.currentNode const { name, db, key: nodeKey, redisKey } = contextMenuParam.currentNode
switch (key) { switch (key) {
case 'server_disconnect':
connectionStore.closeConnection(nodeKey).then((success) => {
if (success) {
collapseKeyAndChildren(nodeKey)
tabStore.removeTabByName(name)
}
})
break
// case 'server_reload': // case 'server_reload':
// case 'db_reload': // case 'db_reload':
// connectionStore.loadKeyValue() // connectionStore.loadKeyValue()
@ -347,9 +331,11 @@ const handleOutsideContextMenu = () => {
:data="connectionStore.databases[props.server] || []" :data="connectionStore.databases[props.server] || []"
:expand-on-click="false" :expand-on-click="false"
:expanded-keys="expandedKeys" :expanded-keys="expandedKeys"
:on-update:selected-keys="onUpdateSelectedKeys"
:node-props="nodeProps" :node-props="nodeProps"
:on-load="onLoadTree" :on-load="onLoadTree"
:on-update:expanded-keys="onUpdateExpanded" :on-update:expanded-keys="onUpdateExpanded"
:selected-keys="selectedKeys"
:render-label="renderLabel" :render-label="renderLabel"
:render-prefix="renderPrefix" :render-prefix="renderPrefix"
:render-suffix="renderSuffix" :render-suffix="renderSuffix"

View File

@ -196,6 +196,9 @@ const useConnectionStore = defineStore('connections', {
} }
delete this.databases[name] delete this.databases[name]
const tabStore = useTabStore()
tabStore.removeTabByName(name)
return true return true
}, },

View File

@ -73,9 +73,21 @@ const useTabStore = defineStore('tab', {
this._setActivatedIndex(size(this.tabList) - 1) this._setActivatedIndex(size(this.tabList) - 1)
}, },
_setActivatedIndex(idx) { /**
*
* @param idx
* @param {boolean} [switchNav]
* @private
*/
_setActivatedIndex(idx, switchNav) {
this.activatedIndex = idx this.activatedIndex = idx
if (switchNav === true) {
this.nav = idx >= 0 ? 'structure' : 'server' 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.ttl = ttl
tab.key = key tab.key = key
tab.value = value tab.value = value
this._setActivatedIndex(tabIndex) this._setActivatedIndex(tabIndex, true)
// this.activatedTab = tab.name // this.activatedTab = tab.name
}, },
@ -169,12 +181,12 @@ const useTabStore = defineStore('tab', {
this.activatedIndex -= 1 this.activatedIndex -= 1
if (this.activatedIndex < 0) { if (this.activatedIndex < 0) {
if (this.tabList.length > 0) { if (this.tabList.length > 0) {
this._setActivatedIndex(0) this._setActivatedIndex(0, false)
} else { } else {
this._setActivatedIndex(-1) this._setActivatedIndex(-1, false)
} }
} else { } else {
this._setActivatedIndex(this.activatedIndex) this._setActivatedIndex(this.activatedIndex, false)
} }
return size(removed) > 0 ? removed[0] : null return size(removed) > 0 ? removed[0] : null