README.md

@@ -1,3 +1,5 @@
+[WIP] Vue Datasource go back renew. Coming soon V3.
+
 <p align="center">
     <a href="https://github.com/coderdiaz/vue-datasource">
         <img src="logo.png" width="120">
@@ -10,10 +12,12 @@
 </p>
 
 <p align="center">
+    <a href="https://npmjs.com/package/vue-datasource"><img src="https://img.shields.io/npm/dt/vue-datasource.svg?style=flat-square"></a>
     <a href="https://github.com/coderdiaz/vue-datasource/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square"></a>
     <a href="https://github.com/coderdiaz/vue-datasource/stargazers"><img src="https://img.shields.io/github/stars/coderdiaz/vue-datasource.svg?style=flat-square"></a>
-    <a href="http://npmjs.com/package/vue-datasource"><img src="https://img.shields.io/npm/dm/vue-datasource.svg?style=flat-square"></a>
     <a href="http://npmjs.com/package/vue-datasource"><img src="https://img.shields.io/npm/v/vue-datasource.svg?style=flat-square"></a>
+    <a href="http://npmjs.com/package/vue-datasource"><img src="https://img.shields.io/npm/dm/vue-datasource.svg?style=flat-square"></a>
+    <a href="https://www.paypal.me/coderdiaz"><img src="https://img.shields.io/badge/invite-coffee-red.svg?style=flat-square"></a>
 </p>
 
 ---
@@ -23,6 +27,10 @@
     <img src="screenshot.png">
 </p>
 
+### Donate
+
+<a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/coderdiaz"><img src="https://www.buymeacoffee.com/assets/img/BMC-btn-logo.svg" alt="Buy me a coffee"><span style="margin-left:5px">Buy me a coffee</span></a>
+
 ### Install/Usage
 For use this package is necessary install [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) dependency.
 
