From 2d3225dbcfd809f37208ccd7a52a42989e9beefc Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 2 Dec 2023 00:58:15 +0800
Subject: [PATCH] perf: add copy value button for complex type #23

---
 .../components/common/EditableTableColumn.vue |  8 +++---
 .../content_value/ContentToolbar.vue          |  2 +-
 .../content_value/ContentValueHash.vue        | 15 +++++++++--
 .../content_value/ContentValueList.vue        | 15 +++++++++--
 .../content_value/ContentValueSet.vue         | 15 +++++++++--
 .../content_value/ContentValueStream.vue      | 27 +++++++++----------
 .../content_value/ContentValueString.vue      |  4 +--
 .../content_value/ContentValueZSet.vue        | 15 +++++++++--
 .../src/components/sidebar/BrowserTree.vue    |  2 +-
 frontend/src/langs/en-us.json                 |  4 +--
 frontend/src/langs/pt-br.json                 |  4 +--
 frontend/src/langs/zh-cn.json                 |  4 +--
 12 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/common/EditableTableColumn.vue b/frontend/src/components/common/EditableTableColumn.vue
index db2b0e2..5e266c2 100644
--- a/frontend/src/components/common/EditableTableColumn.vue
+++ b/frontend/src/components/common/EditableTableColumn.vue
@@ -4,6 +4,7 @@ import Delete from '@/components/icons/Delete.vue'
 import Edit from '@/components/icons/Edit.vue'
 import Close from '@/components/icons/Close.vue'
 import Save from '@/components/icons/Save.vue'
