fix(ui): nodes table display issues (#780)

Fixes #766

src/components/ControlPanel.vue

@@ -70,7 +70,6 @@
         />
 
         <nodes-table
-          :nodes="nodes"
           :node-actions="node_actions"
           :socket="socket"
           v-on="$listeners"

src/components/nodes-table/AssociationGroups.vue

@@ -20,7 +20,7 @@
                 <v-list-item-title
                   >Node:
                   <strong>{{
-                    nodes[ass.nodeId]._name || ass.nodeId
+                    nodes[nodesMap.get(ass.nodeId)]._name || ass.nodeId
                   }}</strong></v-list-item-title
                 >
                 <v-list-item-subtitle
@@ -106,19 +106,20 @@
 
 <script>
 import { socketEvents, inboundEvents as socketActions } from '@/plugins/socket'
-import { mapMutations } from 'vuex'
+import { mapMutations, mapGetters } from 'vuex'
 export default {
   props: {
     node: Object,
-    nodes: Array,
     socket: Object
   },
   data () {
     return {
       group: { node: this.node }
     }
   },
-  computed: {},
+  computed: {
+    ...mapGetters(['nodes', 'nodesMap'])
+  },
   mounted () {
     const self = this
     this.socket.on(socketEvents.api, async data => {

src/components/nodes-table/ExpandedNode.vue

@@ -35,11 +35,11 @@
 
         <!-- TAB GROUPS -->
         <v-tab-item key="groups">
-          <association-groups :node="node" :nodes="nodes" :socket="socket" />
+          <association-groups :node="node" :socket="socket" />
         </v-tab-item>
 
         <!-- TAB DEBUG INFO -->
-        <v-tab-item key="debug">
+        <v-tab-item v-if="$vuetify.mdAndUp" key="debug">
           <v-textarea
             class="mx-2"
             rows="10"
@@ -68,7 +68,6 @@ export default {
     headers: Array,
     isMobile: Boolean,
     node: Object,
-    nodes: Array,
     socket: Object
   },
   components: {

src/components/nodes-table/NodeDetails.vue

@@ -203,8 +203,6 @@ export default {
       this.$listeners.export(this.node, 'node_' + this.node.id, 'json')
     },
     getValue (v) {
-      // const node = this.nodes[v.nodeId]
-
       if (this.node && this.node.values) {
         return this.node.values.find(i => i.id === v.id)
       } else {

src/components/nodes-table/index.vue

@@ -1,5 +1,6 @@
 <template>
   <v-data-table
+    v-if="managedNodes"
     :headers="managedNodes.tableHeaders"
     :items="managedNodes.filteredItems"
     :footer-props="{
@@ -173,7 +174,6 @@
         :headers="headers"
         :isMobile="isMobile"
         :node="item"
-        :nodes="nodes"
         :socket="socket"
         v-on="$listeners"
       />

src/components/nodes-table/nodes-table.js

@@ -1,59 +1,57 @@
 import draggable from 'vuedraggable'
 import { ManagedItems } from '@/modules/ManagedItems'
-import { Settings } from '@/modules/Settings'
 import ColumnFilter from '@/components/nodes-table/ColumnFilter.vue'
 import ExpandedNode from '@/components/nodes-table/ExpandedNode.vue'
+import { mapGetters } from 'vuex'
 
 export default {
   props: {
     nodeActions: Array,
-    nodes: Array,
     socket: Object
   },
   components: {
     draggable,
     ColumnFilter,
     ExpandedNode
   },
+  watch: {},
+  computed: {
+    ...mapGetters(['nodes'])
+  },
   data: function () {
     return {
-      settings: new Settings(localStorage),
-      managedNodes: new ManagedItems(
-        this.nodes || [],
-        {
-          id: { type: 'number', label: 'ID', groupable: false },
-          manufacturer: { type: 'string', label: 'Manufacturer' },
-          productDescription: { type: 'string', label: 'Product' },
-          productLabel: { type: 'string', label: 'Product code' },
-          name: { type: 'string', label: 'Name' },
-          loc: { type: 'string', label: 'Location' },
-          isSecure: { type: 'boolean', label: 'Secure' },
-          isBeaming: { type: 'boolean', label: 'Beaming' },
-          failed: { type: 'boolean', label: 'Failed' },
-          status: { type: 'string', label: 'Status' },
-          interviewStage: { type: 'string', label: 'Interview stage' },
-          lastActive: { type: 'date', label: 'Last Active', groupable: false }
-        },
-        localStorage,
-        'nodes_'
-      ),
+      managedNodes: null,
+      nodesProps: {
+        id: { type: 'number', label: 'ID', groupable: false },
+        manufacturer: { type: 'string', label: 'Manufacturer' },
+        productDescription: { type: 'string', label: 'Product' },
+        productLabel: { type: 'string', label: 'Product code' },
+        name: { type: 'string', label: 'Name' },
+        loc: { type: 'string', label: 'Location' },
+        isSecure: { type: 'boolean', label: 'Secure' },
+        isBeaming: { type: 'boolean', label: 'Beaming' },
+        failed: { type: 'boolean', label: 'Failed' },
+        status: { type: 'string', label: 'Status' },
+        interviewStage: { type: 'string', label: 'Interview stage' },
+        lastActive: { type: 'date', label: 'Last Active', groupable: false }
+      },
       expanded: [],
       headersMenu: false
     }
   },
   methods: {
-    loadSetting (key, defaultVal) {
-      return this.settings.load(key, defaultVal)
-    },
-    storeSetting (key, val) {
-      this.settings.store(key, val)
-    },
     toggleExpanded (item) {
       this.expanded = this.expanded.includes(item)
         ? this.expanded.filter(i => i !== item)
         : [...this.expanded, item]
     }
   },
-  watch: {},
-  computed: {}
+  mounted () {
+    this.managedNodes = new ManagedItems(
+      this.nodes,
+      this.nodesProps,
+      localStorage,
+      'nodes_'
+    )
+  }
 }

src/store/mutations.js

@@ -2,6 +2,7 @@ export const state = {
   auth: undefined,
   serial_ports: [],
   nodes: [],
+  nodesMap: new Map(),
   user: {},
   zwave: {
     port: undefined,
@@ -58,16 +59,14 @@ function getValue (v) {
   }
 }
 
-// makes node search faster
-const nodesMap = new Map() // nodeId -> index
-
 function getNode (id) {
-  return state.nodes[nodesMap.get(id)]
+  return state.nodes[state.nodesMap.get(id)]
 }
 
 export const getters = {
   auth: state => state.auth,
   nodes: state => state.nodes,
+  nodesMap: state => state.nodesMap,
   user: state => state.user,
   serial_ports: state => state.serial_ports,
   zwave: state => state.zwave,
@@ -188,7 +187,7 @@ export const mutations = {
       ? n.name + (n.loc ? ' (' + n.loc + ')' : '')
       : 'NodeID_' + n.id
 
-    let index = nodesMap.get(n.id)
+    let index = state.nodesMap.get(n.id)
 
     index = index >= 0 ? index : state.nodes.length
 
@@ -199,13 +198,13 @@ export const mutations = {
       this._vm.$set(state.nodes, index, n)
     }
 
-    nodesMap.set(n.id, index)
+    state.nodesMap.set(n.id, index)
   },
   removeNode (state, n) {
-    const index = nodesMap.get(n.id)
+    const index = state.nodesMap.get(n.id)
 
     if (index >= 0) {
-      nodesMap.delete(n.id)
+      state.nodesMap.delete(n.id)
       state.nodes.splice(index, 1)
     }
   },