fix: browser node tree not sync when new or delete node

frontend/package.json.md5

@@ -1 +1 @@
-e8efe46ff15777b1af82225bac5f4626
+5f51299692e0fa4f59808fc597b869bc

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

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,8 +658,16 @@ const useConnectionStore = defineStore('connections', {
                                 children: [],
                             }
                             nodeMap.set(nodeKey, 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
                     } else {
@@ -674,11 +685,22 @@ const useConnectionStore = defineStore('connections', {
                         }
                         nodeMap.set(nodeKey, selectedNode)
                         if (!replaceKey) {
+                            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,25 +730,24 @@ 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) {
+            // find last exists ancestor key
-                // use db root node
+            let i = totalParts - 1
-                node = dbNode
+            for (; i > 0; i--) {
-            } else {
+                const parentKey = join(slice(keyParts, 0, i), separator)
-                node = nodeMap.get(`${ConnectionType.RedisKey}/${join(parentKey, 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}`)
@@ -735,7 +756,6 @@ const useConnectionStore = defineStore('connections', {
                     }
                     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])
+                    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 {