phyks/flatisfy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

FlatsTable columns should be sortable

Browse Source 
Closes issue #4.
This commit is contained in:
Lucas Verney 2017-04-26 19:07:22 +02:00
parent 533638e16d
commit 3635e7c559
1 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
flatisfy/web/js_src/components/flatstable.vue
View File

@ -2,10 +2,34 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th>{{ $t("flatsDetails.Title") }}</th> <th class="pointer" v-on:click="updateSortBy('title')">
<th>{{ $t("flatsDetails.Area") }}</th> {{ $t("flatsDetails.Title") }}
<th>{{ $t("flatsDetails.Rooms") }}</th> <span v-if="sortBy === 'title'">
<th>{{ $t("flatsDetails.Cost") }}</th> <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
<span class="sr-only"></span>
</span>
</th>
<th class="pointer" v-on:click="updateSortBy('area')">
{{ $t("flatsDetails.Area") }}
<span v-if="sortBy === 'area'">
<i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
<span class="sr-only"></span>
</span>
</th>
<th class="pointer" v-on:click="updateSortBy('rooms')">
{{ $t("flatsDetails.Rooms") }}
<span v-if="sortBy === 'rooms'">
<i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
<span class="sr-only"></span>
</span>
</th>
<th class="pointer" v-on:click="updateSortBy('cost')">
{{ $t("flatsDetails.Cost") }}
<span v-if="sortBy === 'cost'">
<i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
<span class="sr-only"></span>
</span>
</th>
<th>{{ $t("common.Actions") }}</th> <th>{{ $t("common.Actions") }}</th>
</tr> </tr>
</thead> </thead>
@ -55,17 +79,43 @@
import "font-awesome-webpack" import "font-awesome-webpack"
export default { export default {
data () {
return {
sortBy: 'cost',
sortOrder: 'up'
}
},
props: ['flats'], props: ['flats'],
computed: { computed: {
sortedFlats () { sortedFlats () {
return this.flats.sort((flat1, flat2) => flat1.cost - flat2.cost) return this.flats.sort(
(flat1, flat2) => {
if (this.sortOrder === "up") {
return flat1[this.sortBy] > flat2[this.sortBy]
} else {
return flat1[this.sortBy] < flat2[this.sortBy]
}
}
)
} }
}, },
methods: { methods: {
updateFlatStatus (id, status) { updateFlatStatus (id, status) {
this.$store.dispatch('updateFlatStatus', { flatId: id, newStatus: status }) this.$store.dispatch('updateFlatStatus', { flatId: id, newStatus: status })
},
updateSortBy (field) {
if (this.sortBy === field) {
if (this.sortOrder === "up") {
this.sortOrder = "down"
} else {
this.sortOrder = "up"
}
} else {
this.sortBy = field;
}
} }
} }
} }
@ -89,4 +139,8 @@ button {
font-size: 1em; font-size: 1em;
cursor: pointer; cursor: pointer;
} }
.pointer {
cursor: pointer;
}
</style> </style>