address multiline as option in householdrenderbox

This commit is contained in:
Mathieu Jaumotte 2021-08-31 11:06:44 +02:00
parent c0d2454473
commit 3fa4f1b28b
3 changed files with 31 additions and 19 deletions

View File

@ -70,11 +70,12 @@ export default {
} }
}, },
computed: { computed: {
component(){ component() {
return this.isMultiline == true ? "div" : "span"; return this.isMultiline === true ? "div" : "span";
}, },
multiline(){ multiline() {
return this.isMultiline == true ? "multiline" : ""; console.log(this.isMultiline, typeof this.isMultiline);
return this.isMultiline === true ? "multiline" : "";
} }
} }
}; };

View File

@ -4,9 +4,7 @@
<div v-if="hasHousehold"> <div v-if="hasHousehold">
<div class="flex-table"> <div class="flex-table">
<div class="item-bloc"> <div class="item-bloc">
<household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
<household-render-box :household="household" isMultiline="true">
</household-render-box>
</div> </div>
</div> </div>
<div v-if="isHouseholdNew && !hasHouseholdAddress"> <div v-if="isHouseholdNew && !hasHouseholdAddress">

View File

@ -15,9 +15,11 @@
</div> </div>
<div class="item-col"> <div class="item-col">
<ul class="list-content fa-ul">
<!-- member part --> <!-- member part -->
<div v-if="hasCurrentMembers" class="members" :title="$t('current_members')"> <li v-if="hasCurrentMembers" class="members">
<i class="fa fa-li fa-hop" :title="$t('current_members')"></i>
<template v-for="m in currentMembers()" :key="m.id"> <template v-for="m in currentMembers()" :key="m.id">
<person-render-box render="badge" <person-render-box render="badge"
:person="m.person" :person="m.person"
@ -27,21 +29,23 @@
}"> }">
</person-render-box> </person-render-box>
</template> </template>
</div> </li>
<div v-else class="members" :title="$t('current_members')"> <li v-else class="members">
<i class="fa fa-li fa-hop" :title="$t('current_members')"></i>
<p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p> <p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
</div> </li>
<!-- address part --> <!-- address part -->
<div v-if="hasAddress()" class="where"> <li v-if="hasAddress()">
<i class="fa fa-fw fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
<show-address :address="household.current_address" isMultiline="false"></show-address> <show-address :address="household.current_address" :isMultiline="isMultiline"></show-address>
</div> </li>
<div v-else class="where"> <li v-else>
<i class="fa fa-fw fa-map-marker"></i> <i class="fa fa-li fa-map-marker"></i>
<span class="chill-no-data-statement">{{ $t('no_current_address') }}</span> <span class="chill-no-data-statement">{{ $t('no_current_address') }}</span>
</div> </li>
</ul>
</div> </div>
</div> </div>
</section> </section>
@ -66,12 +70,17 @@ const i18n = {
export default { export default {
name: 'Household', name: 'Household',
props: ['household'], props: ['household', 'isAddressMultiline'],
components: { components: {
PersonRenderBox, PersonRenderBox,
ShowAddress, ShowAddress,
}, },
i18n, i18n,
computed: {
isMultiline() {
return (typeof this.isAddressMultiline !== 'undefined') ? this.isAddressMultiline : false;
}
},
methods: { methods: {
hasCurrentMembers() { hasCurrentMembers() {
return this.household.current_members_id.length > 0; return this.household.current_members_id.length > 0;
@ -112,6 +121,10 @@ export default {
section.chill-entity { section.chill-entity {
&.entity-household { &.entity-household {
.fa-hop::marker {
content: '::';
}
/* /*
.identifier { .identifier {
//grid-area: iden; //grid-area: iden;