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>
<thead>
<tr>
<th>{{ $t("flatsDetails.Title") }}</th>
<th>{{ $t("flatsDetails.Area") }}</th>
<th>{{ $t("flatsDetails.Rooms") }}</th>
<th>{{ $t("flatsDetails.Cost") }}</th>
<th class="pointer" v-on:click="updateSortBy('title')">
{{ $t("flatsDetails.Title") }}
<span v-if="sortBy === 'title'">
<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>
</tr>
</thead>
@ -55,17 +79,43 @@
import "font-awesome-webpack"
export default {
data () {
return {
sortBy: 'cost',
sortOrder: 'up'
}
},
props: ['flats'],
computed: {
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: {
updateFlatStatus (id, 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;
cursor: pointer;
}
.pointer {
cursor: pointer;
}
</style>