From 3d9f3d7eaf56e3943665ff889bcbdd20c4a11c87 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 00:02:38 -0600
Subject: [PATCH 01/11] Removed client version

---
 src/components/ClientDatasource.vue | 47 -----------------------------
 1 file changed, 47 deletions(-)
 delete mode 100644 src/components/ClientDatasource.vue

diff --git a/src/components/ClientDatasource.vue b/src/components/ClientDatasource.vue
deleted file mode 100644
index d2e7e38..0000000
--- a/src/components/ClientDatasource.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-import DatasourceUtils from '../utils/DatasourceUtils'
-import Pagination from './Pagination.vue'
-import { EventBus } from '../utils/EventBus'
-export default {
-    name: 'ClientDatasource',
-    components: {
-        Pagination
-    },
-    render (h) {
-        return (<div class="vue-client-datasource"></div>)
-    },
-    data () {
-      return {
-        perpage: 10,
-        selected: null, // row and Object selected on click event
-        indexSelected: -1, // index row selected on click event
-        search: '' // word to search in the table
-      }
-    }
-}
-</script>
-<style scoped>
-.vue-datasource .panel-body {
-  padding: 0
-}
-
-.vue-datasource table {
-  margin-bottom: 0
-}
-
-.vue-datasource .panel-footer .btn-group-actions {
-  margin: 10px 0
-}
-
-.pr1 {
-  padding-right: 5px
-}
-
-.pr2 {
-  padding-right: 10px;
-}
-
-.mr1 {
-  margin-right: 5px;
-}
-</style>
\ No newline at end of file

From cba788e766302457d7535686cd8679e5a46ae11c Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 00:03:12 -0600
Subject: [PATCH 02/11] Added methods for sorting and show arrows

---
 src/utils/DatasourceUtils.js | 40 ++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/utils/DatasourceUtils.js b/src/utils/DatasourceUtils.js
