feat(ui): add nodes table filter + persistent UI settings

src/App.vue

@@ -94,6 +94,7 @@
 import io from 'socket.io-client'
 import ConfigApis from '@/apis/ConfigApis'
 import Confirm from '@/components/Confirm'
+import { Settings } from '@/modules/Settings'
 
 export default {
   components: {
@@ -220,6 +221,7 @@ export default {
         { icon: 'settings', title: 'Settings', path: '/settings' },
         { icon: 'share', title: 'Network graph', path: '/mesh' }
       ],
+      settings: new Settings(localStorage),
       status: '',
       statusColor: '',
       drawer: false,
@@ -228,7 +230,7 @@ export default {
       title: '',
       snackbar: false,
       snackbarText: '',
-      dark: false,
+      dark: undefined,
       baseURI: ConfigApis.getBasePath()
     }
   },
@@ -237,8 +239,7 @@ export default {
       this.title = value.name || ''
     },
     dark (v) {
-      if (v) localStorage.setItem('dark', 'true')
-      else localStorage.removeItem('dark')
+      this.settings.store('dark', this.dark)
 
       this.$vuetify.theme.dark = v
       this.changeThemeColor()
@@ -274,7 +275,7 @@ export default {
       this.toggleDrawer()
     }
 
-    this.dark = !!localStorage.getItem('dark')
+    this.dark = this.settings.load('dark', false)
     this.changeThemeColor()
   },
   beforeDestroy () {

src/components/ControlPanel.vue

@@ -68,54 +68,11 @@
           </v-flex>
         </v-layout>
 
-        <v-data-table
-          :headers="headers"
-          :items="tableNodes"
-          :footer-props="{
-            itemsPerPageOptions: [10, 20, { text: 'All', value: -1 }]
-          }"
-          :items-per-page.sync="nodeTableItems"
-          item-key="id"
-          class="elevation-1"
-        >
-          <template v-slot:item="{ item }">
-            <tr
-              :style="{
-                cursor: 'pointer',
-                background:
-                  selectedNode === item
-                    ? $vuetify.theme.themes.light.accent
-                    : 'none'
-              }"
-              @click.stop="selectNode(item)"
-            >
-              <td>{{ item.id }}</td>
-              <td>
-                {{ item.ready ? item.manufacturer : '' }}
-              </td>
-              <td>
-                {{ item.ready ? item.productDescription : '' }}
-              </td>
-              <td>
-                {{ 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>
-                {{
-                  item.lastActive
-                    ? new Date(item.lastActive).toLocaleString()
-                    : 'Never'
-                }}
-              </td>
-            </tr>
-          </template>
-        </v-data-table>
+        <nodes-table
+          :nodes="nodes"
+          :showHidden="showHidden"
+          v-on:node-selected="selectNode"
+        />
 
         <v-tabs style="margin-top:10px" v-model="currentTab" fixed-tabs>
           <v-tab key="node">Node</v-tab>
@@ -599,6 +556,8 @@ import ValueID from '@/components/ValueId'
 import AnsiUp from 'ansi_up'
 
 import DialogSceneValue from '@/components/dialogs/DialogSceneValue'
+import NodesTable from '@/components/nodes-table'
+import { Settings } from '@/modules/Settings'
 import { socketEvents, inboundEvents as socketActions } from '@/plugins/socket'
 
 const ansiUp = new AnsiUp()
@@ -612,7 +571,8 @@ export default {
   },
   components: {
     ValueID,
-    DialogSceneValue
+    DialogSceneValue,
+    NodesTable
   },
   computed: {
     scenesWithId () {
@@ -624,9 +584,6 @@ export default {
     dialogTitle () {
       return this.editedIndex === -1 ? 'New Value' : 'Edit Value'
     },
-    tableNodes () {
-      return this.showHidden ? this.nodes : this.nodes.filter(n => !n.failed)
-    },
     hassDevices () {
       var devices = []
       if (this.selectedNode && this.selectedNode.hassDevices) {
@@ -656,9 +613,6 @@ export default {
     }
   },
   watch: {
-    nodeTableItems (val) {
-      localStorage.setItem('nodes_itemsPerPage', val)
-    },
     dialogValue (val) {
       val || this.closeDialog()
     },
@@ -668,6 +622,9 @@ 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
@@ -701,17 +658,17 @@ export default {
   },
   data () {
     return {
+      settings: new Settings(localStorage),
       nodes: [],
       scenes: [],
       debug: [],
       homeid: '',
       homeHex: '',
       ozwVersion: '',
-      showHidden: false,
+      showHidden: undefined,
       debugActive: false,
       selectedScene: null,
       cnt_status: 'Unknown',
-      nodeTableItems: 10,
       newScene: '',
       scene_values: [],
       dialogValue: false,
@@ -812,20 +769,6 @@ export default {
       locError: null,
       newLoc: '',
       selectedNode: null,
-      headers: [
-        { text: 'ID', value: 'id' },
-        { text: 'Manufacturer', value: 'manufacturer' },
-        { text: 'Product', value: 'productDescription' },
-        { text: 'Product code', value: 'product' },
-        { text: 'Name', value: 'name' },
-        { text: 'Location', value: 'loc' },
-        { text: 'Secure', value: 'isSecure' },
-        { text: 'Beaming', value: 'isBeaming' },
-        { text: 'Failed', value: 'failed' },
-        { text: 'Status', value: 'status' },
-        { text: 'Interview stage', value: 'interviewStage' },
-        { text: 'Last Active', value: 'lastActive' }
-      ],
       rules: {
         required: value => {
           var valid = false
@@ -849,13 +792,13 @@ export default {
 
       return match[0] !== name ? 'Only a-zA-Z0-9_- chars are allowed' : null
     },
-    selectNode (item) {
-      if (!item) return
+    selectNode ({ node }) {
+      if (!node) return
 
-      if (this.selectedNode === item) {
+      if (this.selectedNode === node) {
         this.selectedNode = null
       } else {
-        this.selectedNode = this.nodes.find(n => n.id === item.id)
+        this.selectedNode = this.nodes.find(n => n.id === node.id)
       }
     },
     getValue (v) {
@@ -1346,9 +1289,7 @@ export default {
   mounted () {
     var self = this
 
-    const itemsPerPage = parseInt(localStorage.getItem('nodes_itemsPerPage'))
-
-    this.nodeTableItems = !isNaN(itemsPerPage) ? itemsPerPage : 10
+    this.showHidden = this.settings.load('nodes_showHidden', false)
 
     this.socket.on(socketEvents.controller, data => {
       self.cnt_status = data

src/components/nodes-table/ColumnFilter.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-menu :value="show" :close-on-content-click="false" :offset-y="true">
+    <template v-slot:activator="{ on, attrs }">
+      <v-icon
+        small
+        v-on:click="showOptions"
+        v-bind="attrs"
+        v-on="on"
+        title="Filter options..."
+      >
+        {{ hasFilter ? 'filter_list_alt' : 'filter_list' }}
+      </v-icon>
+    </template>
+    <v-card>
+      <v-icon small v-on:click="hideOptions" right>close</v-icon>
+      <column-filter-boolean
+        v-if="column.type == 'boolean'"
+        :value="value"
+        @change="change"
+      ></column-filter-boolean>
+      <column-filter-date
+        v-if="column.type == 'date'"
+        :value="value"
+        @change="change"
+      ></column-filter-date>
+      <column-filter-number
+        v-if="column.type == 'number'"
+        :value="value"
+        :items="items"
+        @change="change"
+      ></column-filter-number>
+      <column-filter-string
+        v-if="column.type == 'string'"
+        :value="value"
+        :items="items"
+        @change="change"
+      ></column-filter-string>
+      <v-card-actions>
+        <v-btn @click="clearFilter">Clear</v-btn>
+        <v-btn color="primary" @click="confirm" :disabled="!valid">Ok</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-menu>
+</template>
+
+<script>
+import ColumnFilterHelper from '@/modules/ColumnFilterHelper'
+import ColumnFilterBoolean from './ColumnFilterBoolean'
+import ColumnFilterDate from './ColumnFilterDate'
+import ColumnFilterNumber from './ColumnFilterNumber'
+import ColumnFilterString from './ColumnFilterString'
+
+export default {
+  components: {
+    ColumnFilterBoolean,
+    ColumnFilterDate,
+    ColumnFilterNumber,
+    ColumnFilterString
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => {},
+      required: true
+    },
+    column: {
+      type: Object,
+      default: () => {},
+      required: true
+    },
+    items: {
+      type: Array,
+      default: () => [],
+      required: true
+    }
+  },
+  data () {
+    return {
+      valid: true,
+      show: false
+    }
+  },
+  computed: {
+    hasFilter () {
+      return this.hasDeepValue(this.value)
+    }
+  },
+  methods: {
+    hasDeepValue (obj) {
+      return (
+        obj !== undefined &&
+        obj !== null &&
+        Object.keys(obj).some(
+          k =>
+            (!!obj[k] && !!Object.keys(obj[k]).length) ||
+            typeof obj[k] === 'boolean'
+        )
+      )
+    },
+    showOptions () {
+      this.show = true
+    },
+    hideOptions () {
+      this.show = false
+    },
+    change (value, valid) {
+      this.valid = valid
+      if (valid === true) {
+        // Emit minimal storable filter spec (with empty default values removed):
+        this.$emit(
+          'change',
+          ColumnFilterHelper.filterSpec(this.column.type, value)
+        )
+      }
+    },
+    confirm () {
+      this.hideOptions()
+    },
+    resetToDefaults () {
+      // Non-destructive value reset to prevent vue warnings:
+      const defaults = ColumnFilterHelper.defaultFilter(this.column.type)
+      Object.assign(this.value, defaults)
+      for (const key in this.value) {
+        if (Object.hasOwnProperty.call(this.value, key)) {
+          Object.keys(this.value).forEach(() => {
+            if (!Object.keys(defaults).includes(key)) {
+              delete this.value.key
+            }
+          })
+        }
+      }
+    },
+    clearFilter () {
+      this.resetToDefaults()
+      this.change(this.value, true)
+    }
+  }
+}
+</script>

src/components/nodes-table/ColumnFilterBoolean.vue

@@ -0,0 +1,34 @@
+<template>
+  <v-card-text>
+    <v-form>
+      <v-row>
+        <v-col>
+          <v-checkbox
+            :indeterminate="value.boolValue == null"
+            v-model="value.boolValue"
+            label="Boolean value"
+            @change="change"
+          ></v-checkbox>
+        </v-col>
+      </v-row>
+    </v-form>
+  </v-card-text>
+</template>
+
+<script>
+import ColumnFilterHelper from '@/modules/ColumnFilterHelper'
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: () => ColumnFilterHelper.defaultFilter('string'),
+      required: true
+    }
+  },
+  methods: {
+    change () {
+      this.$emit('change', this.value, true)
+    }
+  }
+}
+</script>