Compare commits
7 Commits
200b12cd51
...
578a8413a1
Author | SHA1 | Date |
---|---|---|
Lykin | 578a8413a1 | |
Lykin | cc436ad86f | |
Lykin | fea87662de | |
Lykin | 2a3a15d64d | |
Lykin | 3c1727db3e | |
Lykin | 5b84fa59f6 | |
Lykin | e0a8599e95 |
|
@ -2,6 +2,7 @@ package services
|
|||
|
||||
import (
|
||||
"context"
|
||||
"encoding/json"
|
||||
"errors"
|
||||
"fmt"
|
||||
"github.com/redis/go-redis/v9"
|
||||
|
@ -580,6 +581,11 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
|
|||
resp.Msg = "key not exists"
|
||||
return
|
||||
}
|
||||
var doConvert bool
|
||||
if (len(param.Decode) > 0 && param.Decode != types.DECODE_NONE) ||
|
||||
(len(param.Format) > 0 && param.Format != types.FORMAT_RAW) {
|
||||
doConvert = true
|
||||
}
|
||||
|
||||
var data types.KeyDetail
|
||||
//var cursor uint64
|
||||
|
@ -633,82 +639,101 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
|
|||
//data.Value, data.Decode, data.Format = strutil.ConvertTo(str, param.Decode, param.Format)
|
||||
|
||||
case "list":
|
||||
loadListHandle := func() ([]string, bool, error) {
|
||||
var items []string
|
||||
loadListHandle := func() ([]types.ListEntryItem, bool, error) {
|
||||
var loadVal []string
|
||||
var cursor uint64
|
||||
var subErr error
|
||||
if param.Full {
|
||||
// load all
|
||||
cursor = 0
|
||||
items, err = client.LRange(ctx, key, 0, -1).Result()
|
||||
loadVal, subErr = client.LRange(ctx, key, 0, -1).Result()
|
||||
} else {
|
||||
cursor, _ = getEntryCursor()
|
||||
if param.Reset {
|
||||
cursor = 0
|
||||
} else {
|
||||
cursor, _ = getEntryCursor()
|
||||
}
|
||||
scanSize := int64(Preferences().GetScanSize())
|
||||
items, err = client.LRange(ctx, key, int64(cursor), int64(cursor)+scanSize-1).Result()
|
||||
loadVal, subErr = client.LRange(ctx, key, int64(cursor), int64(cursor)+scanSize-1).Result()
|
||||
cursor = cursor + uint64(scanSize)
|
||||
if len(items) < int(scanSize) {
|
||||
if len(loadVal) < int(scanSize) {
|
||||
cursor = 0
|
||||
}
|
||||
}
|
||||
setEntryCursor(cursor)
|
||||
if err != nil {
|
||||
return items, false, err
|
||||
|
||||
items := make([]types.ListEntryItem, len(loadVal))
|
||||
for i, val := range loadVal {
|
||||
items[i].Value = val
|
||||
if doConvert {
|
||||
if dv, _, _ := strutil.ConvertTo(val, param.Decode, param.Format); dv != val {
|
||||
items[i].DisplayValue = dv
|
||||
}
|
||||
}
|
||||
}
|
||||
if subErr != nil {
|
||||
return items, false, subErr
|
||||
}
|
||||
return items, cursor == 0, nil
|
||||
}
|
||||
|
||||
data.Value, data.End, err = loadListHandle()
|
||||
data.Decode, data.Format = param.Decode, param.Format
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
|
||||
case "hash":
|
||||
loadHashHandle := func() ([]types.HashEntryItem, bool, error) {
|
||||
//items := map[string]string{}
|
||||
scanSize := int64(Preferences().GetScanSize())
|
||||
items := make([]types.HashEntryItem, 0, scanSize)
|
||||
var items []types.HashEntryItem
|
||||
var loadedVal []string
|
||||
var cursor uint64
|
||||
var doConvert = len(param.Decode) > 0 && len(param.Format) > 0
|
||||
var subErr error
|
||||
scanSize := int64(Preferences().GetScanSize())
|
||||
if param.Full {
|
||||
// load all
|
||||
cursor = 0
|
||||
for {
|
||||
loadedVal, cursor, err = client.HScan(ctx, key, cursor, "*", scanSize).Result()
|
||||
if err != nil {
|
||||
return nil, false, err
|
||||
loadedVal, cursor, subErr = client.HScan(ctx, key, cursor, "*", scanSize).Result()
|
||||
if subErr != nil {
|
||||
return nil, false, subErr
|
||||
}
|
||||
var v string
|
||||
for i := 0; i < len(loadedVal); i += 2 {
|
||||
if doConvert {
|
||||
v, _, _ = strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format)
|
||||
} else {
|
||||
v = loadedVal[i+1]
|
||||
}
|
||||
items = append(items, types.HashEntryItem{
|
||||
Key: loadedVal[i],
|
||||
Value: strutil.EncodeRedisKey(loadedVal[i+1]),
|
||||
DisplayValue: v,
|
||||
Key: loadedVal[i],
|
||||
Value: strutil.EncodeRedisKey(loadedVal[i+1]),
|
||||
})
|
||||
if doConvert {
|
||||
if dv, _, _ := strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format); dv != loadedVal[i+1] {
|
||||
items[len(items)-1].DisplayValue = dv
|
||||
}
|
||||
}
|
||||
}
|
||||
if cursor == 0 {
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
cursor, _ = getEntryCursor()
|
||||
loadedVal, cursor, err = client.HScan(ctx, key, cursor, matchPattern, scanSize).Result()
|
||||
if err != nil {
|
||||
return nil, false, err
|
||||
if param.Reset {
|
||||
cursor = 0
|
||||
} else {
|
||||
cursor, _ = getEntryCursor()
|
||||
}
|
||||
var v string
|
||||
for i := 0; i < len(loadedVal); i += 2 {
|
||||
loadedVal, cursor, subErr = client.HScan(ctx, key, cursor, matchPattern, scanSize).Result()
|
||||
if subErr != nil {
|
||||
return nil, false, subErr
|
||||
}
|
||||
loadedLen := len(loadedVal)
|
||||
items = make([]types.HashEntryItem, loadedLen/2)
|
||||
for i := 0; i < loadedLen; i += 2 {
|
||||
items[i/2].Key = loadedVal[i]
|
||||
items[i/2].Value = strutil.EncodeRedisKey(loadedVal[i+1])
|
||||
if doConvert {
|
||||
v, _, _ = strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format)
|
||||
} else {
|
||||
v = loadedVal[i+1]
|
||||
if dv, _, _ := strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format); dv != loadedVal[i+1] {
|
||||
items[i/2].DisplayValue = dv
|
||||
}
|
||||
}
|
||||
items = append(items, types.HashEntryItem{
|
||||
Key: loadedVal[i],
|
||||
Value: strutil.EncodeRedisKey(loadedVal[i+1]),
|
||||
DisplayValue: v,
|
||||
})
|
||||
}
|
||||
}
|
||||
setEntryCursor(cursor)
|
||||
|
@ -723,42 +748,65 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
|
|||
}
|
||||
|
||||
case "set":
|
||||
loadSetHandle := func() ([]string, bool, error) {
|
||||
var items []string
|
||||
loadSetHandle := func() ([]types.SetEntryItem, bool, error) {
|
||||
var items []types.SetEntryItem
|
||||
var cursor uint64
|
||||
scanSize := int64(Preferences().GetScanSize())
|
||||
var subErr error
|
||||
var loadedKey []string
|
||||
scanSize := int64(Preferences().GetScanSize())
|
||||
if param.Full {
|
||||
// load all
|
||||
cursor = 0
|
||||
for {
|
||||
loadedKey, cursor, err = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
|
||||
if err != nil {
|
||||
return items, false, err
|
||||
loadedKey, cursor, subErr = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
|
||||
if subErr != nil {
|
||||
return items, false, subErr
|
||||
}
|
||||
for _, val := range loadedKey {
|
||||
items = append(items, types.SetEntryItem{
|
||||
Value: val,
|
||||
})
|
||||
if doConvert {
|
||||
if dv, _, _ := strutil.ConvertTo(val, param.Decode, param.Format); dv != val {
|
||||
items[len(items)-1].DisplayValue = dv
|
||||
}
|
||||
}
|
||||
}
|
||||
items = append(items, loadedKey...)
|
||||
if cursor == 0 {
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
cursor, _ = getEntryCursor()
|
||||
loadedKey, cursor, err = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
|
||||
items = append(items, loadedKey...)
|
||||
if param.Reset {
|
||||
cursor = 0
|
||||
} else {
|
||||
cursor, _ = getEntryCursor()
|
||||
}
|
||||
loadedKey, cursor, subErr = client.SScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
|
||||
items = make([]types.SetEntryItem, len(loadedKey))
|
||||
for i, val := range loadedKey {
|
||||
items[i].Value = val
|
||||
if doConvert {
|
||||
if dv, _, _ := strutil.ConvertTo(val, param.Decode, param.Format); dv != val {
|
||||
items[i].DisplayValue = dv
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
setEntryCursor(cursor)
|
||||
return items, cursor == 0, nil
|
||||
}
|
||||
|
||||
data.Value, data.End, err = loadSetHandle()
|
||||
data.Decode, data.Format = param.Decode, param.Format
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
|
||||
case "zset":
|
||||
loadZSetHandle := func() ([]types.ZSetItem, bool, error) {
|
||||
var items []types.ZSetItem
|
||||
loadZSetHandle := func() ([]types.ZSetEntryItem, bool, error) {
|
||||
var items []types.ZSetEntryItem
|
||||
var cursor uint64
|
||||
scanSize := int64(Preferences().GetScanSize())
|
||||
var loadedVal []string
|
||||
|
@ -773,10 +821,15 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
|
|||
var score float64
|
||||
for i := 0; i < len(loadedVal); i += 2 {
|
||||
if score, err = strconv.ParseFloat(loadedVal[i+1], 64); err == nil {
|
||||
items = append(items, types.ZSetItem{
|
||||
items = append(items, types.ZSetEntryItem{
|
||||
Value: loadedVal[i],
|
||||
Score: score,
|
||||
})
|
||||
if doConvert {
|
||||
if dv, _, _ := strutil.ConvertTo(loadedVal[i], param.Decode, param.Format); dv != loadedVal[i] {
|
||||
items[len(items)-1].DisplayValue = dv
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if cursor == 0 {
|
||||
|
@ -784,15 +837,24 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
|
|||
}
|
||||
}
|
||||
} else {
|
||||
cursor, _ = getEntryCursor()
|
||||
if param.Reset {
|
||||
cursor = 0
|
||||
} else {
|
||||
cursor, _ = getEntryCursor()
|
||||
}
|
||||
loadedVal, cursor, err = client.ZScan(ctx, key, cursor, param.MatchPattern, scanSize).Result()
|
||||
loadedLen := len(loadedVal)
|
||||
items = make([]types.ZSetEntryItem, loadedLen/2)
|
||||
var score float64
|
||||
for i := 0; i < len(loadedVal); i += 2 {
|
||||
for i := 0; i < loadedLen; i += 2 {
|
||||
if score, err = strconv.ParseFloat(loadedVal[i+1], 64); err == nil {
|
||||
items = append(items, types.ZSetItem{
|
||||
Value: loadedVal[i],
|
||||
Score: score,
|
||||
})
|
||||
items[i/2].Score = score
|
||||
items[i/2].Value = loadedVal[i]
|
||||
if doConvert {
|
||||
if dv, _, _ := strutil.ConvertTo(loadedVal[i], param.Decode, param.Format); dv != loadedVal[i] {
|
||||
items[i/2].DisplayValue = dv
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -801,15 +863,15 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
|
|||
}
|
||||
|
||||
data.Value, data.End, err = loadZSetHandle()
|
||||
data.Decode, data.Format = param.Decode, param.Format
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
|
||||
case "stream":
|
||||
loadStreamHandle := func() ([]types.StreamItem, bool, error) {
|
||||
loadStreamHandle := func() ([]types.StreamEntryItem, bool, error) {
|
||||
var msgs []redis.XMessage
|
||||
var items []types.StreamItem
|
||||
var last string
|
||||
if param.Full {
|
||||
// load all
|
||||
|
@ -817,7 +879,11 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
|
|||
msgs, err = client.XRevRange(ctx, key, "+", "-").Result()
|
||||
} else {
|
||||
scanSize := int64(Preferences().GetScanSize())
|
||||
_, last = getEntryCursor()
|
||||
if param.Reset {
|
||||
last = ""
|
||||
} else {
|
||||
_, last = getEntryCursor()
|
||||
}
|
||||
if len(last) <= 0 {
|
||||
last = "+"
|
||||
}
|
||||
|
@ -836,11 +902,15 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
|
|||
}
|
||||
}
|
||||
setEntryXLast(last)
|
||||
for _, msg := range msgs {
|
||||
items = append(items, types.StreamItem{
|
||||
ID: msg.ID,
|
||||
Value: msg.Values,
|
||||
})
|
||||
items := make([]types.StreamEntryItem, len(msgs))
|
||||
for i, msg := range msgs {
|
||||
items[i].ID = msg.ID
|
||||
items[i].Value = msg.Values
|
||||
if vb, merr := json.Marshal(msg.Values); merr != nil {
|
||||
items[i].DisplayValue = "{}"
|
||||
} else {
|
||||
items[i].DisplayValue, _, _ = strutil.ConvertTo(string(vb), types.DECODE_NONE, types.FORMAT_JSON)
|
||||
}
|
||||
}
|
||||
if err != nil {
|
||||
return items, false, err
|
||||
|
@ -849,6 +919,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
|
|||
}
|
||||
|
||||
data.Value, data.End, err = loadStreamHandle()
|
||||
data.Decode, data.Format = param.Decode, param.Format
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
|
@ -912,7 +983,7 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
|
|||
} else {
|
||||
var saveStr string
|
||||
if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
|
||||
resp.Msg = fmt.Sprintf(`save to "%s" type fail: %s`, param.Format, err.Error())
|
||||
resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
|
||||
return
|
||||
}
|
||||
_, err = client.Set(ctx, key, saveStr, 0).Result()
|
||||
|
@ -1023,7 +1094,7 @@ func (b *browserService) SetHashValue(param types.SetHashParam) (resp types.JSRe
|
|||
str := strutil.DecodeRedisKey(param.Value)
|
||||
var saveStr string
|
||||
if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
|
||||
resp.Msg = fmt.Sprintf(`save to "%s" type fail: %s`, param.Format, err.Error())
|
||||
resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
|
||||
return
|
||||
}
|
||||
var removedField []string
|
||||
|
@ -1148,20 +1219,21 @@ func (b *browserService) AddListItem(connName string, db int, k any, action int,
|
|||
}
|
||||
|
||||
// SetListItem update or remove list item by index
|
||||
func (b *browserService) SetListItem(connName string, db int, k any, index int64, value string) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(connName, db)
|
||||
func (b *browserService) SetListItem(param types.SetListParam) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(param.Server, param.DB)
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
|
||||
client, ctx := item.client, item.ctx
|
||||
key := strutil.DecodeRedisKey(k)
|
||||
key := strutil.DecodeRedisKey(param.Key)
|
||||
str := strutil.DecodeRedisKey(param.Value)
|
||||
var removed []int64
|
||||
updated := map[int64]string{}
|
||||
if len(value) <= 0 {
|
||||
if len(str) <= 0 {
|
||||
// remove from list
|
||||
err = client.LSet(ctx, key, index, "---VALUE_REMOVED_BY_TINY_RDM---").Err()
|
||||
err = client.LSet(ctx, key, param.Index, "---VALUE_REMOVED_BY_TINY_RDM---").Err()
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
|
@ -1172,15 +1244,20 @@ func (b *browserService) SetListItem(connName string, db int, k any, index int64
|
|||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
removed = append(removed, index)
|
||||
removed = append(removed, param.Index)
|
||||
} else {
|
||||
// replace index value
|
||||
err = client.LSet(ctx, key, index, value).Err()
|
||||
var saveStr string
|
||||
if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
|
||||
resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
|
||||
return
|
||||
}
|
||||
err = client.LSet(ctx, key, param.Index, saveStr).Err()
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
updated[index] = value
|
||||
updated[param.Index] = saveStr
|
||||
}
|
||||
|
||||
resp.Success = true
|
||||
|
@ -1192,8 +1269,8 @@ func (b *browserService) SetListItem(connName string, db int, k any, index int64
|
|||
}
|
||||
|
||||
// SetSetItem add members to set or remove from set
|
||||
func (b *browserService) SetSetItem(connName string, db int, k any, remove bool, members []any) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(connName, db)
|
||||
func (b *browserService) SetSetItem(server string, db int, k any, remove bool, members []any) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(server, db)
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
|
@ -1220,66 +1297,88 @@ func (b *browserService) SetSetItem(connName string, db int, k any, remove bool,
|
|||
}
|
||||
|
||||
// UpdateSetItem replace member of set
|
||||
func (b *browserService) UpdateSetItem(connName string, db int, k any, value, newValue string) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(connName, db)
|
||||
func (b *browserService) UpdateSetItem(param types.SetSetParam) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(param.Server, param.DB)
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
|
||||
client, ctx := item.client, item.ctx
|
||||
key := strutil.DecodeRedisKey(k)
|
||||
_, _ = client.SRem(ctx, key, value).Result()
|
||||
_, err = client.SAdd(ctx, key, newValue).Result()
|
||||
key := strutil.DecodeRedisKey(param.Key)
|
||||
// remove old value
|
||||
str := strutil.DecodeRedisKey(param.Value)
|
||||
_, _ = client.SRem(ctx, key, str).Result()
|
||||
|
||||
// insert new value
|
||||
str = strutil.DecodeRedisKey(param.NewValue)
|
||||
var saveStr string
|
||||
if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil {
|
||||
resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
|
||||
return
|
||||
}
|
||||
_, err = client.SAdd(ctx, key, saveStr).Result()
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
|
||||
resp.Success = true
|
||||
resp.Data = map[string]any{
|
||||
"added": saveStr,
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// UpdateZSetValue update value of sorted set member
|
||||
func (b *browserService) UpdateZSetValue(connName string, db int, k any, value, newValue string, score float64) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(connName, db)
|
||||
func (b *browserService) UpdateZSetValue(param types.SetZSetParam) (resp types.JSResp) {
|
||||
item, err := b.getRedisClient(param.Server, param.DB)
|
||||
if err != nil {
|
||||
resp.Msg = err.Error()
|
||||
return
|
||||
}
|
||||
|
||||
client, ctx := item.client, item.ctx
|
||||
key := strutil.DecodeRedisKey(k)
|
||||
updated := map[string]any{}
|
||||
key := strutil.DecodeRedisKey(param.Key)
|
||||
val, newVal := strutil.DecodeRedisKey(param.Value), strutil.DecodeRedisKey(param.NewValue)
|
||||
updated := map[string]float64{}
|
||||
var removed []string
|
||||
if len(newValue) <= 0 {
|
||||
// blank new value, delete value
|
||||
_, err = client.ZRem(ctx, key, value).Result()
|
||||
if len(newVal) <= 0 {
|
||||
// no new value, delete value
|
||||
_, err = client.ZRem(ctx, key, val).Result()
|
||||
if err == nil {
|
||||
removed = append(removed, value)
|
||||
}
|
||||
} else if newValue == value {
|
||||
// update score only
|
||||
_, err = client.ZAdd(ctx, key, redis.Z{
|
||||
Score: score,
|
||||
Member: value,
|
||||
}).Result()
|
||||
if err == nil {
|
||||
updated[value] = score
|
||||
removed = append(removed, val)
|
||||
}
|
||||
} else {
|
||||
// remove old value and add new one
|
||||
_, err = client.ZRem(ctx, key, value).Result()
|
||||
if err == nil {
|
||||
removed = append(removed, value)
|
||||
var saveVal string
|
||||
if saveVal, err = strutil.SaveAs(newVal, param.Format, param.Decode); err != nil {
|
||||
resp.Msg = fmt.Sprintf(`save to type "%s" fail: %s`, param.Format, err.Error())
|
||||
return
|
||||
}
|
||||
|
||||
_, err = client.ZAdd(ctx, key, redis.Z{
|
||||
Score: score,
|
||||
Member: newValue,
|
||||
}).Result()
|
||||
if err == nil {
|
||||
updated[newValue] = score
|
||||
if saveVal == val {
|
||||
// update score only
|
||||
_, err = client.ZAdd(ctx, key, redis.Z{
|
||||
Score: param.Score,
|
||||
Member: saveVal,
|
||||
}).Result()
|
||||
if err == nil {
|
||||
updated[saveVal] = param.Score
|
||||
}
|
||||
} else {
|
||||
// remove old value and add new one
|
||||
_, err = client.ZRem(ctx, key, val).Result()
|
||||
if err == nil {
|
||||
removed = append(removed, val)
|
||||
}
|
||||
|
||||
_, err = client.ZAdd(ctx, key, redis.Z{
|
||||
Score: param.Score,
|
||||
Member: saveVal,
|
||||
}).Result()
|
||||
if err == nil {
|
||||
updated[saveVal] = param.Score
|
||||
}
|
||||
}
|
||||
}
|
||||
if err != nil {
|
||||
|
|
|
@ -30,12 +30,6 @@ type KeyDetailParam struct {
|
|||
Full bool `json:"full"`
|
||||
}
|
||||
|
||||
type HashEntryItem struct {
|
||||
Key string `json:"k"`
|
||||
Value any `json:"v"`
|
||||
DisplayValue string `json:"dv"`
|
||||
}
|
||||
|
||||
type KeyDetail struct {
|
||||
Value any `json:"value"`
|
||||
Length int64 `json:"length,omitempty"`
|
||||
|
@ -55,6 +49,16 @@ type SetKeyParam struct {
|
|||
Decode string `json:"decode,omitempty"`
|
||||
}
|
||||
|
||||
type SetListParam struct {
|
||||
Server string `json:"server"`
|
||||
DB int `json:"db"`
|
||||
Key any `json:"key"`
|
||||
Index int64 `json:"index"`
|
||||
Value any `json:"value"`
|
||||
Format string `json:"format,omitempty"`
|
||||
Decode string `json:"decode,omitempty"`
|
||||
}
|
||||
|
||||
type SetHashParam struct {
|
||||
Server string `json:"server"`
|
||||
DB int `json:"db"`
|
||||
|
@ -65,3 +69,24 @@ type SetHashParam struct {
|
|||
Format string `json:"format,omitempty"`
|
||||
Decode string `json:"decode,omitempty"`
|
||||
}
|
||||
|
||||
type SetSetParam struct {
|
||||
Server string `json:"server"`
|
||||
DB int `json:"db"`
|
||||
Key any `json:"key"`
|
||||
Value any `json:"value"`
|
||||
NewValue any `json:"newValue"`
|
||||
Format string `json:"format,omitempty"`
|
||||
Decode string `json:"decode,omitempty"`
|
||||
}
|
||||
|
||||
type SetZSetParam struct {
|
||||
Server string `json:"server"`
|
||||
DB int `json:"db"`
|
||||
Key any `json:"key"`
|
||||
Value any `json:"value"`
|
||||
NewValue any `json:"newValue"`
|
||||
Score float64 `json:"score"`
|
||||
Format string `json:"format,omitempty"`
|
||||
Decode string `json:"decode,omitempty"`
|
||||
}
|
||||
|
|
|
@ -1,11 +1,29 @@
|
|||
package types
|
||||
|
||||
type ZSetItem struct {
|
||||
Value string `json:"value"`
|
||||
Score float64 `json:"score"`
|
||||
type ListEntryItem struct {
|
||||
Value any `json:"v"`
|
||||
DisplayValue string `json:"dv,omitempty"`
|
||||
}
|
||||
|
||||
type StreamItem struct {
|
||||
ID string `json:"id"`
|
||||
Value map[string]any `json:"value"`
|
||||
type HashEntryItem struct {
|
||||
Key string `json:"k"`
|
||||
Value any `json:"v"`
|
||||
DisplayValue string `json:"dv,omitempty"`
|
||||
}
|
||||
|
||||
type SetEntryItem struct {
|
||||
Value any `json:"v"`
|
||||
DisplayValue string `json:"dv,omitempty"`
|
||||
}
|
||||
|
||||
type ZSetEntryItem struct {
|
||||
Score float64 `json:"s"`
|
||||
Value string `json:"v"`
|
||||
DisplayValue string `json:"dv,omitempty"`
|
||||
}
|
||||
|
||||
type StreamEntryItem struct {
|
||||
ID string `json:"id"`
|
||||
Value map[string]any `json:"v"`
|
||||
DisplayValue string `json:"dv,omitempty"`
|
||||
}
|
||||
|
|
|
@ -106,31 +106,34 @@ func decodeWith(str, decodeType string) (value, resultDecode string) {
|
|||
// if no decode is possible, it will return the origin string value and "none" decode type
|
||||
func autoDecode(str string) (value, resultDecode string) {
|
||||
if len(str) > 0 {
|
||||
var ok bool
|
||||
if value, ok = decodeBase64(str); ok {
|
||||
resultDecode = types.DECODE_BASE64
|
||||
return
|
||||
}
|
||||
// pure digit content may incorrect regard as some encoded type, skip decode
|
||||
if match, _ := regexp.MatchString(`^\d+$`, str); !match {
|
||||
var ok bool
|
||||
if value, ok = decodeBase64(str); ok {
|
||||
resultDecode = types.DECODE_BASE64
|
||||
return
|
||||
}
|
||||
|
||||
if value, ok = decodeGZip(str); ok {
|
||||
resultDecode = types.DECODE_GZIP
|
||||
return
|
||||
}
|
||||
if value, ok = decodeGZip(str); ok {
|
||||
resultDecode = types.DECODE_GZIP
|
||||
return
|
||||
}
|
||||
|
||||
// FIXME: skip decompress with deflate due to incorrect format checking
|
||||
//if value, ok = decodeDeflate(str); ok {
|
||||
// resultDecode = types.DECODE_DEFLATE
|
||||
// return
|
||||
//}
|
||||
// FIXME: skip decompress with deflate due to incorrect format checking
|
||||
//if value, ok = decodeDeflate(str); ok {
|
||||
// resultDecode = types.DECODE_DEFLATE
|
||||
// return
|
||||
//}
|
||||
|
||||
if value, ok = decodeZStd(str); ok {
|
||||
resultDecode = types.DECODE_ZSTD
|
||||
return
|
||||
}
|
||||
if value, ok = decodeZStd(str); ok {
|
||||
resultDecode = types.DECODE_ZSTD
|
||||
return
|
||||
}
|
||||
|
||||
if value, ok = decodeBrotli(str); ok {
|
||||
resultDecode = types.DECODE_BROTLI
|
||||
return
|
||||
if value, ok = decodeBrotli(str); ok {
|
||||
resultDecode = types.DECODE_BROTLI
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -203,11 +206,11 @@ func autoViewAs(str string) (value, resultFormat string) {
|
|||
}
|
||||
|
||||
func decodeJson(str string) (string, bool) {
|
||||
str = strings.TrimSpace(str)
|
||||
if (strings.HasPrefix(str, "{") && strings.HasSuffix(str, "}")) ||
|
||||
(strings.HasPrefix(str, "[") && strings.HasSuffix(str, "]")) {
|
||||
trimedStr := strings.TrimSpace(str)
|
||||
if (strings.HasPrefix(trimedStr, "{") && strings.HasSuffix(trimedStr, "}")) ||
|
||||
(strings.HasPrefix(trimedStr, "[") && strings.HasSuffix(trimedStr, "]")) {
|
||||
var out bytes.Buffer
|
||||
if err := json.Indent(&out, []byte(str), "", " "); err == nil {
|
||||
if err := json.Indent(&out, []byte(trimedStr), "", " "); err == nil {
|
||||
return out.String(), true
|
||||
}
|
||||
}
|
||||
|
@ -215,11 +218,9 @@ func decodeJson(str string) (string, bool) {
|
|||
}
|
||||
|
||||
func decodeBase64(str string) (string, bool) {
|
||||
if match, _ := regexp.MatchString(`^\d+$`, str); !match {
|
||||
if decodedStr, err := base64.StdEncoding.DecodeString(str); err == nil {
|
||||
if s := string(decodedStr); !containsBinary(s) {
|
||||
return s, true
|
||||
}
|
||||
if decodedStr, err := base64.StdEncoding.DecodeString(str); err == nil {
|
||||
if s := string(decodedStr); !containsBinary(s) {
|
||||
return s, true
|
||||
}
|
||||
}
|
||||
return str, false
|
||||
|
@ -281,9 +282,9 @@ func decodeBrotli(str string) (string, bool) {
|
|||
return str, false
|
||||
}
|
||||
|
||||
func SaveAs(str, viewType, decodeType string) (value string, err error) {
|
||||
func SaveAs(str, format, decode string) (value string, err error) {
|
||||
value = str
|
||||
switch viewType {
|
||||
switch format {
|
||||
case types.FORMAT_JSON:
|
||||
if jsonStr, ok := encodeJson(str); ok {
|
||||
value = jsonStr
|
||||
|
@ -309,7 +310,7 @@ func SaveAs(str, viewType, decodeType string) (value string, err error) {
|
|||
}
|
||||
}
|
||||
|
||||
switch decodeType {
|
||||
switch decode {
|
||||
case types.DECODE_NONE:
|
||||
return
|
||||
|
||||
|
@ -349,18 +350,15 @@ func SaveAs(str, viewType, decodeType string) (value string, err error) {
|
|||
}
|
||||
return
|
||||
}
|
||||
return str, errors.New("fail to save with unknown error")
|
||||
return str, nil
|
||||
}
|
||||
|
||||
func encodeJson(str string) (string, bool) {
|
||||
var data any
|
||||
if err := json.Unmarshal([]byte(str), &data); err == nil {
|
||||
var jsonByte []byte
|
||||
if jsonByte, err = json.Marshal(data); err == nil {
|
||||
return string(jsonByte), true
|
||||
}
|
||||
var dst bytes.Buffer
|
||||
if err := json.Compact(&dst, []byte(str)); err != nil {
|
||||
return str, false
|
||||
}
|
||||
return str, false
|
||||
return dst.String(), true
|
||||
}
|
||||
|
||||
func encodeBase64(str string) (string, bool) {
|
||||
|
|
|
@ -4,7 +4,7 @@ import BrowserPane from './components/sidebar/BrowserPane.vue'
|
|||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { debounce, get } from 'lodash'
|
||||
import { useThemeVars } from 'naive-ui'
|
||||
import NavMenu from './components/sidebar/NavMenu.vue'
|
||||
import Ribbon from './components/sidebar/Ribbon.vue'
|
||||
import ConnectionPane from './components/sidebar/ConnectionPane.vue'
|
||||
import ContentServerPane from './components/content/ContentServerPane.vue'
|
||||
import useTabStore from './stores/tab.js'
|
||||
|
@ -25,7 +25,7 @@ const props = defineProps({
|
|||
})
|
||||
|
||||
const data = reactive({
|
||||
navMenuWidth: 60,
|
||||
navMenuWidth: 50,
|
||||
toolbarHeight: 38,
|
||||
})
|
||||
|
||||
|
@ -163,7 +163,7 @@ onMounted(async () => {
|
|||
:style="prefStore.generalFont"
|
||||
class="flex-box-h flex-item-expand"
|
||||
style="--wails-draggable: none">
|
||||
<nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
|
||||
<ribbon v-model:value="tabStore.nav" :width="data.navMenuWidth" />
|
||||
<!-- browser page -->
|
||||
<div v-show="tabStore.nav === 'browser'" class="content-area flex-box-h flex-item-expand">
|
||||
<resizeable-wrapper
|
||||
|
|
|
@ -24,6 +24,7 @@ const props = defineProps({
|
|||
loading: Boolean,
|
||||
border: Boolean,
|
||||
disabled: Boolean,
|
||||
buttonStyle: [String, Object],
|
||||
})
|
||||
|
||||
const hasTooltip = computed(() => {
|
||||
|
@ -39,13 +40,16 @@ const hasTooltip = computed(() => {
|
|||
:disabled="disabled"
|
||||
:focusable="false"
|
||||
:loading="loading"
|
||||
:style="props.buttonStyle"
|
||||
:text="!border"
|
||||
:type="type"
|
||||
@click.prevent="emit('click')">
|
||||
<template #icon>
|
||||
<n-icon :color="props.color || 'currentColor'" :size="props.size">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||
</n-icon>
|
||||
<slot>
|
||||
<n-icon :color="props.color || 'currentColor'" :size="props.size">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||
</n-icon>
|
||||
</slot>
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
|
@ -61,9 +65,11 @@ const hasTooltip = computed(() => {
|
|||
:type="type"
|
||||
@click.prevent="emit('click')">
|
||||
<template #icon>
|
||||
<n-icon :color="props.color || 'currentColor'" :size="props.size">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||
</n-icon>
|
||||
<slot>
|
||||
<n-icon :color="props.color || 'currentColor'" :size="props.size">
|
||||
<component :is="props.icon" :stroke-width="props.strokeWidth" />
|
||||
</n-icon>
|
||||
</slot>
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
import { computed, h, nextTick, reactive, ref } from 'vue'
|
||||
import IconButton from '@/components/common/IconButton.vue'
|
||||
import Refresh from '@/components/icons/Refresh.vue'
|
||||
import { map, size, uniqBy } from 'lodash'
|
||||
import { map, size, split, uniqBy } from 'lodash'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Delete from '@/components/icons/Delete.vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
@ -107,7 +107,7 @@ defineExpose({
|
|||
width: 180,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render({ timestamp }, index) {
|
||||
render: ({ timestamp }, index) => {
|
||||
return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
},
|
||||
|
@ -115,7 +115,7 @@ defineExpose({
|
|||
title: $t('log.server'),
|
||||
key: 'server',
|
||||
filterOptionValue: data.server,
|
||||
filter(value, row) {
|
||||
filter: (value, row) => {
|
||||
return value === '' || row.server === value.toString()
|
||||
},
|
||||
width: 150,
|
||||
|
@ -129,10 +129,10 @@ defineExpose({
|
|||
titleAlign: 'center',
|
||||
filterOptionValue: data.keyword,
|
||||
resizable: true,
|
||||
filter(value, row) {
|
||||
filter: (value, row) => {
|
||||
return value === '' || !!~row.cmd.indexOf(value.toString())
|
||||
},
|
||||
render({ cmd }, index) {
|
||||
render: ({ cmd }, index) => {
|
||||
const cmdList = split(cmd, '\n')
|
||||
if (size(cmdList) > 1) {
|
||||
return h(
|
||||
|
@ -150,7 +150,7 @@ defineExpose({
|
|||
width: 100,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render({ cost }, index) {
|
||||
render: ({ cost }, index) => {
|
||||
const ms = dayjs.duration(cost).asMilliseconds()
|
||||
if (ms < 1000) {
|
||||
return `${ms} ms`
|
||||
|
|
|
@ -1,20 +1,25 @@
|
|||
<script setup>
|
||||
import { computed, defineEmits, defineProps, reactive, ref, watch } from 'vue'
|
||||
import { computed, defineEmits, defineProps, nextTick, reactive, ref, watch } from 'vue'
|
||||
import { useThemeVars } from 'naive-ui'
|
||||
import Save from '@/components/icons/Save.vue'
|
||||
import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
|
||||
import { decodeRedisKey } from '@/utils/key_convert.js'
|
||||
import useBrowserStore from 'stores/browser.js'
|
||||
import FormatSelector from '@/components/content_value/FormatSelector.vue'
|
||||
import IconButton from '@/components/common/IconButton.vue'
|
||||
import FullScreen from '@/components/icons/FullScreen.vue'
|
||||
import WindowClose from '@/components/icons/WindowClose.vue'
|
||||
import Pin from '@/components/icons/Pin.vue'
|
||||
import OffScreen from '@/components/icons/OffScreen.vue'
|
||||
|
||||
const props = defineProps({
|
||||
field: {
|
||||
type: String,
|
||||
type: [String, Number],
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
},
|
||||
keyLabel: {
|
||||
fieldLabel: {
|
||||
type: String,
|
||||
},
|
||||
valueLabel: {
|
||||
|
@ -26,15 +31,25 @@ const props = defineProps({
|
|||
format: {
|
||||
type: String,
|
||||
},
|
||||
fieldReadonly: {
|
||||
type: Boolean,
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
},
|
||||
})
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
const browserStore = useBrowserStore()
|
||||
const emit = defineEmits(['update:field', 'update:value', 'update:decode', 'update:format', 'save', 'cancel'])
|
||||
const model = reactive({
|
||||
field: '',
|
||||
value: '',
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:field',
|
||||
'update:value',
|
||||
'update:decode',
|
||||
'update:format',
|
||||
'update:fullscreen',
|
||||
'save',
|
||||
'close',
|
||||
])
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
|
@ -48,6 +63,7 @@ watch(
|
|||
)
|
||||
|
||||
const loading = ref(false)
|
||||
const pin = ref(false)
|
||||
const viewAs = reactive({
|
||||
field: '',
|
||||
value: '',
|
||||
|
@ -58,13 +74,29 @@ const displayValue = computed(() => {
|
|||
if (loading.value) {
|
||||
return ''
|
||||
}
|
||||
return viewAs.value || decodeRedisKey(props.value)
|
||||
if (viewAs.value == null) {
|
||||
return decodeRedisKey(props.value)
|
||||
}
|
||||
return viewAs.value
|
||||
})
|
||||
|
||||
const btnStyle = computed(() => ({
|
||||
padding: '3px',
|
||||
border: 'solid 1px #0000',
|
||||
borderRadius: '3px',
|
||||
}))
|
||||
|
||||
const pinBtnStyle = computed(() => ({
|
||||
padding: '3px',
|
||||
border: `solid 1px ${themeVars.value.borderColor}`,
|
||||
borderRadius: '3px',
|
||||
backgroundColor: themeVars.value.borderColor,
|
||||
}))
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} decode
|
||||
* @param {string} format
|
||||
* @param {decodeTypes} decode
|
||||
* @param {formatTypes} format
|
||||
* @return {Promise<void>}
|
||||
*/
|
||||
const onFormatChanged = async (decode = '', format = '') => {
|
||||
|
@ -79,7 +111,7 @@ const onFormatChanged = async (decode = '', format = '') => {
|
|||
decode,
|
||||
format,
|
||||
})
|
||||
viewAs.field = props.field
|
||||
viewAs.field = props.field + ''
|
||||
viewAs.value = value
|
||||
viewAs.decode = decode || retDecode
|
||||
viewAs.format = format || retFormat
|
||||
|
@ -93,25 +125,35 @@ const onUpdateValue = (value) => {
|
|||
viewAs.value = value
|
||||
}
|
||||
|
||||
const onToggleFullscreen = () => {
|
||||
emit('update:fullscreen', !!!props.fullscreen)
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
pin.value = false
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const onSave = () => {
|
||||
emit('save', viewAs.field, viewAs.value, viewAs.decode, viewAs.format)
|
||||
if (!pin.value) {
|
||||
nextTick().then(onClose)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="entry-editor flex-box-v">
|
||||
<n-card
|
||||
:title="$t('interface.edit_row')"
|
||||
autofocus
|
||||
closable
|
||||
size="small"
|
||||
style="height: 100%"
|
||||
@close="emit('cancel')">
|
||||
<n-card :title="$t('interface.edit_row')" autofocus size="small" style="height: 100%">
|
||||
<div class="editor-content flex-box-v" style="height: 100%">
|
||||
<!-- field -->
|
||||
<div class="editor-content-item flex-box-v">
|
||||
<div class="editor-content-item-label">{{ props.keyLabel }}</div>
|
||||
<n-input v-model:value="viewAs.field" class="editor-content-item-input" type="text" />
|
||||
<div class="editor-content-item-label">{{ props.fieldLabel }}</div>
|
||||
<n-input
|
||||
v-model:value="viewAs.field"
|
||||
:readonly="props.fieldReadonly"
|
||||
class="editor-content-item-input"
|
||||
type="text" />
|
||||
</div>
|
||||
|
||||
<!-- value -->
|
||||
|
@ -122,18 +164,46 @@ const onSave = () => {
|
|||
autofocus
|
||||
class="flex-item-expand"
|
||||
type="textarea"
|
||||
:resizable="false"
|
||||
@update:value="onUpdateValue" />
|
||||
<format-selector
|
||||
:decode="viewAs.decode"
|
||||
:format="viewAs.format"
|
||||
style="margin-top: 5px"
|
||||
@format-changed="(d, f) => onFormatChanged(d, f)" />
|
||||
</div>
|
||||
</div>
|
||||
<template #header-extra>
|
||||
<n-space :size="5">
|
||||
<icon-button
|
||||
:button-style="pin ? pinBtnStyle : btnStyle"
|
||||
:size="19"
|
||||
:t-tooltip="pin ? 'interface.unpin_edit' : 'interface.pin_edit'"
|
||||
stroke-width="4"
|
||||
@click="pin = !pin">
|
||||
<Pin :inverse="pin" stroke-width="4" />
|
||||
</icon-button>
|
||||
<icon-button
|
||||
:button-style="btnStyle"
|
||||
:icon="props.fullscreen ? OffScreen : FullScreen"
|
||||
:size="18"
|
||||
stroke-width="5"
|
||||
t-tooltip="interface.fullscreen"
|
||||
@click="onToggleFullscreen" />
|
||||
<icon-button
|
||||
:button-style="btnStyle"
|
||||
:icon="WindowClose"
|
||||
:size="18"
|
||||
stroke-width="5"
|
||||
t-tooltip="menu.close"
|
||||
@click="onClose" />
|
||||
</n-space>
|
||||
</template>
|
||||
<template #action>
|
||||
<n-space :wrap="false" :wrap-item="false" justify="end">
|
||||
<n-button ghost type="primary" @click="onSave">
|
||||
<n-button ghost @click="onSave">
|
||||
<template #icon>
|
||||
<n-icon :component="Save"></n-icon>
|
||||
<n-icon :component="Save" />
|
||||
</template>
|
||||
{{ $t('common.update') }}
|
||||
</n-button>
|
||||
|
@ -171,7 +241,7 @@ const onSave = () => {
|
|||
background-color: unset;
|
||||
}
|
||||
|
||||
:deep(.n-card--bordered) {
|
||||
border-radius: 0;
|
||||
}
|
||||
//:deep(.n-card--bordered) {
|
||||
// border-radius: 0;
|
||||
//}
|
||||
</style>
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
<script setup>
|
||||
import { h, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||
import Refresh from '@/components/icons/Refresh.vue'
|
||||
import { debounce, isEmpty, map, size } from 'lodash'
|
||||
import { debounce, isEmpty, map, size, split } from 'lodash'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useThemeVars } from 'naive-ui'
|
||||
import dayjs from 'dayjs'
|
||||
import useBrowserStore from 'stores/browser.js'
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
|
|
|
@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import ContentToolbar from './ContentToolbar.vue'
|
||||
import AddLink from '@/components/icons/AddLink.vue'
|
||||
import { NButton, NIcon, NInput, useThemeVars } from 'naive-ui'
|
||||
import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui'
|
||||
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
|
||||
import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
|
||||
import useDialogStore from 'stores/dialog.js'
|
||||
|
@ -88,8 +88,14 @@ const currentEditRow = reactive({
|
|||
const inEdit = computed(() => {
|
||||
return currentEditRow.no > 0
|
||||
})
|
||||
const fullEdit = ref(false)
|
||||
const inFullEdit = computed(() => {
|
||||
return inEdit.value && fullEdit.value
|
||||
})
|
||||
|
||||
const tableRef = ref(null)
|
||||
const fieldColumn = reactive({
|
||||
const fieldFilterOption = ref(null)
|
||||
const fieldColumn = computed(() => ({
|
||||
key: 'key',
|
||||
title: i18n.t('common.field'),
|
||||
align: 'center',
|
||||
|
@ -98,36 +104,51 @@ const fieldColumn = reactive({
|
|||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
filterOptionValue: null,
|
||||
filter(value, row) {
|
||||
filterOptionValue: fieldFilterOption.value,
|
||||
className: inEdit.value ? 'clickable' : '',
|
||||
filter: (value, row) => {
|
||||
return !!~row.k.indexOf(value.toString())
|
||||
},
|
||||
render(row) {
|
||||
render: (row) => {
|
||||
return decodeRedisKey(row.k)
|
||||
},
|
||||
}))
|
||||
|
||||
const displayCode = computed(() => {
|
||||
return props.format === formatTypes.JSON
|
||||
})
|
||||
const valueColumn = reactive({
|
||||
const valueFilterOption = ref(null)
|
||||
const valueColumn = computed(() => ({
|
||||
key: 'value',
|
||||
title: i18n.t('common.value'),
|
||||
align: 'center',
|
||||
align: displayCode.value ? 'left' : 'center',
|
||||
titleAlign: 'center',
|
||||
resizable: true,
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
ellipsis: displayCode.value
|
||||
? false
|
||||
: {
|
||||
tooltip: true,
|
||||
},
|
||||
filterOptionValue: valueFilterOption.value,
|
||||
className: inEdit.value ? 'clickable' : '',
|
||||
filter: (value, row) => {
|
||||
if (row.dv) {
|
||||
return !!~row.dv.indexOf(value.toString())
|
||||
}
|
||||
return !!~row.v.indexOf(value.toString())
|
||||
},
|
||||
filterOptionValue: null,
|
||||
filter(value, row) {
|
||||
return !!~row.value.indexOf(value.toString())
|
||||
render: (row) => {
|
||||
if (displayCode.value) {
|
||||
return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
|
||||
}
|
||||
return row.dv || row.v
|
||||
},
|
||||
render(row) {
|
||||
return row.dv
|
||||
},
|
||||
})
|
||||
}))
|
||||
|
||||
const startEdit = async ({ no, key, value }) => {
|
||||
currentEditRow.value = value
|
||||
const startEdit = async (no, key, value) => {
|
||||
currentEditRow.no = no
|
||||
currentEditRow.key = key
|
||||
currentEditRow.value = value
|
||||
}
|
||||
|
||||
const saveEdit = async (field, value, decode, format) => {
|
||||
|
@ -162,8 +183,6 @@ const saveEdit = async (field, value, decode, format) => {
|
|||
}
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
} finally {
|
||||
resetEdit()
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -186,16 +205,17 @@ const actionColumn = {
|
|||
return h(EditableTableColumn, {
|
||||
editing: false,
|
||||
bindKey: row.k,
|
||||
onEdit: () => startEdit({ no: index + 1, key: row.k, value: row.v }),
|
||||
onEdit: () => startEdit(index + 1, row.k, row.v),
|
||||
onDelete: async () => {
|
||||
try {
|
||||
const { success, msg } = await browserStore.removeHashField(
|
||||
const { removed, success, msg } = await browserStore.removeHashField(
|
||||
props.name,
|
||||
props.db,
|
||||
keyName.value,
|
||||
row.k,
|
||||
)
|
||||
if (success) {
|
||||
props.value.splice(index, 1)
|
||||
$message.success(i18n.t('dialogue.delete_key_succ', { key: row.k }))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
|
@ -217,12 +237,12 @@ const columns = computed(() => {
|
|||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render(row, index) {
|
||||
render: (row, index) => {
|
||||
return index + 1
|
||||
},
|
||||
},
|
||||
fieldColumn,
|
||||
valueColumn,
|
||||
fieldColumn.value,
|
||||
valueColumn.value,
|
||||
actionColumn,
|
||||
]
|
||||
} else {
|
||||
|
@ -233,7 +253,7 @@ const columns = computed(() => {
|
|||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render(row, index) {
|
||||
render: (row, index) => {
|
||||
if (index + 1 === currentEditRow.no) {
|
||||
// editing row, show edit state
|
||||
return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
|
||||
|
@ -242,7 +262,7 @@ const columns = computed(() => {
|
|||
}
|
||||
},
|
||||
},
|
||||
fieldColumn,
|
||||
fieldColumn.value,
|
||||
]
|
||||
}
|
||||
})
|
||||
|
@ -252,7 +272,7 @@ const rowProps = (row, index) => {
|
|||
onClick: () => {
|
||||
// in edit mode, switch edit row by click
|
||||
if (inEdit.value) {
|
||||
startEdit({ no: index + 1, key: row.k, value: row.v })
|
||||
startEdit(index + 1, row.k, row.v)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
@ -270,15 +290,15 @@ const onAddRow = () => {
|
|||
const filterValue = ref('')
|
||||
const onFilterInput = (val) => {
|
||||
switch (filterType.value) {
|
||||
case filterOption.value[0].value:
|
||||
case filterOption[0].value:
|
||||
// filter field
|
||||
valueColumn.filterOptionValue = null
|
||||
fieldColumn.filterOptionValue = val
|
||||
valueFilterOption.value = null
|
||||
fieldFilterOption.value = val
|
||||
break
|
||||
case filterOption.value[1].value:
|
||||
case filterOption[1].value:
|
||||
// filter value
|
||||
fieldColumn.filterOptionValue = null
|
||||
valueColumn.filterOptionValue = val
|
||||
fieldFilterOption.value = null
|
||||
valueFilterOption.value = val
|
||||
break
|
||||
}
|
||||
}
|
||||
|
@ -288,17 +308,17 @@ const onChangeFilterType = (type) => {
|
|||
}
|
||||
|
||||
const clearFilter = () => {
|
||||
fieldColumn.filterOptionValue = null
|
||||
valueColumn.filterOptionValue = null
|
||||
fieldFilterOption.value = null
|
||||
valueFilterOption.value = null
|
||||
}
|
||||
|
||||
const onUpdateFilter = (filters, sourceColumn) => {
|
||||
switch (filterType.value) {
|
||||
case filterOption.value[0].value:
|
||||
fieldColumn.filterOptionValue = filters[sourceColumn.key]
|
||||
case filterOption[0].value:
|
||||
fieldFilterOption.value = filters[sourceColumn.key]
|
||||
break
|
||||
case filterOption.value[1].value:
|
||||
valueColumn.filterOptionValue = filters[sourceColumn.key]
|
||||
case filterOption[1].value:
|
||||
valueFilterOption.value = filters[sourceColumn.key]
|
||||
break
|
||||
}
|
||||
}
|
||||
|
@ -318,6 +338,7 @@ defineExpose({
|
|||
<template>
|
||||
<div class="content-wrapper flex-box-v">
|
||||
<content-toolbar
|
||||
v-show="!inFullEdit"
|
||||
:db="props.db"
|
||||
:key-code="props.keyCode"
|
||||
:key-path="props.keyPath"
|
||||
|
@ -329,7 +350,7 @@ defineExpose({
|
|||
@delete="emit('delete')"
|
||||
@reload="emit('reload')"
|
||||
@rename="emit('rename')" />
|
||||
<div class="tb2 value-item-part flex-box-h">
|
||||
<div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
|
||||
<div class="flex-box-h">
|
||||
<n-input-group>
|
||||
<n-select
|
||||
|
@ -363,6 +384,7 @@ defineExpose({
|
|||
t-tooltip="interface.load_all_entries"
|
||||
@click="emit('loadall')" />
|
||||
</n-button-group>
|
||||
{{ valueColumn.align }}
|
||||
<n-button :focusable="false" plain @click="onAddRow">
|
||||
<template #icon>
|
||||
<n-icon :component="AddLink" size="18" />
|
||||
|
@ -373,8 +395,9 @@ defineExpose({
|
|||
<div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand">
|
||||
<!-- table -->
|
||||
<n-data-table
|
||||
:key="(row) => row.no"
|
||||
ref="tableRef"
|
||||
v-show="!inFullEdit"
|
||||
:row-key="(row) => row.k"
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
:columns="columns"
|
||||
|
@ -393,15 +416,16 @@ defineExpose({
|
|||
<!-- edit pane -->
|
||||
<content-entry-editor
|
||||
v-show="inEdit"
|
||||
v-model:fullscreen="fullEdit"
|
||||
:decode="currentEditRow.decode"
|
||||
:field="currentEditRow.key"
|
||||
:field-label="$t('common.field')"
|
||||
:format="currentEditRow.format"
|
||||
:key-label="$t('common.field')"
|
||||
:value="currentEditRow.value"
|
||||
:value-label="$t('common.value')"
|
||||
class="flex-item-expand"
|
||||
style="width: 100%"
|
||||
@cancel="resetEdit"
|
||||
@close="resetEdit"
|
||||
@save="saveEdit" />
|
||||
</div>
|
||||
<div class="value-footer flex-box-h">
|
||||
|
|
|
@ -14,6 +14,9 @@ import useBrowserStore from 'stores/browser.js'
|
|||
import LoadList from '@/components/icons/LoadList.vue'
|
||||
import LoadAll from '@/components/icons/LoadAll.vue'
|
||||
import IconButton from '@/components/common/IconButton.vue'
|
||||
import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
|
||||
import FormatSelector from '@/components/content_value/FormatSelector.vue'
|
||||
import Edit from '@/components/icons/Edit.vue'
|
||||
|
||||
const i18n = useI18n()
|
||||
const themeVars = useThemeVars()
|
||||
|
@ -30,10 +33,14 @@ const props = defineProps({
|
|||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
value: Object,
|
||||
value: {
|
||||
// [{v: string|number[], dv: string}]
|
||||
type: Array,
|
||||
default: () => {},
|
||||
},
|
||||
size: Number,
|
||||
length: Number,
|
||||
viewAs: {
|
||||
format: {
|
||||
type: String,
|
||||
default: formatTypes.RAW,
|
||||
},
|
||||
|
@ -58,39 +65,100 @@ const keyName = computed(() => {
|
|||
const browserStore = useBrowserStore()
|
||||
const dialogStore = useDialogStore()
|
||||
const keyType = redisTypes.LIST
|
||||
const currentEditRow = ref({
|
||||
const currentEditRow = reactive({
|
||||
no: 0,
|
||||
value: null,
|
||||
format: formatTypes.RAW,
|
||||
decode: decodeTypes.NONE,
|
||||
})
|
||||
const valueColumn = reactive({
|
||||
key: 'value',
|
||||
title: i18n.t('common.value'),
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
filterOptionValue: null,
|
||||
filter(value, row) {
|
||||
return !!~row.value.indexOf(value.toString())
|
||||
},
|
||||
render: (row) => {
|
||||
const isEdit = currentEditRow.value.no === row.no
|
||||
if (isEdit) {
|
||||
return h(NInput, {
|
||||
value: currentEditRow.value.value,
|
||||
type: 'textarea',
|
||||
autosize: { minRow: 2, maxRows: 5 },
|
||||
style: 'text-align: left;',
|
||||
'onUpdate:value': (val) => {
|
||||
currentEditRow.value.value = val
|
||||
},
|
||||
})
|
||||
} else {
|
||||
return h(NCode, { language: 'plaintext', wordWrap: true }, { default: () => row.value })
|
||||
}
|
||||
},
|
||||
const inEdit = computed(() => {
|
||||
return currentEditRow.no > 0
|
||||
})
|
||||
const fullEdit = ref(false)
|
||||
const inFullEdit = computed(() => {
|
||||
return inEdit.value && fullEdit.value
|
||||
})
|
||||
|
||||
const cancelEdit = () => {
|
||||
currentEditRow.value.no = 0
|
||||
const displayCode = computed(() => {
|
||||
return props.format === formatTypes.JSON
|
||||
})
|
||||
const valueFilterOption = ref(null)
|
||||
const valueColumn = computed(() => ({
|
||||
key: 'value',
|
||||
title: i18n.t('common.value'),
|
||||
align: displayCode.value ? 'left' : 'center',
|
||||
titleAlign: 'center',
|
||||
ellipsis: displayCode.value
|
||||
? false
|
||||
: {
|
||||
tooltip: true,
|
||||
},
|
||||
filterOptionValue: valueFilterOption.value,
|
||||
className: inEdit.value ? 'clickable' : '',
|
||||
filter: (value, row) => {
|
||||
if (row.dv) {
|
||||
return !!~row.dv.indexOf(value.toString())
|
||||
}
|
||||
return !!~row.v.indexOf(value.toString())
|
||||
},
|
||||
render: (row) => {
|
||||
if (displayCode.value) {
|
||||
return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
|
||||
}
|
||||
return row.dv || row.v
|
||||
},
|
||||
}))
|
||||
|
||||
const startEdit = async (no, value) => {
|
||||
currentEditRow.no = no
|
||||
currentEditRow.value = value
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string|number} pos
|
||||
* @param {string} value
|
||||
* @param {decodeTypes} decode
|
||||
* @param {formatTypes} format
|
||||
* @return {Promise<void>}
|
||||
*/
|
||||
const saveEdit = async (pos, value, decode, format) => {
|
||||
try {
|
||||
const index = parseInt(pos) - 1
|
||||
const row = props.value[index]
|
||||
if (row == null) {
|
||||
throw new Error('row not exists')
|
||||
}
|
||||
|
||||
const { updated, success, msg } = await browserStore.updateListItem({
|
||||
server: props.name,
|
||||
db: props.db,
|
||||
key: keyName.value,
|
||||
index,
|
||||
value,
|
||||
decode,
|
||||
format,
|
||||
})
|
||||
if (success) {
|
||||
row.v = updated[index] || ''
|
||||
const { value: displayVal } = await browserStore.convertValue({
|
||||
value: row.v,
|
||||
decode: props.decode,
|
||||
format: props.format,
|
||||
})
|
||||
row.dv = displayVal
|
||||
$message.success(i18n.t('dialogue.save_value_succ'))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
}
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const resetEdit = () => {
|
||||
currentEditRow.no = 0
|
||||
currentEditRow.value = null
|
||||
}
|
||||
|
||||
const actionColumn = {
|
||||
|
@ -100,13 +168,12 @@ const actionColumn = {
|
|||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
fixed: 'right',
|
||||
render: (row) => {
|
||||
render: (row, index) => {
|
||||
return h(EditableTableColumn, {
|
||||
editing: currentEditRow.value.no === row.no,
|
||||
bindKey: '#' + row.no,
|
||||
editing: false,
|
||||
bindKey: `#${index + 1}`,
|
||||
onEdit: () => {
|
||||
currentEditRow.value.no = row.no
|
||||
currentEditRow.value.value = row.value
|
||||
startEdit(index + 1, row.v)
|
||||
},
|
||||
onDelete: async () => {
|
||||
try {
|
||||
|
@ -114,10 +181,11 @@ const actionColumn = {
|
|||
props.name,
|
||||
props.db,
|
||||
keyName.value,
|
||||
row.no - 1,
|
||||
index,
|
||||
)
|
||||
if (success) {
|
||||
$message.success(i18n.t('dialogue.delete_key_succ', { key: '#' + row.no }))
|
||||
props.value.splice(index, 1)
|
||||
$message.success(i18n.t('dialogue.delete_key_succ', { key: `#${index + 1}` }))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
}
|
||||
|
@ -125,58 +193,61 @@ const actionColumn = {
|
|||
$message.error(e.message)
|
||||
}
|
||||
},
|
||||
onSave: async () => {
|
||||
try {
|
||||
const { success, msg } = await browserStore.updateListItem(
|
||||
props.name,
|
||||
props.db,
|
||||
keyName.value,
|
||||
currentEditRow.value.no - 1,
|
||||
currentEditRow.value.value,
|
||||
)
|
||||
if (success) {
|
||||
$message.success(i18n.t('dialogue.save_value_succ'))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
}
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
} finally {
|
||||
currentEditRow.value.no = 0
|
||||
}
|
||||
},
|
||||
onCancel: cancelEdit,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
const columns = computed(() => {
|
||||
return [
|
||||
{
|
||||
key: 'no',
|
||||
title: '#',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
},
|
||||
valueColumn,
|
||||
actionColumn,
|
||||
]
|
||||
if (!inEdit.value) {
|
||||
return [
|
||||
{
|
||||
key: 'no',
|
||||
title: '#',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render: (row, index) => {
|
||||
return index + 1
|
||||
},
|
||||
},
|
||||
valueColumn.value,
|
||||
actionColumn,
|
||||
]
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
key: 'no',
|
||||
title: '#',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render: (row, index) => {
|
||||
if (index + 1 === currentEditRow.no) {
|
||||
// editing row, show edit state
|
||||
return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
|
||||
} else {
|
||||
return index + 1
|
||||
}
|
||||
},
|
||||
},
|
||||
valueColumn.value,
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const tableData = computed(() => {
|
||||
const data = []
|
||||
const len = size(props.value)
|
||||
for (let i = 0; i < len; i++) {
|
||||
data.push({
|
||||
no: i + 1,
|
||||
value: props.value[i],
|
||||
})
|
||||
const rowProps = (row, index) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
// in edit mode, switch edit row by click
|
||||
if (inEdit.value) {
|
||||
startEdit(index + 1, row.v)
|
||||
}
|
||||
},
|
||||
}
|
||||
return data
|
||||
})
|
||||
}
|
||||
|
||||
const entries = computed(() => {
|
||||
const len = size(tableData.value)
|
||||
const len = size(props.value)
|
||||
return `${len} / ${Math.max(len, props.length)}`
|
||||
})
|
||||
|
||||
|
@ -186,21 +257,25 @@ const onAddValue = (value) => {
|
|||
|
||||
const filterValue = ref('')
|
||||
const onFilterInput = (val) => {
|
||||
valueColumn.filterOptionValue = val
|
||||
valueFilterOption.value = val
|
||||
}
|
||||
|
||||
const clearFilter = () => {
|
||||
valueColumn.filterOptionValue = null
|
||||
valueFilterOption.value = null
|
||||
}
|
||||
|
||||
const onUpdateFilter = (filters, sourceColumn) => {
|
||||
valueColumn.filterOptionValue = filters[sourceColumn.key]
|
||||
valueFilterOption.value = filters[sourceColumn.key]
|
||||
}
|
||||
|
||||
const onFormatChanged = (selDecode, selFormat) => {
|
||||
emit('reload', selDecode, selFormat)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reset: () => {
|
||||
clearFilter()
|
||||
cancelEdit()
|
||||
resetEdit()
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
@ -208,6 +283,7 @@ defineExpose({
|
|||
<template>
|
||||
<div class="content-wrapper flex-box-v">
|
||||
<content-toolbar
|
||||
v-show="!inFullEdit"
|
||||
:db="props.db"
|
||||
:key-code="props.keyCode"
|
||||
:key-path="props.keyPath"
|
||||
|
@ -219,7 +295,7 @@ defineExpose({
|
|||
@delete="emit('delete')"
|
||||
@reload="emit('reload')"
|
||||
@rename="emit('rename')" />
|
||||
<div class="tb2 value-item-part flex-box-h">
|
||||
<div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
|
||||
<div class="flex-box-h">
|
||||
<n-input
|
||||
v-model:value="filterValue"
|
||||
|
@ -252,14 +328,17 @@ defineExpose({
|
|||
{{ $t('interface.add_row') }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="value-wrapper value-item-part flex-box-v flex-item-expand">
|
||||
<div class="value-wrapper value-item-part flex-box-h flex-item-expand">
|
||||
<!-- table -->
|
||||
<n-data-table
|
||||
:key="(row) => row.no"
|
||||
v-show="!inFullEdit"
|
||||
:row-key="(row) => row.no"
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:data="props.value"
|
||||
:loading="props.loading"
|
||||
:row-props="rowProps"
|
||||
:single-column="true"
|
||||
:single-line="false"
|
||||
class="flex-item-expand"
|
||||
|
@ -268,12 +347,34 @@ defineExpose({
|
|||
striped
|
||||
virtual-scroll
|
||||
@update:filters="onUpdateFilter" />
|
||||
|
||||
<!-- edit pane -->
|
||||
<content-entry-editor
|
||||
v-show="inEdit"
|
||||
v-model:fullscreen="fullEdit"
|
||||
:decode="currentEditRow.decode"
|
||||
:field="currentEditRow.no"
|
||||
:field-label="$t('common.index')"
|
||||
:field-readonly="true"
|
||||
:format="currentEditRow.format"
|
||||
:value="currentEditRow.value"
|
||||
:value-label="$t('common.value')"
|
||||
class="flex-item-expand"
|
||||
style="width: 100%"
|
||||
@close="resetEdit"
|
||||
@save="saveEdit" />
|
||||
</div>
|
||||
<div class="value-footer flex-box-h">
|
||||
<n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
|
||||
<n-divider v-if="!isNaN(props.length)" vertical />
|
||||
<n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
|
||||
<div class="flex-item-expand"></div>
|
||||
<format-selector
|
||||
v-show="!inEdit"
|
||||
:decode="props.decode"
|
||||
:disabled="inEdit"
|
||||
:format="props.format"
|
||||
@format-changed="onFormatChanged" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -14,6 +14,9 @@ import useBrowserStore from 'stores/browser.js'
|
|||
import LoadList from '@/components/icons/LoadList.vue'
|
||||
import LoadAll from '@/components/icons/LoadAll.vue'
|
||||
import IconButton from '@/components/common/IconButton.vue'
|
||||
import Edit from '@/components/icons/Edit.vue'
|
||||
import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
|
||||
import FormatSelector from '@/components/content_value/FormatSelector.vue'
|
||||
|
||||
const i18n = useI18n()
|
||||
const themeVars = useThemeVars()
|
||||
|
@ -30,10 +33,13 @@ const props = defineProps({
|
|||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
value: Array,
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
size: Number,
|
||||
length: Number,
|
||||
viewAs: {
|
||||
format: {
|
||||
type: String,
|
||||
default: formatTypes.RAW,
|
||||
},
|
||||
|
@ -58,40 +64,100 @@ const keyName = computed(() => {
|
|||
const browserStore = useBrowserStore()
|
||||
const dialogStore = useDialogStore()
|
||||
const keyType = redisTypes.SET
|
||||
const currentEditRow = ref({
|
||||
const currentEditRow = reactive({
|
||||
no: 0,
|
||||
value: null,
|
||||
format: formatTypes.RAW,
|
||||
decode: decodeTypes.NONE,
|
||||
})
|
||||
const inEdit = computed(() => {
|
||||
return currentEditRow.no > 0
|
||||
})
|
||||
const fullEdit = ref(false)
|
||||
const inFullEdit = computed(() => {
|
||||
return inEdit.value && fullEdit.value
|
||||
})
|
||||
|
||||
const valueColumn = reactive({
|
||||
const displayCode = computed(() => {
|
||||
return props.format === formatTypes.JSON
|
||||
})
|
||||
const valueFilterOption = ref(null)
|
||||
const valueColumn = computed(() => ({
|
||||
key: 'value',
|
||||
title: i18n.t('common.value'),
|
||||
align: 'center',
|
||||
align: displayCode.value ? 'left' : 'center',
|
||||
titleAlign: 'center',
|
||||
filterOptionValue: null,
|
||||
filter(value, row) {
|
||||
return !!~row.value.indexOf(value.toString())
|
||||
ellipsis: displayCode.value
|
||||
? false
|
||||
: {
|
||||
tooltip: true,
|
||||
},
|
||||
filterOptionValue: valueFilterOption.value,
|
||||
className: inEdit.value ? 'clickable' : '',
|
||||
filter: (value, row) => {
|
||||
if (row.dv) {
|
||||
return !!~row.dv.indexOf(value.toString())
|
||||
}
|
||||
return !!~row.v.indexOf(value.toString())
|
||||
},
|
||||
render: (row) => {
|
||||
const isEdit = currentEditRow.value.no === row.no
|
||||
if (isEdit) {
|
||||
return h(NInput, {
|
||||
value: currentEditRow.value.value,
|
||||
type: 'textarea',
|
||||
autosize: { minRow: 2, maxRows: 5 },
|
||||
style: 'text-align: left;',
|
||||
'onUpdate:value': (val) => {
|
||||
currentEditRow.value.value = val
|
||||
},
|
||||
})
|
||||
} else {
|
||||
return h(NCode, { language: 'plaintext', wordWrap: true }, { default: () => row.value })
|
||||
if (displayCode.value) {
|
||||
return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
|
||||
}
|
||||
return row.dv || row.v
|
||||
},
|
||||
})
|
||||
}))
|
||||
|
||||
const cancelEdit = () => {
|
||||
currentEditRow.value.no = 0
|
||||
const startEdit = async (no, value) => {
|
||||
currentEditRow.no = no
|
||||
currentEditRow.value = value
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string|number} pos
|
||||
* @param {string} value
|
||||
* @param {decodeTypes} decode
|
||||
* @param {formatTypes} format
|
||||
* @return {Promise<void>}
|
||||
*/
|
||||
const saveEdit = async (pos, value, decode, format) => {
|
||||
try {
|
||||
const index = parseInt(pos) - 1
|
||||
const row = props.value[index]
|
||||
if (row == null) {
|
||||
throw new Error('row not exists')
|
||||
}
|
||||
|
||||
const { added, success, msg } = await browserStore.updateSetItem({
|
||||
server: props.name,
|
||||
db: props.db,
|
||||
key: keyName.value,
|
||||
value: row.v,
|
||||
newValue: value,
|
||||
decode,
|
||||
format,
|
||||
})
|
||||
if (success) {
|
||||
row.v = added
|
||||
const { value: displayVal } = await browserStore.convertValue({
|
||||
value: row.v,
|
||||
decode: props.decode,
|
||||
format: props.format,
|
||||
})
|
||||
row.dv = displayVal
|
||||
$message.success(i18n.t('dialogue.save_value_succ'))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
}
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const resetEdit = () => {
|
||||
currentEditRow.no = 0
|
||||
currentEditRow.value = null
|
||||
}
|
||||
|
||||
const actionColumn = {
|
||||
|
@ -101,14 +167,12 @@ const actionColumn = {
|
|||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
fixed: 'right',
|
||||
render: (row) => {
|
||||
render: (row, index) => {
|
||||
return h(EditableTableColumn, {
|
||||
editing: currentEditRow.value.no === row.no,
|
||||
bindKey: row.value,
|
||||
editing: false,
|
||||
bindKey: `#${index + 1}`,
|
||||
onEdit: () => {
|
||||
currentEditRow.value.no = row.no
|
||||
currentEditRow.value.key = row.key
|
||||
currentEditRow.value.value = row.value
|
||||
startEdit(index + 1, row.v)
|
||||
},
|
||||
onDelete: async () => {
|
||||
try {
|
||||
|
@ -116,10 +180,11 @@ const actionColumn = {
|
|||
props.name,
|
||||
props.db,
|
||||
keyName.value,
|
||||
row.value,
|
||||
row.v,
|
||||
)
|
||||
if (success) {
|
||||
$message.success(i18n.t('dialogue.delete_key_succ', { key: row.value }))
|
||||
props.value.splice(index, 1)
|
||||
$message.success(i18n.t('dialogue.delete_key_succ', { key: row.v }))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
}
|
||||
|
@ -127,58 +192,61 @@ const actionColumn = {
|
|||
$message.error(e.message)
|
||||
}
|
||||
},
|
||||
onSave: async () => {
|
||||
try {
|
||||
const { success, msg } = await browserStore.updateSetItem(
|
||||
props.name,
|
||||
props.db,
|
||||
keyName.value,
|
||||
row.value,
|
||||
currentEditRow.value.value,
|
||||
)
|
||||
if (success) {
|
||||
$message.success(i18n.t('dialogue.save_value_succ'))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
}
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
} finally {
|
||||
currentEditRow.value.no = 0
|
||||
}
|
||||
},
|
||||
onCancel: cancelEdit,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
const columns = computed(() => {
|
||||
return [
|
||||
{
|
||||
key: 'no',
|
||||
title: '#',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
},
|
||||
valueColumn,
|
||||
actionColumn,
|
||||
]
|
||||
if (!inEdit.value) {
|
||||
return [
|
||||
{
|
||||
key: 'no',
|
||||
title: '#',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render: (row, index) => {
|
||||
return index + 1
|
||||
},
|
||||
},
|
||||
valueColumn.value,
|
||||
actionColumn,
|
||||
]
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
key: 'no',
|
||||
title: '#',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render: (row, index) => {
|
||||
if (index + 1 === currentEditRow.no) {
|
||||
// editing row, show edit state
|
||||
return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
|
||||
} else {
|
||||
return index + 1
|
||||
}
|
||||
},
|
||||
},
|
||||
valueColumn.value,
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const tableData = computed(() => {
|
||||
const data = []
|
||||
const len = size(props.value)
|
||||
for (let i = 0; i < len; i++) {
|
||||
data.push({
|
||||
no: i + 1,
|
||||
value: props.value[i],
|
||||
})
|
||||
const rowProps = (row, index) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
// in edit mode, switch edit row by click
|
||||
if (inEdit.value) {
|
||||
startEdit(index + 1, row.v)
|
||||
}
|
||||
},
|
||||
}
|
||||
return data
|
||||
})
|
||||
}
|
||||
|
||||
const entries = computed(() => {
|
||||
const len = size(tableData.value)
|
||||
const len = size(props.value)
|
||||
return `${len} / ${Math.max(len, props.length)}`
|
||||
})
|
||||
|
||||
|
@ -188,21 +256,25 @@ const onAddValue = (value) => {
|
|||
|
||||
const filterValue = ref('')
|
||||
const onFilterInput = (val) => {
|
||||
valueColumn.filterOptionValue = val
|
||||
valueFilterOption.value = val
|
||||
}
|
||||
|
||||
const clearFilter = () => {
|
||||
valueColumn.filterOptionValue = null
|
||||
valueFilterOption.value = null
|
||||
}
|
||||
|
||||
const onUpdateFilter = (filters, sourceColumn) => {
|
||||
valueColumn.filterOptionValue = filters[sourceColumn.key]
|
||||
valueFilterOption.value = filters[sourceColumn.key]
|
||||
}
|
||||
|
||||
const onFormatChanged = (selDecode, selFormat) => {
|
||||
emit('reload', selDecode, selFormat)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reset: () => {
|
||||
clearFilter()
|
||||
cancelEdit()
|
||||
resetEdit()
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
@ -210,6 +282,7 @@ defineExpose({
|
|||
<template>
|
||||
<div class="content-wrapper flex-box-v">
|
||||
<content-toolbar
|
||||
v-show="!inFullEdit"
|
||||
:db="props.db"
|
||||
:key-code="props.keyCode"
|
||||
:key-path="props.keyPath"
|
||||
|
@ -221,7 +294,7 @@ defineExpose({
|
|||
@delete="emit('delete')"
|
||||
@reload="emit('reload')"
|
||||
@rename="emit('rename')" />
|
||||
<div class="tb2 value-item-part flex-box-h">
|
||||
<div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
|
||||
<div class="flex-box-h">
|
||||
<n-input
|
||||
v-model:value="filterValue"
|
||||
|
@ -254,14 +327,17 @@ defineExpose({
|
|||
{{ $t('interface.add_row') }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="value-wrapper value-item-part flex-box-v flex-item-expand">
|
||||
<div class="value-wrapper value-item-part flex-box-h flex-item-expand">
|
||||
<!-- table -->
|
||||
<n-data-table
|
||||
:key="(row) => row.no"
|
||||
v-show="!inFullEdit"
|
||||
:row-key="(row) => row.v"
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:data="props.value"
|
||||
:loading="props.loading"
|
||||
:row-props="rowProps"
|
||||
:single-column="true"
|
||||
:single-line="false"
|
||||
class="flex-item-expand"
|
||||
|
@ -270,12 +346,34 @@ defineExpose({
|
|||
striped
|
||||
virtual-scroll
|
||||
@update:filters="onUpdateFilter" />
|
||||
|
||||
<!-- edit pane -->
|
||||
<content-entry-editor
|
||||
v-show="inEdit"
|
||||
v-model:fullscreen="fullEdit"
|
||||
:decode="currentEditRow.decode"
|
||||
:field="currentEditRow.no"
|
||||
:field-label="$t('common.index')"
|
||||
:field-readonly="true"
|
||||
:format="currentEditRow.format"
|
||||
:value="currentEditRow.value"
|
||||
:value-label="$t('common.value')"
|
||||
class="flex-item-expand"
|
||||
style="width: 100%"
|
||||
@close="resetEdit"
|
||||
@save="saveEdit" />
|
||||
</div>
|
||||
<div class="value-footer flex-box-h">
|
||||
<n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
|
||||
<n-divider v-if="!isNaN(props.length)" vertical />
|
||||
<n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
|
||||
<div class="flex-item-expand"></div>
|
||||
<format-selector
|
||||
v-show="!inEdit"
|
||||
:decode="props.decode"
|
||||
:disabled="inEdit"
|
||||
:format="props.format"
|
||||
@format-changed="onFormatChanged" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { computed, h, reactive, ref } from 'vue'
|
||||
import { computed, h, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import ContentToolbar from './ContentToolbar.vue'
|
||||
import AddLink from '@/components/icons/AddLink.vue'
|
||||
|
@ -73,38 +73,39 @@ const filterType = ref(1)
|
|||
const browserStore = useBrowserStore()
|
||||
const dialogStore = useDialogStore()
|
||||
const keyType = redisTypes.STREAM
|
||||
const idColumn = reactive({
|
||||
const idFilterOption = ref(null)
|
||||
const idColumn = computed(() => ({
|
||||
key: 'id',
|
||||
title: 'ID',
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
resizable: true,
|
||||
})
|
||||
const valueColumn = reactive({
|
||||
filterOptionValue: idFilterOption.value,
|
||||
}))
|
||||
|
||||
const valueFilterOption = ref(null)
|
||||
const valueColumn = computed(() => ({
|
||||
key: 'value',
|
||||
title: i18n.t('common.value'),
|
||||
align: 'center',
|
||||
align: 'left',
|
||||
titleAlign: 'center',
|
||||
resizable: true,
|
||||
filterOptionValue: null,
|
||||
filter(value, row) {
|
||||
filterOptionValue: valueFilterOption.value,
|
||||
filter: (value, row) => {
|
||||
const v = value.toString()
|
||||
if (filterType.value === 1) {
|
||||
// filter key
|
||||
return some(keys(row.value), (key) => includes(key, v))
|
||||
return some(keys(row.v), (key) => includes(key, v))
|
||||
} else {
|
||||
// filter value
|
||||
return some(values(row.value), (val) => includes(val, v))
|
||||
return some(values(row.v), (val) => includes(val, v))
|
||||
}
|
||||
},
|
||||
// sorter: (row1, row2) => row1.value - row2.value,
|
||||
// ellipsis: {
|
||||
// tooltip: true
|
||||
// },
|
||||
render: (row) => {
|
||||
return h(NCode, { language: 'json', wordWrap: true }, { default: () => JSON.stringify(row.value) })
|
||||
return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
|
||||
},
|
||||
})
|
||||
}))
|
||||
const actionColumn = {
|
||||
key: 'action',
|
||||
title: i18n.t('interface.action'),
|
||||
|
@ -136,23 +137,10 @@ const actionColumn = {
|
|||
})
|
||||
},
|
||||
}
|
||||
const columns = reactive([idColumn, valueColumn, actionColumn])
|
||||
|
||||
const tableData = computed(() => {
|
||||
const data = []
|
||||
if (!isEmpty(props.value)) {
|
||||
for (const elem of props.value) {
|
||||
data.push({
|
||||
id: elem.id,
|
||||
value: elem.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
return data
|
||||
})
|
||||
const columns = computed(() => [idColumn.value, valueColumn.value, actionColumn])
|
||||
|
||||
const entries = computed(() => {
|
||||
const len = size(tableData.value)
|
||||
const len = size(props.value)
|
||||
return `${len} / ${Math.max(len, props.length)}`
|
||||
})
|
||||
|
||||
|
@ -162,7 +150,7 @@ const onAddRow = () => {
|
|||
|
||||
const filterValue = ref('')
|
||||
const onFilterInput = (val) => {
|
||||
valueColumn.filterOptionValue = val
|
||||
valueFilterOption.value = val
|
||||
}
|
||||
|
||||
const onChangeFilterType = (type) => {
|
||||
|
@ -170,17 +158,17 @@ const onChangeFilterType = (type) => {
|
|||
}
|
||||
|
||||
const clearFilter = () => {
|
||||
idColumn.filterOptionValue = null
|
||||
valueColumn.filterOptionValue = null
|
||||
idFilterOption.value = null
|
||||
valueFilterOption.value = null
|
||||
}
|
||||
|
||||
const onUpdateFilter = (filters, sourceColumn) => {
|
||||
switch (filterType.value) {
|
||||
case filterOption[0].value:
|
||||
idColumn.filterOptionValue = filters[sourceColumn.key]
|
||||
idFilterOption.value = filters[sourceColumn.key]
|
||||
break
|
||||
case filterOption[1].value:
|
||||
valueColumn.filterOptionValue = filters[sourceColumn.key]
|
||||
valueFilterOption.value = filters[sourceColumn.key]
|
||||
break
|
||||
}
|
||||
}
|
||||
|
@ -249,11 +237,11 @@ defineExpose({
|
|||
</div>
|
||||
<div class="value-wrapper value-item-part flex-box-v flex-item-expand">
|
||||
<n-data-table
|
||||
:key="(row) => row.id"
|
||||
:row-key="(row) => row.id"
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:data="props.value"
|
||||
:loading="props.loading"
|
||||
:single-column="true"
|
||||
:single-line="false"
|
||||
|
|
|
@ -66,14 +66,15 @@ const keyName = computed(() => {
|
|||
|
||||
const loadData = async (reset, full) => {
|
||||
try {
|
||||
const { name, db, view, decodeType, matchPattern, decode, format } = data.value
|
||||
if (!!props.blank) {
|
||||
return
|
||||
}
|
||||
const { name, db, matchPattern, decode, format } = data.value
|
||||
reset = reset === true
|
||||
await browserStore.loadKeyDetail({
|
||||
server: name,
|
||||
db: db,
|
||||
key: keyName.value,
|
||||
viewType: view,
|
||||
decodeType: decodeType,
|
||||
matchPattern: matchPattern,
|
||||
decode: reset ? decodeTypes.NONE : decode,
|
||||
format: reset ? formatTypes.RAW : format,
|
||||
|
@ -163,28 +164,30 @@ watch(() => data.value?.keyPath, initContent)
|
|||
<n-button :focusable="false" @click="onReload">{{ $t('interface.reload') }}</n-button>
|
||||
</template>
|
||||
</n-empty>
|
||||
<keep-alive v-else>
|
||||
<component
|
||||
:is="valueComponents[data.type]"
|
||||
ref="contentRef"
|
||||
:db="data.db"
|
||||
:decode="data.decode"
|
||||
:end="data.end"
|
||||
:format="data.format"
|
||||
:key-code="data.keyCode"
|
||||
:key-path="data.keyPath"
|
||||
:length="data.length"
|
||||
:loading="data.loading === true || initializing"
|
||||
:name="data.name"
|
||||
:size="data.size"
|
||||
:ttl="data.ttl"
|
||||
:value="data.value"
|
||||
@delete="onDelete"
|
||||
@loadall="onLoadAll"
|
||||
@loadmore="onLoadMore"
|
||||
@reload="onReload"
|
||||
@rename="onRename" />
|
||||
</keep-alive>
|
||||
<!-- FIXME: keep alive may cause virtual list null value error. -->
|
||||
<!-- <keep-alive v-else>-->
|
||||
<component
|
||||
:is="valueComponents[data.type]"
|
||||
v-else
|
||||
ref="contentRef"
|
||||
:db="data.db"
|
||||
:decode="data.decode"
|
||||
:end="data.end"
|
||||
:format="data.format"
|
||||
:key-code="data.keyCode"
|
||||
:key-path="data.keyPath"
|
||||
:length="data.length"
|
||||
:loading="data.loading === true || initializing"
|
||||
:name="data.name"
|
||||
:size="data.size"
|
||||
:ttl="data.ttl"
|
||||
:value="data.value"
|
||||
@delete="onDelete"
|
||||
@loadall="onLoadAll"
|
||||
@loadmore="onLoadMore"
|
||||
@reload="onReload"
|
||||
@rename="onRename" />
|
||||
<!-- </keep-alive>-->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
@ -3,10 +3,10 @@ import { computed, h, reactive, ref } from 'vue'
|
|||
import { useI18n } from 'vue-i18n'
|
||||
import ContentToolbar from './ContentToolbar.vue'
|
||||
import AddLink from '@/components/icons/AddLink.vue'
|
||||
import { NButton, NCode, NIcon, NInput, NInputNumber, useThemeVars } from 'naive-ui'
|
||||
import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui'
|
||||
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
|
||||
import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
|
||||
import { isEmpty, size } from 'lodash'
|
||||
import { head, isEmpty, keys, size } from 'lodash'
|
||||
import useDialogStore from 'stores/dialog.js'
|
||||
import bytes from 'bytes'
|
||||
import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
|
||||
|
@ -14,6 +14,9 @@ import useBrowserStore from 'stores/browser.js'
|
|||
import LoadList from '@/components/icons/LoadList.vue'
|
||||
import LoadAll from '@/components/icons/LoadAll.vue'
|
||||
import IconButton from '@/components/common/IconButton.vue'
|
||||
import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
|
||||
import FormatSelector from '@/components/content_value/FormatSelector.vue'
|
||||
import Edit from '@/components/icons/Edit.vue'
|
||||
|
||||
const i18n = useI18n()
|
||||
const themeVars = useThemeVars()
|
||||
|
@ -30,12 +33,15 @@ const props = defineProps({
|
|||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
value: Object,
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
size: Number,
|
||||
length: Number,
|
||||
viewAs: {
|
||||
format: {
|
||||
type: String,
|
||||
default: formatTypes.PLAIN_TEXT,
|
||||
default: formatTypes.RAW,
|
||||
},
|
||||
decode: {
|
||||
type: String,
|
||||
|
@ -70,20 +76,32 @@ const filterType = ref(1)
|
|||
const browserStore = useBrowserStore()
|
||||
const dialogStore = useDialogStore()
|
||||
const keyType = redisTypes.ZSET
|
||||
const currentEditRow = ref({
|
||||
const currentEditRow = reactive({
|
||||
no: 0,
|
||||
score: 0,
|
||||
value: null,
|
||||
format: formatTypes.RAW,
|
||||
decode: decodeTypes.NONE,
|
||||
})
|
||||
const scoreColumn = reactive({
|
||||
|
||||
const inEdit = computed(() => {
|
||||
return currentEditRow.no > 0
|
||||
})
|
||||
const fullEdit = ref(false)
|
||||
const inFullEdit = computed(() => {
|
||||
return inEdit.value && fullEdit.value
|
||||
})
|
||||
|
||||
const scoreFilterOption = ref(null)
|
||||
const scoreColumn = computed(() => ({
|
||||
key: 'score',
|
||||
title: i18n.t('interface.score'),
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
resizable: true,
|
||||
filterOptionValue: null,
|
||||
filterOptionValue: scoreFilterOption.value,
|
||||
filter(value, row) {
|
||||
const score = parseFloat(row.score)
|
||||
const score = parseFloat(row.s)
|
||||
if (isNaN(score)) {
|
||||
return true
|
||||
}
|
||||
|
@ -110,62 +128,95 @@ const scoreColumn = reactive({
|
|||
}
|
||||
}
|
||||
} else {
|
||||
return !!~row.value.indexOf(value.toString())
|
||||
return !!~row.v.indexOf(value.toString())
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
render: (row) => {
|
||||
const isEdit = currentEditRow.value.no === row.no
|
||||
if (isEdit) {
|
||||
return h(NInputNumber, {
|
||||
value: currentEditRow.value.score,
|
||||
'onUpdate:value': (val) => {
|
||||
currentEditRow.value.score = val
|
||||
},
|
||||
})
|
||||
} else {
|
||||
return row.score
|
||||
}
|
||||
return row.s
|
||||
},
|
||||
}))
|
||||
|
||||
const displayCode = computed(() => {
|
||||
return props.format === formatTypes.JSON
|
||||
})
|
||||
const valueColumn = reactive({
|
||||
const valueFilterOption = ref(null)
|
||||
const valueColumn = computed(() => ({
|
||||
key: 'value',
|
||||
title: i18n.t('common.value'),
|
||||
align: 'center',
|
||||
align: displayCode.value ? 'left' : 'center',
|
||||
titleAlign: 'center',
|
||||
resizable: true,
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
filterOptionValue: null,
|
||||
ellipsis: displayCode.value
|
||||
? false
|
||||
: {
|
||||
tooltip: true,
|
||||
},
|
||||
filterOptionValue: valueFilterOption.value,
|
||||
className: inEdit.value ? 'clickable' : '',
|
||||
filter(value, row) {
|
||||
return !!~row.value.indexOf(value.toString())
|
||||
if (row.dv) {
|
||||
return !!~row.dv.indexOf(value.toString())
|
||||
}
|
||||
return !!~row.v.indexOf(value.toString())
|
||||
},
|
||||
// sorter: (row1, row2) => row1.value - row2.value,
|
||||
// ellipsis: {
|
||||
// tooltip: true
|
||||
// },
|
||||
render: (row) => {
|
||||
const isEdit = currentEditRow.value.no === row.no
|
||||
if (isEdit) {
|
||||
return h(NInput, {
|
||||
value: currentEditRow.value.value,
|
||||
type: 'textarea',
|
||||
autosize: { minRow: 2, maxRows: 5 },
|
||||
style: 'text-align: left;',
|
||||
'onUpdate:value': (val) => {
|
||||
currentEditRow.value.value = val
|
||||
},
|
||||
})
|
||||
} else {
|
||||
return h(NCode, { language: 'plaintext', wordWrap: true }, { default: () => row.value })
|
||||
if (displayCode.value) {
|
||||
return h(NCode, { language: 'json', wordWrap: true, code: row.dv || row.v })
|
||||
}
|
||||
return row.dv || row.v
|
||||
},
|
||||
})
|
||||
}))
|
||||
|
||||
const cancelEdit = () => {
|
||||
currentEditRow.value.no = 0
|
||||
const startEdit = async (no, score, value) => {
|
||||
currentEditRow.no = no
|
||||
currentEditRow.score = score
|
||||
currentEditRow.value = value
|
||||
}
|
||||
|
||||
const saveEdit = async (field, value, decode, format) => {
|
||||
try {
|
||||
const score = parseFloat(field)
|
||||
const row = props.value[currentEditRow.no - 1]
|
||||
if (row == null) {
|
||||
throw new Error('row not exists')
|
||||
}
|
||||
|
||||
const { updated, success, msg } = await browserStore.updateZSetItem({
|
||||
server: props.name,
|
||||
db: props.db,
|
||||
key: keyName.value,
|
||||
value: row.v,
|
||||
newValue: value,
|
||||
score,
|
||||
decode,
|
||||
format,
|
||||
})
|
||||
if (success) {
|
||||
row.v = head(keys(updated))
|
||||
row.s = updated[row.v]
|
||||
const { value: displayVal } = await browserStore.convertValue({
|
||||
value: row.v,
|
||||
decode: props.decode,
|
||||
format: props.format,
|
||||
})
|
||||
row.dv = displayVal
|
||||
$message.success(i18n.t('dialogue.save_value_succ'))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
}
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const resetEdit = () => {
|
||||
currentEditRow.no = 0
|
||||
currentEditRow.score = 0
|
||||
currentEditRow.value = null
|
||||
currentEditRow.format = formatTypes.RAW
|
||||
currentEditRow.decode = decodeTypes.NONE
|
||||
}
|
||||
|
||||
const actionColumn = {
|
||||
|
@ -175,25 +226,22 @@ const actionColumn = {
|
|||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
fixed: 'right',
|
||||
render: (row) => {
|
||||
render: (row, index) => {
|
||||
return h(EditableTableColumn, {
|
||||
editing: currentEditRow.value.no === row.no,
|
||||
bindKey: row.value,
|
||||
onEdit: () => {
|
||||
currentEditRow.value.no = row.no
|
||||
currentEditRow.value.value = row.value
|
||||
currentEditRow.value.score = row.score
|
||||
},
|
||||
editing: false,
|
||||
bindKey: row.v,
|
||||
onEdit: () => startEdit(index + 1, row.s, row.v),
|
||||
onDelete: async () => {
|
||||
try {
|
||||
const { success, msg } = await browserStore.removeZSetItem(
|
||||
props.name,
|
||||
props.db,
|
||||
keyName.value,
|
||||
row.value,
|
||||
row.v,
|
||||
)
|
||||
if (success) {
|
||||
$message.success(i18n.t('dialogue.delete_key_succ', { key: row.value }))
|
||||
props.value.splice(index, 1)
|
||||
$message.success(i18n.t('dialogue.delete_key_succ', { key: row.v }))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
}
|
||||
|
@ -201,66 +249,51 @@ const actionColumn = {
|
|||
$message.error(e.message)
|
||||
}
|
||||
},
|
||||
onSave: async () => {
|
||||
try {
|
||||
const newValue = currentEditRow.value.value
|
||||
if (isEmpty(newValue)) {
|
||||
$message.error(i18n.t('dialogue.spec_field_required', { key: i18n.t('common.value') }))
|
||||
return
|
||||
}
|
||||
const { success, msg } = await browserStore.updateZSetItem(
|
||||
props.name,
|
||||
props.db,
|
||||
keyName.value,
|
||||
row.value,
|
||||
newValue,
|
||||
currentEditRow.value.score,
|
||||
)
|
||||
if (success) {
|
||||
$message.success(i18n.t('dialogue.save_value_succ'))
|
||||
} else {
|
||||
$message.error(msg)
|
||||
}
|
||||
} catch (e) {
|
||||
$message.error(e.message)
|
||||
} finally {
|
||||
currentEditRow.value.no = 0
|
||||
}
|
||||
},
|
||||
onCancel: cancelEdit,
|
||||
})
|
||||
},
|
||||
}
|
||||
const columns = reactive([
|
||||
{
|
||||
key: 'no',
|
||||
title: '#',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
},
|
||||
valueColumn,
|
||||
scoreColumn,
|
||||
actionColumn,
|
||||
])
|
||||
|
||||
const tableData = computed(() => {
|
||||
const data = []
|
||||
if (!isEmpty(props.value)) {
|
||||
let index = 0
|
||||
for (const elem of props.value) {
|
||||
data.push({
|
||||
no: ++index,
|
||||
value: elem.value,
|
||||
score: elem.score,
|
||||
})
|
||||
}
|
||||
const columns = computed(() => {
|
||||
if (!inEdit.value) {
|
||||
return [
|
||||
{
|
||||
key: 'no',
|
||||
title: '#',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render: (row, index) => {
|
||||
return index + 1
|
||||
},
|
||||
},
|
||||
valueColumn.value,
|
||||
scoreColumn.value,
|
||||
actionColumn,
|
||||
]
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
key: 'no',
|
||||
title: '#',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
titleAlign: 'center',
|
||||
render: (row, index) => {
|
||||
if (index + 1 === currentEditRow.no) {
|
||||
// editing row, show edit state
|
||||
return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
|
||||
} else {
|
||||
return index + 1
|
||||
}
|
||||
},
|
||||
},
|
||||
valueColumn.value,
|
||||
]
|
||||
}
|
||||
return data
|
||||
})
|
||||
|
||||
const entries = computed(() => {
|
||||
const len = size(tableData.value)
|
||||
const len = size(props.value)
|
||||
return `${len} / ${Math.max(len, props.length)}`
|
||||
})
|
||||
|
||||
|
@ -273,13 +306,13 @@ const onFilterInput = (val) => {
|
|||
switch (filterType.value) {
|
||||
case filterOption[0].value:
|
||||
// filter value
|
||||
scoreColumn.filterOptionValue = null
|
||||
valueColumn.filterOptionValue = val
|
||||
scoreFilterOption.value = null
|
||||
valueFilterOption.value = val
|
||||
break
|
||||
case filterOption[1].value:
|
||||
// filter score
|
||||
valueColumn.filterOptionValue = null
|
||||
scoreColumn.filterOptionValue = val
|
||||
valueFilterOption.value = null
|
||||
scoreFilterOption.value = val
|
||||
break
|
||||
}
|
||||
}
|
||||
|
@ -289,27 +322,31 @@ const onChangeFilterType = (type) => {
|
|||
}
|
||||
|
||||
const clearFilter = () => {
|
||||
valueColumn.filterOptionValue = null
|
||||
scoreColumn.filterOptionValue = null
|
||||
valueFilterOption.value = null
|
||||
scoreFilterOption.value = null
|
||||
}
|
||||
|
||||
const onUpdateFilter = (filters, sourceColumn) => {
|
||||
switch (filterType.value) {
|
||||
case filterOption[0].value:
|
||||
// filter value
|
||||
valueColumn.filterOptionValue = filters[sourceColumn.key]
|
||||
valueFilterOption.value = filters[sourceColumn.key]
|
||||
break
|
||||
case filterOption[1].value:
|
||||
// filter score
|
||||
scoreColumn.filterOptionValue = filters[sourceColumn.key]
|
||||
scoreFilterOption.value = filters[sourceColumn.key]
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const onFormatChanged = (selDecode, selFormat) => {
|
||||
emit('reload', selDecode, selFormat)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reset: () => {
|
||||
clearFilter()
|
||||
cancelEdit()
|
||||
resetEdit()
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
@ -317,6 +354,7 @@ defineExpose({
|
|||
<template>
|
||||
<div class="content-wrapper flex-box-v">
|
||||
<content-toolbar
|
||||
v-show="!inFullEdit"
|
||||
:db="props.db"
|
||||
:key-code="props.keyCode"
|
||||
:key-path="props.keyPath"
|
||||
|
@ -328,7 +366,7 @@ defineExpose({
|
|||
@delete="emit('delete')"
|
||||
@reload="emit('reload')"
|
||||
@rename="emit('rename')" />
|
||||
<div class="tb2 value-item-part flex-box-h">
|
||||
<div v-show="!inFullEdit" class="tb2 value-item-part flex-box-h">
|
||||
<div class="flex-box-h">
|
||||
<n-input-group>
|
||||
<n-select
|
||||
|
@ -374,13 +412,15 @@ defineExpose({
|
|||
{{ $t('interface.add_row') }}
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="value-wrapper value-item-part flex-box-v flex-item-expand">
|
||||
<div class="value-wrapper value-item-part flex-box-h flex-item-expand">
|
||||
<!-- table -->
|
||||
<n-data-table
|
||||
:key="(row) => row.no"
|
||||
v-show="!inFullEdit"
|
||||
:row-key="(row) => row.v"
|
||||
:bordered="false"
|
||||
:bottom-bordered="false"
|
||||
:columns="columns"
|
||||
:data="tableData"
|
||||
:data="props.value"
|
||||
:loading="props.loading"
|
||||
:single-column="true"
|
||||
:single-line="false"
|
||||
|
@ -390,12 +430,33 @@ defineExpose({
|
|||
striped
|
||||
virtual-scroll
|
||||
@update:filters="onUpdateFilter" />
|
||||
|
||||
<!-- edit pane -->
|
||||
<content-entry-editor
|
||||
v-show="inEdit"
|
||||
v-model:fullscreen="fullEdit"
|
||||
:decode="currentEditRow.decode"
|
||||
:field="currentEditRow.score"
|
||||
:field-label="$t('interface.score')"
|
||||
:format="currentEditRow.format"
|
||||
:value="currentEditRow.value"
|
||||
:value-label="$t('common.value')"
|
||||
class="flex-item-expand"
|
||||
style="width: 100%"
|
||||
@close="resetEdit"
|
||||
@save="saveEdit" />
|
||||
</div>
|
||||
<div class="value-footer flex-box-h">
|
||||
<n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
|
||||
<n-divider v-if="!isNaN(props.length)" vertical />
|
||||
<n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
|
||||
<div class="flex-item-expand"></div>
|
||||
<format-selector
|
||||
v-show="!inEdit"
|
||||
:decode="props.decode"
|
||||
:disabled="inEdit"
|
||||
:format="props.format"
|
||||
@format-changed="onFormatChanged" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -36,7 +36,7 @@ const onFormatChanged = (selDecode, selFormat) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<n-space :size="0" :wrap="false" :wrap-item="false" align="center" justify="start" style="margin-top: 5px">
|
||||
<n-space :size="0" :wrap="false" :wrap-item="false" align="center" justify="start">
|
||||
<dropdown-selector
|
||||
:default="formatTypes.RAW"
|
||||
:disabled="props.disabled"
|
||||
|
|
|
@ -95,9 +95,9 @@ const onAdd = async () => {
|
|||
{
|
||||
let data
|
||||
if (newForm.opType === 1) {
|
||||
data = await browserStore.prependListItem(server, db, keyName, value)
|
||||
data = await browserStore.prependListItem({ server, db, key: keyName, values: value })
|
||||
} else {
|
||||
data = await browserStore.appendListItem(server, db, keyName, value)
|
||||
data = await browserStore.appendListItem({ server, db, key: keyName, values: value })
|
||||
}
|
||||
const { success, msg } = data
|
||||
if (success) {
|
||||
|
|
|
@ -1,6 +1,4 @@
|
|||
<script setup>
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const props = defineProps({
|
||||
inverse: {
|
||||
type: Boolean,
|
||||
|
|
|
@ -1,6 +1,4 @@
|
|||
<script setup>
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const props = defineProps({
|
||||
inverse: {
|
||||
type: Boolean,
|
||||
|
|
|
@ -1,6 +1,4 @@
|
|||
<script setup>
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const props = defineProps({
|
||||
inverse: {
|
||||
type: Boolean,
|
||||
|
|
|
@ -1,6 +1,4 @@
|
|||
<script setup>
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
type: Boolean,
|
||||
|
|
|
@ -0,0 +1,39 @@
|
|||
<script setup>
|
||||
const props = defineProps({
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 3,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M33 6H42V15"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M42 33V42H33"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M15 42H6V33"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M6 15V6H15"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
|
@ -0,0 +1,39 @@
|
|||
<script setup>
|
||||
const props = defineProps({
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 3,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M33 6V15H42"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M15 6V15H6"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M15 42V33H6"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M33 42V33H41.8995"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
|
@ -0,0 +1,32 @@
|
|||
<script setup>
|
||||
const props = defineProps({
|
||||
inverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 3,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#icon-36c2b93b4e0022c)">
|
||||
<path
|
||||
:fill="inverse ? 'currentColor' : 'none'"
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M10.6963 17.5042C13.3347 14.8657 16.4701 14.9387 19.8781 16.8076L32.62 9.74509L31.8989 4.78683L43.2126 16.1005L38.2656 15.3907L31.1918 28.1214C32.9752 31.7589 33.1337 34.6647 30.4953 37.3032C30.4953 37.3032 26.235 33.0429 22.7171 29.525L6.44305 41.5564L18.4382 25.2461C14.9202 21.7281 10.6963 17.5042 10.6963 17.5042Z"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="icon-36c2b93b4e0022c">
|
||||
<rect fill="#FFF" height="48" width="48" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
|
@ -1,6 +1,4 @@
|
|||
<script setup>
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const props = defineProps({
|
||||
inverse: {
|
||||
type: Boolean,
|
||||
|
|
|
@ -1,6 +1,4 @@
|
|||
<script setup>
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const props = defineProps({
|
||||
inverse: {
|
||||
type: Boolean,
|
||||
|
|
|
@ -4,13 +4,29 @@ const props = defineProps({
|
|||
type: [Number, String],
|
||||
default: 14,
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 3,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg :height="props.size" :width="props.size" fill="none" viewBox="0 0 48 48">
|
||||
<path d="M8 8L40 40" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
|
||||
<path d="M8 40L40 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M8 8L40 40"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="4" />
|
||||
<path
|
||||
:stroke-width="props.strokeWidth"
|
||||
d="M8 40L40 8"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="4" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -29,7 +29,7 @@ const props = defineProps({
|
|||
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
const iconSize = computed(() => Math.floor(props.width * 0.4))
|
||||
const iconSize = computed(() => Math.floor(props.width * 0.45))
|
||||
const renderIcon = (icon) => {
|
||||
return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
|
||||
}
|
||||
|
@ -41,18 +41,18 @@ const menuOptions = computed(() => {
|
|||
{
|
||||
label: i18n.t('ribbon.browser'),
|
||||
key: 'browser',
|
||||
icon: renderIcon(Database),
|
||||
icon: Database,
|
||||
show: browserStore.anyConnectionOpened,
|
||||
},
|
||||
{
|
||||
label: i18n.t('ribbon.server'),
|
||||
key: 'server',
|
||||
icon: renderIcon(Server),
|
||||
icon: Server,
|
||||
},
|
||||
{
|
||||
label: i18n.t('ribbon.log'),
|
||||
key: 'log',
|
||||
icon: renderIcon(Record),
|
||||
icon: Record,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
@ -115,18 +115,30 @@ const exThemeVars = computed(() => {
|
|||
|
||||
<template>
|
||||
<div
|
||||
id="app-nav-menu"
|
||||
id="app-ribbon"
|
||||
:style="{
|
||||
width: props.width + 'px',
|
||||
minWidth: props.width + 'px',
|
||||
}"
|
||||
class="flex-box-v">
|
||||
<n-menu
|
||||
:collapsed="true"
|
||||
:collapsed-icon-size="iconSize"
|
||||
:collapsed-width="props.width"
|
||||
:options="menuOptions"
|
||||
:value="props.value"
|
||||
@update:value="(val) => emit('update:value', val)" />
|
||||
<div class="ribbon-wrapper flex-box-v">
|
||||
<div
|
||||
v-for="(m, i) in menuOptions"
|
||||
v-show="m.show !== false"
|
||||
:key="i"
|
||||
:class="{ 'ribbon-item-active': props.value === m.key }"
|
||||
class="ribbon-item clickable"
|
||||
@click="emit('update:value', m.key)">
|
||||
<n-tooltip :delay="2" :show-arrow="false" placement="right">
|
||||
<template #trigger>
|
||||
<n-icon :size="iconSize">
|
||||
<component :is="m.icon" :stroke-width="3.5"></component>
|
||||
</n-icon>
|
||||
</template>
|
||||
{{ m.label }}
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-item-expand"></div>
|
||||
<div class="nav-menu-item flex-box-v">
|
||||
<n-dropdown
|
||||
|
@ -142,11 +154,69 @@ const exThemeVars = computed(() => {
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#app-nav-menu {
|
||||
#app-ribbon {
|
||||
//height: 100vh;
|
||||
border-right: v-bind('exThemeVars.splitColor') solid 1px;
|
||||
background-color: v-bind('exThemeVars.sidebarColor');
|
||||
background-color: v-bind('exThemeVars.ribbonColor');
|
||||
box-sizing: border-box;
|
||||
color: v-bind('themeVars.textColor2');
|
||||
|
||||
.ribbon-wrapper {
|
||||
gap: 2px;
|
||||
margin-top: 5px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding-right: 3px;
|
||||
|
||||
.ribbon-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
color: v-bind('themeVars.textColor3');
|
||||
//border-left: 5px solid #000;
|
||||
border-radius: v-bind('themeVars.borderRadius');
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: v-bind('themeVars.primaryColor');
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
left: 0;
|
||||
top: 24%;
|
||||
bottom: 24%;
|
||||
border-radius: 9999px;
|
||||
content: '';
|
||||
background-color: v-bind('themeVars.primaryColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ribbon-item-active {
|
||||
//background-color: v-bind('exThemeVars.ribbonActiveColor');
|
||||
color: v-bind('themeVars.primaryColor');
|
||||
|
||||
&:hover {
|
||||
color: v-bind('themeVars.primaryColor') !important;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
left: 0;
|
||||
top: 24%;
|
||||
bottom: 24%;
|
||||
border-radius: 9999px;
|
||||
content: '';
|
||||
background-color: v-bind('themeVars.primaryColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu-item {
|
||||
align-items: center;
|
|
@ -16,7 +16,8 @@
|
|||
"all": "All",
|
||||
"key": "Key",
|
||||
"value": "Value",
|
||||
"field": "Field"
|
||||
"field": "Field",
|
||||
"index": "Position"
|
||||
},
|
||||
"preferences": {
|
||||
"name": "Preferences",
|
||||
|
@ -74,6 +75,10 @@
|
|||
"add_row": "Add Row",
|
||||
"edit_row": "Edit Row",
|
||||
"delete_row": "Delete Row",
|
||||
"fullscreen": "Full Screen",
|
||||
"offscreen": "Exit Full Screen",
|
||||
"pin_edit": "Pin Editor(Do not close after save)",
|
||||
"unpin_edit": "Cancel Pin",
|
||||
"search": "Search",
|
||||
"filter_field": "Filter Field",
|
||||
"filter_value": "Filter Value",
|
||||
|
|
|
@ -16,7 +16,8 @@
|
|||
"all": "Tudo",
|
||||
"key": "Chave",
|
||||
"value": "Valor",
|
||||
"field": "Campo"
|
||||
"field": "Campo",
|
||||
"index": "Posição"
|
||||
},
|
||||
"preferences": {
|
||||
"name": "Preferências",
|
||||
|
|
|
@ -16,7 +16,8 @@
|
|||
"all": "全部",
|
||||
"key": "键",
|
||||
"value": "值",
|
||||
"field": "字段"
|
||||
"field": "字段",
|
||||
"index": "位置"
|
||||
},
|
||||
"preferences": {
|
||||
"name": "偏好设置",
|
||||
|
@ -74,6 +75,10 @@
|
|||
"add_row": "插入行",
|
||||
"edit_row": "编辑行",
|
||||
"delete_row": "删除行",
|
||||
"fullscreen": "全屏显示",
|
||||
"offscreen": "退出全屏显示",
|
||||
"pin_edit": "固定编辑框(保存后不关闭)",
|
||||
"unpin_edit": "取消固定",
|
||||
"search": "搜索",
|
||||
"filter_field": "筛选字段",
|
||||
"filter_value": "筛选值",
|
||||
|
|
|
@ -35,9 +35,9 @@ async function setupApp() {
|
|||
} catch (e) {}
|
||||
})
|
||||
}
|
||||
app.config.warnHandler = (message) => {
|
||||
console.warn(message)
|
||||
}
|
||||
// app.config.warnHandler = (message) => {
|
||||
// console.warn(message)
|
||||
// }
|
||||
app.mount('#app')
|
||||
}
|
||||
|
||||
|
|
|
@ -6,6 +6,7 @@ import {
|
|||
isEmpty,
|
||||
join,
|
||||
last,
|
||||
map,
|
||||
remove,
|
||||
set,
|
||||
size,
|
||||
|
@ -1082,21 +1083,21 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* remove hash field
|
||||
* @param {string} connName
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string} key
|
||||
* @param {string|number[]} key
|
||||
* @param {string} field
|
||||
* @returns {Promise<{[msg]: {}, success: boolean, [removed]: string[]}>}
|
||||
*/
|
||||
async removeHashField(connName, db, key, field) {
|
||||
async removeHashField(server, db, key, field) {
|
||||
try {
|
||||
const { data, success, msg } = await SetHashValue(connName, db, key, field, '', '')
|
||||
const { data, success, msg } = await SetHashValue({ server, db, key, field, newField: '' })
|
||||
if (success) {
|
||||
const { removed = [] } = data
|
||||
if (!isEmpty(removed)) {
|
||||
const tab = useTabStore()
|
||||
tab.removeValueEntries({ server: connName, db, key, type: 'hash', entries: removed })
|
||||
}
|
||||
// if (!isEmpty(removed)) {
|
||||
// const tab = useTabStore()
|
||||
// tab.removeValueEntries({ server, db, key, type: 'hash', entries: removed })
|
||||
// }
|
||||
return { success, removed }
|
||||
} else {
|
||||
return { success, msg }
|
||||
|
@ -1125,25 +1126,27 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* prepend item to head of list
|
||||
* @param connName
|
||||
* @param db
|
||||
* @param key
|
||||
* @param values
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string|number[]} key
|
||||
* @param {string[]} values
|
||||
* @returns {Promise<{[msg]: string, success: boolean, [item]: []}>}
|
||||
*/
|
||||
async prependListItem(connName, db, key, values) {
|
||||
async prependListItem({ server, db, key, values }) {
|
||||
try {
|
||||
const { data, success, msg } = await AddListItem(connName, db, key, 0, values)
|
||||
const { data, success, msg } = await AddListItem(server, db, key, 0, values)
|
||||
if (success) {
|
||||
const { left = [] } = data
|
||||
if (!isEmpty(left)) {
|
||||
// TODO: convert to display value
|
||||
const entries = map(left, (v) => ({ v }))
|
||||
const tab = useTabStore()
|
||||
tab.upsertValueEntries({
|
||||
server: connName,
|
||||
server: server,
|
||||
db,
|
||||
key,
|
||||
type: 'list',
|
||||
entries: right,
|
||||
entries,
|
||||
prepend: true,
|
||||
})
|
||||
}
|
||||
|
@ -1158,25 +1161,26 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* append item to tail of list
|
||||
* @param connName
|
||||
* @param db
|
||||
* @param key
|
||||
* @param values
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string|number[]} key
|
||||
* @param {string[]} values
|
||||
* @returns {Promise<{[msg]: string, success: boolean, [item]: any[]}>}
|
||||
*/
|
||||
async appendListItem(connName, db, key, values) {
|
||||
async appendListItem({ server, db, key, values }) {
|
||||
try {
|
||||
const { data, success, msg } = await AddListItem(connName, db, key, 1, values)
|
||||
const { data, success, msg } = await AddListItem(server, db, key, 1, values)
|
||||
if (success) {
|
||||
const { right = [] } = data
|
||||
if (!isEmpty(right)) {
|
||||
const entries = map(right, (v) => ({ v }))
|
||||
const tab = useTabStore()
|
||||
tab.upsertValueEntries({
|
||||
server: connName,
|
||||
server: server,
|
||||
db,
|
||||
key,
|
||||
type: 'list',
|
||||
entries: right,
|
||||
entries,
|
||||
prepend: false,
|
||||
})
|
||||
}
|
||||
|
@ -1191,28 +1195,30 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* update value of list item by index
|
||||
* @param {string} connName
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string|number[]} key
|
||||
* @param {number} index
|
||||
* @param {string} value
|
||||
* @param {string|number[]} value
|
||||
* @param {decodeTypes} decode
|
||||
* @param {formatTypes} format
|
||||
* @returns {Promise<{[msg]: string, success: boolean, [updated]: {}}>}
|
||||
*/
|
||||
async updateListItem(connName, db, key, index, value) {
|
||||
async updateListItem({ server, db, key, index, value, decode = decodeTypes.NONE, format = formatTypes.RAW }) {
|
||||
try {
|
||||
const { data, success, msg } = await SetListItem(connName, db, key, index, value)
|
||||
const { data, success, msg } = await SetListItem({ server, db, key, index, value, decode, format })
|
||||
if (success) {
|
||||
const { updated = {} } = data
|
||||
if (!isEmpty(updated)) {
|
||||
const tab = useTabStore()
|
||||
tab.upsertValueEntries({
|
||||
server: connName,
|
||||
db,
|
||||
key,
|
||||
type: 'list',
|
||||
entries: updated,
|
||||
})
|
||||
}
|
||||
// if (!isEmpty(updated)) {
|
||||
// const tab = useTabStore()
|
||||
// tab.upsertValueEntries({
|
||||
// server,
|
||||
// db,
|
||||
// key,
|
||||
// type: 'list',
|
||||
// entries: updated,
|
||||
// })
|
||||
// }
|
||||
return { success, updated }
|
||||
} else {
|
||||
return { success, msg }
|
||||
|
@ -1224,27 +1230,27 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* remove list item
|
||||
* @param {string} connName
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string|number[]} key
|
||||
* @param {number} index
|
||||
* @returns {Promise<{[msg]: string, success: boolean, [removed]: string[]}>}
|
||||
*/
|
||||
async removeListItem(connName, db, key, index) {
|
||||
async removeListItem(server, db, key, index) {
|
||||
try {
|
||||
const { data, success, msg } = await SetListItem(connName, db, key, index, '')
|
||||
const { data, success, msg } = await SetListItem({ server, db, key, index })
|
||||
if (success) {
|
||||
const { removed = [] } = data
|
||||
if (!isEmpty(removed)) {
|
||||
const tab = useTabStore()
|
||||
tab.removeValueEntries({
|
||||
server: connName,
|
||||
db,
|
||||
key,
|
||||
type: 'list',
|
||||
entries: removed,
|
||||
})
|
||||
}
|
||||
// if (!isEmpty(removed)) {
|
||||
// const tab = useTabStore()
|
||||
// tab.removeValueEntries({
|
||||
// server,
|
||||
// db,
|
||||
// key,
|
||||
// type: 'list',
|
||||
// entries: removed,
|
||||
// })
|
||||
// }
|
||||
return { success, removed }
|
||||
} else {
|
||||
return { success, msg }
|
||||
|
@ -1264,7 +1270,7 @@ const useBrowserStore = defineStore('browser', {
|
|||
*/
|
||||
async addSetItem(connName, db, key, value) {
|
||||
try {
|
||||
if (!value instanceof Array) {
|
||||
if ((!value) instanceof Array) {
|
||||
value = [value]
|
||||
}
|
||||
const { data, success, msg } = await SetSetItem(connName, db, key, false, value)
|
||||
|
@ -1282,20 +1288,23 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* update value of set item
|
||||
* @param {string} connName
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string|number[]} key
|
||||
* @param {string} value
|
||||
* @param {string} newValue
|
||||
* @returns {Promise<{[msg]: string, success: boolean}>}
|
||||
* @param {string|number[]} value
|
||||
* @param {string|number[]} newValue
|
||||
* @param {string} [decode]
|
||||
* @param {string} [format]
|
||||
* @returns {Promise<{[msg]: string, success: boolean, [added]: string|number[]}>}
|
||||
*/
|
||||
async updateSetItem(connName, db, key, value, newValue) {
|
||||
async updateSetItem({ server, db, key, value, newValue, decode = decodeTypes.NONE, format = formatTypes.RAW }) {
|
||||
try {
|
||||
const { success, msg } = await UpdateSetItem(connName, db, key, value, newValue)
|
||||
const { data, success, msg } = await UpdateSetItem({ server, db, key, value, newValue, decode, format })
|
||||
if (success) {
|
||||
const tab = useTabStore()
|
||||
tab.upsertValueEntries({ server: connName, db, key, type: 'set', entries: { [value]: newValue } })
|
||||
return { success: true }
|
||||
const { added } = data
|
||||
// const tab = useTabStore()
|
||||
// tab.upsertValueEntries({ server, db, key, type: 'set', entries: { [value]: newValue } })
|
||||
return { success: true, added }
|
||||
} else {
|
||||
return { success, msg }
|
||||
}
|
||||
|
@ -1306,18 +1315,18 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* remove item from set
|
||||
* @param {string} connName
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string|number[]} key
|
||||
* @param {string} value
|
||||
* @returns {Promise<{[msg]: string, success: boolean}>}
|
||||
*/
|
||||
async removeSetItem(connName, db, key, value) {
|
||||
async removeSetItem(server, db, key, value) {
|
||||
try {
|
||||
const { success, msg } = await SetSetItem(connName, db, key, true, [value])
|
||||
const { success, msg } = await SetSetItem(server, db, key, true, [value])
|
||||
if (success) {
|
||||
const tab = useTabStore()
|
||||
tab.removeValueEntries({ server: connName, db, key, type: 'set', entries: [value] })
|
||||
// const tab = useTabStore()
|
||||
// tab.removeValueEntries({ server: connName, db, key, type: 'set', entries: [value] })
|
||||
return { success }
|
||||
} else {
|
||||
return { success, msg }
|
||||
|
@ -1353,26 +1362,46 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* update item of sorted set
|
||||
* @param {string} connName
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string|number[]} key
|
||||
* @param {string} value
|
||||
* @param {string} newValue
|
||||
* @param {number} score
|
||||
* @param {decodeTypes} decode
|
||||
* @param {formatTypes} format
|
||||
* @returns {Promise<{[msg]: string, success: boolean, [updated]: {}, [removed]: []}>}
|
||||
*/
|
||||
async updateZSetItem(connName, db, key, value, newValue, score) {
|
||||
async updateZSetItem({
|
||||
server,
|
||||
db,
|
||||
key,
|
||||
value = '',
|
||||
newValue,
|
||||
score,
|
||||
decode = decodeTypes.NONE,
|
||||
format = formatTypes.RAW,
|
||||
}) {
|
||||
try {
|
||||
const { data, success, msg } = await UpdateZSetValue(connName, db, key, value, newValue, score)
|
||||
const { data, success, msg } = await UpdateZSetValue({
|
||||
server,
|
||||
db,
|
||||
key,
|
||||
value,
|
||||
newValue,
|
||||
score,
|
||||
decode,
|
||||
format,
|
||||
})
|
||||
if (success) {
|
||||
const { updated, removed } = data
|
||||
const tab = useTabStore()
|
||||
if (!isEmpty(updated)) {
|
||||
tab.upsertValueEntries({ server: connName, db, key, type: 'zset', entries: updated })
|
||||
}
|
||||
if (!isEmpty(removed)) {
|
||||
tab.removeValueEntries({ server: connName, db, key, type: 'zset', entries: removed })
|
||||
}
|
||||
// const tab = useTabStore()
|
||||
// if (!isEmpty(updated)) {
|
||||
// tab.upsertValueEntries({ server, db, key, type: 'zset', entries: updated })
|
||||
// }
|
||||
// if (!isEmpty(removed)) {
|
||||
// tab.removeValueEntries({ server, db, key, type: 'zset', entries: removed })
|
||||
// }
|
||||
return { success, updated, removed }
|
||||
} else {
|
||||
return { success, msg }
|
||||
|
@ -1384,22 +1413,22 @@ const useBrowserStore = defineStore('browser', {
|
|||
|
||||
/**
|
||||
* remove item from sorted set
|
||||
* @param {string} connName
|
||||
* @param {string} server
|
||||
* @param {number} db
|
||||
* @param {string|number[]} key
|
||||
* @param {string} value
|
||||
* @returns {Promise<{[msg]: string, success: boolean, [removed]: []}>}
|
||||
*/
|
||||
async removeZSetItem(connName, db, key, value) {
|
||||
async removeZSetItem(server, db, key, value) {
|
||||
try {
|
||||
const { data, success, msg } = await UpdateZSetValue(connName, db, key, value, '', 0)
|
||||
const { data, success, msg } = await UpdateZSetValue({ server, db, key, value, newValue: '', score: 0 })
|
||||
if (success) {
|
||||
const { removed } = data
|
||||
if (!isEmpty(removed)) {
|
||||
const tab = useTabStore()
|
||||
tab.removeValueEntries({ server: connName, db, key, type: 'zset', entries: removed })
|
||||
}
|
||||
return { success }
|
||||
// if (!isEmpty(removed)) {
|
||||
// const tab = useTabStore()
|
||||
// tab.removeValueEntries({ server: server, db, key, type: 'zset', entries: removed })
|
||||
// }
|
||||
return { success, removed }
|
||||
} else {
|
||||
return { success, msg }
|
||||
}
|
||||
|
|
|
@ -51,8 +51,12 @@ body {
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
@extend .clickable;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
|
@ -104,7 +108,7 @@ body {
|
|||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 3px 10px 3px 10px;
|
||||
min-height: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -104,13 +104,16 @@ export async function setupDiscreteApi() {
|
|||
const { message, dialog, notification } = createDiscreteApi(['message', 'notification', 'dialog'], {
|
||||
configProviderProps,
|
||||
messageProviderProps: {
|
||||
placement: 'bottom-right',
|
||||
placement: 'bottom',
|
||||
keepAliveOnHover: true,
|
||||
},
|
||||
notificationProviderProps: {
|
||||
max: 5,
|
||||
placement: 'bottom-right',
|
||||
keepAliveOnHover: true,
|
||||
containerStyle: {
|
||||
marginBottom: '38px',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
|
|
|
@ -11,7 +11,9 @@
|
|||
*/
|
||||
export const extraLightTheme = {
|
||||
titleColor: '#F2F2F2',
|
||||
sidebarColor: '#E9E9E9',
|
||||
ribbonColor: '#F9F9F9',
|
||||
ribbonActiveColor: '#E3E3E3',
|
||||
sidebarColor: '#F2F2F2',
|
||||
splitColor: '#DADADA',
|
||||
}
|
||||
|
||||
|
@ -20,7 +22,9 @@ export const extraLightTheme = {
|
|||
* @type ExtraTheme
|
||||
*/
|
||||
export const extraDarkTheme = {
|
||||
titleColor: '#363636',
|
||||
titleColor: '#262626',
|
||||
ribbonColor: '#2C2C2C',
|
||||
ribbonActiveColor: '#363636',
|
||||
sidebarColor: '#262626',
|
||||
splitColor: '#474747',
|
||||
}
|
||||
|
|
|
@ -33,6 +33,9 @@ export const themeOverrides = {
|
|||
tabGapLargeCard: '2px',
|
||||
tabFontWeightActive: 450,
|
||||
},
|
||||
Card: {
|
||||
colorEmbedded: '#FAFAFA',
|
||||
},
|
||||
Form: {
|
||||
labelFontSizeTopSmall: '12px',
|
||||
labelFontSizeTopMedium: '13px',
|
||||
|
@ -77,7 +80,7 @@ const _darkThemeOverrides = {
|
|||
nodeTextColor: '#CECED0',
|
||||
},
|
||||
Card: {
|
||||
colorEmbedded: '#18181C',
|
||||
colorEmbedded: '#212121',
|
||||
},
|
||||
Dropdown: {
|
||||
color: '#272727',
|
||||
|
|
Loading…
Reference in New Issue