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

perf: list value support format viewing #65

This commit is contained in:
Lykin 2023-11-14 14:49:16 +08:00
parent 200b12cd51
commit e0a8599e95
9 changed files with 281 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
backend/services/browser_service.go
View File

@ -633,23 +633,38 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
//data.Value, data.Decode, data.Format = strutil.ConvertTo(str, param.Decode, param.Format) //data.Value, data.Decode, data.Format = strutil.ConvertTo(str, param.Decode, param.Format)
case "list": case "list":
loadListHandle := func() ([]string, bool, error) { loadListHandle := func() ([]types.ListEntryItem, bool, error) {
var items []string var loadVal []string
var cursor uint64 var cursor uint64
if param.Full { if param.Full {
// load all // load all
cursor = 0 cursor = 0
items, err = client.LRange(ctx, key, 0, -1).Result() loadVal, err = client.LRange(ctx, key, 0, -1).Result()
} else { } else {
cursor, _ = getEntryCursor() cursor, _ = getEntryCursor()
scanSize := int64(Preferences().GetScanSize()) scanSize := int64(Preferences().GetScanSize())
items, err = client.LRange(ctx, key, int64(cursor), int64(cursor)+scanSize-1).Result() loadVal, err = client.LRange(ctx, key, int64(cursor), int64(cursor)+scanSize-1).Result()
cursor = cursor + uint64(scanSize) cursor = cursor + uint64(scanSize)
if len(items) < int(scanSize) { if len(loadVal) < int(scanSize) {
cursor = 0 cursor = 0
} }
} }
setEntryCursor(cursor) setEntryCursor(cursor)
items := make([]types.ListEntryItem, len(loadVal))
doConvert := len(param.Decode) > 0 && len(param.Format) > 0
for i, val := range loadVal {
items[i] = types.ListEntryItem{
Value: val,
DisplayValue: "",
}
items[i].Value = val
if doConvert {
if dv, _, _ := strutil.ConvertTo(val, param.Decode, param.Format); dv != val {
items[i].DisplayValue = dv
}
}
}
if err != nil { if err != nil {
return items, false, err return items, false, err
} }
@ -657,6 +672,11 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
} }
data.Value, data.End, err = loadListHandle() data.Value, data.End, err = loadListHandle()
data.Decode, data.Format = param.Decode, param.Format
if err != nil {
resp.Msg = err.Error()
return
}
case "hash": case "hash":
loadHashHandle := func() ([]types.HashEntryItem, bool, error) { loadHashHandle := func() ([]types.HashEntryItem, bool, error) {
@ -665,7 +685,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
items := make([]types.HashEntryItem, 0, scanSize) items := make([]types.HashEntryItem, 0, scanSize)
var loadedVal []string var loadedVal []string
var cursor uint64 var cursor uint64
var doConvert = len(param.Decode) > 0 && len(param.Format) > 0 doConvert := len(param.Decode) > 0 && len(param.Format) > 0
if param.Full { if param.Full {
// load all // load all
cursor = 0 cursor = 0
@ -674,18 +694,16 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
if err != nil { if err != nil {
return nil, false, err return nil, false, err
} }
var v string
for i := 0; i < len(loadedVal); i += 2 { 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{ items = append(items, types.HashEntryItem{
Key: loadedVal[i], Key: loadedVal[i],
Value: strutil.EncodeRedisKey(loadedVal[i+1]), Value: strutil.EncodeRedisKey(loadedVal[i+1]),
DisplayValue: v,
}) })
if doConvert {
if dv, _, _ := strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format); dv != loadedVal[i+1] {
items[i/2].DisplayValue = dv
}
}
} }
if cursor == 0 { if cursor == 0 {
break break
@ -697,18 +715,16 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
if err != nil { if err != nil {
return nil, false, err return nil, false, err
} }
var v string
for i := 0; i < len(loadedVal); i += 2 { 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{ items = append(items, types.HashEntryItem{
Key: loadedVal[i], Key: loadedVal[i],
Value: strutil.EncodeRedisKey(loadedVal[i+1]), Value: strutil.EncodeRedisKey(loadedVal[i+1]),
DisplayValue: v,
}) })
if doConvert {
if dv, _, _ := strutil.ConvertTo(loadedVal[i+1], param.Decode, param.Format); dv != loadedVal[i+1] {
items[i/2].DisplayValue = dv
}
}
} }
} }
setEntryCursor(cursor) setEntryCursor(cursor)
@ -751,6 +767,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
} }
data.Value, data.End, err = loadSetHandle() data.Value, data.End, err = loadSetHandle()
data.Decode, data.Format = param.Decode, param.Format
if err != nil { if err != nil {
resp.Msg = err.Error() resp.Msg = err.Error()
return return
@ -801,6 +818,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
} }
data.Value, data.End, err = loadZSetHandle() data.Value, data.End, err = loadZSetHandle()
data.Decode, data.Format = param.Decode, param.Format
if err != nil { if err != nil {
resp.Msg = err.Error() resp.Msg = err.Error()
return return
@ -849,6 +867,7 @@ func (b *browserService) GetKeyDetail(param types.KeyDetailParam) (resp types.JS
} }
data.Value, data.End, err = loadStreamHandle() data.Value, data.End, err = loadStreamHandle()
data.Decode, data.Format = param.Decode, param.Format
if err != nil { if err != nil {
resp.Msg = err.Error() resp.Msg = err.Error()
return return
@ -912,7 +931,7 @@ func (b *browserService) SetKeyValue(param types.SetKeyParam) (resp types.JSResp
} else { } else {
var saveStr string var saveStr string
if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil { 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 return
} }
_, err = client.Set(ctx, key, saveStr, 0).Result() _, err = client.Set(ctx, key, saveStr, 0).Result()
@ -1023,7 +1042,7 @@ func (b *browserService) SetHashValue(param types.SetHashParam) (resp types.JSRe
str := strutil.DecodeRedisKey(param.Value) str := strutil.DecodeRedisKey(param.Value)
var saveStr string var saveStr string
if saveStr, err = strutil.SaveAs(str, param.Format, param.Decode); err != nil { 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 return
} }
var removedField []string var removedField []string
@ -1148,20 +1167,21 @@ func (b *browserService) AddListItem(connName string, db int, k any, action int,
} }
// SetListItem update or remove list item by index // 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) { func (b *browserService) SetListItem(param types.SetListParam) (resp types.JSResp) {
item, err := b.getRedisClient(connName, db) item, err := b.getRedisClient(param.Server, param.DB)
if err != nil { if err != nil {
resp.Msg = err.Error() resp.Msg = err.Error()
return return
} }
client, ctx := item.client, item.ctx client, ctx := item.client, item.ctx
key := strutil.DecodeRedisKey(k) key := strutil.DecodeRedisKey(param.Key)
str := strutil.DecodeRedisKey(param.Value)
var removed []int64 var removed []int64
updated := map[int64]string{} updated := map[int64]string{}
if len(value) <= 0 { if len(str) <= 0 {
// remove from list // 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 { if err != nil {
resp.Msg = err.Error() resp.Msg = err.Error()
return return
@ -1172,15 +1192,20 @@ func (b *browserService) SetListItem(connName string, db int, k any, index int64
resp.Msg = err.Error() resp.Msg = err.Error()
return return
} }
removed = append(removed, index) removed = append(removed, param.Index)
} else { } else {
// replace index value // 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 { if err != nil {
resp.Msg = err.Error() resp.Msg = err.Error()
return return
} }
updated[index] = value updated[param.Index] = saveStr
} }
resp.Success = true resp.Success = true

