From 9d897894b6bbcf85fe3adc6f86c458afecea3c83 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Thu, 20 Jul 2023 16:02:02 +0800
Subject: [PATCH] fix: browser node tree not sync when new or delete node

---
 frontend/package.json.md5                     |  2 +-
 .../content_value/ContentValueString.vue      |  6 +-
 frontend/src/stores/connections.js            | 78 ++++++++++++-------
 3 files changed, 55 insertions(+), 31 deletions(-)

diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index 3645e52..4ae3b6b 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-e8efe46ff15777b1af82225bac5f4626
\ No newline at end of file
+5f51299692e0fa4f59808fc597b869bc
\ No newline at end of file
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 2ae2947..62d7024 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -74,6 +74,10 @@ watch(
 )
 
 const keyType = redisTypes.STRING
+/**
+ * view value
+ * @type {ComputedRef<string>}
+ */
 const viewValue = computed(() => {
     switch (viewAs.value) {
         case types.PLAIN_TEXT:
@@ -199,7 +203,7 @@ const onSaveValue = async () => {
         </div>
         <div class="value-wrapper flex-item-expand flex-box-v">
             <n-scrollbar v-if="!inEdit" class="flex-item-expand">
-                <n-code :code="viewValue" :language="viewLanguage" show-line-numbers word-wrap />
+                <n-code :code="viewValue" :language="viewLanguage" show-line-numbers word-wrap style="cursor: text" />
             </n-scrollbar>
             <n-input
                 v-else
diff --git a/frontend/src/stores/connections.js b/frontend/src/stores/connections.js
index 1c8c7e2..b5b4f67 100644
--- a/frontend/src/stores/connections.js
+++ b/frontend/src/stores/connections.js
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { endsWith, get, isEmpty, join, remove, size, slice, split, sumBy, toUpper, uniq } from 'lodash'
+import { endsWith, get, isEmpty, join, remove, size, slice, sortedIndexBy, split, sumBy, toUpper, uniq } from 'lodash'
 import {
     AddHashField,
     AddListItem,
@@ -618,11 +618,14 @@ const useConnectionStore = defineStore('connections', {
          * @param {string} connName
          * @param {number} db
          * @param {string[]} keys
+         * @param {boolean} [sortInsert]
+         * @return {{success: boolean, newKey: number, newLayer: number, replaceKey: number}}
          * @private
          */
-        _addKeyNodes(connName, db, keys) {
+        _addKeyNodes(connName, db, keys, sortInsert) {
+            const result = { success: false, newLayer: 0, newKey: 0, replaceKey: 0 }
             if (isEmpty(keys)) {
-                return
+                return result
             }
             const separator = this._getSeparator(connName)
             const dbs = this.databases[connName]
@@ -655,7 +658,15 @@ const useConnectionStore = defineStore('connections', {
                                 children: [],
                             }
                             nodeMap.set(nodeKey, selectedNode)
-                            children.push(selectedNode)
+                            if (sortInsert) {
+                                const index = sortedIndexBy(children, selectedNode, (elem) => {
+                                    return elem.key
+                                })
+                                children.splice(index, 0, selectedNode)
+                            } else {
+                                children.push(selectedNode)
+                            }
+                            result.newLayer += 1
                         }
                         children = selectedNode.children
                         handlePath += separator
@@ -674,11 +685,22 @@ const useConnectionStore = defineStore('connections', {
                         }
                         nodeMap.set(nodeKey, selectedNode)
                         if (!replaceKey) {
-                            children.push(selectedNode)
+                            if (sortInsert) {
+                                const index = sortedIndexBy(children, selectedNode, (elem) => {
+                                    return elem.key > selectedNode.key
+                                })
+                                children.splice(index, 0, selectedNode)
+                            } else {
+                                children.push(selectedNode)
+                            }
+                            result.newKey += 1
+                        } else {
+                            result.replaceKey += 1
                         }
                     }
                 }
             }
+            return result
         },
 
         /**
@@ -708,33 +730,31 @@ const useConnectionStore = defineStore('connections', {
             const separator = this._getSeparator(connName)
             const keyParts = split(key, separator)
             const totalParts = size(keyParts)
-            const parentKey = slice(keyParts, 0, totalParts - 1)
             const dbNode = get(this.databases, [connName, db], {})
-            const isDBRoot = isEmpty(parentKey)
             let node
-            if (isDBRoot) {
-                // use db root node
-                node = dbNode
-            } else {
-                node = nodeMap.get(`${ConnectionType.RedisKey}/${join(parentKey, separator)}`)
+            // find last exists ancestor key
+            let i = totalParts - 1
+            for (; i > 0; i--) {
+                const parentKey = join(slice(keyParts, 0, i), separator)
+                node = nodeMap.get(`${ConnectionType.RedisKey}/${parentKey}`)
+                if (node != null) {
+                    break
+                }
             }
             if (node == null) {
-                return false
+                node = dbNode
             }
             const keyCountUpdated = this._tidyNodeChildren(node, skipResort)
 
             if (keyCountUpdated) {
                 // update key count of parent and above
-                if (!isDBRoot) {
-                    let i = totalParts - 1
-                    for (; i > 0; i--) {
-                        const parentKey = join(slice(keyParts, 0, i), separator)
-                        const parentNode = nodeMap.get(`${ConnectionType.RedisKey}/${parentKey}`)
-                        if (parentNode == null) {
-                            break
-                        }
-                        parentNode.keys = sumBy(parentNode.children, 'keys')
+                for (; i > 0; i--) {
+                    const parentKey = join(slice(keyParts, 0, i), separator)
+                    const parentNode = nodeMap.get(`${ConnectionType.RedisKey}/${parentKey}`)
+                    if (parentNode == null) {
+                        break
                     }
+                    parentNode.keys = sumBy(parentNode.children, 'keys')
                 }
                 // update key count of db
                 dbNode.keys = sumBy(dbNode.children, 'keys')
@@ -785,8 +805,10 @@ const useConnectionStore = defineStore('connections', {
                 const { data, success, msg } = await SetKeyValue(connName, db, key, keyType, value, ttl)
                 if (success) {
                     // update tree view data
-                    this._addKeyNodes(connName, db, [key])
-                    this._tidyNode(connName, db, key)
+                    const { newKey = 0 } = this._addKeyNodes(connName, db, [key], true)
+                    if (newKey > 0) {
+                        this._tidyNode(connName, db, key)
+                    }
                     return { success }
                 } else {
                     return { success, msg }
@@ -1170,14 +1192,12 @@ const useConnectionStore = defineStore('connections', {
                 const anceKey = join(slice(keyParts, 0, i), separator)
                 if (i > 0) {
                     const anceNode = nodeMap.get(`${ConnectionType.RedisKey}/${anceKey}`)
+                    const redisKey = join(slice(keyParts, 0, i + 1), separator)
+                    remove(anceNode.children, { type: ConnectionType.RedisKey, redisKey })
+
                     if (isEmpty(anceNode.children)) {
                         nodeMap.delete(`${ConnectionType.RedisKey}/${anceKey}`)
                     } else {
-                        // remove last empty layer node from parent
-                        if (i !== totalParts - 1) {
-                            const redisKey = slice(keyParts, 0, i + 1)
-                            remove(anceNode.children, { type: ConnectionType.RedisKey, redisKey })
-                        }
                         break
                     }
                 } else {