feat(ui): Group nodes by column values (#199)

* feat(ui): Group nodes by column values * fix: Lint errors * fix: Lint errors * chore: Cleanup unused function * fix: Remove console.log * fix: Missing rename of itemsPerPage Co-authored-by: Andreas Hochsteger <[email protected]>
zwave-js · Jan 11, 2021 · a2dcf32 · a2dcf32
1 parent 21c2015
commit a2dcf32
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 40 deletions.
diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
@@ -69,17 +69,7 @@
           </v-layout>
         </v-container>
 
-        <v-layout row wrap>
-          <v-flex xs12 ml-2>
-            <v-switch label="Show hidden nodes" v-model="showHidden"></v-switch>
-          </v-flex>
-        </v-layout>
-
-        <nodes-table
-          :nodes="nodes"
-          :showHidden="showHidden"
-          v-on:node-selected="selectNode"
-        />
+        <nodes-table :nodes="nodes" v-on:node-selected="selectNode" />
 
         <v-tabs style="margin-top:10px" v-model="currentTab" fixed-tabs>
           <v-tab key="node">Node</v-tab>
@@ -629,9 +619,6 @@ export default {
     newLoc (val) {
       this.locError = this.validateTopic(val)
     },
-    showHidden () {
-      this.settings.store('nodes_showHidden', this.showHidden)
-    },
     selectedNode () {
       if (this.selectedNode) {
         this.newName = this.selectedNode.name
@@ -672,7 +659,6 @@ export default {
       homeid: '',
       homeHex: '',
       appVersion: '',
-      showHidden: undefined,
       debugActive: false,
       selectedScene: null,
       cnt_status: 'Unknown',
@@ -1310,8 +1296,6 @@ export default {
   mounted () {
     const self = this
 
-    this.showHidden = this.settings.load('nodes_showHidden', false)
-
     this.socket.on(socketEvents.controller, data => {
       self.cnt_status = data
     })

diff --git a/src/components/nodes-table/ColumnFilter.vue b/src/components/nodes-table/ColumnFilter.vue
@@ -35,6 +35,12 @@
         :items="items"
         @change="change"
       ></column-filter-string>
+      <v-checkbox
+        v-if="column.groupable != false"
+        label="Group values"
+        class="ml-4"
+        @change="$emit('update:group-by', $event ? [column.value] : [])"
+      ></v-checkbox>
       <v-card-actions>
         <v-btn @click="clearFilter">Clear</v-btn>
         <v-btn color="primary" @click="confirm" :disabled="!valid">Ok</v-btn>

diff --git a/src/components/nodes-table/index.vue b/src/components/nodes-table/index.vue
@@ -7,14 +7,26 @@
     }"
     :sort-desc.sync="sorting.desc"
     :sort-by.sync="sorting.by"
-    :items-per-page.sync="nodeTableItems"
+    :group-by="groupBy"
+    @update:group-by="groupBy = $event"
+    @group="groupBy = $event"
+    :items-per-page.sync="itemsPerPage"
     item-key="id"
     class="elevation-1"
   >
     <template v-slot:top>
-      <v-btn color="blue darken-1" text @click.native="resetFilters()"
-        >Reset Filters</v-btn
-      >
+      <v-layout row wrap>
+        <v-flex xs12 sm3 md2 ml-6>
+          <v-switch label="Show hidden nodes" v-model="showHidden"></v-switch>
+        </v-flex>
+      </v-layout>
+      <v-layout row wrap>
+        <v-flex xs12 sm3 md2 ml-2>
+          <v-btn color="blue darken-1" text @click.native="resetFilters()"
+            >Reset Filters</v-btn
+          >
+        </v-flex>
+      </v-layout>
     </template>
     <template
       v-for="column in headers"
@@ -26,10 +38,22 @@
           :value="filters[`${column.value}`] || {}"
           :items="values[`${column.value}`] || {}"
           @change="changeFilter(column.value, $event)"
+          @update:group-by="groupBy = $event"
         ></column-filter>
         {{ header.text }}
       </span>
     </template>
+    <template
+      v-slot:[`group.header`]="{ group, headers, toggle, remove, isOpen }"
+    >
+      <td :colspan="headers.length">
+        <v-btn @click="toggle" x-small icon :ref="group">
+          <v-icon>{{ isOpen ? 'remove' : 'add' }}</v-icon>
+        </v-btn>
+        <span>{{ groupByTitle(groupBy, group) }}</span>
+        <v-btn x-small icon @click="remove"><v-icon>close</v-icon></v-btn>
+      </td>
+    </template>
     <template v-slot:item="{ item }">
       <tr
         :style="{
@@ -39,24 +63,26 @@
         }"
         @click.stop="nodeSelected(item)"
       >
-        <td>{{ item.id }}</td>
-        <td>
+        <td v-if="groupBy != 'id'">{{ item.id }}</td>
+        <td v-if="groupBy != 'manufacturer'">
           {{ item.ready ? item.manufacturer : '' }}
         </td>
-        <td>
+        <td v-if="groupBy != 'productDescription'">
           {{ item.ready ? item.productDescription : '' }}
         </td>
-        <td>
+        <td v-if="groupBy != 'productLabel'">
           {{ item.ready ? item.productLabel : '' }}
         </td>
-        <td>{{ item.name || '' }}</td>
-        <td>{{ item.loc || '' }}</td>
-        <td>{{ item.isSecure ? 'Yes' : 'No' }}</td>
-        <td>{{ item.isBeaming ? 'Yes' : 'No' }}</td>
-        <td>{{ item.failed ? 'Yes' : 'No' }}</td>
-        <td>{{ item.status }}</td>
-        <td>{{ item.interviewStage }}</td>
-        <td>
+        <td v-if="groupBy != 'name'">{{ item.name || '' }}</td>
+        <td v-if="groupBy != 'loc'">{{ item.loc || '' }}</td>
+        <td v-if="groupBy != 'isSecure'">{{ item.isSecure ? 'Yes' : 'No' }}</td>
+        <td v-if="groupBy != 'isBeaming'">
+          {{ item.isBeaming ? 'Yes' : 'No' }}
+        </td>
+        <td v-if="groupBy != 'failed'">{{ item.failed ? 'Yes' : 'No' }}</td>
+        <td v-if="groupBy != 'status'">{{ item.status }}</td>
+        <td v-if="groupBy != 'interviewStage'">{{ item.interviewStage }}</td>
+        <td v-if="groupBy != 'lastActive'">
           {{
             item.lastActive
               ? new Date(item.lastActive).toLocaleString()

diff --git a/src/components/nodes-table/nodes-table.js b/src/components/nodes-table/nodes-table.js
@@ -5,20 +5,21 @@ import ColumnFilterHelper from '@/modules/ColumnFilterHelper'
 
 export default {
   props: {
-    nodes: Array,
-    showHidden: Boolean
+    nodes: Array
   },
   components: {
     ColumnFilter
   },
   data: () => ({
     settings: new Settings(localStorage),
-    nodeTableItems: undefined,
+    showHidden: undefined,
+    itemsPerPage: undefined,
+    groupBy: undefined,
     selectedNode: undefined,
     filters: {},
     sorting: {},
     headers: [
-      { text: 'ID', type: 'number', value: 'id' },
+      { text: 'ID', type: 'number', value: 'id', groupable: false },
       { text: 'Manufacturer', type: 'string', value: 'manufacturer' },
       { text: 'Product', type: 'string', value: 'productDescription' },
       { text: 'Product code', type: 'string', value: 'productLabel' },
@@ -29,7 +30,12 @@ export default {
       { text: 'Failed', type: 'boolean', value: 'failed' },
       { text: 'Status', type: 'string', value: 'status' },
       { text: 'Interview stage', type: 'string', value: 'interviewStage' },
-      { text: 'Last Active', type: 'date', value: 'lastActive' }
+      {
+        text: 'Last Active',
+        type: 'date',
+        value: 'lastActive',
+        groupable: false
+      }
     ]
   }),
   methods: {
@@ -56,8 +62,17 @@ export default {
       this.filters[colName] = $event
       this.storeSetting('nodes_filters', this.filters)
     },
+    groupByTitle (groupBy, group) {
+      const h = this.headers.find(h => h.value === groupBy[0]) || {}
+      let title = ''
+      if (h.text) {
+        title = `${h.text}: ${group}`
+      }
+      return title
+    },
     resetFilters () {
       this.filters = this.initFilters()
+      this.groupBy = undefined
       this.storeSetting('nodes_filters', this.filters)
     },
     nodeSelected (node) {
@@ -66,12 +81,20 @@ export default {
     }
   },
   created () {
+    this.showHidden = this.settings.load('nodes_showHidden', false)
     this.filters = this.loadSetting('nodes_filters', this.initFilters())
     this.sorting = this.loadSetting('nodes_sorting', this.initSorting())
-    this.nodeTableItems = this.loadSetting('nodes_itemsPerPage', 10)
+    this.groupBy = this.loadSetting('nodes_groupBy', [])
+    this.itemsPerPage = this.loadSetting('nodes_itemsPerPage', 10)
   },
   watch: {
-    nodeTableItems (val) {
+    showHidden (val) {
+      this.settings.store('nodes_showHidden', val)
+    },
+    groupBy (val) {
+      this.settings.store('nodes_groupBy', val)
+    },
+    itemsPerPage (val) {
       this.storeSetting('nodes_itemsPerPage', val)
     },
     sorting: {