feat(ui): rearrange table columns (#534)

Fixes #484
zwave-js · Feb 10, 2021 · d6cd9ec · d6cd9ec
1 parent 0f02fa7
commit d6cd9ec
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -128,6 +128,7 @@
     "vue": "^2.6.12",
     "vue-prism-editor": "^1.2.2",
     "vue-router": "^3.5.1",
+    "vuedraggable": "^2.24.3",
     "vuetify": "^2.4.3",
     "vuex": "^3.6.2",
     "winston": "^3.3.3",

diff --git a/src/components/nodes-table/index.vue b/src/components/nodes-table/index.vue
@@ -24,7 +24,11 @@
       </v-row>
       <v-row class="ma-2" justify-start>
         <v-col cols="12">
-          <v-menu v-model="headersMenu" :close-on-content-click="false">
+          <v-menu
+            v-model="headersMenu"
+            :close-on-content-click="false"
+            @input="managedNodes.tableColumns = managedNodes.tableColumns"
+          >
             <template v-slot:activator="{ on }">
               <v-btn v-on="on">
                 <v-icon>menu</v-icon>
@@ -33,16 +37,28 @@
             </template>
             <v-card>
               <v-card-text>
-                <v-checkbox
-                  v-for="col in managedNodes.allTableHeaders"
-                  :key="col.value"
-                  :value="col.value"
-                  hide-details
-                  :label="col.text"
-                  :input-value="managedNodes.columns"
-                  @change="managedNodes.columns = $event"
-                ></v-checkbox>
+                <draggable v-model="managedNodes.tableColumns">
+                  <v-checkbox
+                    v-for="col in managedNodes.tableColumns"
+                    :key="col.name"
+                    v-model="col.visible"
+                    :value="col.visible"
+                    hide-details
+                    :label="managedNodes.propDefs[col.name].label"
+                    :input-value="col.visible"
+                    @change="col.visible = !!$event"
+                    prepend-icon="drag_indicator"
+                  ></v-checkbox>
+                </draggable>
               </v-card-text>
+              <v-card-actions>
+                <v-btn
+                  @click.native="
+                    managedNodes.tableColumns = managedNodes.initialTableColumns
+                  "
+                  >Reset</v-btn
+                >
+              </v-card-actions>
             </v-card>
           </v-menu>
           <v-tooltip bottom>

diff --git a/src/components/nodes-table/nodes-table.js b/src/components/nodes-table/nodes-table.js
@@ -1,3 +1,4 @@
+import draggable from 'vuedraggable'
 import { ManagedItems } from '@/modules/ManagedItems'
 import { Settings } from '@/modules/Settings'
 import ColumnFilter from '@/components/nodes-table/ColumnFilter.vue'
@@ -10,6 +11,7 @@ export default {
     socket: Object
   },
   components: {
+    draggable,
     ColumnFilter,
     ExpandedNode
   },

diff --git a/src/modules/ManagedItems.js b/src/modules/ManagedItems.js
@@ -30,9 +30,9 @@ export class ManagedItems {
         ? this.loadSetting('tableOptions', this.initialTableOptions)
         : this.tableOptions
     this._columns =
-      this.columns === undefined
-        ? this.loadSetting('columns', this.initialColumns)
-        : this.columns
+      this.tableColumns === undefined
+        ? this.loadSetting('tableColumns', this.initialTableColumns)
+        : this.tableColumns
     this._filters =
       this.filters === undefined
         ? this.loadSetting('filters', this.initialFilters)
@@ -45,7 +45,7 @@ export class ManagedItems {
    */
   reset () {
     this.tableOptions = this.initialTableOptions
-    this.columns = this.initialColumns
+    this.tableColumns = this.initialTableColumns
     this.filters = this.initialFilters
     this.selected = this.initialSelected
   }
@@ -129,51 +129,68 @@ export class ManagedItems {
 
   // Table columns handling
 
+  /**
+   * Internal function to get a table header definition for a specific column name
+   */
+  _getTableHeaderForColumn (colName) {
+    const propDef = this.propDefs[colName]
+    return {
+      value: colName,
+      text: propDef.label === undefined ? colName : propDef.label,
+      type: propDef.type === undefined ? 'string' : propDef.type,
+      groupable: propDef.groupable === undefined ? true : !!propDef.groupable
+    }
+  }
+
   /**
    * Get all table column headers
    */
   get allTableHeaders () {
-    const headers = []
-    Object.keys(this.propDefs).forEach(key => {
-      const propDef = this.propDefs[key]
-      headers.push({
-        value: key,
-        text: propDef.label === undefined ? key : propDef.label,
-        type: propDef.type === undefined ? 'string' : propDef.type,
-        groupable: propDef.groupable === undefined ? true : !!propDef.groupable
-      })
-    })
-    return headers
+    return Object.keys(this.propDefs).reduce((headers, colName) => {
+      headers.push(this._getTableHeaderForColumn(colName))
+      return headers
+    }, [])
   }
 
   /**
    * Get visible table column headers
    */
   get tableHeaders () {
-    return this.allTableHeaders.filter(col => this.columns.includes(col.value))
+    return this.tableColumns.reduce((tableHeaders, column) => {
+      if (column.visible) {
+        tableHeaders.push(this._getTableHeaderForColumn(column.name))
+      }
+      return tableHeaders
+    }, [])
   }
 
   /**
    * Get initial table column list
    */
-  get initialColumns () {
-    return Object.keys(this.propDefs)
+  get initialTableColumns () {
+    return Object.keys(this.propDefs).reduce((tableColumns, propName) => {
+      tableColumns.push({
+        name: propName,
+        visible: true
+      })
+      return tableColumns
+    }, [])
   }
 
   /**
    * Get the active table colum list
    */
-  get columns () {
+  get tableColumns () {
     return this._columns
   }
 
   /**
-   * Set the list of active table columns
-   * @param {Array} columns List of columns to be set
+   * Set the list of table columns with visibility status
+   * @param {Array} tableColumns List of table columns to be set
    */
-  set columns (columns) {
-    this._columns = columns
-    this.storeSetting('columns', columns)
+  set tableColumns (tableColumns) {
+    this._columns = tableColumns
+    this.storeSetting('tableColumns', tableColumns)
   }
 
   // Filters handling

diff --git a/src/modules/ManagedItems.test.js b/src/modules/ManagedItems.test.js
@@ -71,7 +71,7 @@ describe('ManagedItems', () => {
     })
     it('resets the table columns', () => {
       const managedItems = getNewManagedTestItems()
-      managedItems.columns = ['id', 'value']
+      managedItems.tableColumns = ['id', 'value']
       managedItems.reset()
       chai.expect(managedItems.tableHeaders).to.eql(testItemHeaders)
     })
@@ -169,7 +169,11 @@ describe('ManagedItems', () => {
   describe('#tableHeaders', () => {
     it('returns the active table headers', () => {
       const managedItems = getNewManagedTestItems()
-      managedItems.columns = ['id', 'value']
+      managedItems.tableColumns = [
+        { name: 'id', visible: true },
+        { name: 'value', visible: true },
+        { name: 'info', visible: false }
+      ]
       chai.expect(managedItems.tableHeaders).to.eql([
         { value: 'id', text: 'ID', type: 'number', groupable: false },
         { value: 'value', text: 'Value', type: 'string', groupable: true }