perf: support format viewing for entry value #65

fix: table columns lose reactive

frontend/src/components/content_value/ContentValueHash.vue

@@ -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,
+    filterOptionValue: fieldFilterOption.value,
-    className: inEdit ? 'clickable' : '',
+    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: {
+    ellipsis: displayCode.value
-        tooltip: true,
+        ? false
-    },
+        : {
-    filterOptionValue: null,
+              tooltip: true,
-    className: inEdit ? 'clickable' : '',
+          },
+    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,
+            fieldColumn.value,
-            valueColumn,
+            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
+            valueFilterOption.value = null
-            fieldColumn.filterOptionValue = val
+            fieldFilterOption.value = val
             break
         case filterOption[1].value:
             // filter value
-            fieldColumn.filterOptionValue = null
+            fieldFilterOption.value = null
-            valueColumn.filterOptionValue = val
+            valueFilterOption.value = val
             break
     }
 }
@@ -294,17 +308,17 @@ const onChangeFilterType = (type) => {
 }
 
 const clearFilter = () => {
-    fieldColumn.filterOptionValue = null
+    fieldFilterOption.value = null
-    valueColumn.filterOptionValue = 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"

frontend/src/components/content_value/ContentValueList.vue

@@ -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: {
+    ellipsis: displayCode.value
-        tooltip: true,
+        ? false
-    },
+        : {
-    filterOptionValue: null,
+              tooltip: true,
-    className: inEdit ? 'clickable' : '',
+          },
+    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)) {
+        if (displayCode.value) {
-        //     return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
+            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"

frontend/src/components/content_value/ContentValueSet.vue

@@ -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: {
+    ellipsis: displayCode.value
-        tooltip: true,
+        ? false
-    },
+        : {
-    filterOptionValue: null,
+              tooltip: true,
-    className: inEdit ? 'clickable' : '',
+          },
+    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)) {
+        if (displayCode.value) {
-        //     return h(NCode, { language: 'json', wordWrap: true, code: row.dv })
+            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"

frontend/src/components/content_value/ContentValueStream.vue

@@ -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,
-})
+    filterOptionValue: idFilterOption.value,
-const valueColumn = reactive({
+}))
+
+const valueFilterOption = ref(null)
+const valueColumn = computed(() => ({
     key: 'value',
     title: i18n.t('common.value'),
     align: 'left',
     titleAlign: 'center',
     resizable: true,
-    // ellipsis: {
+    filterOptionValue: valueFilterOption.value,
-    //     tooltip: true,
-    // },
-    filterOptionValue: null,
     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
+    idFilterOption.value = null
-    valueColumn.filterOptionValue = 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"

frontend/src/components/content_value/ContentValueZSet.vue

@@ -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: {
+    ellipsis: displayCode.value
-        tooltip: true,
+        ? false
-    },
+        : {
-    filterOptionValue: null,
+              tooltip: true,
-    className: inEdit ? 'clickable' : '',
+          },
+    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,
+            valueColumn.value,
-            scoreColumn,
+            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
+            scoreFilterOption.value = null
-            valueColumn.filterOptionValue = val
+            valueFilterOption.value = val
             break
         case filterOption[1].value:
             // filter score
-            valueColumn.filterOptionValue = null
+            valueFilterOption.value = null
-            scoreColumn.filterOptionValue = val
+            scoreFilterOption.value = val
             break
     }
 }
@@ -308,19 +322,19 @@ const onChangeFilterType = (type) => {
 }
 
 const clearFilter = () => {
-    valueColumn.filterOptionValue = null
+    valueFilterOption.value = null
-    scoreColumn.filterOptionValue = 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"