From b7e9d974cb20e04263e2a690061a96e22b3c77ec Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 8 Sep 2023 11:39:00 +0800
Subject: [PATCH] feat: support view as hex/binary for the key with type string

---
 .../content_value/ContentValueString.vue      | 69 +++++-------------
 frontend/src/consts/value_view_type.js        |  2 +
 frontend/src/utils/string_convert.js          | 70 +++++++++++++++++++
 3 files changed, 89 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/utils/string_convert.js

diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 96ab28d..3e14d20 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -11,8 +11,9 @@ import Edit from '@/components/icons/Edit.vue'
 import { IsJson } from '@/utils/check_string_format.js'
 import { types as redisTypes } from '@/consts/support_redis_type.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
-import { toLower } from 'lodash'
+import { map, toLower } from 'lodash'
 import useConnectionStore from 'stores/connections.js'
+import { fromBase64, fromBase64Json, toBinary, toHex, toJsonText } from '@/utils/string_convert.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -28,53 +29,16 @@ const props = defineProps({
     value: String,
 })
 
-const viewOption = [
-    {
-        value: types.PLAIN_TEXT,
-        label: types.PLAIN_TEXT,
-    },
-    {
-        value: types.JSON,
-        label: types.JSON,
-    },
-    {
-        value: types.BASE64_TO_TEXT,
-        label: types.BASE64_TO_TEXT,
-    },
-    {
-        value: types.BASE64_TO_JSON,
-        label: types.BASE64_TO_JSON,
-    },
-]
+const viewOption = computed(() =>
+    map(types, (t) => {
+        return {
+            value: t,
+            label: t,
+        }
+    }),
+)
 const viewAs = ref(types.PLAIN_TEXT)
 
-const getJsonValue = () => {
-    try {
-        const jsonObj = JSON.parse(props.value)
-        return JSON.stringify(jsonObj, null, 2)
-    } catch (e) {
-        return props.value
-    }
-}
-
-const getBase64Value = () => {
-    try {
-        return atob(props.value)
-    } catch (e) {
-        return props.value
-    }
-}
-
-const getBase64JsonValue = () => {
-    try {
-        const text = atob(props.value)
-        const jsonObj = JSON.parse(text)
-        return JSON.stringify(jsonObj, null, 2)
-    } catch (e) {
-        return props.value
-    }
-}
-
 const autoDetectFormat = () => {
     // auto check format when loaded
     if (IsJson(props.value)) {
@@ -104,11 +68,15 @@ const viewValue = computed(() => {
         case types.PLAIN_TEXT:
             return props.value
         case types.JSON:
-            return getJsonValue()
+            return toJsonText(props.value)
         case types.BASE64_TO_TEXT:
-            return getBase64Value()
+            return fromBase64(props.value)
         case types.BASE64_TO_JSON:
-            return getBase64JsonValue()
+            return fromBase64Json(props.value)
+        case types.HEX:
+            return toHex(props.value)
+        case types.BINARY:
+            return toBinary(props.value)
         default:
             return props.value
     }
@@ -116,9 +84,6 @@ const viewValue = computed(() => {
 
 const viewLanguage = computed(() => {
     switch (viewAs.value) {
-        case types.PLAIN_TEXT:
-        case types.BASE64_TO_TEXT:
-            return 'plaintext'
         case types.JSON:
         case types.BASE64_TO_JSON:
             return 'json'
diff --git a/frontend/src/consts/value_view_type.js b/frontend/src/consts/value_view_type.js
index ec22699..1095ee4 100644
--- a/frontend/src/consts/value_view_type.js
+++ b/frontend/src/consts/value_view_type.js
@@ -3,4 +3,6 @@ export const types = {
     JSON: 'JSON',
     BASE64_TO_TEXT: 'Base64 To Text',
     BASE64_TO_JSON: 'Base64 To JSON',
+    HEX: 'Hex',
+    BINARY: 'Binary',
 }
diff --git a/frontend/src/utils/string_convert.js b/frontend/src/utils/string_convert.js
new file mode 100644
index 0000000..8d08d2f
--- /dev/null
+++ b/frontend/src/utils/string_convert.js
@@ -0,0 +1,70 @@
+import { map, padStart } from 'lodash'
+
+/**
+ * convert string to json
+ * @param str
+ * @return {string}
+ */
+export const toJsonText = (str) => {
+    try {
+        const jsonObj = JSON.parse(str)
+        return JSON.stringify(jsonObj, null, 2)
+    } catch (e) {
+        return str
+    }
+}
+
+/**
+ * convert string from base64
+ * @param str
+ * @return {string}
+ */
+export const fromBase64 = (str) => {
+    try {
+        return atob(str)
+    } catch (e) {
+        return str
+    }
+}
+
+/**
+ * convert string from base64 to json
+ * @param str
+ * @return {string}
+ */
+export const fromBase64Json = (str) => {
+    try {
+        const text = atob(str)
+        const jsonObj = JSON.parse(text)
+        return JSON.stringify(jsonObj, null, 2)
+    } catch (e) {
+        return str
+    }
+}
+
+/**
+ * convert string to hex string
+ * @param str
+ * @return {string}
+ */
+export const toHex = (str) => {
+    const hexArr = map(str, (char) => {
+        const charCode = char.charCodeAt(0)
+        return charCode.toString(16)
+    })
+    return hexArr.join(' ')
+}
+
+/**
+ * convert string to binary string
+ * @param str
+ * @return {string}
+ */
+export const toBinary = (str) => {
+    const codeUnits = map(str, (char) => {
+        let code = char.charCodeAt(0).toString(2)
+        code = padStart(code, 8, '0')
+        return code
+    })
+    return codeUnits.join(' ')
+}