+import Copy from '@/components/icons/Copy.vue'
 
 const props = defineProps({
     bindKey: String,
@@ -11,7 +12,7 @@ const props = defineProps({
     readonly: Boolean,
 })
 
-const emit = defineEmits(['edit', 'delete', 'save', 'cancel'])
+const emit = defineEmits(['edit', 'delete', 'copy', 'save', 'cancel'])
 </script>
 
 <template>
@@ -21,13 +22,14 @@ const emit = defineEmits(['edit', 'delete', 'save', 'cancel'])
         <icon-button :icon="Close" @click="emit('cancel')" />
     </div>
     <div v-else class="flex-box-h edit-column-func">
-        <icon-button v-if="!props.readonly" :icon="Edit" @click="emit('edit')" />
+        <icon-button :icon="Copy" :title="$t('interface.copy_value')" @click="emit('copy')" />
+        <icon-button v-if="!props.readonly" :icon="Edit" :title="$t('interface.edit_row')" @click="emit('edit')" />
         <n-popconfirm
             :negative-text="$t('common.cancel')"
             :positive-text="$t('common.confirm')"
             @positive-click="emit('delete')">
             <template #trigger>
-                <icon-button :icon="Delete" />
+                <icon-button :icon="Delete" :title="$t('interface.delete_row')" />
             </template>
             {{ $t('dialogue.remove_tip', { name: props.bindKey }) }}
         </n-popconfirm>
diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index cd6b790..38c2902 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@@ -65,7 +65,7 @@ const onCopyKey = () => {
     ClipboardSetText(props.keyPath)
         .then((succ) => {
             if (succ) {
-                $message.success(i18n.t('dialogue.copy_succ'))
+                $message.success(i18n.t('interface.copy_succ'))
             }
         })
         .catch((e) => {
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index a1d4f59..bd8b242 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -19,6 +19,7 @@ import Edit from '@/components/icons/Edit.vue'
 import FormatSelector from '@/components/content_value/FormatSelector.vue'
 import { decodeRedisKey } from '@/utils/key_convert.js'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
+import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -163,7 +164,7 @@ const saveEdit = async (field, value, decode, format) => {
         })
         if (success) {
             currentEditRow.value = value
-            $message.success(i18n.t('dialogue.save_value_succ'))
+            $message.success(i18n.t('interface.save_value_succ'))
         } else {
             $message.error(msg)
         }
@@ -183,7 +184,7 @@ const resetEdit = () => {
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
-    width: 100,
+    width: 120,
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
@@ -191,6 +192,16 @@ const actionColumn = {
         return h(EditableTableColumn, {
             editing: false,
             bindKey: row.k,
+            onCopy: async () => {
+                try {
+                    const succ = await ClipboardSetText(row.v)
+                    if (succ) {
+                        $message.success(i18n.t('interface.copy_succ'))
+                    }
+                } catch (e) {
+                    $message.error(e.message)
+                }
+            },
             onEdit: () => startEdit(index + 1, row.k, row.v),
             onDelete: async () => {
                 try {
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index 88bc2f3..c72fa13 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -18,6 +18,7 @@ import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vu
 import FormatSelector from '@/components/content_value/FormatSelector.vue'
 import Edit from '@/components/icons/Edit.vue'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
+import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -142,7 +143,7 @@ const saveEdit = async (pos, value, decode, format) => {
             format,
         })
         if (success) {
-            $message.success(i18n.t('dialogue.save_value_succ'))
+            $message.success(i18n.t('interface.save_value_succ'))
         } else {
             $message.error(msg)
         }
@@ -159,7 +160,7 @@ const resetEdit = () => {
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
-    width: 100,
+    width: 120,
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
@@ -167,6 +168,16 @@ const actionColumn = {
         return h(EditableTableColumn, {
             editing: false,
             bindKey: `#${index + 1}`,
+            onCopy: async () => {
+                try {
+                    const succ = await ClipboardSetText(row.v)
+                    if (succ) {
+                        $message.success(i18n.t('interface.copy_succ'))
+                    }
+                } catch (e) {
+                    $message.error(e.message)
+                }
+            },
             onEdit: () => {
                 startEdit(index + 1, row.v)
             },
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index d4994d2..2cf9ebe 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -18,6 +18,7 @@ import Edit from '@/components/icons/Edit.vue'
 import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
 import FormatSelector from '@/components/content_value/FormatSelector.vue'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
+import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -139,7 +140,7 @@ const saveEdit = async (pos, value, decode, format) => {
             retFormat: props.format,
         })
         if (success) {
-            $message.success(i18n.t('dialogue.save_value_succ'))
+            $message.success(i18n.t('interface.save_value_succ'))
         } else {
             $message.error(msg)
         }
@@ -156,7 +157,7 @@ const resetEdit = () => {
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
-    width: 100,
+    width: 120,
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
@@ -164,6 +165,16 @@ const actionColumn = {
         return h(EditableTableColumn, {
             editing: false,
             bindKey: `#${index + 1}`,
+            onCopy: async () => {
+                try {
+                    const succ = await ClipboardSetText(row.v)
+                    if (succ) {
+                        $message.success(i18n.t('interface.copy_succ'))
+                    }
+                } catch (e) {
+                    $message.error(e.message)
+                }
+            },
             onEdit: () => {
                 startEdit(index + 1, row.v)
             },
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index 31d89c8..94277b3 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/frontend/src/components/content_value/ContentValueStream.vue
@@ -15,6 +15,7 @@ import LoadList from '@/components/icons/LoadList.vue'
 import LoadAll from '@/components/icons/LoadAll.vue'
 import IconButton from '@/components/common/IconButton.vue'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
+import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -99,7 +100,7 @@ const valueColumn = computed(() => ({
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
-    width: 60,
+    width: 80,
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
@@ -107,6 +108,16 @@ const actionColumn = {
         return h(EditableTableColumn, {
             bindKey: row.id,
             readonly: true,
+            onCopy: async () => {
+                try {
+                    const succ = await ClipboardSetText(JSON.stringify(row.v))
+                    if (succ) {
+                        $message.success(i18n.t('interface.copy_succ'))
+                    }
+                } catch (e) {
+                    $message.error(e.message)
+                }
+            },
             onDelete: async () => {
                 try {
                     const { success, msg } = await browserStore.removeStreamValues(
@@ -175,20 +186,6 @@ defineExpose({
             @rename="emit('rename')" />
         <div class="tb2 value-item-part flex-box-h">
             <div class="flex-box-h">
-                <!--                <n-input-group>-->
-                <!--                    <n-select-->
-                <!--                        v-model:value="filterType"-->
-                <!--                        :consistent-menu-width="false"-->
-                <!--                        :options="filterOption"-->
-                <!--                        style="width: 120px"-->
-                <!--                        @update:value="onChangeFilterType" />-->
-                <!--                    <n-input-->
-                <!--                        v-model:value="filterValue"-->
-                <!--                        :placeholder="$t('interface.search')"-->
-                <!--                        clearable-->
-                <!--                        @clear="clearFilter"-->
-                <!--                        @update:value="onFilterInput" />-->
-                <!--                </n-input-group>-->
                 <content-search-input
                     ref="searchInputRef"
                     @filter-changed="onFilterInput"
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index eba984e..8a26eb1 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -111,7 +111,7 @@ const onCopyValue = () => {
     ClipboardSetText(displayValue.value)
         .then((succ) => {
             if (succ) {
-                $message.success(i18n.t('dialogue.copy_succ'))
+                $message.success(i18n.t('interface.copy_succ'))
             }
         })
         .catch((e) => {
@@ -144,7 +144,7 @@ const onSave = async () => {
         })
         if (success) {
             // await browserStore.loadKeyDetail({ server: props.name, db: props.db, key: keyName.value })
-            $message.success(i18n.t('dialogue.save_value_succ'))
+            $message.success(i18n.t('interface.save_value_succ'))
         } else {
             $message.error(msg)
         }
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index a9e307b..15a51f7 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -18,6 +18,7 @@ import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vu
 import FormatSelector from '@/components/content_value/FormatSelector.vue'
 import Edit from '@/components/icons/Edit.vue'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
+import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -185,7 +186,7 @@ const saveEdit = async (field, value, decode, format) => {
             format,
         })
         if (success) {
-            $message.success(i18n.t('dialogue.save_value_succ'))
+            $message.success(i18n.t('interface.save_value_succ'))
         } else {
             $message.error(msg)
         }
@@ -205,7 +206,7 @@ const resetEdit = () => {
 const actionColumn = {
     key: 'action',
     title: i18n.t('interface.action'),
-    width: 100,
+    width: 120,
     align: 'center',
     titleAlign: 'center',
     fixed: 'right',
@@ -213,6 +214,16 @@ const actionColumn = {
         return h(EditableTableColumn, {
             editing: false,
             bindKey: row.v,
+            onCopy: async () => {
+                try {
+                    const succ = await ClipboardSetText(row.v)
+                    if (succ) {
+                        $message.success(i18n.t('interface.copy_succ'))
+                    }
+                } catch (e) {
+                    $message.error(e.message)
+                }
+            },
             onEdit: () => startEdit(index + 1, row.s, row.v),
             onDelete: async () => {
                 try {
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 35774aa..b3cd532 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -220,7 +220,7 @@ const handleSelectContextMenu = (key) => {
             ClipboardSetText(redisKey)
                 .then((succ) => {
                     if (succ) {
-                        $message.success(i18n.t('dialogue.copy_succ'))
+                        $message.success(i18n.t('interface.copy_succ'))
                     }
                 })
                 .catch((e) => {
diff --git a/frontend/src/langs/en-us.json b/frontend/src/langs/en-us.json
index c8fcd29..f048ff2 100644
--- a/frontend/src/langs/en-us.json
+++ b/frontend/src/langs/en-us.json
@@ -94,6 +94,8 @@
     "open_connection": "Open Connection",
     "copy_path": "Copy Path",
     "copy_key": "Copy Key",
+    "save_value_succ": "Value Saved !",
+    "copy_succ": "Value Copied !",
     "binary_key": "Binary Key Name",
     "remove_key": "Remove Key",
     "new_key": "Add Key",
@@ -130,8 +132,6 @@
     "remove_tip": "{type} \"{name}\" will be deleted",
     "remove_group_tip": "Group \"{name}\" and all connections in it will be deleted",
     "delete_key_succ": "\"{key}\" has been deleted",
-    "save_value_succ": "Value Saved !",
-    "copy_succ": "Value Copied !",
     "rename_binary_key_fail": "Rename binary key name is unsupported",
     "handle_succ": "Success!",
     "reload_succ": "Reloaded!",
diff --git a/frontend/src/langs/pt-br.json b/frontend/src/langs/pt-br.json
index fbc701f..3b60b14 100644
--- a/frontend/src/langs/pt-br.json
+++ b/frontend/src/langs/pt-br.json
@@ -88,6 +88,8 @@
     "open_connection": "Abrir Conexão",
     "copy_path": "Copiar Caminho",
     "copy_key": "Copiar Chave",
+    "save_value_succ": "Valor Salvo!",
+    "copy_succ": "Valor Copiado!",
     "binary_key": "Nome da Chave Binária",
     "remove_key": "Remover Chave",
     "new_key": "Adicionar Chave",
@@ -122,8 +124,6 @@
     "remove_tip": "{type} \"{name}\" será excluído",
     "remove_group_tip": "O grupo \"{name}\" e todas as conexões nele serão excluídos",
     "delete_key_succ": "\"{key}\" foi excluída",
-    "save_value_succ": "Valor Salvo!",
-    "copy_succ": "Valor Copiado!",
     "rename_binary_key_fail": "Renomear nome de chave binária não é suportado",
     "handle_succ": "Sucesso!",
     "reload_succ": "Recarregado!",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 04d267f..3afef6b 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -94,6 +94,8 @@
     "open_connection": "打开连接",
     "copy_path": "复制路径",
     "copy_key": "复制键名",
+    "save_value_succ": "已保存值",
+    "copy_succ": "已复制到剪切板",
     "binary_key": "二进制键名",
     "remove_key": "删除键",
     "new_key": "添加新键",
@@ -130,8 +132,6 @@
     "remove_tip": "{type} \"{name}\" 将会被删除",
     "remove_group_tip": "分组 \"{name}\"及其所有连接将会被删除",
     "delete_key_succ": "{key} 已被删除",
-    "save_value_succ": "已保存值",
-    "copy_succ": "已复制到剪切板",
     "rename_binary_key_fail": "不支持重命名二进制键名",
     "handle_succ": "操作成功",
     "reload_succ": "已重新载入",