refactor: encapsulate tab state into classes
This commit is contained in:
parent
93b04071e2
commit
665f8801ca
|
@ -100,7 +100,7 @@ const onReload = async () => {
|
||||||
tabStore.setSelectedKeys(props.server)
|
tabStore.setSelectedKeys(props.server)
|
||||||
const db = props.db
|
const db = props.db
|
||||||
browserStore.closeDatabase(props.server, db)
|
browserStore.closeDatabase(props.server, db)
|
||||||
browserTreeRef.value?.resetExpandKey(props.server, db)
|
// browserTreeRef.value?.resetExpandKey(props.server, db)
|
||||||
|
|
||||||
let matchType = unref(filterForm.type)
|
let matchType = unref(filterForm.type)
|
||||||
if (!types.hasOwnProperty(matchType)) {
|
if (!types.hasOwnProperty(matchType)) {
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,38 +1,8 @@
|
||||||
import { assign, find, findIndex, get, isEmpty, pullAt, remove, set, size } from 'lodash'
|
import { assign, find, findIndex, get, isEmpty, pullAt, remove, set, size } from 'lodash'
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
|
import { TabItem } from '@/objects/tabItem.js'
|
||||||
|
|
||||||
const useTabStore = defineStore('tab', {
|
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
|
* @typedef {Object} ListEntryItem
|
||||||
* @property {string|number[]} v value
|
* @property {string|number[]} v value
|
||||||
|
@ -89,15 +59,22 @@ const useTabStore = defineStore('tab', {
|
||||||
* @property {string} [dv] display value
|
* @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: () => ({
|
state: () => ({
|
||||||
nav: 'server',
|
nav: 'server',
|
||||||
asideWidth: 300,
|
asideWidth: 300,
|
||||||
tabList: [],
|
tabList: [],
|
||||||
activatedTab: '',
|
|
||||||
activatedIndex: 0, // current activated tab index
|
activatedIndex: 0, // current activated tab index
|
||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
|
@ -118,11 +95,6 @@ const useTabStore = defineStore('tab', {
|
||||||
*/
|
*/
|
||||||
currentTab() {
|
currentTab() {
|
||||||
return get(this.tabs, this.activatedIndex)
|
return get(this.tabs, this.activatedIndex)
|
||||||
// let current = find(this.tabs, {name: this.activatedTab})
|
|
||||||
// if (current == null) {
|
|
||||||
// current = this.tabs[0]
|
|
||||||
// }
|
|
||||||
// return current
|
|
||||||
},
|
},
|
||||||
|
|
||||||
currentTabName() {
|
currentTabName() {
|
||||||
|
@ -183,7 +155,7 @@ const useTabStore = defineStore('tab', {
|
||||||
upsertTab({ subTab, server, db, type, ttl, key, keyCode, size, length, matchPattern = '', clearValue }) {
|
upsertTab({ subTab, server, db, type, ttl, key, keyCode, size, length, matchPattern = '', clearValue }) {
|
||||||
let tabIndex = findIndex(this.tabList, { name: server })
|
let tabIndex = findIndex(this.tabList, { name: server })
|
||||||
if (tabIndex === -1) {
|
if (tabIndex === -1) {
|
||||||
this.tabList.push({
|
const tabItem = new TabItem({
|
||||||
name: server,
|
name: server,
|
||||||
title: server,
|
title: server,
|
||||||
subTab,
|
subTab,
|
||||||
|
@ -198,6 +170,7 @@ const useTabStore = defineStore('tab', {
|
||||||
matchPattern,
|
matchPattern,
|
||||||
value: undefined,
|
value: undefined,
|
||||||
})
|
})
|
||||||
|
this.tabList.push(tabItem)
|
||||||
tabIndex = this.tabList.length - 1
|
tabIndex = this.tabList.length - 1
|
||||||
} else {
|
} else {
|
||||||
const tab = this.tabList[tabIndex]
|
const tab = this.tabList[tabIndex]
|
||||||
|
@ -219,7 +192,6 @@ const useTabStore = defineStore('tab', {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._setActivatedIndex(tabIndex, true, subTab)
|
this._setActivatedIndex(tabIndex, true, subTab)
|
||||||
// this.activatedTab = tab.name
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue