From 665f8801cac74218f7123de7b976a0a9dde1e01f Mon Sep 17 00:00:00 2001 From: Lykin <137850705+tiny-craft@users.noreply.github.com> Date: Wed, 27 Dec 2023 20:51:17 +0800 Subject: [PATCH] refactor: encapsulate tab state into classes --- .../src/components/sidebar/BrowserPane.vue | 2 +- frontend/src/objects/tabItem.js | 81 +++++++++++++++++++ frontend/src/stores/tab.js | 52 +++--------- 3 files changed, 94 insertions(+), 41 deletions(-) create mode 100644 frontend/src/objects/tabItem.js diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue index 1f78d87..60bb8d6 100644 --- a/frontend/src/components/sidebar/BrowserPane.vue +++ b/frontend/src/components/sidebar/BrowserPane.vue @@ -100,7 +100,7 @@ const onReload = async () => { tabStore.setSelectedKeys(props.server) const db = props.db browserStore.closeDatabase(props.server, db) - browserTreeRef.value?.resetExpandKey(props.server, db) + // browserTreeRef.value?.resetExpandKey(props.server, db) let matchType = unref(filterForm.type) if (!types.hasOwnProperty(matchType)) { diff --git a/frontend/src/objects/tabItem.js b/frontend/src/objects/tabItem.js new file mode 100644 index 0000000..78bbe40 --- /dev/null +++ b/frontend/src/objects/tabItem.js @@ -0,0 +1,81 @@ +/** + * tab item + */ +export class TabItem { + /** + * @typedef {Object} CheckedKey + * @property {string} key + * @property {string} [redisKey] + */ + + /** + * + * @param {string} name connection name + * @param {string} title tab title + * @param {boolean} blank is blank tab + * @param {string} subTab secondary tab value + * @param {string} [title] tab title + * @param {string} [icon] tab icon + * @param {string[]} selectedKeys + * @param {CheckedKey[]} checkedKeys + * @param {string} [type] key type + * @param {*} [value] key value + * @param {string} [server] server name + * @param {int} [db] database index + * @param {string} [key] current key name + * @param {number[]|null|undefined} [keyCode] current key name as char array + * @param {number} [size] memory usage + * @param {number} [length] length of content or entries + * @param {int} [ttl] ttl of current key + * @param {string} [decode] + * @param {string} [format] + * @param {string} [matchPattern] + * @param {boolean} [end] + * @param {boolean} [loading] + */ + constructor({ + name, + title, + blank, + subTab, + icon, + selectedKeys, + checkedKeys, + type, + value, + server, + db = 0, + key, + keyCode, + size = 0, + length = 0, + ttl = 0, + decode = '', + format = '', + matchPattern = '', + end = false, + loading = false, + }) { + this.name = name + this.title = title + this.blank = blank + this.subTab = subTab + this.icon = icon + this.selectedKeys = selectedKeys + this.checkedKeys = checkedKeys + this.type = type + this.value = value + this.server = server + this.db = db + this.key = key + this.keyCode = keyCode + this.size = size + this.length = length + this.ttl = ttl + this.decode = decode + this.format = format + this.matchPattern = matchPattern + this.end = end + this.loading = loading + } +} diff --git a/frontend/src/stores/tab.js b/frontend/src/stores/tab.js index 2a2e35b..ca33dae 100644 --- a/frontend/src/stores/tab.js +++ b/frontend/src/stores/tab.js @@ -1,38 +1,8 @@ import { assign, find, findIndex, get, isEmpty, pullAt, remove, set, size } from 'lodash' import { defineStore } from 'pinia' +import { TabItem } from '@/objects/tabItem.js' const useTabStore = defineStore('tab', { - /** - * @typedef {Object} TabItem - * @property {string} name connection name - * @property {boolean} blank is blank tab - * @property {string} subTab secondary tab value - * @property {string} [title] tab title - * @property {string} [icon] tab icon - * @property {string[]} selectedKeys - * @property {CheckedKey[]} checkedKeys - * @property {string} [type] key type - * @property {*} [value] key value - * @property {string} [server] server name - * @property {int} [db] database index - * @property {string} [key] current key name - * @property {number[]|null|undefined} [keyCode] current key name as char array - * @param {number} [size] memory usage - * @param {number} [length] length of content or entries - * @property {int} [ttl] ttl of current key - * @param {string} [decode] - * @param {string} [format] - * @param {string} [matchPattern] - * @param {boolean} [end] - * @param {boolean} [loading] - */ - - /** - * @typedef {Object} CheckedKey - * @property {string} key - * @property {string} [redisKey] - */ - /** * @typedef {Object} ListEntryItem * @property {string|number[]} v value @@ -89,15 +59,22 @@ const useTabStore = defineStore('tab', { * @property {string} [dv] display value */ + /** + * @typedef {Object} TabState + * @property {string} nav + * @property {number} asideWidth + * @property {TabItem[]} tabList + * @property {number} activatedIndex + */ + /** * - * @returns {{tabList: TabItem[], activatedTab: string, activatedIndex: number}} + * @returns {TabState} */ state: () => ({ nav: 'server', asideWidth: 300, tabList: [], - activatedTab: '', activatedIndex: 0, // current activated tab index }), getters: { @@ -118,11 +95,6 @@ const useTabStore = defineStore('tab', { */ currentTab() { return get(this.tabs, this.activatedIndex) - // let current = find(this.tabs, {name: this.activatedTab}) - // if (current == null) { - // current = this.tabs[0] - // } - // return current }, currentTabName() { @@ -183,7 +155,7 @@ const useTabStore = defineStore('tab', { upsertTab({ subTab, server, db, type, ttl, key, keyCode, size, length, matchPattern = '', clearValue }) { let tabIndex = findIndex(this.tabList, { name: server }) if (tabIndex === -1) { - this.tabList.push({ + const tabItem = new TabItem({ name: server, title: server, subTab, @@ -198,6 +170,7 @@ const useTabStore = defineStore('tab', { matchPattern, value: undefined, }) + this.tabList.push(tabItem) tabIndex = this.tabList.length - 1 } else { const tab = this.tabList[tabIndex] @@ -219,7 +192,6 @@ const useTabStore = defineStore('tab', { } } this._setActivatedIndex(tabIndex, true, subTab) - // this.activatedTab = tab.name }, /**