feat: add db selection for new key dialog

refactor: remove unused code
This commit is contained in:
tiny-craft 2023-07-03 17:53:28 +08:00
parent 0f29a3c34f
commit 62d6924541
13 changed files with 133 additions and 103 deletions

View File

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

View File

@ -51,7 +51,7 @@ const onConfirmDelete = async () => {
<redis-type-tag :type="props.keyType" size="large"></redis-type-tag> <redis-type-tag :type="props.keyType" size="large"></redis-type-tag>
<n-input v-model:value="props.keyPath"> <n-input v-model:value="props.keyPath">
<template #suffix> <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> </template>
</n-input> </n-input>
</n-input-group> </n-input-group>
@ -70,12 +70,19 @@ const onConfirmDelete = async () => {
</template> </template>
TTL TTL
</n-tooltip> </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-button-group>
<n-tooltip> <n-tooltip>
<template #trigger> <template #trigger>

View File

@ -20,20 +20,10 @@ const props = defineProps({
type: [Number, String], type: [Number, String],
default: 3, default: 3,
}, },
border: Boolean,
disabled: 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(() => { const hasTooltip = computed(() => {
return props.tooltip || props.tTooltip return props.tooltip || props.tTooltip
}) })
@ -42,7 +32,7 @@ const hasTooltip = computed(() => {
<template> <template>
<n-tooltip v-if="hasTooltip"> <n-tooltip v-if="hasTooltip">
<template #trigger> <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"> <n-icon :size="props.size" :color="props.color">
<component :is="props.icon" :stroke-width="props.strokeWidth" /> <component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon> </n-icon>
@ -50,7 +40,7 @@ const hasTooltip = computed(() => {
</template> </template>
{{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }} {{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
</n-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"> <n-icon :size="props.size" :color="props.color">
<component :is="props.icon" :stroke-width="props.strokeWidth" /> <component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon> </n-icon>

View File

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

View File

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

View File

@ -8,46 +8,18 @@ const props = defineProps({
</script> </script>
<template> <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 <path
:stroke-width="props.strokeWidth" d="M24.0605 10L24.0239 38"
d="M8 28H24"
stroke="currentColor" stroke="currentColor"
:stroke-width="strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <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="currentColor"
:stroke-width="strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />

View File

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

View File

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

View File

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

View File

@ -8,6 +8,8 @@ import Filter from '../icons/Filter.vue'
import useTabStore from '../../stores/tab.js' import useTabStore from '../../stores/tab.js'
import { computed } from 'vue' import { computed } from 'vue'
import { get } from 'lodash' import { get } from 'lodash'
import Delete from '../icons/Delete.vue'
import Refresh from '../icons/Refresh.vue'
const tabStore = useTabStore() const tabStore = useTabStore()
const currentName = computed(() => get(tabStore.currentTab, 'name', '')) const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
@ -19,8 +21,9 @@ const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
<!-- bottom function bar --> <!-- bottom function bar -->
<div class="nav-pane-bottom flex-box-h"> <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=""> <n-input placeholder="">
<template #prefix> <template #prefix>
<n-icon :component="Filter" color="#aaa" size="20" /> <n-icon :component="Filter" color="#aaa" size="20" />

View File

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

View File

@ -457,23 +457,6 @@ const useConnectionStore = defineStore('connections', {
updateChildrenNum(dbs[db]) 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 * load redis key
* @param server * @param server

View File

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