start of updating personrenderbox to display age. only one scenario done

This commit is contained in:
Julie Lenaerts 2021-08-25 17:46:51 +02:00
parent 4ee67869bd
commit 88362bd284
2 changed files with 20 additions and 5 deletions

View File

@ -76,7 +76,8 @@ const messages = {
birthday: {
man: "Né le",
woman: "Née le"
} ,
},
years_old: "ans",
no_data: "Aucune information renseignée",
type: {
thirdparty: "Tiers",

View File

@ -27,7 +27,7 @@
</div>
<p v-if="this.options.addInfo == true" class="moreinfo">
<p v-if="options.addInfo == true" class="moreinfo">
<i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
<time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}">
{{ $t(getGender) + ' ' + $d(birthdate, 'text') }}
@ -35,7 +35,7 @@
<time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
{{ birthdate }} - {{ deathdate }}
</time>
<!-- <span class="age">{{ person.age }}</span> -->
<span v-if="options.addAge" class="age">{{ getAge }} {{ $t('renderbox.years_old')}}</span>
</p>
</div>
</div>
@ -114,12 +114,14 @@ export default {
return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
},
birthdate: function(){
var date = new Date(this.person.birthdate.datetime);
const date = new Date(this.person.birthdate.datetime);
return dateToISO(date);
},
deathdate: function(){
var date = new Date(this.person.deathdate.datetime);
if(this.person.deathdate){
const date = new Date(this.person.deathdate.datetime);
return dateToISO(date);
}
},
altNameLabel: function(){
for(let i = 0; i < this.person.altNames.length; i++){
@ -131,6 +133,12 @@ export default {
return this.person.altNames[i].key
}
},
getAge: function(){
if(this.person.birthdate && !this.person.deathdate){
const birthday = new Date(this.person.birthdate.datetime)
const now = new Date()
return (now.getFullYear() - birthday.getFullYear())
}
}
}
</script>
@ -153,6 +161,12 @@ div.flex-table {
}
}
}
.age{
margin-left: 0.5em;
&:before { content: '('; }
&:after { content: ')'; }
}
</style>