feat: add db selection for new key dialog

refactor: remove unused code

backend/services/connection_service.go

@@ -5,7 +5,6 @@ import (
 	"errors"
 	"fmt"
 	"github.com/redis/go-redis/v9"
-	"log"
 	"strconv"
 	"strings"
 	"sync"
@@ -308,7 +307,6 @@ func (c *connectionService) parseDBItemInfo(info string) map[string]int {
 // OpenDatabase open select database, and list all keys
 // @param path contain connection name and db name
 func (c *connectionService) OpenDatabase(connName string, db int) (resp types.JSResp) {
-	log.Println("open db:" + strconv.Itoa(db))
 	rdb, ctx, err := c.getRedisClient(connName, db)
 	if err != nil {
 		resp.Msg = err.Error()

frontend/src/components/ContentToolbar.vue

@@ -51,7 +51,7 @@ const onConfirmDelete = async () => {
             <redis-type-tag :type="props.keyType" size="large"></redis-type-tag>
             <n-input v-model:value="props.keyPath">
                 <template #suffix>
-                    <icon-button :icon="Refresh" :tooltip="$t('reload_key')" size="18" @click="onReloadKey" />
+                    <icon-button :icon="Refresh" t-tooltip="reload_key" size="18" @click="onReloadKey" />
                 </template>
             </n-input>
         </n-input-group>
@@ -70,12 +70,19 @@ const onConfirmDelete = async () => {
                 </template>
                 TTL
             </n-tooltip>
-            <n-button @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)">
+            <icon-button
-                <template #icon>
+                border
-                    <n-icon :component="Edit" size="18" />
+                :icon="Edit"
-                </template>
+                t-tooltip="rename_key"
-                {{ $t('rename_key') }}
+                size="18"
-            </n-button>
+                @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)"
+            />
+            <!--            <n-button @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)">-->
+            <!--                <template #icon>-->
+            <!--                    <n-icon :component="Edit" size="18" />-->
+            <!--                </template>-->
+            <!--                {{ $t('rename_key') }}-->
+            <!--            </n-button>-->
         </n-button-group>
         <n-tooltip>
             <template #trigger>

frontend/src/components/common/IconButton.vue

@@ -20,20 +20,10 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    border: Boolean,
     disabled: Boolean,
 })
 
-const disableColor = computed(() => {
-    const baseColor = props.color
-    const grayScale = Math.round(
-        0.299 * parseInt(baseColor.substring(1, 2), 16) +
-            0.587 * parseInt(baseColor.substring(3, 2), 16) +
-            0.114 * parseInt(baseColor.substring(5, 2), 16)
-    )
-    const color = `#${grayScale.toString(16).repeat(3)}`
-    return color
-})
-
 const hasTooltip = computed(() => {
     return props.tooltip || props.tTooltip
 })
@@ -42,7 +32,7 @@ const hasTooltip = computed(() => {
 <template>
     <n-tooltip v-if="hasTooltip">
         <template #trigger>
-            <n-button text :disabled="disabled" @click="emit('click')">
+            <n-button :text="!border" :disabled="disabled" @click="emit('click')">
                 <n-icon :size="props.size" :color="props.color">
                     <component :is="props.icon" :stroke-width="props.strokeWidth" />
                 </n-icon>
@@ -50,7 +40,7 @@ const hasTooltip = computed(() => {
         </template>
         {{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
     </n-tooltip>
-    <n-button v-else text :disabled="disabled" @click="emit('click')">
+    <n-button v-else :text="!border" :disabled="disabled" @click="emit('click')">
         <n-icon :size="props.size" :color="props.color">
             <component :is="props.icon" :stroke-width="props.strokeWidth" />
         </n-icon>

frontend/src/components/dialogs/ConnectionDialog.vue

@@ -167,7 +167,7 @@ const onClose = () => {
                         <n-input v-model:value="generalForm.name" :placeholder="$t('conn_name_tip')" />
                     </n-form-item>
                     <n-form-item v-if="!isEditMode" :label="$t('conn_group')" required>
-                        <n-select v-model:value="generalForm.group" :options="groupOptions"></n-select>
+                        <n-select v-model:value="generalForm.group" :options="groupOptions" />
                     </n-form-item>
                     <n-form-item :label="$t('conn_addr')" path="addr" required>
                         <n-input v-model:value="generalForm.addr" :placeholder="$t('conn_addr_tip')" />

frontend/src/components/dialogs/NewKeyDialog.vue

@@ -2,7 +2,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { types } from '../../consts/support_redis_type'
 import useDialog from '../../stores/dialog'
-import { isEmpty } from 'lodash'
+import { isEmpty, keys, map } from 'lodash'
 import NewStringValue from '../new_value/NewStringValue.vue'
 import NewHashValue from '../new_value/NewHashValue.vue'
 import NewListValue from '../new_value/NewListValue.vue'
@@ -28,6 +28,12 @@ const formRules = computed(() => {
         ttl: { required: true, message: requiredMsg, trigger: 'input' },
     }
 })
+const dbOptions = computed(() =>
+    map(keys(connectionStore.databases[newForm.server]), (key) => ({
+        label: key,
+        value: parseInt(key),
+    }))
+)
 const newFormRef = ref(null)
 
 const formLabelWidth = '60px'
@@ -119,6 +125,9 @@ const onClose = () => {
                 <n-form-item :label="$t('key')" path="key" required>
                     <n-input v-model:value="newForm.key" placeholder="" />
                 </n-form-item>
+                <n-form-item label="DB" path="db" required>
+                    <n-select v-model:value="newForm.db" :options="dbOptions" />
+                </n-form-item>
                 <n-form-item :label="$t('type')" path="type" required>
                     <n-select v-model:value="newForm.type" :options="options" />
                 </n-form-item>

frontend/src/components/icons/AddLink.vue

@@ -8,46 +8,18 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            :stroke-width="props.strokeWidth"
+            d="M24.0605 10L24.0239 38"
-            d="M8 28H24"
             stroke="currentColor"
+            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
         <path
-            :stroke-width="props.strokeWidth"
+            d="M10 24L38 24"
-            d="M8 37H24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M8 19H40"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M8 10H40"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M30 33H40"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M35 28L35 38"
             stroke="currentColor"
+            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />

frontend/src/components/icons/Clear.vue

@@ -0,0 +1,59 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M20 5.91406H28V13.9141H43V21.9141H5V13.9141H20V5.91406Z"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M8 40H40V22H8V40Z"
+            fill="none"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M16 39.8976V33.9141"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M24 39.8977V33.8977"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M32 39.8976V33.9141"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M12 40H36"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/sidebar/ConnectionPane.vue

@@ -3,7 +3,6 @@ import useDialogStore from '../../stores/dialog.js'
 import { NIcon } from 'naive-ui'
 import AddGroup from '../icons/AddGroup.vue'
 import AddLink from '../icons/AddLink.vue'
-import Sort from '../icons/Sort.vue'
 import IconButton from '../common/IconButton.vue'
 import Filter from '../icons/Filter.vue'
 import ConnectionTree from './ConnectionTree.vue'

frontend/src/components/sidebar/ConnectionTree.vue

@@ -313,8 +313,6 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
     connectionStore.connections = Array.from(connectionStore.connections)
     saveSort()
 }
-
-const saveDrop = () => {}
 </script>
 
 <template>

frontend/src/components/sidebar/DatabasePane.vue

@@ -8,6 +8,8 @@ import Filter from '../icons/Filter.vue'
 import useTabStore from '../../stores/tab.js'
 import { computed } from 'vue'
 import { get } from 'lodash'
+import Delete from '../icons/Delete.vue'
+import Refresh from '../icons/Refresh.vue'
 
 const tabStore = useTabStore()
 const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
@@ -19,8 +21,9 @@ const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
 
         <!-- bottom function bar -->
         <div class="nav-pane-bottom flex-box-h">
-            <icon-button :icon="AddLink" color="#555" size="20" stroke-width="4" t-tooltip="new_conn" />
+            <icon-button :icon="AddLink" color="#555" size="20" stroke-width="4" t-tooltip="new_key" />
-            <icon-button :icon="AddGroup" color="#555" size="20" stroke-width="4" t-tooltip="new_group" />
+            <icon-button :icon="Delete" color="#555" size="20" stroke-width="4" t-tooltip="remove_key" />
+            <icon-button :icon="Refresh" color="#555" size="20" stroke-width="4" t-tooltip="reload" />
             <n-input placeholder="">
                 <template #prefix>
                     <n-icon :component="Filter" color="#aaa" size="20" />

frontend/src/components/sidebar/DatabaseTree.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { h, nextTick, onMounted, reactive, ref } from 'vue'
+import { h, nextTick, onMounted, reactive, ref, watch } from 'vue'
 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 { get, indexOf } from 'lodash'
+import { get, indexOf, size } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import Refresh from '../icons/Refresh.vue'
 import CopyLink from '../icons/CopyLink.vue'
@@ -142,7 +142,7 @@ const expandKey = (key) => {
 
 const message = useMessage()
 const dialog = useDialog()
-const onUpdateExpanded = (value, option) => {
+const onUpdateExpanded = (value, option, meta) => {
     expandedKeys.value = value
     if (!meta.node) {
         return
@@ -162,6 +162,15 @@ const onUpdateSelectedKeys = (keys, option) => {
     selectedKeys.value = keys
 }
 
+watch(
+    () => selectedKeys,
+    (keys) => {
+        if (size(keys) > 0) {
+            console.log('selected')
+        }
+    }
+)
+
 const renderPrefix = ({ option }) => {
     switch (option.type) {
         case ConnectionType.RedisDB:
@@ -211,7 +220,10 @@ const renderSuffix = ({ option }) => {
 const nodeProps = ({ option }) => {
     return {
         onClick() {
-            connectionStore.select(option)
+            const { key, name, db, type, redisKey } = option
+            if (option.type === ConnectionType.RedisValue) {
+                connectionStore.loadKeyValue(name, db, redisKey)
+            }
             // console.log('[click]:' + JSON.stringify(option))
         },
         onDblclick: async () => {
@@ -219,16 +231,6 @@ const nodeProps = ({ option }) => {
                 console.warn('TODO: alert to ignore double click when loading')
                 return
             }
-            switch (option.type) {
-                case ConnectionType.Server:
-                    option.isLeaf = false
-                    break
-
-                case ConnectionType.RedisDB:
-                    option.isLeaf = false
-                    break
-            }
-
             // default handle is expand current node
             nextTick().then(() => expandKey(option.key))
         },
@@ -279,6 +281,9 @@ const handleSelectContextMenu = (key) => {
         // case 'db_reload':
         //     connectionStore.loadKeyValue()
         //     break
+        case 'db_open':
+            nextTick().then(() => expandKey(nodeKey))
+            break
         case 'db_newkey':
         case 'key_newkey':
             dialogStore.openNewKeyDialog(redisKey, name, db)

frontend/src/stores/connections.js

@@ -457,23 +457,6 @@ const useConnectionStore = defineStore('connections', {
             updateChildrenNum(dbs[db])
         },
 
-        /**
-         * select node
-         * @param key
-         * @param name
-         * @param db
-         * @param type
-         * @param redisKey
-         */
-        select({ key, name, db, type, redisKey }) {
-            if (type === ConnectionType.RedisValue) {
-                console.log(`[click]key:${key} db: ${db} redis key: ${redisKey}`)
-
-                // async get value for key
-                this.loadKeyValue(name, db, redisKey).then(() => {})
-            }
-        },
-
         /**
          * load redis key
          * @param server

frontend/src/stores/tab.js

@@ -1,4 +1,4 @@
-import { find, findIndex, size } from 'lodash'
+import { find, findIndex, get, size } from 'lodash'
 import { defineStore } from 'pinia'
 
 const useTabStore = defineStore('tab', {
@@ -44,21 +44,13 @@ const useTabStore = defineStore('tab', {
          * @returns {TabItem|null}
          */
         currentTab() {
-            return this.tabs[this.activatedIndex || 0]
+            return get(this.tabs, this.activatedIndex)
             // let current = find(this.tabs, {name: this.activatedTab})
             // if (current == null) {
             //     current = this.tabs[0]
             // }
             // return current
         },
-
-        currentTabIndex() {
-            const len = size(this.tabs)
-            if (this.activatedIndex < 0 || this.activatedIndex >= len) {
-                this._setActivatedIndex(0)
-            }
-            return this.tabs[this.activatedIndex]
-        },
     },
     actions: {
         /**
@@ -165,6 +157,12 @@ const useTabStore = defineStore('tab', {
             // }
             // this.activatedIndex = tabIndex
         },
+
+        /**
+         *
+         * @param {number} tabIndex
+         * @returns {*|null}
+         */
         removeTab(tabIndex) {
             const len = size(this.tabs)
             // ignore remove last blank tab
@@ -191,12 +189,21 @@ const useTabStore = defineStore('tab', {
 
             return size(removed) > 0 ? removed[0] : null
         },
+
+        /**
+         *
+         * @param {string} tabName
+         */
         removeTabByName(tabName) {
             const idx = findIndex(this.tabs, { name: tabName })
             if (idx !== -1) {
                 this.removeTab(idx)
             }
         },
+
+        /**
+         *
+         */
         removeAllTab() {
             this.tabList = []
             this._setActivatedIndex(-1, false)