193 lines
4.9 KiB
Vue
193 lines
4.9 KiB
Vue
<template>
|
|
<div>
|
|
<h2 class="btn-group">
|
|
<button type="button" class="dropdownToggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-on:click="toggleDropdown()" ref="dropdownToggle">
|
|
<span class="dashedUnderline">{{ capitalize($t("status." + $route.params.status)) }}</span>
|
|
<i class="fa fa-caret-down"/>
|
|
</button>
|
|
<ul class="dropdownMenu" :class="isDropdownVisible ? '' : 'hidden'">
|
|
<li v-for="status in available_status" :key="status" :class="$route.params.status == status.toLowerCase() ? 'active' : ''">
|
|
<router-link :to="{ name: 'status', params: {status: status.toLowerCase()}}" role="button">
|
|
{{ capitalize($t("status." + status)) }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</h2>
|
|
|
|
<template v-if="isLoading">
|
|
<p>{{ $t("common.loading") }}</p>
|
|
</template>
|
|
<template v-else-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"
|
|
: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>
|
|
<p>{{ $t("flatListing.no_available_flats") }}</p>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { capitalize } from '../tools'
|
|
|
|
import FlatsTable from '../components/flatstable.vue'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
'isDropdownVisible': false,
|
|
'available_status': [
|
|
'new',
|
|
'followed',
|
|
'ignored',
|
|
'duplicate',
|
|
'user_deleted'
|
|
]
|
|
}
|
|
},
|
|
|
|
components: {
|
|
FlatsTable
|
|
},
|
|
|
|
created () {
|
|
document.title = this.title // Set title
|
|
|
|
// Fetch flats when the component is created
|
|
this.$store.dispatch('getAllFlats')
|
|
},
|
|
|
|
watch: {
|
|
title () {
|
|
// only used when the title changes after page load
|
|
document.title = this.title
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
window.addEventListener('click', event => {
|
|
if (event.target !== this.$refs.dropdownToggle && event.target.parentNode !== this.$refs.dropdownToggle) {
|
|
this.isDropdownVisible = false
|
|
}
|
|
})
|
|
},
|
|
|
|
computed: {
|
|
postalCodesFlatsBuckets () {
|
|
return this.$store.getters.postalCodesFlatsBuckets(flat => flat.status === this.$route.params.status)
|
|
},
|
|
title () {
|
|
return 'Flatisfy - ' + capitalize(this.$t('status.' + this.$route.params.status))
|
|
},
|
|
isLoading () {
|
|
return this.$store.getters.isLoading
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
toggleDropdown () {
|
|
this.isDropdownVisible = !this.isDropdownVisible
|
|
},
|
|
capitalize: capitalize
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn-group {
|
|
position: relative;
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.btn-group > .btn {
|
|
position: relative;
|
|
flex: 0 1 auto;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.btn-group > .btn:hover {
|
|
z-index: 2;
|
|
}
|
|
|
|
.btn-group > .btn:focus,
|
|
.btn-group > .btn:active,
|
|
.btn-group > .btn.active {
|
|
z-index: 2;
|
|
}
|
|
|
|
.dropdownToggle {
|
|
border: none;
|
|
padding: 0;
|
|
line-height: 1em;
|
|
background-color: transparent;
|
|
font-size: 21px;
|
|
font-weight: 700;
|
|
color: #333;
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.dropdownMenu {
|
|
position: absolute;
|
|
top: 10px;
|
|
min-width: 160px;
|
|
background-color: white;
|
|
z-index: 1;
|
|
padding-left: 0;
|
|
border-radius: .25rem;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.dropdownMenu li {
|
|
list-style-type: none;
|
|
padding-left: 1em;
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.dropdownMenu a {
|
|
text-decoration: none;
|
|
color: #555;
|
|
font-size: 0.75em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.dashedUnderline {
|
|
border-bottom: 1px dotted black;
|
|
}
|
|
|
|
.active {
|
|
background-color: #0275d8;
|
|
}
|
|
|
|
.dropdownMenu li.active a {
|
|
color: white;
|
|
}
|
|
|
|
.fa-caret-down {
|
|
display: inline-block;
|
|
font-size: 15px;
|
|
margin-top: 1em;
|
|
margin-left: 0.1em;
|
|
}
|
|
|
|
.dashedUnderline,
|
|
.fa-caret-down {
|
|
/* Fix for alignment of caret and border-bottom */
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
</style>
|