perf: keep view format and decode method when reload the same key

frontend/src/components/content_value/ContentToolbar.vue

@@ -13,6 +13,7 @@ import Copy from '@/components/icons/Copy.vue'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import { computed } from 'vue'
 import { isEmpty, padStart } from 'lodash'
+import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 
 const props = defineProps({
     server: String,
@@ -33,6 +34,14 @@ const props = defineProps({
         type: Number,
         default: -1,
     },
+    viewAs: {
+        type: String,
+        default: formatTypes.PLAIN_TEXT,
+    },
+    decode: {
+        type: String,
+        default: decodeTypes.NONE,
+    },
 })
 
 const dialogStore = useDialog()
@@ -69,7 +78,7 @@ const ttlString = computed(() => {
 })
 
 const onReloadKey = () => {
-    connectionStore.loadKeyValue(props.server, props.db, keyName.value)
+    connectionStore.loadKeyValue(props.server, props.db, keyName.value, props.viewAs, props.decode)
 }
 
 const onCopyKey = () => {

frontend/src/components/content_value/ContentValueHash.vue

@@ -10,6 +10,7 @@ import useDialogStore from 'stores/dialog.js'
 import useConnectionStore from 'stores/connections.js'
 import { isEmpty } from 'lodash'
 import bytes from 'bytes'
+import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -29,6 +30,14 @@ const props = defineProps({
     value: Object,
     size: Number,
     length: Number,
+    viewAs: {
+        type: String,
+        default: formatTypes.PLAIN_TEXT,
+    },
+    decode: {
+        type: String,
+        default: decodeTypes.NONE,
+    },
 })
 
 /**
@@ -259,11 +268,13 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
+            :decode="props.decode"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl"
+            :view-as="props.viewAs"
             class="value-item-part" />
         <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">

frontend/src/components/content_value/ContentValueList.vue

@@ -10,6 +10,7 @@ import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
 import useConnectionStore from 'stores/connections.js'
 import bytes from 'bytes'
+import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -29,6 +30,14 @@ const props = defineProps({
     value: Object,
     size: Number,
     length: Number,
+    viewAs: {
+        type: String,
+        default: formatTypes.PLAIN_TEXT,
+    },
+    decode: {
+        type: String,
+        default: decodeTypes.NONE,
+    },
 })
 
 /**
@@ -191,11 +200,13 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
+            :decode="props.decode"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl"
+            :view-as="props.viewAs"
             class="value-item-part" />
         <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">

frontend/src/components/content_value/ContentValueSet.vue

@@ -10,6 +10,7 @@ import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useConnectionStore from 'stores/connections.js'
 import bytes from 'bytes'
+import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -29,6 +30,14 @@ const props = defineProps({
     value: Array,
     size: Number,
     length: Number,
+    viewAs: {
+        type: String,
+        default: formatTypes.PLAIN_TEXT,
+    },
+    decode: {
+        type: String,
+        default: decodeTypes.NONE,
+    },
 })
 
 /**
@@ -186,11 +195,13 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
+            :decode="props.decode"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl"
+            :view-as="props.viewAs"
             class="value-item-part" />
         <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">

frontend/src/components/content_value/ContentValueStream.vue

@@ -10,6 +10,7 @@ import useDialogStore from 'stores/dialog.js'
 import useConnectionStore from 'stores/connections.js'
 import { includes, isEmpty, keys, some, values } from 'lodash'
 import bytes from 'bytes'
+import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -29,6 +30,14 @@ const props = defineProps({
     value: Object,
     size: Number,
     length: Number,
+    viewAs: {
+        type: String,
+        default: formatTypes.PLAIN_TEXT,
+    },
+    decode: {
+        type: String,
+        default: decodeTypes.NONE,
+    },
 })
 
 /**
@@ -171,11 +180,13 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
+            :decode="props.decode"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl"
+            :view-as="props.viewAs"
             class="value-item-part" />
         <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">

frontend/src/components/content_value/ContentValueString.vue

@@ -144,11 +144,13 @@ const onSaveValue = async () => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
+            :decode="props.decode"
             :key-code="keyCode"
             :key-path="keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl"
+            :view-as="props.viewAs"
             class="value-item-part" />
         <div class="tb2 value-item-part flex-box-h">
             <div class="flex-item-expand"></div>

frontend/src/components/content_value/ContentValueZSet.vue

@@ -10,6 +10,7 @@ import { isEmpty } from 'lodash'
 import useDialogStore from 'stores/dialog.js'
 import useConnectionStore from 'stores/connections.js'
 import bytes from 'bytes'
+import { decodeTypes, formatTypes } from '@/consts/value_view_type.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -29,6 +30,14 @@ const props = defineProps({
     value: Object,
     size: Number,
     length: Number,
+    viewAs: {
+        type: String,
+        default: formatTypes.PLAIN_TEXT,
+    },
+    decode: {
+        type: String,
+        default: decodeTypes.NONE,
+    },
 })
 
 /**
@@ -284,11 +293,13 @@ const onUpdateFilter = (filters, sourceColumn) => {
     <div class="content-wrapper flex-box-v">
         <content-toolbar
             :db="props.db"
+            :decode="props.decode"
             :key-code="props.keyCode"
             :key-path="props.keyPath"
             :key-type="keyType"
             :server="props.name"
             :ttl="ttl"
+            :view-as="props.viewAs"
             class="value-item-part" />
         <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">