From e906a9196495e686b9b50ed69af7b57a7f3af052 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Tue, 4 Jul 2023 00:42:17 +0800
Subject: [PATCH] feat: complete function in toolbar of browser refactor: use
 uniform confirm dialog for delete key

---
 .../components/common/EditableTableColumn.vue |  2 +-
 .../content_value/ContentToolbar.vue          | 32 +++----
 .../src/components/sidebar/BrowserPane.vue    | 91 ++++++++++++++-----
 .../src/components/sidebar/BrowserTree.vue    | 11 +--
 .../src/components/sidebar/ConnectionPane.vue | 13 +--
 frontend/src/langs/en.json                    |  2 +-
 frontend/src/langs/zh-cn.json                 |  2 +-
 frontend/src/stores/connections.js            | 10 +-
 frontend/src/style.scss                       | 13 +++
 9 files changed, 110 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/common/EditableTableColumn.vue b/frontend/src/components/common/EditableTableColumn.vue
index bec23b0..3c7b88a 100644
--- a/frontend/src/components/common/EditableTableColumn.vue
+++ b/frontend/src/components/common/EditableTableColumn.vue
@@ -25,7 +25,7 @@ const emit = defineEmits(['edit', 'delete', 'save', 'cancel'])
             <template #trigger>
                 <icon-button :icon="Delete" />
             </template>
-            {{ $t('delete_key_tip', { key: props.bindKey }) }}
+            {{ $t('remove_tip', { name: props.bindKey }) }}
         </n-popconfirm>
     </div>
 </template>
diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index 676885a..fc41e54 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@@ -10,6 +10,7 @@ import { useI18n } from 'vue-i18n'
 import { useMessage } from 'naive-ui'
 import IconButton from '../common/IconButton.vue'
 import useConnectionStore from '../../stores/connections.js'
