2017-05-02 18:35:34 +02:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<h2>Search</h2>
|
|
|
|
<form v-on:submit="onSearch">
|
|
|
|
<p class="search">
|
|
|
|
<input ref="searchInput" type="text" name="query" :placeholder="$t('search.input_placeholder')"/>
|
|
|
|
<input type="submit" :value="$t('search.Search')" />
|
|
|
|
</p>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<h2>Results</h2>
|
|
|
|
<template v-if="loading">
|
|
|
|
{{ $t("common.loading") }}
|
|
|
|
</template>
|
|
|
|
<template v-else-if="Object.keys(postalCodesFlatsBuckets).length > 0">
|
|
|
|
<template v-for="(postal_code_data, postal_code) in postalCodesFlatsBuckets">
|
2017-05-04 20:52:10 +02:00
|
|
|
<h3>{{ postal_code_data.name }} ({{ postal_code }}) - {{ postal_code_data.flats.length }} {{ $tc("common.flats", postal_code_data.flats.length) }}</h3>
|
2017-05-02 18:35:34 +02:00
|
|
|
<FlatsTable :flats="postal_code_data.flats"></FlatsTable>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<p>{{ $t("flatListing.no_matching_flats") }}</p>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import FlatsTable from '../components/flatstable.vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
FlatsTable
|
|
|
|
},
|
|
|
|
|
|
|
|
created () {
|
|
|
|
this.doSearch()
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
'$route': 'doSearch'
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
postalCodesFlatsBuckets () {
|
|
|
|
if (!this.$route.query.query || this.loading) {
|
|
|
|
return {}
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.$store.getters.postalCodesFlatsBuckets(
|
2017-05-04 20:52:10 +02:00
|
|
|
flat => flat.status !== 'duplicate' && flat.status !== 'ignored' && flat.status !== "user_deleted"
|
2017-05-02 18:35:34 +02:00
|
|
|
)
|
|
|
|
},
|
|
|
|
loading () {
|
2017-05-03 19:17:19 +02:00
|
|
|
return this.$store.getters.isLoading
|
2017-05-02 18:35:34 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
2017-05-03 19:17:19 +02:00
|
|
|
onSearch (event) {
|
2017-05-02 18:35:34 +02:00
|
|
|
event.preventDefault()
|
|
|
|
|
2017-05-03 19:17:19 +02:00
|
|
|
const query = this.$refs.searchInput.value
|
2017-05-02 18:35:34 +02:00
|
|
|
this.$router.replace({ name: 'search', query: { query: query }})
|
|
|
|
},
|
|
|
|
|
2017-05-03 19:17:19 +02:00
|
|
|
doSearch () {
|
|
|
|
const query = this.$route.query.query
|
2017-05-02 18:35:34 +02:00
|
|
|
|
|
|
|
if (query) {
|
|
|
|
this.$store.dispatch('doSearch', { query: query })
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.search {
|
|
|
|
width: 50%;
|
|
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search input[type="text"] {
|
|
|
|
width: calc(85% - 10em);
|
|
|
|
}
|
|
|
|
|
|
|
|
.search input[type="submit"] {
|
|
|
|
width: 10em;
|
|
|
|
}
|
|
|
|
</style>
|