Better "Followed" page

"Followed" page is now sorted by notation for each postal code. Notes
left about the flats are listed in the list, to help have a good
overview of the followed flats.

This closes issue #45.
This commit is contained in:
Lucas Verney 2017-05-09 17:36:17 +02:00
parent 05aa5812ad
commit d152b4dce8
6 changed files with 68 additions and 11 deletions

View File

@ -2,6 +2,13 @@
<table>
<thead>
<tr>
<th v-if="showNotationColumn" class="pointer" v-on:click="updateSortBy('notation')">
{{ $t("flatsDetails.Notation") }}
<span v-if="sortBy === 'notation'">
<i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
<span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
</span>
</th>
<th class="pointer" v-on:click="updateSortBy('title')">
{{ $t("flatsDetails.Title") }}
<span v-if="sortBy === 'title'">
@ -35,10 +42,15 @@
</thead>
<tbody>
<tr v-for="flat in sortedFlats" :key="flat.id" v-on:click="showMore(flat.id)" class="pointer">
<td>
<td v-if="showNotationColumn">
<template v-for="n in range(flat.notation)">
<i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i>
</template>
</td>
<td>
<template v-if="!showNotationColumn" v-for="n in range(flat.notation)">
<i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i>
</template>
[{{ flat.id.split("@")[1] }}] {{ flat.title }}
@ -46,6 +58,11 @@
<br/>
<img :src="flat.photos[0].url"/>
</template>
<template v-if="showNotes">
<br/>
<pre>{{ flat.notes }}</pre>
</template>
</td>
<td>{{ flat.area }} </td>
<td>
@ -87,12 +104,39 @@ import { capitalize, range } from '../tools'
export default {
data () {
return {
sortBy: 'cost',
sortOrder: 'up'
sortBy: this.initialSortBy,
sortOrder: this.initialSortOrder
}
},
props: ['flats'],
props: {
flats: Array,
showNotationColumn: {
type: Boolean,
default: false
},
showNotes: {
type: Boolean,
default: false
},
initialSortBy: {
type: String,
default: 'cost'
},
initialSortOrder: {
type: String,
default: 'up'
}
},
watch: {
initialSortBy () {
this.sortBy = this.initialSortBy
},
initialSortOrder () {
this.sortOrder = this.initialSortOrder
}
},
computed: {
sortedFlats () {
@ -163,4 +207,9 @@ button {
height:1px;
overflow:hidden;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>

View File

@ -29,6 +29,7 @@ export default {
'search': 'Search'
},
flatsDetails: {
'Notation': 'Note',
'Title': 'Title',
'Area': 'Area',
'Rooms': 'Rooms',

View File

@ -202,7 +202,7 @@ export default {
// Fetch data again when the component is updated
'$route': 'fetchData',
title () {
document.title = this.title;
document.title = this.title
}
},
@ -214,7 +214,7 @@ export default {
computed: {
title () {
return "Flatisfy - " + this.$route.params.id
return 'Flatisfy - ' + this.$route.params.id
},
flatMarkers () {
return this.$store.getters.flatsMarkers(this.$router, flat => flat.id === this.$route.params.id)

View File

@ -31,7 +31,7 @@ export default {
},
created () {
document.title = "Flatisfy" // Set title
document.title = 'Flatisfy' // Set title
// Fetch flats when the component is created
this.$store.dispatch('getAllFlats')

View File

@ -33,7 +33,7 @@ export default {
},
created () {
document.title = "Flatisfy - " + this.$t('menu.search') // Set title
document.title = 'Flatisfy - ' + this.$t('menu.search') // Set title
this.doSearch()
},

View File

@ -16,7 +16,13 @@
<template v-if="Object.keys(postalCodesFlatsBuckets).length">
<template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
<h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
<FlatsTable :flats="postal_code_data.flats"></FlatsTable>
<FlatsTable
:flats="postal_code_data.flats"
:showNotationColumn="$route.params.status === 'followed'"
:showNotes="$route.params.status === 'followed'"
:initialSortBy="$route.params.status === 'followed' ? 'notation' : undefined"
:initialSortOrder="$route.params.status === 'followed' ? 'down' : undefined"
></FlatsTable>
</template>
</template>
<template v-else>
@ -58,7 +64,7 @@ export default {
watch: {
title () {
// only used when the title changes after page load
document.title = this.title;
document.title = this.title
}
},
@ -75,7 +81,7 @@ export default {
return this.$store.getters.postalCodesFlatsBuckets(flat => flat.status === this.$route.params.status)
},
title () {
return "Flatisfy - " + capitalize(this.$t("status." + this.$route.params.status))
return 'Flatisfy - ' + capitalize(this.$t('status.' + this.$route.params.status))
}
},
@ -120,6 +126,7 @@ export default {
font-weight: 700;
color: #333;
font-family: "Helvetica", "Arial", sans-serif;
cursor: pointer;
}
.hidden {