+import { useConfirmDialog } from '../../utils/confirm_dialog.js'
 
 const props = defineProps({
     server: String,
@@ -37,11 +38,15 @@ const onReloadKey = () => {
     connectionStore.loadKeyValue(props.server, props.db, props.keyPath)
 }
 
-const onConfirmDelete = async () => {
-    const success = await connectionStore.removeKey(props.server, props.db, props.keyPath)
-    if (success) {
-        message.success(i18n.t('delete_key_succ', { key: props.keyPath }))
-    }
+const confirmDialog = useConfirmDialog()
+const onDeleteKey = () => {
+    confirmDialog.warning(i18n.t('remove_tip', { name: props.keyPath }), () => {
+        connectionStore.removeKey(props.server, props.db, props.keyPath).then((success) => {
+            if (success) {
+                message.success(i18n.t('delete_key_succ', { key: props.keyPath }))
+            }
+        })
+    })
 }
 </script>
 
@@ -86,20 +91,11 @@ const onConfirmDelete = async () => {
         </n-button-group>
         <n-tooltip>
             <template #trigger>
-                <n-popconfirm
-                    :negative-text="$t('cancel')"
-                    :positive-text="$t('confirm')"
-                    @positive-click="onConfirmDelete"
-                >
-                    <template #trigger>
-                        <n-button>
-                            <template #icon>
-                                <n-icon :component="Delete" size="18" />
-                            </template>
-                        </n-button>
+                <n-button>
+                    <template #icon>
+                        <n-icon :component="Delete" size="18" @click="onDeleteKey" />
                     </template>
-                    {{ $t('delete_key_tip', { key: props.keyPath }) }}
-                </n-popconfirm>
+                </n-button>
             </template>
             {{ $t('delete_key') }}
         </n-tooltip>
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 659a8d6..1acb0b4 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { NIcon } from 'naive-ui'
+import { NIcon, useMessage } from 'naive-ui'
 import AddLink from '../icons/AddLink.vue'
 import BrowserTree from './BrowserTree.vue'
 import IconButton from '../common/IconButton.vue'
@@ -10,10 +10,47 @@ import { get } from 'lodash'
 import Delete from '../icons/Delete.vue'
 import Refresh from '../icons/Refresh.vue'
 import useDialogStore from '../../stores/dialog.js'
+import { useConfirmDialog } from '../../utils/confirm_dialog.js'
+import { useI18n } from 'vue-i18n'
+import useConnectionStore from '../../stores/connections.js'
 
 const dialogStore = useDialogStore()
 const tabStore = useTabStore()
 const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
+/**
+ *
+ * @type {ComputedRef<{server: string, db: number, key: string}>}
+ */
+const currentSelect = computed(() => {
+    const { server, db, key } = tabStore.currentTab || {}
+    return { server, db, key }
+})
+
+const onNewKey = () => {
+    const { server, db, key } = currentSelect.value
+    dialogStore.openNewKeyDialog(key, server, db)
+}
+
+const i18n = useI18n()
+const connectionStore = useConnectionStore()
+const confirmDialog = useConfirmDialog()
+const message = useMessage()
+const onDeleteKey = () => {
+    const { server, db, key } = currentSelect.value
+    confirmDialog.warning(i18n.t('remove_tip', { name: key }), () => {
+        connectionStore.removeKey(server, db, key).then((success) => {
+            if (success) {
+                message.success(i18n.t('delete_key_succ', { key }))
+            }
+        })
+    })
+}
+
+const onRefresh = () => {
+    connectionStore.openConnection(currentSelect.value.server, true).then(() => {
+        message.success(i18n.t('reload_succ'))
+    })
+}
 </script>
 
 <template>
@@ -22,27 +59,39 @@ const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
 
         <!-- bottom function bar -->
         <div class="nav-pane-bottom flex-box-h">
-            <icon-button :icon="AddLink" color="#555" size="20" stroke-width="4" t-tooltip="new_key" />
-            <icon-button :icon="Delete" color="#555" size="20" stroke-width="4" t-tooltip="remove_key" />
-            <icon-button :icon="Refresh" color="#555" size="20" stroke-width="4" t-tooltip="reload" />
-            <n-input placeholder="">
-                <template #prefix>
-                    <n-icon :component="Filter" color="#aaa" size="20" />
-                </template>
-            </n-input>
+            <icon-button
+                :icon="AddLink"
+                color="#555"
+                size="20"
+                stroke-width="4"
+                t-tooltip="new_key"
+                @click="onNewKey"
+            />
+            <icon-button
+                :icon="Refresh"
+                color="#555"
+                size="20"
+                stroke-width="4"
+                t-tooltip="reload"
+                @click="onRefresh"
+            />
+            <div class="flex-item-expand"></div>
+            <icon-button
+                :disabled="currentSelect.key == null"
+                :icon="Delete"
+                color="#555"
+                size="20"
+                stroke-width="4"
+                t-tooltip="remove_key"
+                @click="onDeleteKey"
+            />
+            <!--            <n-input placeholder="">-->
+            <!--                <template #prefix>-->
+            <!--                    <n-icon :component="Filter" color="#aaa" size="20" />-->
+            <!--                </template>-->
+            <!--            </n-input>-->
         </div>
     </div>
 </template>
 
-<style lang="scss" scoped>
-.nav-pane-container {
-    overflow: hidden;
-    background-color: var(--bg-color);
-
-    .nav-pane-bottom {
-        align-items: center;
-        gap: 5px;
-        padding: 3px 3px 5px 5px;
-    }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index bf68963..652027a 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -162,15 +162,6 @@ const onUpdateSelectedKeys = (keys, option) => {
     selectedKeys.value = keys
 }
 
-watch(
-    () => selectedKeys,
-    (keys) => {
-        if (size(keys) > 0) {
-            console.log('selected')
-        }
-    }
-)
-
 const renderPrefix = ({ option }) => {
     switch (option.type) {
         case ConnectionType.RedisDB:
@@ -290,7 +281,7 @@ const handleSelectContextMenu = (key) => {
             break
         case 'key_remove':
         case 'value_remove':
-            confirmDialog.warning(i18n.t('delete_key_tip', { key: redisKey }), () => {
+            confirmDialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
                 connectionStore.removeKey(name, db, redisKey).then((success) => {
                     if (success) {
                         message.success(i18n.t('delete_key_succ', { key: redisKey }))
diff --git a/frontend/src/components/sidebar/ConnectionPane.vue b/frontend/src/components/sidebar/ConnectionPane.vue
index 2ac30f3..23ecf6a 100644
--- a/frontend/src/components/sidebar/ConnectionPane.vue
+++ b/frontend/src/components/sidebar/ConnectionPane.vue
@@ -59,15 +59,4 @@ const onDisconnectAll = () => {
     </div>
 </template>
 
-<style lang="scss" scoped>
-.nav-pane-container {
-    overflow: hidden;
-    background-color: var(--bg-color);
-
-    .nav-pane-bottom {
-        align-items: center;
-        gap: 5px;
-        padding: 3px 3px 5px 5px;
-    }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json
index 16cce9c..2dad811 100644
--- a/frontend/src/langs/en.json
+++ b/frontend/src/langs/en.json
@@ -19,7 +19,6 @@
   "forever": "Forever",
   "rename_key": "Rename Key",
   "delete_key": "Delete Key",
-  "delete_key_tip": "\"{key}\" will be deleted",
   "delete_key_succ": "\"{key}\" has been deleted",
   "copy_value": "Copy Value",
   "edit_value": "Edit Value",
@@ -110,6 +109,7 @@
   "copy_value_succ": "Value Copied !",
   "save_value_succ": "Value Saved !",
   "handle_succ": "Handle Success !",
+  "reload_succ": "Reload Success !",
   "field_required": "This item should not be blank",
   "spec_field_required": "\"{key}\" should not be blank",
   "no_connections": "No Connection",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index 117832d..81e4e53 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -19,7 +19,6 @@
   "forever": "永久",
   "rename_key": "重命名键",
   "delete_key": "删除键",
-  "delete_key_tip": "{key} 将会被删除",
   "delete_key_succ": "{key} 已被删除",
   "copy_value": "复制值",
   "edit_value": "修改值",
@@ -113,6 +112,7 @@
   "copy_succ": "已复制到剪切板",
   "save_value_succ": "已保存值",
   "handle_succ": "操作成功",
+  "reload_succ": "已重新载入",
   "field_required": "此项不能为空",
   "spec_field_required": "{key} 不能为空",
   "no_connections": "空空如也",
diff --git a/frontend/src/stores/connections.js b/frontend/src/stores/connections.js
index e450f6e..807b574 100644
--- a/frontend/src/stores/connections.js
+++ b/frontend/src/stores/connections.js
@@ -233,11 +233,17 @@ const useConnectionStore = defineStore('connections', {
         /**
          * open connection
          * @param {string} name
+         * @param {boolean} [reload]
          * @returns {Promise<void>}
          */
-        async openConnection(name) {
+        async openConnection(name, reload) {
             if (this.isConnected(name)) {
-                return
+                if (reload !== true) {
+                    return
+                } else {
+                    // reload mode, try close connection first
+                    await CloseConnection(name)
+                }
             }
 
             const { data, success, msg } = await OpenConnection(name)
diff --git a/frontend/src/style.scss b/frontend/src/style.scss
index bc0f701..e76361f 100644
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -111,3 +111,16 @@ body {
   min-width: 100px;
   padding-right: 10px;
 }
+
+.nav-pane-container {
+  overflow: hidden;
+  background-color: var(--bg-color);
+
+  .nav-pane-bottom {
+    align-items: center;
+    gap: 8px;
+    padding: 3px 5px 5px 5px;
+    min-height: 35px;
+    border-top: var(--border-color) 1px solid;
+  }
+}