Add sort event to columns

Author: ceejtron

.gitignore

@@ -1,8 +1,9 @@
 .DS_Store
+.idea
 node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 test/unit/coverage
 test/e2e/reports
-selenium-debug.log
+selenium-debug.log

package.json

@@ -90,11 +90,13 @@
     "lolex": "^1.5.2",
     "mocha": "^3.2.0",
     "nightwatch": "^0.9.12",
+    "node-sass": "^4.5.3",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.14",
     "rimraf": "^2.6.0",
+    "sass-loader": "^6.0.6",
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",

src/components/ClientDatasource.vue

@@ -15,6 +15,7 @@ export default {
         perpage: 10,
         selected: null, // row and Object selected on click event
         indexSelected: -1, // index row selected on click event
+        sortOrder: 0,
         search: '' // word to search in the table
       }
     }
@@ -44,4 +45,4 @@ export default {
 .mr1 {
   margin-right: 5px;
 }
-</style>
+</style>

src/components/ServerDatasource.vue

@@ -127,6 +127,7 @@ export default {
       loading: false,
       selected: null, // row and Object selected on click event
       indexSelected: -1, // index row selected on click event
+      sortOrder: 0, // sort order selected on click event
       search: '', // word to search in the table,
       pagination: {
         total: 0,
@@ -152,7 +153,7 @@ export default {
     },
     columnItems () {
       return this.columns.map((column, index) => {
-        return <th>{ column.name }</th>
+        return <th on-click={ (e) => this.sortColumn(e, column, index) }>{ column.name }</th>
       })
     },
     columnObjects () {
@@ -189,6 +190,7 @@ export default {
     fetchFromObject: DatasourceUtils.fetchFromObject,
     changePage: DatasourceUtils.changePage,
     selectRow: DatasourceUtils.selectRow,
+    sortColumn: DatasourceUtils.sortColumn,
     dynamicClass (defaultClass, customClass) {
       return `${defaultClass} ${customClass}`
     },
@@ -259,9 +261,9 @@ export default {
     width: 100%;
     height: 100%;
     background: rgba(229, 229, 229, 0.5);
-    
+
     .v-spinner {
-      position: absolute; 
+      position: absolute;
       top: 50%;
       left: 50%;
       margin-left: -25px;

src/utils/DatasourceUtils.js

@@ -1,3 +1,5 @@
+const sortDirections = ['DESC', 'ASC']
+
 export default {
   /**
    * Find the element value using Recursive Method and return the value rendered if it's defined
@@ -51,6 +53,13 @@ export default {
     }
   },
 
+  sortColumn (e, column, index) {
+    e.preventDefault()
+    const sortOrder = sortDirections[this.sortOrder]
+    this.sortOrder = +!this.sortOrder
+    this.$emit('sort', { column, sort: true, order: sortOrder })
+  },
+
   /**
    * Computed property: Building custom string information with translation
    * @returns {String}