Merge pull request coderdiaz#56 from coderdiaz/feature/sort-columns

feature/sort-columns

Author: coderdiaz

package-lock.json

@@ -35,6 +35,7 @@
  ],
  "homepage": "https://github.com/coderdiaz/vue-datasource#readme",
  "dependencies": {
+ "axios": "^0.17.0",
  "vue": "^2.2.6"
  },
  "devDependencies": {

package.json

@@ -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/App.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-sort-asc.svg'
+import IconDesc from '@/assets/icon-sort-desc.svg'
 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,24 @@ export default {
  })
  },
  columnItems () {
+ let showArrows = (key) => {
+ 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) => {
- 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 +204,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 +233,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 {

src/assets/icon-sort-asc.svg

@@ -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