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: support format viewing for entry value #65 

fix: table columns lose reactive
This commit is contained in:
Lykin 2023-11-16 01:06:59 +08:00
parent cc436ad86f
commit 578a8413a1
5 changed files with 147 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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'
@ -94,7 +94,8 @@ const inFullEdit = computed(() => {
})
const tableRef = ref(null)
const fieldColumn = reactive({
const fieldFilterOption = ref(null)
const fieldColumn = computed(() => ({
key: 'key',
title: i18n.t('common.field'),
align: 'center',
@ -103,33 +104,46 @@ const fieldColumn = reactive({
ellipsis: {
tooltip: true,
},
filterOptionValue: null,
className: inEdit ? 'clickable' : '',
filterOptionValue: fieldFilterOption.value,
className: inEdit.value ? 'clickable' : '',
filter: (value, row) => {
return !!~row.k.indexOf(value.toString())
},
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,
},
filterOptionValue: null,
className: inEdit ? 'clickable' : '',
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, key, value) => {
currentEditRow.no = no
@ -227,8 +241,8 @@ const columns = computed(() => {
return index + 1
},
},
fieldColumn,
valueColumn,
fieldColumn.value,
valueColumn.value,
actionColumn,
]
} else {
@ -248,7 +262,7 @@ const columns = computed(() => {
}
},
},
fieldColumn,
fieldColumn.value,
]
}
})
@ -278,13 +292,13 @@ const onFilterInput = (val) => {
switch (filterType.value) {
case filterOption[0].value:
// filter field
valueColumn.filterOptionValue = null
fieldColumn.filterOptionValue = val
valueFilterOption.value = null
fieldFilterOption.value = val
break
case filterOption[1].value:
// filter value
fieldColumn.filterOptionValue = null
valueColumn.filterOptionValue = val
fieldFilterOption.value = null
valueFilterOption.value = val
break
}
}
@ -294,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[0].value:
fieldColumn.filterOptionValue = filters[sourceColumn.key]
fieldFilterOption.value = filters[sourceColumn.key]
break
case filterOption[1].value:
valueColumn.filterOptionValue = filters[sourceColumn.key]
valueFilterOption.value = filters[sourceColumn.key]
break
}
}
@ -370,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" />
@ -382,6 +397,7 @@ defineExpose({
<n-data-table
ref="tableRef"
v-show="!inFullEdit"
:row-key="(row) => row.k"
:bordered="false"
:bottom-bordered="false"
:columns="columns"

44
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 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 { isEmpty, size } from 'lodash'
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
@ -79,26 +79,35 @@ 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',
ellipsis: {
tooltip: true,
},
filterOptionValue: null,
className: inEdit ? 'clickable' : '',
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 (!isEmpty(row.dv)) {
// return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
// }
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
@ -201,7 +210,7 @@ const columns = computed(() => {
return index + 1
},
},
valueColumn,
valueColumn.value,
actionColumn,
]
} else {
@ -221,7 +230,7 @@ const columns = computed(() => {
}
},
},
valueColumn,
valueColumn.value,
]
}
})
@ -248,15 +257,15 @@ 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) => {
@ -323,6 +332,7 @@ defineExpose({
<!-- table -->
<n-data-table
v-show="!inFullEdit"
:row-key="(row) => row.no"
:bordered="false"
:bottom-bordered="false"
:columns="columns"

44
frontend/src/components/content_value/ContentValueSet.vue
View File

@ -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 { isEmpty, size } from 'lodash'
import useDialogStore from 'stores/dialog.js'
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
@ -78,26 +78,35 @@ 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',
ellipsis: {
tooltip: true,
},
filterOptionValue: null,
className: inEdit ? 'clickable' : '',
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 (!isEmpty(row.dv)) {
// return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
// }
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
@ -200,7 +209,7 @@ const columns = computed(() => {
return index + 1
},
},
valueColumn,
valueColumn.value,
actionColumn,
]
} else {
@ -220,7 +229,7 @@ const columns = computed(() => {
}
},
},
valueColumn,
valueColumn.value,
]
}
})
@ -247,15 +256,15 @@ 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) => {
@ -322,6 +331,7 @@ defineExpose({
<!-- table -->
<n-data-table
v-show="!inFullEdit"
:row-key="(row) => row.v"
:bordered="false"
:bottom-bordered="false"
:columns="columns"

33
frontend/src/components/content_value/ContentValueStream.vue
View File

@ -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,23 +73,24 @@ 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: 'left',
titleAlign: 'center',
resizable: true,
// ellipsis: {
// tooltip: true,
// },
filterOptionValue: null,
filterOptionValue: valueFilterOption.value,
filter: (value, row) => {
const v = value.toString()
if (filterType.value === 1) {
@ -104,7 +105,7 @@ const valueColumn = reactive({
render: (row) => {
return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
},
})
}))
const actionColumn = {
key: 'action',
title: i18n.t('interface.action'),
@ -136,7 +137,7 @@ const actionColumn = {
})
},
}
const columns = computed(() => [idColumn, valueColumn, actionColumn])
const columns = computed(() => [idColumn.value, valueColumn.value, actionColumn])
const entries = computed(() => {
const len = size(props.value)
@ -149,7 +150,7 @@ const onAddRow = () => {
const filterValue = ref('')
const onFilterInput = (val) => {
valueColumn.filterOptionValue = val
valueFilterOption.value = val
}
const onChangeFilterType = (type) => {
@ -157,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
}
}
@ -236,7 +237,7 @@ 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"

59
frontend/src/components/content_value/ContentValueZSet.vue
View File

@ -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 { head, isEmpty, keys, size } from 'lodash'
@ -92,13 +92,14 @@ const inFullEdit = computed(() => {
return inEdit.value && fullEdit.value
})
const scoreColumn = reactive({
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.s)
if (isNaN(score)) {
@ -134,26 +135,39 @@ const scoreColumn = reactive({
render: (row) => {
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,
className: inEdit ? 'clickable' : '',
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())
},
// sorter: (row1, row2) => row1.value - row2.value,
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, score, value) => {
currentEditRow.no = no
@ -252,8 +266,8 @@ const columns = computed(() => {
return index + 1
},
},
valueColumn,
scoreColumn,
valueColumn.value,
scoreColumn.value,
actionColumn,
]
} else {
@ -273,7 +287,7 @@ const columns = computed(() => {
}
},
},
valueColumn,
valueColumn.value,
]
}
})
@ -292,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
}
}
@ -308,19 +322,19 @@ 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
}
}
@ -402,6 +416,7 @@ defineExpose({
<!-- table -->
<n-data-table
v-show="!inFullEdit"
:row-key="(row) => row.v"
:bordered="false"
:bottom-bordered="false"
:columns="columns"