17
backend/types/js_resp.go
View File

@ -30,10 +30,15 @@ type KeyDetailParam struct {
Full bool `json:"full"` Full bool `json:"full"`
} }
type ListEntryItem struct {
Value any `json:"v"`
DisplayValue string `json:"dv,omitempty"`
}
type HashEntryItem struct { type HashEntryItem struct {
Key string `json:"k"` Key string `json:"k"`
Value any `json:"v"` Value any `json:"v"`
DisplayValue string `json:"dv"` DisplayValue string `json:"dv,omitempty"`
} }
type KeyDetail struct { type KeyDetail struct {
@ -55,6 +60,16 @@ type SetKeyParam struct {
Decode string `json:"decode,omitempty"` 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 { type SetHashParam struct {
Server string `json:"server"` Server string `json:"server"`
DB int `json:"db"` DB int `json:"db"`

22
frontend/src/components/content_value/ContentEntryEditor.vue
View File

@ -9,12 +9,12 @@ import FormatSelector from '@/components/content_value/FormatSelector.vue'
const props = defineProps({ const props = defineProps({
field: { field: {
type: String, type: [String, Number],
}, },
value: { value: {
type: String, type: String,
}, },
keyLabel: { fieldLabel: {
type: String, type: String,
}, },
valueLabel: { valueLabel: {
@ -26,6 +26,9 @@ const props = defineProps({
format: { format: {
type: String, type: String,
}, },
fieldReadonly: {
type: Boolean,
},
}) })
const themeVars = useThemeVars() const themeVars = useThemeVars()
@ -58,7 +61,10 @@ const displayValue = computed(() => {
if (loading.value) { if (loading.value) {
return '' return ''
} }
return viewAs.value || decodeRedisKey(props.value) if (viewAs.value == null) {
return decodeRedisKey(props.value)
}
return viewAs.value
}) })
/** /**
@ -79,7 +85,7 @@ const onFormatChanged = async (decode = '', format = '') => {
decode, decode,
format, format,
}) })
viewAs.field = props.field viewAs.field = props.field + ''
viewAs.value = value viewAs.value = value
viewAs.decode = decode || retDecode viewAs.decode = decode || retDecode
viewAs.format = format || retFormat viewAs.format = format || retFormat
@ -110,8 +116,12 @@ const onSave = () => {
<div class="editor-content flex-box-v" style="height: 100%"> <div class="editor-content flex-box-v" style="height: 100%">
<!-- field --> <!-- field -->
<div class="editor-content-item flex-box-v"> <div class="editor-content-item flex-box-v">
<div class="editor-content-item-label">{{ props.keyLabel }}</div> <div class="editor-content-item-label">{{ props.fieldLabel }}</div>
<n-input v-model:value="viewAs.field" class="editor-content-item-input" type="text" /> <n-input
v-model:value="viewAs.field"
:readonly="props.fieldReadonly"
class="editor-content-item-input"
type="text" />
</div> </div>
<!-- value --> <!-- value -->

32
frontend/src/components/content_value/ContentValueHash.vue
View File

@ -99,10 +99,10 @@ const fieldColumn = reactive({
tooltip: true, tooltip: true,
}, },
filterOptionValue: null, filterOptionValue: null,
filter(value, row) { filter: (value, row) => {
return !!~row.k.indexOf(value.toString()) return !!~row.k.indexOf(value.toString())
}, },
render(row) { render: (row) => {
return decodeRedisKey(row.k) return decodeRedisKey(row.k)
}, },
}) })
@ -116,15 +116,15 @@ const valueColumn = reactive({
tooltip: true, tooltip: true,
}, },
filterOptionValue: null, filterOptionValue: null,
filter(value, row) { filter: (value, row) => {
return !!~row.value.indexOf(value.toString()) return !!~row.v.indexOf(value.toString())
}, },
render(row) { render: (row) => {
return row.dv return row.dv || row.v
}, },
}) })
const startEdit = async ({ no, key, value }) => { const startEdit = async (no, key, value) => {
currentEditRow.value = value currentEditRow.value = value
currentEditRow.no = no currentEditRow.no = no
currentEditRow.key = key currentEditRow.key = key
@ -186,7 +186,7 @@ const actionColumn = {
return h(EditableTableColumn, { return h(EditableTableColumn, {
editing: false, editing: false,
bindKey: row.k, bindKey: row.k,
onEdit: () => startEdit({ no: index + 1, key: row.k, value: row.v }), onEdit: () => startEdit(index + 1, row.k, row.v),
onDelete: async () => { onDelete: async () => {
try { try {
const { success, msg } = await browserStore.removeHashField( const { success, msg } = await browserStore.removeHashField(
@ -217,7 +217,7 @@ const columns = computed(() => {
width: 80, width: 80,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
render(row, index) { render: (row, index) => {
return index + 1 return index + 1
}, },
}, },
@ -233,7 +233,7 @@ const columns = computed(() => {
width: 80, width: 80,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
render(row, index) { render: (row, index) => {
if (index + 1 === currentEditRow.no) { if (index + 1 === currentEditRow.no) {
// editing row, show edit state // editing row, show edit state
return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 })) return h(NIcon, { size: 16, color: 'red' }, () => h(Edit, { strokeWidth: 5 }))
@ -252,7 +252,7 @@ const rowProps = (row, index) => {
onClick: () => { onClick: () => {
// in edit mode, switch edit row by click // in edit mode, switch edit row by click
if (inEdit.value) { if (inEdit.value) {
startEdit({ no: index + 1, key: row.k, value: row.v }) startEdit(index + 1, row.k, row.v)
} }
}, },
} }
@ -270,12 +270,12 @@ const onAddRow = () => {
const filterValue = ref('') const filterValue = ref('')
const onFilterInput = (val) => { const onFilterInput = (val) => {
switch (filterType.value) { switch (filterType.value) {
case filterOption.value[0].value: case filterOption[0].value:
// filter field // filter field
valueColumn.filterOptionValue = null valueColumn.filterOptionValue = null
fieldColumn.filterOptionValue = val fieldColumn.filterOptionValue = val
break break
case filterOption.value[1].value: case filterOption[1].value:
// filter value // filter value
fieldColumn.filterOptionValue = null fieldColumn.filterOptionValue = null
valueColumn.filterOptionValue = val valueColumn.filterOptionValue = val
@ -294,10 +294,10 @@ const clearFilter = () => {
const onUpdateFilter = (filters, sourceColumn) => { const onUpdateFilter = (filters, sourceColumn) => {
switch (filterType.value) { switch (filterType.value) {
case filterOption.value[0].value: case filterOption[0].value:
fieldColumn.filterOptionValue = filters[sourceColumn.key] fieldColumn.filterOptionValue = filters[sourceColumn.key]
break break
case filterOption.value[1].value: case filterOption[1].value:
valueColumn.filterOptionValue = filters[sourceColumn.key] valueColumn.filterOptionValue = filters[sourceColumn.key]
break break
} }
@ -395,8 +395,8 @@ defineExpose({
v-show="inEdit" v-show="inEdit"
:decode="currentEditRow.decode" :decode="currentEditRow.decode"
:field="currentEditRow.key" :field="currentEditRow.key"
:field-label="$t('common.field')"
:format="currentEditRow.format" :format="currentEditRow.format"
:key-label="$t('common.field')"
:value="currentEditRow.value" :value="currentEditRow.value"
:value-label="$t('common.value')" :value-label="$t('common.value')"
class="flex-item-expand" class="flex-item-expand"

199
frontend/src/components/content_value/ContentValueList.vue
View File

@ -3,7 +3,7 @@ import { computed, h, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import ContentToolbar from './ContentToolbar.vue' import ContentToolbar from './ContentToolbar.vue'
import AddLink from '@/components/icons/AddLink.vue' import AddLink from '@/components/icons/AddLink.vue'
import { NButton, NCode, NIcon, NInput, useThemeVars } from 'naive-ui' import { NButton, NIcon, NInput, useThemeVars } from 'naive-ui'
import { isEmpty, size } from 'lodash' import { isEmpty, size } from 'lodash'
import { types, types as redisTypes } from '@/consts/support_redis_type.js' import { types, types as redisTypes } from '@/consts/support_redis_type.js'
import EditableTableColumn from '@/components/common/EditableTableColumn.vue' import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
@ -14,6 +14,9 @@ import useBrowserStore from 'stores/browser.js'
import LoadList from '@/components/icons/LoadList.vue' import LoadList from '@/components/icons/LoadList.vue'
import LoadAll from '@/components/icons/LoadAll.vue' import LoadAll from '@/components/icons/LoadAll.vue'
import IconButton from '@/components/common/IconButton.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 i18n = useI18n()
const themeVars = useThemeVars() const themeVars = useThemeVars()
@ -33,7 +36,7 @@ const props = defineProps({
value: Object, value: Object,
size: Number, size: Number,
length: Number, length: Number,
viewAs: { format: {
type: String, type: String,
default: formatTypes.RAW, default: formatTypes.RAW,
}, },
@ -58,39 +61,80 @@ const keyName = computed(() => {
const browserStore = useBrowserStore() const browserStore = useBrowserStore()
const dialogStore = useDialogStore() const dialogStore = useDialogStore()
const keyType = redisTypes.LIST const keyType = redisTypes.LIST
const currentEditRow = ref({ const currentEditRow = reactive({
no: 0, no: 0,
value: null, value: null,
format: formatTypes.RAW,
decode: decodeTypes.NONE,
})
const inEdit = computed(() => {
return currentEditRow.no > 0
}) })
const valueColumn = reactive({ const valueColumn = reactive({
key: 'value', key: 'value',
title: i18n.t('common.value'), title: i18n.t('common.value'),
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
ellipsis: {
tooltip: true,
},
filterOptionValue: null, filterOptionValue: null,
filter(value, row) { filter: (value, row) => {
return !!~row.value.indexOf(value.toString()) return !!~row.v.indexOf(value.toString())
}, },
render: (row) => { render: (row) => {
const isEdit = currentEditRow.value.no === row.no // if (!isEmpty(row.dv)) {
if (isEdit) { // console.log(row.dv)
return h(NInput, { // return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
value: currentEditRow.value.value, // }
type: 'textarea', return row.dv || row.v
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 cancelEdit = () => { const startEdit = async (no, value) => {
currentEditRow.value.no = 0 currentEditRow.value = value
currentEditRow.no = no
}
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)
} finally {
resetEdit()
}
}
const resetEdit = () => {
currentEditRow.no = 0
currentEditRow.value = null
} }
const actionColumn = { const actionColumn = {
@ -100,13 +144,14 @@ const actionColumn = {
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
fixed: 'right', fixed: 'right',
render: (row) => { render: (row, index) => {
return h(EditableTableColumn, { return h(EditableTableColumn, {
editing: currentEditRow.value.no === row.no, editing: false,
bindKey: '#' + row.no, bindKey: `#${index + 1}`,
onEdit: () => { onEdit: () => {
currentEditRow.value.no = row.no currentEditRow.no = index + 1
currentEditRow.value.value = row.value currentEditRow.value = row
startEdit(index + 1, row.v)
}, },
onDelete: async () => { onDelete: async () => {
try { try {
@ -114,7 +159,7 @@ const actionColumn = {
props.name, props.name,
props.db, props.db,
keyName.value, keyName.value,
row.no - 1, index,
) )
if (success) { if (success) {
$message.success(i18n.t('dialogue.delete_key_succ', { key: '#' + row.no })) $message.success(i18n.t('dialogue.delete_key_succ', { key: '#' + row.no }))
@ -125,31 +170,12 @@ const actionColumn = {
$message.error(e.message) $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(() => { const columns = computed(() => {
if (!inEdit.value) {
return [ return [
{ {
key: 'no', key: 'no',
@ -157,26 +183,48 @@ const columns = computed(() => {
width: 80, width: 80,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
render: (row, index) => {
return index + 1
},
}, },
valueColumn, valueColumn,
actionColumn, 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,
]
}
}) })
const tableData = computed(() => { const rowProps = (row, index) => {
const data = [] return {
const len = size(props.value) onClick: () => {
for (let i = 0; i < len; i++) { // in edit mode, switch edit row by click
data.push({ if (inEdit.value) {
no: i + 1, startEdit(index + 1, row.v)
value: props.value[i],
})
} }
return data },
}) }
}
const entries = computed(() => { const entries = computed(() => {
const len = size(tableData.value) const len = size(props.value)
return `${len} / ${Math.max(len, props.length)}` return `${len} / ${Math.max(len, props.length)}`
}) })
@ -197,10 +245,14 @@ const onUpdateFilter = (filters, sourceColumn) => {
valueColumn.filterOptionValue = filters[sourceColumn.key] valueColumn.filterOptionValue = filters[sourceColumn.key]
} }
const onFormatChanged = (selDecode, selFormat) => {
emit('reload', selDecode, selFormat)
}
defineExpose({ defineExpose({
reset: () => { reset: () => {
clearFilter() clearFilter()
cancelEdit() resetEdit()
}, },
}) })
</script> </script>
@ -252,14 +304,16 @@ defineExpose({
{{ $t('interface.add_row') }} {{ $t('interface.add_row') }}
</n-button> </n-button>
</div> </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 <n-data-table
:key="(row) => row.no" :key="(row) => row.no"
:bordered="false" :bordered="false"
:bottom-bordered="false" :bottom-bordered="false"
:columns="columns" :columns="columns"
:data="tableData" :data="props.value"
:loading="props.loading" :loading="props.loading"
:row-props="rowProps"
:single-column="true" :single-column="true"
:single-line="false" :single-line="false"
class="flex-item-expand" class="flex-item-expand"
@ -268,12 +322,33 @@ defineExpose({
striped striped
virtual-scroll virtual-scroll
@update:filters="onUpdateFilter" /> @update:filters="onUpdateFilter" />
<!-- edit pane -->
<content-entry-editor
v-show="inEdit"
: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%"
@cancel="resetEdit"
@save="saveEdit" />
</div> </div>
<div class="value-footer flex-box-h"> <div class="value-footer flex-box-h">
<n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text> <n-text v-if="!isNaN(props.length)">{{ $t('interface.entries') }}: {{ entries }}</n-text>
<n-divider v-if="!isNaN(props.length)" vertical /> <n-divider v-if="!isNaN(props.length)" vertical />
<n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text> <n-text v-if="!isNaN(props.size)">{{ $t('interface.memory_usage') }}: {{ bytes(props.size) }}</n-text>
<div class="flex-item-expand"></div> <div class="flex-item-expand"></div>
<format-selector
v-show="!inEdit"
:decode="props.decode"
:disabled="inEdit"
:format="props.format"
@format-changed="onFormatChanged" />
</div> </div>
</div> </div>
</template> </template>

3
frontend/src/langs/en-us.json
View File

@ -16,7 +16,8 @@
"all": "All", "all": "All",
"key": "Key", "key": "Key",
"value": "Value", "value": "Value",
"field": "Field" "field": "Field",
"index": "Position"
}, },
"preferences": { "preferences": {
"name": "Preferences", "name": "Preferences",

3
frontend/src/langs/pt-br.json
View File

@ -16,7 +16,8 @@
"all": "Tudo", "all": "Tudo",
"key": "Chave", "key": "Chave",
"value": "Valor", "value": "Valor",
"field": "Campo" "field": "Campo",
"index": "Posição"
}, },
"preferences": { "preferences": {
"name": "Preferências", "name": "Preferências",

3
frontend/src/langs/zh-cn.json
View File

@ -16,7 +16,8 @@
"all": "全部", "all": "全部",
"key": "键", "key": "键",
"value": "值", "value": "值",
"field": "字段" "field": "字段",
"index": "位置"
}, },
"preferences": { "preferences": {
"name": "偏好设置", "name": "偏好设置",

38
frontend/src/stores/browser.js
View File

@ -1191,28 +1191,30 @@ const useBrowserStore = defineStore('browser', {
/** /**
* update value of list item by index * update value of list item by index
* @param {string} connName * @param {string} server
* @param {number} db * @param {number} db
* @param {string|number[]} key * @param {string|number[]} key
* @param {number} index * @param {number} index
* @param {string} value * @param {string|number[]} value
* @param {string} decode
* @param {string} format
* @returns {Promise<{[msg]: string, success: boolean, [updated]: {}}>} * @returns {Promise<{[msg]: string, success: boolean, [updated]: {}}>}
*/ */
async updateListItem(connName, db, key, index, value) { async updateListItem({ server, db, key, index, value, decode, format }) {
try { 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) { if (success) {
const { updated = {} } = data const { updated = {} } = data
if (!isEmpty(updated)) { // if (!isEmpty(updated)) {
const tab = useTabStore() // const tab = useTabStore()
tab.upsertValueEntries({ // tab.upsertValueEntries({
server: connName, // server,
db, // db,
key, // key,
type: 'list', // type: 'list',
entries: updated, // entries: updated,
}) // })
} // }
return { success, updated } return { success, updated }
} else { } else {
return { success, msg } return { success, msg }
@ -1224,21 +1226,21 @@ const useBrowserStore = defineStore('browser', {
/** /**
* remove list item * remove list item
* @param {string} connName * @param {string} server
* @param {number} db * @param {number} db
* @param {string|number[]} key * @param {string|number[]} key
* @param {number} index * @param {number} index
* @returns {Promise<{[msg]: string, success: boolean, [removed]: string[]}>} * @returns {Promise<{[msg]: string, success: boolean, [removed]: string[]}>}
*/ */
async removeListItem(connName, db, key, index) { async removeListItem(server, db, key, index) {
try { try {
const { data, success, msg } = await SetListItem(connName, db, key, index, '') const { data, success, msg } = await SetListItem({ server, db, key, index })
if (success) { if (success) {
const { removed = [] } = data const { removed = [] } = data
if (!isEmpty(removed)) { if (!isEmpty(removed)) {
const tab = useTabStore() const tab = useTabStore()
tab.removeValueEntries({ tab.removeValueEntries({
server: connName, server,
db, db,
key, key,
type: 'list', type: 'list',