index 3a480aa..7cf9c81 100644
--- a/src/utils/DatasourceUtils.js
+++ b/src/utils/DatasourceUtils.js
@@ -82,6 +82,46 @@ 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
+    }
+    this.$emit('column-sort', this.columnSortSelected)
+  },
+
+  /**
+   * 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

From 663af0a59b06aff14e62429f72715aa8833720f0 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 00:03:31 -0600
Subject: [PATCH 03/11] Implement sorting in server datasource

---
 src/components/ServerDatasource.vue | 39 +++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/ServerDatasource.vue b/src/components/ServerDatasource.vue
index 7ca9c63..32ff87a 100644
--- a/src/components/ServerDatasource.vue
+++ b/src/components/ServerDatasource.vue
@@ -1,7 +1,9 @@
 <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 IconAsc from '@/assets/icon-asc.png'
+import IconDesc from '@/assets/icon-desc.png'
 export default {
   name: 'ServerDatasource',
   components: {Pagination},
@@ -124,7 +126,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 +140,20 @@ export default {
       })
     },
     columnItems () {
+      let showArrows = (key) => {
+        return (this.shouldShowUpArrow(key)) ? <img src={IconDesc} width="15"/>
+          : <img src={IconAsc} width="15"/>
+      }
+
       return this.columns.map((column, index) => {
-        return <th>{column.name}</th>
+        if (column.order) {
+          return <th 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 +200,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 +229,16 @@ export default {
     position: relative;
     padding: 0;
   }
+  .vue-server-arrows {
+    position: absolute;
+    right: 0;
+    top: 6px;
+  }
   table {
     margin-bottom: 0;
+    th {
+      position: relative;
+    }
   }
   .panel-footer {
     .btn-group-actions {

From 5de2d7c597fb24b46a4edf566b975ce748e0c2e9 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 00:03:44 -0600
Subject: [PATCH 04/11] Added icons for sorting

---
 src/assets/icon-asc.png  | Bin 0 -> 359 bytes
 src/assets/icon-desc.png | Bin 0 -> 360 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/assets/icon-asc.png
 create mode 100644 src/assets/icon-desc.png

diff --git a/src/assets/icon-asc.png b/src/assets/icon-asc.png
new file mode 100644
index 0000000000000000000000000000000000000000..350781f238d213e335bdd02c9065305d1eaf0755
GIT binary patch
literal 359
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSEX7WqAsj$Z!;#Vf<Z~8yL>4nJ
za0`PlBg3pY5)2HCoSrU@Ar*7p-dX6|;wZs#q45F}n=|j6<qRx9%0gz6(K-R42^?Gp
zk_;8raavh?daic!&i?nJ29kzJXSZ_#O+^CkkC#j+oc(0sgu_L*RrK3g=7@U5sO{8z
zvf<9_g^bI4#borEXUt*rS@)6chU!lppm1IZBa(K8gqCCf8OlB7xGl54%zIK<(pf9D
zy;0nA9f)te>p*=ByZ<=`wRDEb*?So4Ce?@(U3-y@W<syjf95;tm0C}FHc7@NEIF3@
zpmNe`CqCvKeDi=d19e}oV6IWG)P90&FOdEF52L;iU*F7lLp_j;r>mdKI;Vst0L!y%
Am;e9(

literal 0
HcmV?d00001

diff --git a/src/assets/icon-desc.png b/src/assets/icon-desc.png
new file mode 100644
index 0000000000000000000000000000000000000000..b593ed4444be22da5da09f99cb07b017e6e95fec
GIT binary patch
literal 360
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSEX7WqAsj$Z!;#Vf<Z~8yL>4nJ
za0`PlBg3pY5)2HCT%InDAr*7p-dPyv94OFsQNB$qDQQI`QxL<MBMB=Q+npB$bBQVl
ziU>$cPwp^rWIr(b&4$V4=QSV97S&#Nb2iXeBv4?uj!Wvb%6Zngdi-~pOLl2y+)>-9
z|Kh@fUDXU#kqrldD0B~_pXWAKStMNy4F8rqs&6>1qR%?l@|Vx2Yqm%Hwepy!dxin|
zR%QGjq^}=r-pl|(t1FmgCe?_RJj=Lli(-O-yXb#r8`VnP7Y29LPX4xR?7Drxb<*x8
zzRSAjcz5v0&0&=QqL`!73G<&UUU0bN_d7-u{R}_c@Bezm``GG$MhZy6)78&qol`;+
E0IUCS&j0`b

literal 0
HcmV?d00001


From c88ed227d14c3bbf98045559790f8e9e7ff0342e Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 00:04:04 -0600
Subject: [PATCH 05/11] Added order attribute for setting ordering

---
 src/App.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 5b3ffac..c4e53ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,8 @@ export default {
       columns: [
         {
           name: 'Id',
-          key: 'id'
+          key: 'id',
+          order: true
         },
         {
           name: 'First Name',

From 748fe224b3f66705c1ac78fa5d83966159c599eb Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 00:04:22 -0600
Subject: [PATCH 06/11] Fixed dependencies

---
 package-lock.json | 11 ++++++-----
 package.json      |  1 +
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8e7ac21..878d597 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-datasource",
-  "version": "2.0.1",
+  "version": "2.0.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -348,9 +348,9 @@
       "dev": true
     },
     "axios": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.16.2.tgz",
-      "integrity": "sha1-uk+S8XFn37q0CYN4VFS5rBScPG0=",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.17.0.tgz",
+      "integrity": "sha1-fadHkW24A/dhZR1gkdcIeJuVPGo=",
       "requires": {
         "follow-redirects": "1.2.5",
         "is-buffer": "1.1.5"
@@ -6019,7 +6019,8 @@
     "lodash": {
       "version": "4.17.4",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
+      "dev": true
     },
     "lodash._arraycopy": {
       "version": "3.0.0",
diff --git a/package.json b/package.json
index b37c6f8..387a311 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
   ],
   "homepage": "https://github.com/coderdiaz/vue-datasource#readme",
   "dependencies": {
+    "axios": "^0.17.0",
     "vue": "^2.2.6"
   },
   "devDependencies": {

From 96f7dccb3cb96b920e6077eb3687d7bd76c2052c Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 11:28:06 -0600
Subject: [PATCH 07/11] Removed png sort images

---
 src/assets/icon-asc.png  | Bin 359 -> 0 bytes
 src/assets/icon-desc.png | Bin 360 -> 0 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/assets/icon-asc.png
 delete mode 100644 src/assets/icon-desc.png

diff --git a/src/assets/icon-asc.png b/src/assets/icon-asc.png
deleted file mode 100644
index 350781f238d213e335bdd02c9065305d1eaf0755..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 359
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSEX7WqAsj$Z!;#Vf<Z~8yL>4nJ
za0`PlBg3pY5)2HCoSrU@Ar*7p-dX6|;wZs#q45F}n=|j6<qRx9%0gz6(K-R42^?Gp
zk_;8raavh?daic!&i?nJ29kzJXSZ_#O+^CkkC#j+oc(0sgu_L*RrK3g=7@U5sO{8z
zvf<9_g^bI4#borEXUt*rS@)6chU!lppm1IZBa(K8gqCCf8OlB7xGl54%zIK<(pf9D
zy;0nA9f)te>p*=ByZ<=`wRDEb*?So4Ce?@(U3-y@W<syjf95;tm0C}FHc7@NEIF3@
zpmNe`CqCvKeDi=d19e}oV6IWG)P90&FOdEF52L;iU*F7lLp_j;r>mdKI;Vst0L!y%
Am;e9(

diff --git a/src/assets/icon-desc.png b/src/assets/icon-desc.png
deleted file mode 100644
index b593ed4444be22da5da09f99cb07b017e6e95fec..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 360
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSEX7WqAsj$Z!;#Vf<Z~8yL>4nJ
za0`PlBg3pY5)2HCT%InDAr*7p-dPyv94OFsQNB$qDQQI`QxL<MBMB=Q+npB$bBQVl
ziU>$cPwp^rWIr(b&4$V4=QSV97S&#Nb2iXeBv4?uj!Wvb%6Zngdi-~pOLl2y+)>-9
z|Kh@fUDXU#kqrldD0B~_pXWAKStMNy4F8rqs&6>1qR%?l@|Vx2Yqm%Hwepy!dxin|
zR%QGjq^}=r-pl|(t1FmgCe?_RJj=Lli(-O-yXb#r8`VnP7Y29LPX4xR?7Drxb<*x8
zzRSAjcz5v0&0&=QqL`!73G<&UUU0bN_d7-u{R}_c@Bezm``GG$MhZy6)78&qol`;+
E0IUCS&j0`b


From 637cd8003ba1f66c4a664dcd14100da3613a6673 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 11:28:16 -0600
Subject: [PATCH 08/11] Added svg sort images

---
 src/assets/icon-sort-asc.svg  | 3 +++
 src/assets/icon-sort-desc.svg | 3 +++
 2 files changed, 6 insertions(+)
 create mode 100644 src/assets/icon-sort-asc.svg
 create mode 100644 src/assets/icon-sort-desc.svg

diff --git a/src/assets/icon-sort-asc.svg b/src/assets/icon-sort-asc.svg
new file mode 100644
index 0000000..2775f9e
--- /dev/null
+++ b/src/assets/icon-sort-asc.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" ?><svg id="Слой_1" style="enable-background:new 0 0 139 139;" version="1.1" viewBox="0 0 139 139" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
+</style><line class="st0" id="XMLID_7_" x1="18" x2="121" y1="34.8" y2="34.8"/><line class="st0" id="XMLID_8_" x1="95.2" x2="18" y1="69.5" y2="69.5"/><line class="st0" id="XMLID_9_" x1="69.5" x2="18" y1="104.2" y2="104.2"/></svg>
\ No newline at end of file
diff --git a/src/assets/icon-sort-desc.svg b/src/assets/icon-sort-desc.svg
new file mode 100644
index 0000000..56cde9c
--- /dev/null
+++ b/src/assets/icon-sort-desc.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" ?><svg id="Слой_1" style="enable-background:new 0 0 139 139;" version="1.1" viewBox="0 0 139 139" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
+</style><line class="st0" id="XMLID_7_" x1="18" x2="121" y1="104.2" y2="104.2"/><line class="st0" id="XMLID_8_" x1="95.2" x2="18" y1="69.5" y2="69.5"/><line class="st0" id="XMLID_9_" x1="69.5" x2="18" y1="34.8" y2="34.8"/></svg>
\ No newline at end of file

From 0bbb445c9b4cb98871d70995e5bd7d92e06f5078 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 11:28:27 -0600
Subject: [PATCH 09/11] Added other sort event

---
 src/App.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index c4e53ef..6c8a7aa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,7 +28,8 @@ export default {
         },
         {
           name: 'First Name',
-          key: 'first_name'
+          key: 'first_name',
+          order: true
         },
         {
           name: 'Last Name',

From e5080fe8381b66176bbbb0d482fa601c8479e724 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 11:28:42 -0600
Subject: [PATCH 10/11] Minor fixes for feature sorting event

---
 src/components/ServerDatasource.vue | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/ServerDatasource.vue b/src/components/ServerDatasource.vue
index 32ff87a..7171f5a 100644
--- a/src/components/ServerDatasource.vue
+++ b/src/components/ServerDatasource.vue
@@ -2,8 +2,8 @@
 import DatasourceUtils from '@/utils/DatasourceUtils'
 import Pagination from './Pagination'
 import {EventBus} from '@/utils/EventBus'
-import IconAsc from '@/assets/icon-asc.png'
-import IconDesc from '@/assets/icon-desc.png'
+import IconAsc from '@/assets/icon-sort-asc.svg'
+import IconDesc from '@/assets/icon-sort-desc.svg'
 export default {
   name: 'ServerDatasource',
   components: {Pagination},
@@ -141,13 +141,17 @@ export default {
     },
     columnItems () {
       let showArrows = (key) => {
-        return (this.shouldShowUpArrow(key)) ? <img src={IconDesc} width="15"/>
-          : <img src={IconAsc} width="15"/>
+        if (this.columnSortSelected.key) {
+          return (this.shouldShowUpArrow(key)) ? <img class="arrow-active" src={IconAsc} width="15"/>
+          : <img class="arrow-active" src={IconDesc} width="15"/>
+        } else {
+          return <img src={IconDesc} width="15"/>
+        }
       }
 
       return this.columns.map((column, index) => {
         if (column.order) {
-          return <th on-click={(e) => this.sortColumn(e, column.key)}>
+          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>
@@ -231,13 +235,26 @@ export default {
   }
   .vue-server-arrows {
     position: absolute;
-    right: 0;
+    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 {

From 7ec819cb70233e8dfde16b0b7516f92c835a11c0 Mon Sep 17 00:00:00 2001
From: Javier Diaz <coderdiaz@gmail.com>
Date: Mon, 30 Oct 2017 11:28:50 -0600
Subject: [PATCH 11/11] Emitting name event sort

---
 src/utils/DatasourceUtils.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/utils/DatasourceUtils.js b/src/utils/DatasourceUtils.js
index 7cf9c81..22f49e8 100644
--- a/src/utils/DatasourceUtils.js
+++ b/src/utils/DatasourceUtils.js
@@ -95,7 +95,8 @@ export default {
       this.columnSortSelected.order = false
       this.columnSortSelected.key = key
     }
-    this.$emit('column-sort', this.columnSortSelected)
+    let sortType = (this.columnSortSelected.order) ? 'ASC' : 'DESC'
+    this.$emit('column-sort', { sort: this.columnSortSelected, type: sortType })
   },
 
   /**