address added to personrenderbox w/ ShowAddress. Adapted to include a multiline option

This commit is contained in:
Julie Lenaerts 2021-08-18 16:22:38 +02:00
parent eac4c48d8f
commit 34e1a9b748
4 changed files with 45 additions and 22 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="address multiline"> <component :is="component" :class="'address'+ isMultiline">
<p v-if="address.text" <p v-if="address.text"
class="street"> class="street">
{{ address.text }} {{ address.text }}
@ -48,17 +48,33 @@
<b>{{ $t('distribution') }}</b>: {{ address.distribution }} <b>{{ $t('distribution') }}</b>: {{ address.distribution }}
</span> </span>
</div> </div>
</div> </component>
</template> </template>
<script> <script>
export default { export default {
name: 'ShowAddress', name: 'ShowAddress',
props: ['address'], props: {
address: {
type: Object
},
multiline: {
default: true,
type: Boolean
}
},
data() { data() {
return { return {
} }
}, },
computed: {
component(){
return this.multiline == true ? "div" : "span";
},
isMultiline(){
return this.multiline == true ? " multiline" : "";
}
}
}; };
</script> </script>

View File

@ -63,6 +63,14 @@ const messages = {
thirdparty: "un nouveau tiers professionnel" thirdparty: "un nouveau tiers professionnel"
}, },
}, },
renderbox: {
person: "Person",
birthday: {
man: "Né le",
woman: "Née le"
} ,
no_information: "Pas d'information"
}
} }
}; };

View File

@ -2,7 +2,7 @@
<li v-if="address" class="chill-entity entity-address"> <li v-if="address" class="chill-entity entity-address">
<i v-if="options.with_picto == true" class="fa fa-fw fa-map-marker"></i> <i v-if="options.with_picto == true" class="fa fa-fw fa-map-marker"></i>
<span v-if="options.render == 'list' || options.render == 'list'" class="address"> <span v-if="options.render == 'list' || options.render == 'list'" :class="'address ' + {'multiline' : options.multiline === true}">
<!-- if address.street is not empty --> <!-- if address.street is not empty -->

View File

@ -35,7 +35,7 @@
</span> </span>
<!-- IF ADD ENTITY OPTION --> <!-- IF ADD ENTITY OPTION -->
<span v-if="this.options.addEntity == true" class="badge rounded-pill bg-secondary">Person</span> <span v-if="this.options.addEntity == true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
<span v-if="this.options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span> <span v-if="this.options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
</div> </div>
@ -43,9 +43,10 @@
<!-- BIRTHDATE / DEATHDATE AND AGE --> <!-- BIRTHDATE / DEATHDATE AND AGE -->
<p v-if="this.options.addInfo == true" class="moreinfo"> <p v-if="this.options.addInfo == true" class="moreinfo">
<i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i> <!-- todo: change icon if person is deceased? -->
<i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
<time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}"> <time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}">
Birthday {{ birthdate }} {{ $t(getGender) + ' ' + $d(birthdate, 'text') }}
</time> </time>
<time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}"> <time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
{{ birthdate }} - {{ deathdate }} {{ birthdate }} - {{ deathdate }}
@ -60,20 +61,13 @@
<!-- EXTRA INFO AND ACTIONS--> <!-- EXTRA INFO AND ACTIONS-->
<div class="item-col"> <div class="item-col">
<ul class="list-content fa-ul"> <ul class="list-content fa-ul">
<!-- ADDRESS -->
<address-render-box <li v-if="person.current_household_address" class="chill-entity entity-address">
:options="{ <i class="fa fa-fw fa-map-marker"></i>
render: 'list', <show-address :address="person.current_household_address" :multiline="false"></show-address>
with_picto: true, </li>
multiline: false,
extended_infos: false,
with_valid_from: false
}"
:address="person.current_household_address"
></address-render-box>
<!-- PHONENUMBER --> <!-- PHONENUMBER -->
<!-- todo: change href for phonenumbers -->
<li v-if="this.person.mobilenumber"> <li v-if="this.person.mobilenumber">
<i class="fa fa-li fa-mobile"></i> <i class="fa fa-li fa-mobile"></i>
<a href="#">{{ person.mobilenumber }}</a> <a href="#">{{ person.mobilenumber }}</a>
@ -82,7 +76,7 @@
<i class="fa fa-li fa-phone"></i> <i class="fa fa-li fa-phone"></i>
<a href="#">{{ person.phonenumber }}</a> <a href="#">{{ person.phonenumber }}</a>
</li> </li>
<span v-else class="chill-no-data-statement">Pas d'information</span> <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
</ul> </ul>
<!-- END ADDRESS AND PHONE NUMBER --> <!-- END ADDRESS AND PHONE NUMBER -->
@ -102,15 +96,20 @@
// import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue'; // import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
import {dateToISO} from 'ChillMainAssets/chill/js/date.js'; import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
import AddressRenderBox from './AddressRenderBox.vue'; import AddressRenderBox from './AddressRenderBox.vue';
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
export default { export default {
name: "PersonRenderBox", name: "PersonRenderBox",
components: { components: {
AddressRenderBox AddressRenderBox,
ShowAddress
}, },
props: ['person', 'options'], props: ['person', 'options'],
computed: { computed: {
getGender: function() { getGender: function() {
return this.person.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
},
getGenderIcon: function() {
return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter'; return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
}, },
birthdate: function(){ birthdate: function(){