feat: Store filters + sorting in local storage

src/components/nodes-table/index.vue

@@ -5,6 +5,8 @@
     :footer-props="{
       itemsPerPageOptions: [10, 20, 50, 100, -1]
     }"
+    :sort-desc.sync="sorting.desc"
+    :sort-by.sync="sorting.by"
     :items-per-page.sync="nodeTableItems"
     item-key="node_id"
     class="elevation-1"
@@ -15,35 +17,41 @@
       >
     </template>
     <template v-slot:header.node_id="{ header }">
-      <filter-options v-model="filters.ids" :items="ids"></filter-options>
+      <filter-options v-model="filters.ids" :items.sync="ids"></filter-options>
       {{ header.text }}
     </template>
     <template v-slot:header.type="{ header }">
-      <filter-options v-model="filters.types" :items="types"></filter-options>
+      <filter-options
+        v-model="filters.types"
+        :items.sync="types"
+      ></filter-options>
       {{ header.text }}
     </template>
     <template v-slot:header.product="{ header }">
       <filter-options
         v-model="filters.products"
-        :items="products"
+        :items.sync="products"
       ></filter-options>
       {{ header.text }}
     </template>
     <template v-slot:header.name="{ header }">
-      <filter-options v-model="filters.names" :items="names"></filter-options>
+      <filter-options
+        v-model="filters.names"
+        :items.sync="names"
+      ></filter-options>
       {{ header.text }}
     </template>
     <template v-slot:header.loc="{ header }">
       <filter-options
         v-model="filters.locations"
-        :items="locations"
+        :items.sync="locations"
       ></filter-options>
       {{ header.text }}
     </template>
     <template v-slot:header.secure="{ header }">
       <filter-options
         v-model="filters.secures"
-        :items="secures"
+        :items.sync="secures"
       ></filter-options>
       {{ header.text }}
     </template>
@@ -54,7 +62,7 @@
     <template v-slot:header.lastActive="{ header }">
       <filter-options
         v-model="filters.lastActives"
-        :items="lastActives"
+        :items.sync="lastActives"
       ></filter-options>
       {{ header.text }}
     </template>

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

@@ -13,6 +13,7 @@ export default {
     nodeTableItems: 10,
     selectedNode: undefined,
     filters: {},
+    sorting: {},
     headers: [
       { text: 'ID', value: 'node_id' },
       { text: 'Type', value: 'type' },
@@ -37,6 +38,31 @@ export default {
         lastActives: { type: 'date' }
       }
     },
+    initSorting () {
+      return {
+        by: ['node_id'],
+        desc: [false]
+      }
+    },
+    loadObject (key, defaultValue) {
+      let filtersStr = localStorage.getItem(key)
+      let filters
+      try {
+        filters = JSON.parse(filtersStr)
+      } catch (e) {
+        filters = undefined
+      }
+      if (
+        !filters ||
+        (Object.keys(filters).length === 0 && filters.constructor === Object)
+      ) {
+        filters = defaultValue
+      }
+      return filters
+    },
+    storeObject (key, val) {
+      localStorage.setItem(key, JSON.stringify(val))
+    },
     resetFilter () {
       this.filters = this.initFilters()
     },
@@ -53,10 +79,24 @@ export default {
     this.filters = this.initFilters()
     const itemsPerPage = parseInt(localStorage.getItem('nodes_itemsPerPage'))
     this.nodeTableItems = !isNaN(itemsPerPage) ? itemsPerPage : 10
+    this.filters = this.loadObject('nodes_filters', this.initFilters())
+    this.sorting = this.loadObject('nodes_sorting', this.initSorting())
   },
   watch: {
     nodeTableItems (val) {
       localStorage.setItem('nodes_itemsPerPage', val)
+    },
+    filters: {
+      handler (val) {
+        this.storeObject('nodes_filters', val)
+      },
+      deep: true
+    },
+    sorting: {
+      handler (val) {
+        this.storeObject('nodes_sorting', val)
+      },
+      deep: true
     }
   },
   computed: {