Entity/PersonRenderBox.vue with render=badge

This commit is contained in:
Mathieu Jaumotte 2021-08-27 15:49:49 +02:00
parent 4f6011348d
commit 5fd7d869bf
4 changed files with 72 additions and 28 deletions

View File

@ -81,7 +81,8 @@ const messages = {
type: { type: {
thirdparty: "Tiers", thirdparty: "Tiers",
person: "Usager" person: "Usager"
} },
holder: "Titulaire"
} }
} }
}; };

View File

@ -104,7 +104,7 @@
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<button class="btn btn-misc" @click="selectHousehold(h)"> <button class="btn btn-sm btn-misc" @click="selectHousehold(h)">
{{ $t('household_members_editor.select_household') }} {{ $t('household_members_editor.select_household') }}
</button> </button>
</li> </li>
@ -237,6 +237,18 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
div.householdSuggestionList {
&.flex-table div.item-bloc div.item-row div.item-col {
&:first-child {
width: 25%;
}
&:last-child {
display: initial;
}
}
}
/* /*
div.householdAddressSuggestionList { div.householdAddressSuggestionList {
display: flex; display: flex;

View File

@ -4,51 +4,44 @@
<div class="item-col"> <div class="item-col">
<!-- identifier --> <!-- identifier -->
<div v-if="isHouseholdNew()" class="identifier"> <div v-if="isHouseholdNew()" class="h4">
<i class="fa fa-home"></i> <i class="fa fa-home"></i>
{{ $t('new_household') }} {{ $t('new_household') }}
</div> </div>
<div v-else class="identifier"> <div v-else class="h4">
<i class="fa fa-home"></i> <i class="fa fa-home"></i>
{{ $t('household_number', { number: household.id } ) }} {{ $t('household_number', { number: household.id } ) }}
</div> </div>
</div> </div>
<div class="item-col"> <div class="item-col">
<ul class="list-content fa-ul">
<!-- member part --> <!-- member part -->
<li v-if="hasCurrentMembers" class="members"> <div v-if="hasCurrentMembers" class="members" :title="$t('current_members')">
<i class="fa fa-li fa-user" :title="$t('current_members')"></i> <template v-for="m in currentMembers()" :key="m.id">
<template v-for="(m, index) in currentMembers()" :key="m.id">
<span v-if="m.holder">
&nbsp;<span class="badge bg-primary">{{ $t('holder') }}</span>
</span>
<span v-if="index != (currentMembersLength() - 1)">, </span>
<person-render-box render="badge" <person-render-box render="badge"
:person="m.person" :person="m.person"
:options="{ :options="{
isHolder: m.holder,
addLink: true
}"> }">
</person-render-box> </person-render-box>
</template> </template>
</li> </div>
<li v-else class="members"> <div v-else class="members" :title="$t('current_members')">
<i class="fa fa-li fa-user" :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>
</li> </div>
<!-- address part --> <!-- address part -->
<li v-if="hasAddress()" class="where"> <div v-if="hasAddress()" class="where">
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-fw fa-map-marker"></i>
<show-address :address="household.current_address"></show-address> <show-address :address="household.current_address" isMultiline="false"></show-address>
</li> </div>
<li v-else class="where"> <div v-else class="where">
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-fw fa-map-marker"></i>
<p class="chill-no-data-statement">{{ $t('no_current_address') }}</p> <span class="chill-no-data-statement">{{ $t('no_current_address') }}</span>
</li> </div>
</ul>
</div> </div>
</div> </div>
</section> </section>
@ -117,15 +110,17 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
section.chill-entity { section.chill-entity {
&.entity-household { &.entity-household {
/*
.identifier { .identifier {
//grid-area: iden; //grid-area: iden;
font-size: 1.3em; font-size: 1.3em;
font-weight: 700; font-weight: 700;
color: var(--chill-blue); color: var(--chill-blue);
} }
/*
display: grid; display: grid;
grid-template-columns: auto auto 30%; grid-template-columns: auto auto 30%;
grid-template-areas: grid-template-areas:

View File

@ -9,7 +9,7 @@
<div :class="'denomination h' + options.hLevel"> <div :class="'denomination h' + options.hLevel">
<a v-if="this.options.addLink == true" href="#"> <a v-if="this.options.addLink === true" :href="getUrl">
<span class="firstname">{{ person.firstName }}</span> <span class="firstname">{{ person.firstName }}</span>
<span class="lastname">{{ person.lastName }}</span> <span class="lastname">{{ person.lastName }}</span>
<span v-if="person.altNames && options.addAltNames == true" class="altnames"> <span v-if="person.altNames && options.addAltNames == true" class="altnames">
@ -88,6 +88,27 @@
</div> </div>
</section> </section>
</div> </div>
<span v-if="render === 'badge'"
class="chill-entity entity-person badge-person">
<a v-if="this.options.addLink === true" :href="getUrl">
<span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
<i class="fa fa-circle fa-stack-1x text-success"></i>
<i class="fa fa-stack-1x">T</i>
</span>
{{ person.text }}
</a>
<span v-else>
<span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
<i class="fa fa-circle fa-stack-1x text-success"></i>
<i class="fa fa-stack-1x">T</i>
</span>
{{ person.text }}
</span>
</span>
</template> </template>
<script> <script>
@ -132,12 +153,26 @@ export default {
return this.person.altNames[i].key return this.person.altNames[i].key
} }
}, },
getUrl() {
return `/fr/person/${this.person.id}/general`;
}
} }
} }
</script> </script>
<style lang='scss'> <style lang='scss'>
span.fa-holder {
width: 1em;
margin: -10px 0.3em -8px 0;
i:last-child {
font-weight: 900;
color: white;
font-size: 70%;
font-family: "Open Sans Extrabold";
}
}
.lastname:before{ .lastname:before{
content: " " content: " "
} }
@ -150,6 +185,7 @@ div.flex-table {
} }
div.item-col:last-child { div.item-col:last-child {
justify-content: flex-start; justify-content: flex-start;
} }
} }
} }