refactor: encapsulate connection state and behavior into classes

frontend/src/components/dialogs/NewKeyDialog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, reactive, ref, watch } from 'vue'
+import { computed, h, nextTick, reactive, ref, watch } from 'vue'
 import { types, typesColor } from '@/consts/support_redis_type.js'
 import useDialog from 'stores/dialog'
 import { endsWith, get, isEmpty, keys, map, trim } from 'lodash'
@@ -148,6 +148,7 @@ const onAdd = async () => {
         })
         if (success) {
             // select current key
+            await nextTick()
             tabStore.setSelectedKeys(server, nodeKey)
             browserStore.loadKeySummary({ server, db, key, clearValue: true })
         } else if (!isEmpty(msg)) {

frontend/src/objects/redisNodeItem.js

@@ -1,4 +1,4 @@
-import { isEmpty, remove, size, sortBy, sortedIndexBy, sumBy } from 'lodash'
+import { isEmpty, remove, size, sortedIndexBy, sumBy } from 'lodash'
 import { ConnectionType } from '@/consts/connection_type.js'
 
 /**
@@ -79,7 +79,7 @@ export class RedisNodeItem {
         } else if (this.type === ConnectionType.RedisKey || this.type === ConnectionType.RedisDB) {
             let keyCount = 0
             if (!isEmpty(this.children)) {
-                if (skipSort !== true) {
+                if (!!!skipSort) {
                     this.sortChildren()
                 }
                 for (const child of this.children) {
@@ -98,7 +98,9 @@ export class RedisNodeItem {
     }
 
     sortChildren() {
-        sortBy(this.children, (item) => item.key)
+        this.children.sort((a, b) => {
+            return a.key > b.key ? 1 : -1
+        })
     }
 
     /**

frontend/src/stores/browser.js

@@ -282,10 +282,6 @@ const useBrowserStore = defineStore('browser', {
                 throw new Error(msg)
             }
             const { keys = [], end = false, maxKeys = 0 } = data
-            const selDB = this.getDatabase(server, db)
-            if (selDB == null) {
-                return
-            }
 
             /** @type {RedisServerState} **/
             const serverInst = this.servers[server]
@@ -297,13 +293,12 @@ const useBrowserStore = defineStore('browser', {
             serverInst.loadingState.fullLoaded = end
 
             if (isEmpty(keys)) {
-                selDB.children = []
                 serverInst.nodeMap.clear()
             } else {
                 // append db node to current connection's children
                 serverInst.addKeyNodes(keys)
             }
-            serverInst.tidyNode()
+            serverInst.tidyNode('', false)
         },
 
         /**