vue Address: fix ShowAddress multiline option

This commit is contained in:
Mathieu Jaumotte 2021-08-19 15:41:54 +02:00
parent 2394895ccb
commit fd8f4a98c0
3 changed files with 64 additions and 61 deletions

View File

@ -1,41 +1,22 @@
<template> <template>
<div class="chill-entity entity-address my-3"></div> <component :is="component" class="chill-entity entity-address my-3">
<component :is="component" :class="'address'+ isMultiline"> <component :is="component" class="address" :class="multiline">
<p v-if="address.text" <p v-if="address.text"
class="street"> class="street">
{{ address.text }}, {{ address.text }},
</p> </p>
<p v-if="address.postcode" <p v-if="address.postcode"
class="postcode"> class="postcode">
{{ address.postcode.code }} {{ address.postcode.name }} {{ address.postcode.code }} {{ address.postcode.name }}
</p> </p>
<p v-if="address.country" <p v-if="address.country"
class="country"> class="country">
{{ address.country.name.fr }} {{ address.country.name.fr }}
</p> </p>
</component>
<div v-if="address.floor"> <div v-if="isMultiline">
<span class="floor">
<b>{{ $t('floor') }}</b>: {{ address.floor }}
</span>
</div>
<div v-if="address.corridor">
<span class="corridor">
<b>{{ $t('corridor') }}</b>: {{ address.corridor }}
</span>
</div>
<div v-if="address.steps">
<span class="steps">
<b>{{ $t('steps') }}</b>: {{ address.steps }}
</span>
</div>
<div v-if="address.flat">
<span class="flat">
<b>{{ $t('flat') }}</b>: {{ address.flat }}
</span>
</div>
<div>
<div v-if="address.floor"> <div v-if="address.floor">
<span class="floor"> <span class="floor">
<b>{{ $t('floor') }}</b>: {{ address.floor }} <b>{{ $t('floor') }}</b>: {{ address.floor }}
@ -56,24 +37,46 @@
<b>{{ $t('flat') }}</b>: {{ address.flat }} <b>{{ $t('flat') }}</b>: {{ address.flat }}
</span> </span>
</div> </div>
<div v-if="address.buildingName"> <div>
<span class="buildingName"> <div v-if="address.floor">
<b>{{ $t('buildingName') }}</b>: {{ address.buildingName }} <span class="floor">
</span> <b>{{ $t('floor') }}</b>: {{ address.floor }}
</div> </span>
<div v-if="address.extra"> </div>
<span class="extra"> <div v-if="address.corridor">
<b>{{ $t('extra') }}</b>: {{ address.extra }} <span class="corridor">
</span> <b>{{ $t('corridor') }}</b>: {{ address.corridor }}
</div> </span>
<div v-if="address.distribution"> </div>
<span class="distribution"> <div v-if="address.steps">
<b>{{ $t('distribution') }}</b>: {{ address.distribution }} <span class="steps">
</span> <b>{{ $t('steps') }}</b>: {{ address.steps }}
</span>
</div>
<div v-if="address.flat">
<span class="flat">
<b>{{ $t('flat') }}</b>: {{ address.flat }}
</span>
</div>
<div v-if="address.buildingName">
<span class="buildingName">
<b>{{ $t('buildingName') }}</b>: {{ address.buildingName }}
</span>
</div>
<div v-if="address.extra">
<span class="extra">
<b>{{ $t('extra') }}</b>: {{ address.extra }}
</span>
</div>
<div v-if="address.distribution">
<span class="distribution">
<b>{{ $t('distribution') }}</b>: {{ address.distribution }}
</span>
</div>
</div> </div>
</div> </div>
</component>
</component>
</template> </template>
<script> <script>
@ -83,25 +86,25 @@ export default {
address: { address: {
type: Object type: Object
}, },
multiline: { isMultiline: {
default: true, default: true,
type: Boolean type: Boolean
} }
}, },
computed: { computed: {
component(){ component(){
return this.multiline == true ? "div" : "span"; return this.isMultiline == true ? "div" : "span";
}, },
isMultiline(){ multiline(){
return this.multiline == true ? " multiline" : ""; return this.isMultiline == true ? "multiline" : "";
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
p{ p {
&:after{ &:after {
content: " "; content: " ";
margin-right: 0.3em; margin-right: 0.3em;
} }

View File

@ -64,9 +64,9 @@
<div class="item-col"> <div class="item-col">
<ul class="list-content fa-ul"> <ul class="list-content fa-ul">
<!-- ADDRESS --> <!-- ADDRESS -->
<li v-if="person.current_household_address" class="chill-entity entity-address"> <li v-if="person.current_household_address">
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
<show-address :address="person.current_household_address" :multiline="false"></show-address> <show-address :address="person.current_household_address" :isMultiline="false"></show-address>
</li> </li>
<!-- PHONENUMBER --> <!-- PHONENUMBER -->
<!-- todo: change href for phonenumbers and format phone number? --> <!-- todo: change href for phonenumbers and format phone number? -->

View File

@ -49,9 +49,9 @@
<div class="item-col"> <div class="item-col">
<ul class="list-content fa-ul"> <ul class="list-content fa-ul">
<!-- ADDRESS --> <!-- ADDRESS -->
<li v-if="thirdparty.resource.address" class="chill-entity entity-address"> <li v-if="thirdparty.resource.address">
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
<show-address :address="thirdparty.resource.address" :multiline="false"></show-address> <show-address :address="thirdparty.resource.address" :isMultiline="false"></show-address>
</li> </li>
<!-- PHONENUMBER --> <!-- PHONENUMBER -->
<!-- todo: change href for phonenumbers --> <!-- todo: change href for phonenumbers -->