Skip to content

Commit cdfea75

Browse files
woodcoderwoodcoder
committed
Use a computed version of the list to implement sortable columns
1 parent 770ba8a commit cdfea75

File tree

8 files changed

+60
-12
lines changed

8 files changed

+60
-12
lines changed

‎css/fonts.css

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
@font-face {
22
font-family: 'icomoon';
3-
src: url('fonts/icomoon.eot?mlcno2');
4-
src: url('fonts/icomoon.eot?mlcno2#iefix') format('embedded-opentype'),
5-
url('fonts/icomoon.ttf?mlcno2') format('truetype'),
6-
url('fonts/icomoon.woff?mlcno2') format('woff'),
7-
url('fonts/icomoon.svg?mlcno2#icomoon') format('svg');
3+
src: url('fonts/icomoon.eot?fcgplp');
4+
src: url('fonts/icomoon.eot?fcgplp#iefix') format('embedded-opentype'),
5+
url('fonts/icomoon.ttf?fcgplp') format('truetype'),
6+
url('fonts/icomoon.woff?fcgplp') format('woff'),
7+
url('fonts/icomoon.svg?fcgplp#icomoon') format('svg');
88
font-weight: normal;
99
font-style: normal;
1010
}
@@ -39,4 +39,10 @@
3939
.icon-star-full:before {
4040
content: "\e904";
4141
}
42+
.icon-plus:before {
43+
content: "\e905";
44+
}
45+
.icon-arrow-down2:before {
46+
content: "\e906";
47+
}
4248

‎css/fonts/icomoon.eot

220 Bytes
Binary file not shown.

‎css/fonts/icomoon.svg

Lines changed: 2 additions & 0 deletions
Loading

‎css/fonts/icomoon.ttf

220 Bytes
Binary file not shown.

‎css/fonts/icomoon.woff

220 Bytes
Binary file not shown.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"build": "cross-env NODE_ENV=production browserify -g envify src/main.js | uglifyjs -c warnings=false -m > dist/app.js"
1111
},
1212
"dependencies": {
13+
"lodash": "^4.16.3",
1314
"vue": "^2.0.1"
1415
},
1516
"devDependencies": {
@@ -27,7 +28,7 @@
2728
"watchify": "^3.4.0"
2829
},
2930
"browser": {
30-
"vue": "vue/dist/vue.js"
31+
"vue": "vue/dist/vue.js"
3132
},
3233
"browserify": {
3334
"transform": [

‎src/BoardLibrary.vue

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,44 @@
66
<table v-else>
77
<thead>
88
<tr>
9-
<th>Type</th>
10-
<th>Name</th>
9+
<board-sort v-model="sort" prop="type">Type</board-sort>
10+
<board-sort v-model="sort" prop="name">Name</board-sort>
1111
<th></th>
1212
</tr>
1313
</thead>
1414
<tbody>
15-
<board-game v-for="(game, index) in games" :type="game.type" :name="game.name">
16-
<board-delete :index="index" @delete="handleDelete"></board-delete>
15+
<board-game v-for="game in sorted" :type="game.type" :name="game.name">
16+
<board-delete :index="game.index" @delete="handleDelete"></board-delete>
1717
</board-game>
1818
</tbody>
1919
</ul>
2020
</div>
2121
</template>
2222

2323
<script>
24+
var _ = require('lodash')
2425
var BoardAdd = require('./BoardAdd.vue')
2526
var BoardGame = require('./BoardGame.vue')
2627
var BoardDelete = require('./BoardDelete.vue')
28+
var BoardSort = require('./BoardSort.vue')
2729
2830
module.exports = {
2931
data: function() {
3032
return {
33+
sort: 'type',
3134
games: []
3235
}
3336
},
3437
computed: {
3538
empty: function() {
3639
return this.games.length == 0
40+
},
41+
sorted: function() {
42+
// update each game with its index in the array
43+
this.games.forEach(function (value, index) {
44+
value.index = index
45+
})
46+
return _.sortBy(this.games, [this.sort])
3747
}
3848
},
3949
methods: {
@@ -42,18 +52,27 @@ module.exports = {
4252
},
4353
handleDelete: function (index) {
4454
this.games.splice(index, 1)
45-
}
55+
},
4656
},
4757
components: {
4858
BoardAdd: BoardAdd,
4959
BoardGame: BoardGame,
50-
BoardDelete: BoardDelete
60+
BoardDelete: BoardDelete,
61+
BoardSort: BoardSort
5162
}
5263
}
5364
</script>
5465

5566
<style>
5667
table {
5768
width: 100%;
69+
table-layout: fixed;
70+
}
71+
table th:nth-of-type(1),
72+
table th:nth-of-type(3) {
73+
width: 10%;
74+
}
75+
table th:nth-of-type(2) {
76+
width: 40%;
5877
}
5978
</style>

‎src/BoardSort.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<th @click="sort">
3+
<slot></slot>
4+
<span v-if="value == prop" class="icon-arrow-down2"></span>
5+
</th>
6+
</template>
7+
8+
<script>
9+
module.exports = {
10+
props: [
11+
'prop',
12+
'value'
13+
],
14+
methods: {
15+
sort: function () {
16+
this.$emit('input', this.prop)
17+
}
18+
}
19+
}
20+
</script>

0 commit comments

Comments
 (0)