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:
parent
05aa5812ad
commit
d152b4dce8
@ -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 }} m²</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>
|
||||
|
@ -29,6 +29,7 @@ export default {
|
||||
'search': 'Search'
|
||||
},
|
||||
flatsDetails: {
|
||||
'Notation': 'Note',
|
||||
'Title': 'Title',
|
||||
'Area': 'Area',
|
||||
'Rooms': 'Rooms',
|
||||
|
@ -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)
|
||||
|
@ -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')
|
||||
|
@ -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()
|
||||
},
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user