feat(ui): show/hide node table columns (#407)

* feat: show/hide node table columns * feat: store column selection + simplification * refactor: revert headers changes * fix: add lost header (interviewStage) Co-authored-by: Andreas Hochsteger <[email protected]>
zwave-js · Feb 2, 2021 · 56b0c1c · 56b0c1c
1 parent 44ebbcc
commit 56b0c1c
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 12 deletions.
diff --git a/src/components/nodes-table/index.vue b/src/components/nodes-table/index.vue
@@ -1,6 +1,6 @@
 <template>
   <v-data-table
-    :headers="headers"
+    :headers="activeHeaders"
     :items="tableNodes"
     :mobile-breakpoint="0"
     :footer-props="{
@@ -29,16 +29,51 @@
       </v-layout>
       <v-layout row ma-2 justify-start>
         <v-flex xs12>
-          <v-btn
-            color="blue darken-1"
-            text
-            @click.native="filterSelected()"
-            :disabled="selected.length === 0"
-            >Filter Selected</v-btn
-          >
-          <v-btn color="blue darken-1" text @click.native="resetFilters()"
-            >Reset Filters</v-btn
-          >
+          <v-menu v-model="headersMenu" :close-on-content-click="false">
+            <template v-slot:activator="{ on }">
+              <v-btn v-on="on">
+                <v-icon>menu</v-icon>
+                Columns
+              </v-btn>
+            </template>
+            <v-card>
+              <v-card-text>
+                <v-checkbox
+                  v-for="col in headers"
+                  :key="col.value"
+                  :value="col.value"
+                  hide-details
+                  :label="col.text"
+                  v-model="columns"
+                ></v-checkbox>
+              </v-card-text>
+            </v-card>
+          </v-menu>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                color="blue darken-1"
+                text
+                v-on="on"
+                @click.native="filterSelected()"
+                :disabled="selected.length === 0"
+                >Filter Selected</v-btn
+              >
+            </template>
+            <span>Show only selected nodes</span>
+          </v-tooltip>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                color="blue darken-1"
+                text
+                v-on="on"
+                @click.native="resetFilters()"
+                >Reset Filters</v-btn
+              >
+            </template>
+            <span>Reset all column filters</span>
+          </v-tooltip>
           <v-tooltip bottom>
             <template v-slot:activator="{ on }">
               <v-btn text color="green" v-on="on" @click="$emit('importNodes')">
@@ -64,7 +99,7 @@
       </v-layout>
     </template>
     <template
-      v-for="column in headers"
+      v-for="column in activeHeaders"
       v-slot:[`header.${column.value}`]="{ header }"
     >
       <span :key="column.value">

diff --git a/src/components/nodes-table/nodes-table.js b/src/components/nodes-table/nodes-table.js
@@ -18,11 +18,13 @@ export default {
     settings: new Settings(localStorage),
     showHidden: undefined,
     itemsPerPage: undefined,
+    columns: undefined,
     groupBy: undefined,
     expanded: [],
     filters: {},
     sorting: {},
     selected: [],
+    headersMenu: false,
     headers: [
       { text: 'ID', type: 'number', value: 'id', groupable: false },
       { text: 'Manufacturer', type: 'string', value: 'manufacturer' },
@@ -47,6 +49,13 @@ export default {
     filterSelected () {
       this.filters.id = { values: this.selected.map(node => node.id) }
     },
+    initColumns () {
+      return this.headers.reduce((values, col) => {
+        values = values || []
+        values.push(col.value)
+        return values
+      }, [])
+    },
     initFilters () {
       return this.headers.reduce((values, h) => {
         values[h.value] = {}
@@ -79,6 +88,7 @@ export default {
       return title
     },
     resetFilters () {
+      this.columns = this.initColumns()
       this.filters = this.initFilters()
       this.selected = []
       this.groupBy = undefined
@@ -92,6 +102,7 @@ export default {
   },
   created () {
     this.showHidden = this.settings.load('nodes_showHidden', false)
+    this.columns = this.loadSetting('nodes_columns', this.initColumns())
     this.filters = this.loadSetting('nodes_filters', this.initFilters())
     this.sorting = this.loadSetting('nodes_sorting', this.initSorting())
     this.groupBy = this.loadSetting('nodes_groupBy', [])
@@ -101,6 +112,9 @@ export default {
     showHidden (val) {
       this.settings.store('nodes_showHidden', val)
     },
+    columns (val) {
+      this.settings.store('nodes_columns', val)
+    },
     groupBy (val) {
       this.settings.store('nodes_groupBy', val)
     },
@@ -115,6 +129,9 @@ export default {
     }
   },
   computed: {
+    activeHeaders () {
+      return this.headers.filter(col => this.columns.includes(col.value))
+    },
     nodeCollection () {
       return new NodeCollection(this.nodes)
     },