feat(connecionsList): add collection expanded state management

src/store/getter.ts

@@ -4,6 +4,7 @@ const getters = {
   autoCheck: (state: State) => state.app.autoCheck,
   maxReconnectTimes: (state: State) => state.app.maxReconnectTimes,
   showSubscriptions: (state: State) => state.app.showSubscriptions,
+  connectionTreeState: (state: State) => state.app.connectionTreeState,
   activeConnection: (state: State) => state.app.activeConnection,
   showClientInfo: (state: State) => state.app.showClientInfo,
   unreadMessageCount: (state: State) => state.app.unreadMessageCount,

src/store/modules/app.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { ConnectionModel, ConnectionModelCollection } from '../../views/connections/types'
+import { ConnectionModel, ConnectionModelCollection, ConnectionTreeState } from '../../views/connections/types'
 import { loadSettings, setSettings } from '@/api/setting'
 import { ScriptState } from '@/views/script/types'
 
@@ -13,6 +13,7 @@ const CHANGE_SUBSCRIPTIONS = 'CHANGE_SUBSCRIPTIONS'
 const SHOW_CLIENT_INFO = 'SHOW_CLIENT_INFO'
 const SHOW_SUBSCRIPTIONS = 'SHOW_SUBSCRIPTIONS'
 const UNREAD_MESSAGE_COUNT_INCREMENT = 'UNREAD_MESSAGE_COUNT_INCREMENT'
+const SET_CONNECTIONS_TREE = 'SET_CONNECTIONS_TREE'
 const TOGGLE_WILL_MESSAGE_VISIBLE = 'TOGGLE_WILL_MESSAGE_VISIBLE'
 const TOGGLE_ADVANCED_VISIBLE = 'TOGGLE_ADVANCED_VISIBLE'
 const CHANGE_ALL_CONNECTIONS = 'CHANGE_ALL_CONNECTIONS'
@@ -38,6 +39,7 @@ const app = {
     showSubscriptions: getShowSubscriptions(),
     showClientInfo: {},
     unreadMessageCount: {},
+    connectionTreeState: {},
     activeConnection: {},
     advancedVisible: true,
     willMessageVisible: true,
@@ -88,6 +90,10 @@ const app = {
       state.showSubscriptions = payload.showSubscriptions
       localStorage.setItem('showSubscriptions', JSON.stringify(state.showSubscriptions))
     },
+    [SET_CONNECTIONS_TREE](state: App, payload: ConnectionTreeState) {
+      const { id } = payload
+      state.connectionTreeState[id] = { expanded: payload.expanded }
+    },
     [UNREAD_MESSAGE_COUNT_INCREMENT](state: App, payload: UnreadMessage) {
       if (payload.unreadMessageCount !== undefined) {
         Vue.set(state.unreadMessageCount, payload.id, payload.unreadMessageCount)
@@ -144,6 +150,9 @@ const app = {
     SHOW_CLIENT_INFO({ commit }: any, payload: App) {
       commit(SHOW_CLIENT_INFO, payload)
     },
+    SET_CONNECTIONS_TREE({ commit }: any, payload: App) {
+      commit(SET_CONNECTIONS_TREE, payload)
+    },
     SHOW_SUBSCRIPTIONS({ commit }: any, payload: App) {
       commit(SHOW_SUBSCRIPTIONS, payload)
     },

src/types/global.d.ts

@@ -1,7 +1,12 @@
 import Vue from 'vue'
 import { TranslateResult } from 'vue-i18n'
 import { MqttClient } from 'mqtt'
-import { MessageModel, ConnectionModel, ConnectionModelCollection } from '@/views/connections/types'
+import {
+  MessageModel,
+  ConnectionModel,
+  ConnectionModelCollection,
+  ConnectionTreeStateMap,
+} from '@/views/connections/types'
 import { ScriptState } from '@/views/script/types'
 
 declare global {
@@ -85,6 +90,7 @@ declare global {
     advancedVisible: boolean
     allConnections: ConnectionModel[] | []
     currentScript: ScriptState | null
+    connectionTreeState: ConnectionTreeStateMap
   }
 
   interface State {

src/views/connections/ConnectionsList.vue

@@ -27,9 +27,9 @@
           :data="treeData"
           node-key="id"
           highlight-current
-          default-expand-all
           @node-drop="handleDrop"
           @node-drag-end="handleDragEnd"
+          @node-click="handleNodeExpand"
           :allow-drop="allowDrop"
         >
           <span class="custom-tree-node" slot-scope="{ node, data }">
@@ -120,7 +120,14 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
 import Contextmenu from '@/components/Contextmenu.vue'
-import { ConnectionModel, ContextmenuModel, ConnectionModelCollection, ConnectionModelTree } from './types'
+import {
+  ConnectionModel,
+  ContextmenuModel,
+  ConnectionModelCollection,
+  ConnectionModelTree,
+  ConnectionTreeState,
+  ConnectionTreeStateMap,
+} from './types'
 import { ipcRenderer } from 'electron'
 import { TreeNode, ElTree } from 'element-ui/types/tree'
 import getCollectionId from '@/utils/getCollectionId'
@@ -137,10 +144,12 @@ export default class ConnectionsList extends Vue {
   @Prop({ required: false }) public CollectionModelData!: ConnectionModelCollection[] | []
 
   @Action('UNREAD_MESSAGE_COUNT_INCREMENT') private unreadMessageIncrement!: (payload: UnreadMessage) => void
+  @Action('SET_CONNECTIONS_TREE') private setConnectionsTree!: (payload: ConnectionTreeState) => void
 
   @Getter('activeConnection') private activeConnection: Client | undefined
   @Getter('unreadMessageCount') private unreadMessageCount: UnreadMessage | undefined
   @Getter('currentTheme') private theme!: Theme
+  @Getter('connectionTreeState') private treeState!: ConnectionTreeStateMap
 
   private connectionId: string = this.$route.params.id
   private showContextmenu: boolean = false
@@ -182,6 +191,29 @@ export default class ConnectionsList extends Vue {
     }
   }
 
+  private handleNodeExpand(data: ConnectionModelTree, node: TreeNode<ConnectionModelTree['id'], ConnectionModelTree>) {
+    if (data && node && data.isCollection) {
+      if (!data.id) return
+      this.setConnectionsTree({
+        id: data.id,
+        expanded: node.expanded,
+      } as ConnectionTreeState)
+    }
+  }
+
+  private loadConnectionState() {
+    const treeRef = this.$refs.tree as $TSFixed // nodesMap is not an export function
+    const treeState = this.treeState as ConnectionTreeStateMap
+    if (!treeRef || !treeState) return
+
+    const nodes = treeRef.store.nodesMap
+    for (const id in nodes) {
+      if (treeState[id] && treeState[id].expanded) {
+        nodes[id].expanded = treeState[id].expanded || false
+      }
+    }
+  }
+
   private allowDrop(
     draggingNode: TreeNode<ConnectionModelCollection['id'], ConnectionModelCollection>,
     dropNode: TreeNode<ConnectionModelCollection['id'], ConnectionModelCollection>,
@@ -268,6 +300,12 @@ export default class ConnectionsList extends Vue {
   }
 
   private loadData() {
+    //load collection expanded state
+    this.$nextTick(() => {
+      this.loadConnectionState()
+    })
+
+    //load selected connection active state
     const { id } = this.$route.params
     const treeRef = this.$refs.tree as ElTree<ConnectionModelTree['id'], ConnectionModelTree>
     this.$nextTick(() => {
@@ -277,6 +315,7 @@ export default class ConnectionsList extends Vue {
       }
     })
 
+    // composiotion connection and collection to treeData
     const connections: ConnectionModel[] = _.cloneDeep(this.ConnectionModelData)
     const collections: ConnectionModelCollection[] = _.cloneDeep(this.CollectionModelData)
 

src/views/connections/types.ts

@@ -139,3 +139,14 @@ export enum SubscribeErrorReason {
   qosSubSysFailed, // qos is abnormal becauseof $SYS subscribe
   emptySubFailed, // subscription returns empty array
 }
+
+export interface ConnectionTreeState {
+  id: string
+  expanded: boolean
+}
+
+export interface ConnectionTreeStateMap {
+  [id: string]: {
+    expanded: boolean
+  }
+}