From d7955702f84dc3e14ec14df96b016df0ea6bf388 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Wed, 5 Jul 2023 00:57:00 +0800
Subject: [PATCH] feat: add reload database

---
 .../src/components/content/ContentPane.vue    | 38 ++++++++++++++++---
 .../components/dialogs/ConnectionDialog.vue   |  2 +-
 .../components/dialogs/PreferencesDialog.vue  |  2 +-
 frontend/src/components/icons/Close.vue       | 22 ++++++++++-
 .../src/components/sidebar/BrowserTree.vue    |  7 ++--
 frontend/src/stores/connections.js            | 20 +++++-----
 6 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 8a3c7d3..8fcf4d2 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -54,10 +54,6 @@ const onUpdateValue = (tabIndex) => {
     tabStore.switchTab(tabIndex)
 }
 
-const onAddTab = () => {
-    tabStore.newBlankTab()
-}
-
 const i18n = useI18n()
 const confirmDialog = useConfirmDialog()
 const onCloseTab = (tabIndex) => {
@@ -72,13 +68,12 @@ const onCloseTab = (tabIndex) => {
 
 <template>
     <div class="content-container flex-box-v">
-        <!--    <content-tab :model-value="tab"></content-tab>-->
+        <!--        <content-tab :model-value="tab"></content-tab>-->
         <n-tabs
             v-model:value="tabStore.activatedIndex"
             :closable="true"
             size="small"
             type="card"
-            @add="onAddTab"
             @close="onCloseTab"
             @update:value="onUpdateValue"
         >
@@ -86,6 +81,18 @@ const onCloseTab = (tabIndex) => {
                 <n-ellipsis style="max-width: 150px">{{ t.label }}</n-ellipsis>
             </n-tab>
         </n-tabs>
+        <!--        <n-tabs v-model:value="tabStore.activatedIndex" type="line" @update:value="onUpdateValue" :tabs-padding="0">-->
+        <!--            <n-tab v-for="(t, i) in tab" :key="i" :name="i">-->
+        <!--                <div class="tab-item flex-box-h">-->
+        <!--                    <div class="tab-item-label ellipsis">-->
+        <!--                        {{ t.label }}-->
+        <!--                    </div>-->
+        <!--                    <n-icon class="tab-item-close" color="gray" size="16" @click.stop="onCloseTab(i)">-->
+        <!--                        <Close :round="false" :stroke-width="5" />-->
+        <!--                    </n-icon>-->
+        <!--                </div>-->
+        <!--            </n-tab>-->
+        <!--        </n-tabs>-->
         <!-- TODO: add loading status -->
         <component
             v-if="tabContent != null && !isEmpty(tabContent.keyPath)"
@@ -104,4 +111,23 @@ const onCloseTab = (tabIndex) => {
 
 <style lang="scss" scoped>
 @import 'content';
+//.tab-item {
+//    gap: 5px;
+//    padding: 0 5px 0 10px;
+//    align-items: center;
+//    max-width: 150px;
+//
+//    transition: all var(--transition-duration-fast) var(--transition-function-ease-in-out-bezier);
+//
+//    &-label {
+//        font-size: 15px;
+//        text-align: center;
+//    }
+//
+//    &-close {
+//        &:hover {
+//            background-color: rgb(176, 177, 182, 0.4);
+//        }
+//    }
+//}
 </style>
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index 1051d2c..eeb8c16 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -152,7 +152,7 @@ const onClose = () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-tabs v-model:value="tab" type="line">
+        <n-tabs v-model:value="tab" type="line" animated>
             <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
                 <n-form
                     ref="generalFormRef"
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index 1da3f79..84f5c90 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -116,7 +116,7 @@ const onClose = () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-tabs v-model:value="tab" type="line">
+        <n-tabs v-model:value="tab" type="line" animated>
             <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
                 <n-form
                     :label-width="formLabelWidth"
diff --git a/frontend/src/components/icons/Close.vue b/frontend/src/components/icons/Close.vue
index bdb136d..35c03a8 100644
--- a/frontend/src/components/icons/Close.vue
+++ b/frontend/src/components/icons/Close.vue
@@ -4,11 +4,15 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    round: {
+        type: Boolean,
+        default: true,
+    },
 })
 </script>
 
 <template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="round !== false" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
             :stroke-width="strokeWidth"
             d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
@@ -31,6 +35,22 @@ const props = defineProps({
             stroke-linejoin="round"
         />
     </svg>
+    <svg v-else width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M8 8L40 40"
+            stroke="currentColor"
+            :stroke-width="strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M8 40L40 8"
+            stroke="currentColor"
+            :stroke-width="strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index c5f8005..55fc1c3 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -274,13 +274,12 @@ const handleSelectContextMenu = (key) => {
     contextMenuParam.show = false
     const { name, db, key: nodeKey, redisKey } = contextMenuParam.currentNode
     switch (key) {
-        // case 'server_reload':
-        // case 'db_reload':
-        //     connectionStore.loadKeyValue()
-        //     break
         case 'db_open':
             nextTick().then(() => expandKey(nodeKey))
             break
+        case 'db_reload':
+            connectionStore.scanKeys(name, db)
+            break
         case 'db_newkey':
         case 'key_newkey':
             dialogStore.openNewKeyDialog(redisKey, name, db)
diff --git a/frontend/src/stores/connections.js b/frontend/src/stores/connections.js
index f6ac0dd..f02559e 100644
--- a/frontend/src/stores/connections.js
+++ b/frontend/src/stores/connections.js
@@ -425,25 +425,27 @@ const useConnectionStore = defineStore('connections', {
          * scan keys with prefix
          * @param {string} connName
          * @param {number} db
-         * @param {string} prefix
+         * @param {string} [prefix] full reload database if prefix is null
          * @returns {Promise<void>}
          */
         async scanKeys(connName, db, prefix) {
-            const { data, success, msg } = await ScanKeys(connName, db, prefix)
+            const { data, success, msg } = await ScanKeys(connName, db, prefix || '*')
             if (!success) {
                 throw new Error(msg)
             }
             // remove current keys below prefix
-            const prefixPart = split(prefix, separator)
             const dbs = this.databases[connName]
             let node = dbs[db]
-            for (const key of prefixPart) {
-                const idx = findIndex(node.children, { label: key })
-                if (idx === -1) {
-                    node = null
-                    break
+            if (!isEmpty(prefix)) {
+                const prefixPart = split(prefix, separator)
+                for (const key of prefixPart) {
+                    const idx = findIndex(node.children, { label: key })
+                    if (idx === -1) {
+                        node = null
+                        break
+                    }
+                    node = node.children[idx]
                 }
-                node = node.children[idx]
             }
             if (node != null) {
                 node.children = []