2017-04-13 23:24:31 +02:00
|
|
|
<template lang="html">
|
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
2017-05-09 17:36:17 +02:00
|
|
|
<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>
|
2017-04-26 19:07:22 +02:00
|
|
|
<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>
|
2017-04-26 19:12:30 +02:00
|
|
|
<span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
|
2017-04-26 19:07:22 +02:00
|
|
|
</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>
|
2017-04-26 19:12:30 +02:00
|
|
|
<span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
|
2017-04-26 19:07:22 +02:00
|
|
|
</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>
|
2017-04-26 19:12:30 +02:00
|
|
|
<span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
|
2017-04-26 19:07:22 +02:00
|
|
|
</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>
|
2017-04-26 19:12:30 +02:00
|
|
|
<span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
|
2017-04-26 19:07:22 +02:00
|
|
|
</span>
|
|
|
|
</th>
|
2017-06-13 17:21:02 +02:00
|
|
|
<th class="pointer" v-on:click="updateSortBy('sqCost')">
|
|
|
|
{{ $t("flatsDetails.SquareMeterCost") }}
|
|
|
|
<span v-if="sortBy === 'sqCost'">
|
|
|
|
<i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
|
|
|
|
<span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
|
|
|
|
</span>
|
|
|
|
</th>
|
2017-04-13 23:24:31 +02:00
|
|
|
<th>{{ $t("common.Actions") }}</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
2017-06-13 16:55:58 +02:00
|
|
|
<tr v-for="flat in sortedFlats" :key="flat.id">
|
2017-05-09 17:36:17 +02:00
|
|
|
<td v-if="showNotationColumn">
|
2017-05-03 22:10:24 +02:00
|
|
|
<template v-for="n in range(flat.notation)">
|
2017-05-02 18:35:34 +02:00
|
|
|
<i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i>
|
|
|
|
</template>
|
2017-05-09 17:36:17 +02:00
|
|
|
</td>
|
2017-06-26 16:22:13 +02:00
|
|
|
<td class="no-padding">
|
|
|
|
<router-link class="fill" :to="{name: 'details', params: {id: flat.id}}">
|
2017-06-13 16:55:58 +02:00
|
|
|
<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 }}
|
|
|
|
|
|
|
|
<template v-if="flat.photos && flat.photos.length > 0">
|
|
|
|
<br/>
|
|
|
|
<img :src="flat.photos[0].url"/>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template v-if="showNotes">
|
|
|
|
<br/>
|
|
|
|
<pre>{{ flat.notes }}</pre>
|
|
|
|
</template>
|
2017-06-26 16:22:13 +02:00
|
|
|
</router-link>
|
2017-04-13 23:24:31 +02:00
|
|
|
</td>
|
|
|
|
<td>{{ flat.area }} m²</td>
|
|
|
|
<td>
|
|
|
|
{{ flat.rooms ? flat.rooms : '?'}}
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
{{ flat.cost }} {{ flat.currency }}
|
|
|
|
<template v-if="flat.utilities == 'included'">
|
|
|
|
{{ $t("flatsDetails.utilities_included") }}
|
|
|
|
</template>
|
|
|
|
<template v-else-if="flat.utilities == 'excluded'">
|
|
|
|
{{ $t("flatsDetails.utilities_excluded") }}
|
|
|
|
</template>
|
|
|
|
</td>
|
2017-06-13 17:21:02 +02:00
|
|
|
<td>
|
|
|
|
{{ flat.sqCost }} {{ flat.currency }}
|
|
|
|
</td>
|
2017-04-13 23:24:31 +02:00
|
|
|
<td>
|
2017-05-09 15:29:21 +02:00
|
|
|
<router-link :to="{name: 'details', params: {id: flat.id}}" :aria-label="$t('common.More_about') + ' ' + flat.id" :title="$t('common.More_about') + ' ' + flat.id">
|
2017-04-13 23:24:31 +02:00
|
|
|
<i class="fa fa-plus" aria-hidden="true"></i>
|
|
|
|
</router-link>
|
2017-05-09 15:29:21 +02:00
|
|
|
<a :href="flat.urls[0]" :aria-label="$t('common.Original_post_for') + ' ' + flat.id" :title="$t('common.Original_post_for') + ' ' + flat.id" target="_blank">
|
2017-04-13 23:24:31 +02:00
|
|
|
<i class="fa fa-external-link" aria-hidden="true"></i>
|
|
|
|
</a>
|
2017-05-09 15:29:21 +02:00
|
|
|
<button v-if="flat.status !== 'user_deleted'" v-on:click="updateFlatStatus(flat.id, 'user_deleted')" :aria-label="$t('common.Remove') + ' ' + flat.id" :title="$t('common.Remove') + ' ' + flat.id">
|
2017-04-13 23:24:31 +02:00
|
|
|
<i class="fa fa-trash" aria-hidden="true"></i>
|
|
|
|
</button>
|
2017-05-09 15:29:21 +02:00
|
|
|
<button v-else v-on:click="updateFlatStatus(flat.id, 'new')" :aria-label="$t('common.Restore') + ' ' + flat.id" :title="$t('common.Restore') + ' ' + flat.id">
|
2017-04-13 23:24:31 +02:00
|
|
|
<i class="fa fa-undo" aria-hidden="true"></i>
|
|
|
|
</button>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2017-04-26 20:02:55 +02:00
|
|
|
import 'font-awesome-webpack'
|
2017-04-25 15:58:06 +02:00
|
|
|
|
2017-05-03 22:10:24 +02:00
|
|
|
import { capitalize, range } from '../tools'
|
2017-04-26 19:12:30 +02:00
|
|
|
|
2017-04-13 23:24:31 +02:00
|
|
|
export default {
|
2017-04-26 19:07:22 +02:00
|
|
|
data () {
|
|
|
|
return {
|
2017-05-09 17:36:17 +02:00
|
|
|
sortBy: this.initialSortBy,
|
|
|
|
sortOrder: this.initialSortOrder
|
2017-04-26 19:07:22 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-05-09 17:36:17 +02:00
|
|
|
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
|
|
|
|
}
|
|
|
|
},
|
2017-04-13 23:24:31 +02:00
|
|
|
|
|
|
|
computed: {
|
|
|
|
sortedFlats () {
|
2017-05-11 14:06:38 +02:00
|
|
|
const sortedFlats = this.flats.slice(0)
|
|
|
|
sortedFlats.sort(
|
2017-04-26 19:07:22 +02:00
|
|
|
(flat1, flat2) => {
|
2017-04-26 20:02:55 +02:00
|
|
|
if (this.sortOrder === 'up') {
|
2017-05-11 14:06:38 +02:00
|
|
|
return flat1[this.sortBy] - flat2[this.sortBy]
|
2017-04-26 19:07:22 +02:00
|
|
|
} else {
|
2017-05-11 14:06:38 +02:00
|
|
|
return flat2[this.sortBy] - flat1[this.sortBy]
|
2017-04-26 19:07:22 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
)
|
2017-05-11 14:06:38 +02:00
|
|
|
return sortedFlats
|
2017-04-13 23:24:31 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
updateFlatStatus (id, status) {
|
|
|
|
this.$store.dispatch('updateFlatStatus', { flatId: id, newStatus: status })
|
2017-04-26 19:07:22 +02:00
|
|
|
},
|
|
|
|
updateSortBy (field) {
|
|
|
|
if (this.sortBy === field) {
|
2017-04-26 20:02:55 +02:00
|
|
|
if (this.sortOrder === 'up') {
|
|
|
|
this.sortOrder = 'down'
|
2017-04-26 19:07:22 +02:00
|
|
|
} else {
|
2017-04-26 20:02:55 +02:00
|
|
|
this.sortOrder = 'up'
|
2017-04-26 19:07:22 +02:00
|
|
|
}
|
|
|
|
} else {
|
2017-04-26 20:02:55 +02:00
|
|
|
this.sortBy = field
|
2017-04-26 19:07:22 +02:00
|
|
|
}
|
2017-04-26 19:12:30 +02:00
|
|
|
},
|
2017-05-03 22:10:24 +02:00
|
|
|
capitalize: capitalize,
|
|
|
|
range: range
|
2017-04-13 23:24:31 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
td a {
|
|
|
|
display: inline-block;
|
|
|
|
padding-left: 5px;
|
|
|
|
padding-right: 5px;
|
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
|
|
|
|
td img {
|
|
|
|
max-height: 100px;
|
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
border: none;
|
|
|
|
background: transparent;
|
|
|
|
font-size: 1em;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2017-04-26 19:07:22 +02:00
|
|
|
|
|
|
|
.pointer {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2017-04-26 19:12:30 +02:00
|
|
|
|
|
|
|
.sr-only {
|
|
|
|
position:absolute;
|
|
|
|
left:-10000px;
|
|
|
|
top:auto;
|
|
|
|
width:1px;
|
|
|
|
height:1px;
|
|
|
|
overflow:hidden;
|
|
|
|
}
|
2017-05-09 17:36:17 +02:00
|
|
|
|
|
|
|
pre {
|
|
|
|
white-space: pre-wrap;
|
|
|
|
word-wrap: break-word;
|
2017-05-11 14:27:30 +02:00
|
|
|
word-break: break-all;
|
2017-05-09 17:36:17 +02:00
|
|
|
}
|
2017-06-13 16:55:58 +02:00
|
|
|
|
2017-06-26 16:22:13 +02:00
|
|
|
.no-padding {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
2017-06-13 16:55:58 +02:00
|
|
|
.fill {
|
|
|
|
display: block;
|
2017-06-26 16:22:13 +02:00
|
|
|
padding: 2em;
|
|
|
|
text-decoration: none;
|
2017-06-13 16:55:58 +02:00
|
|
|
}
|
2017-04-13 23:24:31 +02:00
|
|
|
</style>
|