@@ -76,6 +84,7 @@ new Vue({
 |-------------|-----------------------------------------------------------------------------------------------------|
 | change      | Handle show limit changed. Gets object with new show limit and current page `{perpage: 10, page: 2}`|
 | searching   | Handles search input. Gets string as parameter                                                      |
+| column-sort | Only if `order` is defined in column array. Return the current column sorted with metadata ([Sort Column](#sort-column))
 
 ### Columns
 Each column object needs `name` and `key` attributes.
@@ -120,6 +129,31 @@ To get the user role we would need to define in our columns array:
 }
 ```
 
+### Sort column
+**[New]** You only need a `order` property in column defined for use this feature.
+```javascript
+{
+    ...,
+    columns: [
+        {
+            name: 'Name',
+            key: 'name',
+            order: true
+        }
+    ]
+}
+```
+
+This feature emit a event `column-sort` with this data object
+```javascript 
+{
+    sort: {
+        key: 'name',
+        order: false
+    },
+    type: 'DESC'
+}
+```
 
 ### Render column
 This callback will modify the data for various operations. Such as applying a specific format or an arithmetic operation to the column value and return it.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datasource",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "A vue server side component to create dynamic tables",
   "author": "Javier Diaz <coderdiaz@gmail.com>",
   "private": false,
@@ -35,6 +35,7 @@
   ],
   "homepage": "https://github.com/coderdiaz/vue-datasource#readme",
   "dependencies": {
+    "axios": "^0.17.0",
     "vue": "^2.2.6"
   },
   "devDependencies": {

src/App.vue

@@ -23,11 +23,13 @@ export default {
       columns: [
         {
           name: 'Id',
-          key: 'id'
+          key: 'id',
+          order: true
         },
         {
           name: 'First Name',
-          key: 'first_name'
+          key: 'first_name',
+          order: true
         },
         {
           name: 'Last Name',

src/components/ServerDatasource.vue

@@ -1,10 +1,11 @@
 <script>
-import DatasourceUtils from '../utils/DatasourceUtils'
+import DatasourceUtils from '@/utils/DatasourceUtils'
 import Pagination from './Pagination'
-import {EventBus} from '../utils/EventBus'
+import {EventBus} from '@/utils/EventBus'
+import SvgIcon from '@/components/SvgIcon'
 export default {
   name: 'ServerDatasource',
-  components: {Pagination},
+  components: {Pagination, SvgIcon},
   render (h) {
     return (
       <div class="vue-server-datasource">
@@ -124,7 +125,11 @@ export default {
       current_page: 1,
       selected: null, // row and Object selected on click event
       indexSelected: -1, // index row selected on click event
-      search: '' // word to search in the table,
+      search: '', // word to search in the table,
+      columnSortSelected: { // Object to set a column sort data
+        key: null,
+        order: true
+      }
     }
   },
   computed: {
@@ -134,8 +139,30 @@ export default {
       })
     },
     columnItems () {
+      let showArrows = (key) => {
+        if (this.columnSortSelected.key) {
+          return (this.shouldShowUpArrow(key)) ? <span class="icon-asc">
+            <SvgIcon/>
+          </span>
+          : <span class="icon-desc">
+            <SvgIcon/>
+          </span>
+        } else {
+          return <span class="icon-desc">
+            <SvgIcon/>
+          </span>
+        }
+      }
+
       return this.columns.map((column, index) => {
-        return <th>{column.name}</th>
+        if (column.order) {
+          return <th class="vue-server-ordering" on-click={(e) => this.sortColumn(e, column.key)}>
+            {column.name}
+            <span class="vue-server-arrows">{showArrows(column.key)}</span>
+          </th>
+        } else {
+          return <th>{column.name}</th>
+        }
       })
     },
     columnObjects () {
@@ -182,7 +209,10 @@ export default {
       this.indexSelected = -1
       this.current_page = 1
       this.$emit('searching', e.target.value)
-    }
+    },
+    sortColumn: DatasourceUtils.sortColumn,
+    shouldShowUpArrow: DatasourceUtils.shouldShowUpArrow,
+    shouldShowDownArrow: DatasourceUtils.shouldShowDownArrow
   },
   watch: {
     /**
@@ -208,8 +238,29 @@ export default {
     position: relative;
     padding: 0;
   }
+  .vue-server-arrows {
+    position: absolute;
+    right: 5px;
+    top: 6px;
+  }
   table {
     margin-bottom: 0;
+    th {
+      position: relative;
+
+      &.vue-server-ordering {
+        cursor: pointer;
+
+        .vue-server-arrows {
+          img {
+            opacity: .3;
+            &.arrow-active {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
   }
   .panel-footer {
     .btn-group-actions {
@@ -222,15 +273,27 @@ 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;
       margin-top: -50px;
     }
   }
+  .icon-asc,
+  .icon-desc {
+    svg {
+      fill: #a3a3a3;
+      width: 1em;
+    }
+  }
+  .icon-asc {
+    svg {
+      transform: rotate(180deg);
+    }
+  }
 }
 
 .pr1 {

src/components/SvgIcon.vue

@@ -0,0 +1,8 @@
+<script>
+export default {
+  name: 'SvgIcon',
+  render (h) {
+    return (<svg id="lnr-sort-amount-asc" viewBox="0 0 1024 1024" width="100%" height="100%"><title>sort-amount-asc</title><path class="path1" d="M453.301 749.899c-9.997-9.997-26.206-9.997-36.203 0l-161.098 161.098v-885.397c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v885.397l-161.099-161.098c-9.997-9.997-26.206-9.997-36.203 0s-9.998 26.206 0 36.203l204.8 204.8c5 4.998 11.55 7.498 18.102 7.498s13.102-2.499 18.101-7.499l204.8-204.8c9.998-9.997 9.998-26.205 0-36.202z"></path><path class="path2" d="M691.2 256h-102.4c-14.139 0-25.6-11.462-25.6-25.6v-102.4c0-14.138 11.461-25.6 25.6-25.6h102.4c14.139 0 25.6 11.462 25.6 25.6v102.4c0 14.138-11.461 25.6-25.6 25.6zM614.4 204.8h51.2v-51.2h-51.2v51.2z"></path><path class="path3" d="M793.6 460.8h-204.8c-14.139 0-25.6-11.462-25.6-25.6v-102.4c0-14.138 11.461-25.6 25.6-25.6h204.8c14.139 0 25.6 11.462 25.6 25.6v102.4c0 14.138-11.461 25.6-25.6 25.6zM614.4 409.6h153.6v-51.2h-153.6v51.2z"></path><path class="path4" d="M896 665.6h-307.2c-14.139 0-25.6-11.461-25.6-25.6v-102.4c0-14.139 11.461-25.6 25.6-25.6h307.2c14.139 0 25.6 11.461 25.6 25.6v102.4c0 14.139-11.461 25.6-25.6 25.6zM614.4 614.4h256v-51.2h-256v51.2z"></path><path class="path5" d="M998.4 870.4h-409.6c-14.139 0-25.6-11.461-25.6-25.6v-102.4c0-14.139 11.461-25.6 25.6-25.6h409.6c14.139 0 25.6 11.461 25.6 25.6v102.4c0 14.139-11.461 25.6-25.6 25.6zM614.4 819.2h358.4v-51.2h-358.4v51.2z"></path></svg>)
+  }
+}
+</script>

src/utils/DatasourceUtils.js

@@ -82,6 +82,47 @@ export default {
     return temp
   },
 
+  /**
+   * Function to $emit a sort event
+   * @param {Exception} e
+   * @param {String} key
+   * @return void
+   */
+  sortColumn (e, key) {
+    if (this.columnSortSelected.key === key) {
+      this.columnSortSelected.order = !this.columnSortSelected.order
+    } else {
+      this.columnSortSelected.order = false
+      this.columnSortSelected.key = key
+    }
+    let sortType = (this.columnSortSelected.order) ? 'ASC' : 'DESC'
+    this.$emit('column-sort', { sort: this.columnSortSelected, type: sortType })
+  },
+
+  /**
+   * Function to show up arrow
+   * @param {String} key
+   * @return Boolean
+   */
+  shouldShowUpArrow (key) {
+    return (this.columnSortSelected.key === key) && (this.columnSortSelected.order === true)
+  },
+
+  /**
+   * Function to show down arrow
+   * @param {String} key
+   * @return Boolean
+   */
+  shouldShowDownArrow (key) {
+    return (this.columnSortSelected.key === key) && (this.columnSortSelected.order === false)
+  },
+
+  /**
+   * Function to get a value rounded
+   * @param {Number} value
+   * @param {Number} precision
+   * @return Number
+   */
   roundNumber (value, precision) {
     let multiplier = Math.pow(10, precision || 0)
     return Math.round(value * multiplier) / multiplier