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

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)
+            const tab = get(tabStore.tabs, tabIndex)
-            if (removedTab != null) {
+            if (tab != null) {
-                connectionStore.closeConnection(removedTab.name)
+                connectionStore.closeConnection(tab.name)
             }
         },
     })

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) => {
+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.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"

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"

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

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