Add close connection, fix unselect item when right click tree node
This commit is contained in:
parent
dadde8d090
commit
a402c6ac30
|
@ -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)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue