From ca8403d784bb82ce00dc0b0c6d44a6c72f77609b Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 31 Oct 2023 17:29:56 +0800
Subject: [PATCH] perf: keep view format and decode method when reload the same
 key

---
 .../src/components/content_value/ContentToolbar.vue   | 11 ++++++++++-
 .../src/components/content_value/ContentValueHash.vue | 11 +++++++++++
 .../src/components/content_value/ContentValueList.vue | 11 +++++++++++
 .../src/components/content_value/ContentValueSet.vue  | 11 +++++++++++
 .../components/content_value/ContentValueStream.vue   | 11 +++++++++++
 .../components/content_value/ContentValueString.vue   |  2 ++
 .../src/components/content_value/ContentValueZSet.vue | 11 +++++++++++
 7 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index 64eed84..e43d1f3 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/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 = () => {
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index 9cf5694..7ad1836 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/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">
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index 3ef6e19..0ac4796 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/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">
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index fa66c4e..4b8746f 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/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">
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index d35b5cb..f4d6427 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/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">
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 3be64bb..5ebb985 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/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>
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 0759b1a..8fac7c7 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/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">