From 803c9c1a505ac4fce36469c3ad688a2af026b368 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 18 Aug 2023 17:57:02 +0800
Subject: [PATCH] fix: disable loading indicator when preferences dialog
 display fix: replace regex match with self-parse for parse node key

---
 .../components/dialogs/PreferencesDialog.vue  | 147 ++++++++----------
 frontend/src/stores/connections.js            |  50 ++++--
 2 files changed, 105 insertions(+), 92 deletions(-)

diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index efff4ca..d073c00 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import useDialog from 'stores/dialog'
 import usePreferencesStore from 'stores/preferences.js'
@@ -34,7 +34,7 @@ watch(
     () => dialogStore.preferencesDialogVisible,
     (visible) => {
         if (visible) {
-            nextTick().then(initPreferences)
+            initPreferences()
         }
     },
 )
@@ -72,84 +72,75 @@ const onClose = () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-spin :show="loading">
-            <n-tabs v-model:value="tab" animated type="line">
-                <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
-                    <n-form
-                        :label-width="formLabelWidth"
-                        :model="prefStore.general"
-                        :show-require-mark="false"
-                        label-align="right"
-                        label-placement="left"
-                    >
-                        <n-form-item :label="$t('theme')" required>
-                            <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
-                                <n-radio-button
-                                    v-for="opt in prefStore.themeOption"
-                                    :key="opt.value"
-                                    :value="opt.value"
-                                >
-                                    {{ opt.label }}
-                                </n-radio-button>
-                            </n-radio-group>
-                        </n-form-item>
-                        <n-form-item :label="$t('language')" required>
-                            <n-select
-                                v-model:value="prefStore.general.language"
-                                :options="prefStore.langOption"
-                                filterable
-                            />
-                        </n-form-item>
-                        <n-form-item :label="$t('font')" required>
-                            <n-select
-                                v-model:value="prefStore.general.font"
-                                :options="prefStore.fontOption"
-                                filterable
-                            />
-                        </n-form-item>
-                        <n-form-item :label="$t('font_size')">
-                            <n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
-                        </n-form-item>
-                        <n-form-item :label="$t('proxy')">
-                            <n-space>
-                                <n-checkbox v-model:checked="prefStore.general.useSysProxy">
-                                    {{ $t('use_system_proxy') }}
-                                </n-checkbox>
-                                <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
-                                    {{ $t('use_system_proxy_http') }}
-                                </n-checkbox>
-                            </n-space>
-                        </n-form-item>
-                        <n-form-item :label="$t('update')">
-                            <n-checkbox v-model:checked="prefStore.general.checkUpdate">
-                                {{ $t('auto_check_update') }}
+        <!-- FIXME: set loading will slow down appear animation of dialog in linux -->
+        <!-- <n-spin :show="loading"> -->
+        <n-tabs v-model:value="tab" animated type="line">
+            <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
+                <n-form
+                    :disabled="loading"
+                    :label-width="formLabelWidth"
+                    :model="prefStore.general"
+                    :show-require-mark="false"
+                    label-align="right"
+                    label-placement="left"
+                >
+                    <n-form-item :label="$t('theme')" required>
+                        <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
+                            <n-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value">
+                                {{ opt.label }}
+                            </n-radio-button>
+                        </n-radio-group>
+                    </n-form-item>
+                    <n-form-item :label="$t('language')" required>
+                        <n-select
+                            v-model:value="prefStore.general.language"
+                            :options="prefStore.langOption"
+                            filterable
+                        />
+                    </n-form-item>
+                    <n-form-item :label="$t('font')" required>
+                        <n-select v-model:value="prefStore.general.font" :options="prefStore.fontOption" filterable />
+                    </n-form-item>
+                    <n-form-item :label="$t('font_size')">
+                        <n-input-number v-model:value="prefStore.general.fontSize" :max="65535" :min="1" />
+                    </n-form-item>
+                    <n-form-item :label="$t('proxy')">
+                        <n-space>
+                            <n-checkbox v-model:checked="prefStore.general.useSysProxy">
+                                {{ $t('use_system_proxy') }}
                             </n-checkbox>
