lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/content/ContentPane.vue
View File

@ -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)
}
},
})

27
frontend/src/components/sidebar/ConnectionTree.vue
View File

@ -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"

36
frontend/src/components/sidebar/DatabaseTree.vue
View File

@ -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"

3
frontend/src/stores/connections.js
View File

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

24
frontend/src/stores/tab.js
View File

@ -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