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

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

2
backend/services/connection_service.go
View File

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

21
frontend/src/components/ContentToolbar.vue
View File

@ -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)">
<template #icon>
<n-icon :component="Edit" size="18" />
</template>
{{ $t('rename_key') }}
</n-button>
<icon-button
border
:icon="Edit"
t-tooltip="rename_key"
size="18"
@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>

16
frontend/src/components/common/IconButton.vue
View File

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

2
frontend/src/components/dialogs/ConnectionDialog.vue
View File

@ -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')" />

11
frontend/src/components/dialogs/NewKeyDialog.vue
View File

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

38
frontend/src/components/icons/AddLink.vue
View File

@ -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="M8 28H24"
d="M24.0605 10L24.0239 38"
stroke="currentColor"
:stroke-width="strokeWidth"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
:stroke-width="props.strokeWidth"
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"
d="M10 24L38 24"
stroke="currentColor"
:stroke-width="strokeWidth"
stroke-linecap="round"
stroke-linejoin="round"
/>

59
frontend/src/components/icons/Clear.vue Normal file
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>

1
frontend/src/components/sidebar/ConnectionPane.vue
View File

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

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

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

7
frontend/src/components/sidebar/DatabasePane.vue
View File

@ -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="AddGroup" color="#555" size="20" stroke-width="4" t-tooltip="new_group" />
<icon-button :icon="AddLink" color="#555" size="20" stroke-width="4" t-tooltip="new_key" />
<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" />

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

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

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

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

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

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