-                        </n-form-item>
-                    </n-form>
-                </n-tab-pane>
+                            <n-checkbox v-model:checked="prefStore.general.useSysProxyHttp">
+                                {{ $t('use_system_proxy_http') }}
+                            </n-checkbox>
+                        </n-space>
+                    </n-form-item>
+                    <n-form-item :label="$t('update')">
+                        <n-checkbox v-model:checked="prefStore.general.checkUpdate">
+                            {{ $t('auto_check_update') }}
+                        </n-checkbox>
+                    </n-form-item>
+                </n-form>
+            </n-tab-pane>
 
-                <n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
-                    <n-form
-                        :label-width="formLabelWidth"
-                        :model="prefStore.editor"
-                        :show-require-mark="false"
-                        label-align="right"
-                        label-placement="left"
-                    >
-                        <n-form-item :label="$t('font')" required>
-                            <n-select
-                                v-model:value="prefStore.editor.font"
-                                :options="prefStore.fontOption"
-                                filterable
-                            />
-                        </n-form-item>
-                        <n-form-item :label="$t('font_size')">
-                            <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
-                        </n-form-item>
-                    </n-form>
-                </n-tab-pane>
-            </n-tabs>
-        </n-spin>
+            <n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
+                <n-form
+                    :disabled="loading"
+                    :label-width="formLabelWidth"
+                    :model="prefStore.editor"
+                    :show-require-mark="false"
+                    label-align="right"
+                    label-placement="left"
+                >
+                    <n-form-item :label="$t('font')" required>
+                        <n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable />
+                    </n-form-item>
+                    <n-form-item :label="$t('font_size')">
+                        <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />
+                    </n-form-item>
+                </n-form>
+            </n-tab-pane>
+        </n-tabs>
+        <!-- </n-spin> -->
 
         <template #action>
             <div class="flex-item-expand">
diff --git a/frontend/src/stores/connections.js b/frontend/src/stores/connections.js
index 0b1ca86..d49414c 100644
--- a/frontend/src/stores/connections.js
+++ b/frontend/src/stores/connections.js
@@ -1,5 +1,20 @@
 import { defineStore } from 'pinia'
-import { endsWith, get, isEmpty, join, remove, size, slice, sortedIndexBy, split, sumBy, toUpper, uniq } from 'lodash'
+import {
+    endsWith,
+    findLastIndex,
+    get,
+    isEmpty,
+    join,
+    lastIndexOf,
+    remove,
+    size,
+    slice,
+    sortedIndexBy,
+    split,
+    sumBy,
+    toUpper,
+    uniq,
+} from 'lodash'
 import {
     AddHashField,
     AddListItem,
@@ -803,20 +818,27 @@ const useConnectionStore = defineStore('connections', {
          * @return {DatabaseItem|null}
          */
         getNode(key) {
-            const matches = key.match(/^(?<server>\w+)(?:\/db(?<db>\d+))?(?:#(?<key>[\w/]+))?$/)
-            if (matches) {
-                const { server, db, key } = matches.groups
-                if (db != null) {
-                    const dbIndex = parseInt(db)
-                    const nodeMap = this._getNodeMap(server, dbIndex)
-                    if (key != null) {
-                        return nodeMap.get(key)
-                    } else {
-                        return this.databases[server][dbIndex]
-                    }
-                }
+            const p1 = split(key, '#', 1)
+            let redisKey = null
+            // parse server and db index
+            const idx = p1[0].lastIndexOf('/db')
+            if (idx < 0) {
+                return null
+            }
+            const server = p1[0].substring(0, idx)
+            const db = parseInt(p1[0].substring(idx + 3))
+            if (isNaN(db)) {
+                return null
+            }
+
+            if (size(p1) > 1) {
+                // contains redis key
+                redisKey = p1[1]
+                const nodeMap = this._getNodeMap(server, db)
+                return nodeMap.get(key)
+            } else {
+                return this.databases[server][db]
             }
-            return null
         },
 
         /**