Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Jun 10, 2021. It is now read-only.

Commit 2a4c835

Browse files
Merge pull request #56 from coderdiaz/feature/sort-columns
feature/sort-columns
2 parents 396ce83 + 7ec819c commit 2a4c835

File tree

8 files changed

+109
-59
lines changed

8 files changed

+109
-59
lines changed

‎package-lock.json

Lines changed: 6 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
],
3636
"homepage": "https://github.com/coderdiaz/vue-datasource#readme",
3737
"dependencies": {
38+
"axios": "^0.17.0",
3839
"vue": "^2.2.6"
3940
},
4041
"devDependencies": {

‎src/App.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,13 @@ export default {
2323
columns: [
2424
{
2525
name: 'Id',
26-
key: 'id'
26+
key: 'id',
27+
order: true
2728
},
2829
{
2930
name: 'First Name',
30-
key: 'first_name'
31+
key: 'first_name',
32+
order: true
3133
},
3234
{
3335
name: 'Last Name',

‎src/assets/icon-sort-asc.svg

Lines changed: 3 additions & 0 deletions
Loading[フレーム]

‎src/assets/icon-sort-desc.svg

Lines changed: 3 additions & 0 deletions
Loading[フレーム]

‎src/components/ClientDatasource.vue

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎src/components/ServerDatasource.vue

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script>
2-
import DatasourceUtils from '../utils/DatasourceUtils'
2+
import DatasourceUtils from '@/utils/DatasourceUtils'
33
import Pagination from './Pagination'
4-
import {EventBus} from '../utils/EventBus'
4+
import {EventBus} from '@/utils/EventBus'
5+
import IconAsc from '@/assets/icon-sort-asc.svg'
6+
import IconDesc from '@/assets/icon-sort-desc.svg'
57
export default {
68
name: 'ServerDatasource',
79
components: {Pagination},
@@ -124,7 +126,11 @@ export default {
124126
current_page: 1,
125127
selected: null, // row and Object selected on click event
126128
indexSelected: -1, // index row selected on click event
127-
search: '' // word to search in the table,
129+
search: '', // word to search in the table,
130+
columnSortSelected: { // Object to set a column sort data
131+
key: null,
132+
order: true
133+
}
128134
}
129135
},
130136
computed: {
@@ -134,8 +140,24 @@ export default {
134140
})
135141
},
136142
columnItems () {
143+
let showArrows = (key) => {
144+
if (this.columnSortSelected.key) {
145+
return (this.shouldShowUpArrow(key)) ? <img class="arrow-active" src={IconAsc} width="15"/>
146+
: <img class="arrow-active" src={IconDesc} width="15"/>
147+
} else {
148+
return <img src={IconDesc} width="15"/>
149+
}
150+
}
151+
137152
return this.columns.map((column, index) => {
138-
return <th>{column.name}</th>
153+
if (column.order) {
154+
return <th class="vue-server-ordering" on-click={(e) => this.sortColumn(e, column.key)}>
155+
{column.name}
156+
<span class="vue-server-arrows">{showArrows(column.key)}</span>
157+
</th>
158+
} else {
159+
return <th>{column.name}</th>
160+
}
139161
})
140162
},
141163
columnObjects () {
@@ -182,7 +204,10 @@ export default {
182204
this.indexSelected = -1
183205
this.current_page = 1
184206
this.$emit('searching', e.target.value)
185-
}
207+
},
208+
sortColumn: DatasourceUtils.sortColumn,
209+
shouldShowUpArrow: DatasourceUtils.shouldShowUpArrow,
210+
shouldShowDownArrow: DatasourceUtils.shouldShowDownArrow
186211
},
187212
watch: {
188213
/**
@@ -208,8 +233,29 @@ export default {
208233
position: relative;
209234
padding: 0;
210235
}
236+
.vue-server-arrows {
237+
position: absolute;
238+
right: 5px;
239+
top: 6px;
240+
}
211241
table {
212242
margin-bottom: 0;
243+
th {
244+
position: relative;
245+
246+
&.vue-server-ordering {
247+
cursor: pointer;
248+
249+
.vue-server-arrows {
250+
img {
251+
opacity: .3;
252+
&.arrow-active {
253+
opacity: 1;
254+
}
255+
}
256+
}
257+
}
258+
}
213259
}
214260
.panel-footer {
215261
.btn-group-actions {

‎src/utils/DatasourceUtils.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,47 @@ export default {
8282
return temp
8383
},
8484

85+
/**
86+
* Function to $emit a sort event
87+
* @param {Exception} e
88+
* @param {String} key
89+
* @return void
90+
*/
91+
sortColumn (e, key) {
92+
if (this.columnSortSelected.key === key) {
93+
this.columnSortSelected.order = !this.columnSortSelected.order
94+
} else {
95+
this.columnSortSelected.order = false
96+
this.columnSortSelected.key = key
97+
}
98+
let sortType = (this.columnSortSelected.order) ? 'ASC' : 'DESC'
99+
this.$emit('column-sort', { sort: this.columnSortSelected, type: sortType })
100+
},
101+
102+
/**
103+
* Function to show up arrow
104+
* @param {String} key
105+
* @return Boolean
106+
*/
107+
shouldShowUpArrow (key) {
108+
return (this.columnSortSelected.key === key) && (this.columnSortSelected.order === true)
109+
},
110+
111+
/**
112+
* Function to show down arrow
113+
* @param {String} key
114+
* @return Boolean
115+
*/
116+
shouldShowDownArrow (key) {
117+
return (this.columnSortSelected.key === key) && (this.columnSortSelected.order === false)
118+
},
119+
120+
/**
121+
* Function to get a value rounded
122+
* @param {Number} value
123+
* @param {Number} precision
124+
* @return Number
125+
*/
85126
roundNumber (value, precision) {
86127
let multiplier = Math.pow(10, precision || 0)
87128
return Math.round(value * multiplier) / multiplier

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /