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: { birthday: {
man: "Né le", man: "Né le",
woman: "Née le" woman: "Née le"
} , },
years_old: "ans",
no_data: "Aucune information renseignée", no_data: "Aucune information renseignée",
type: { type: {
thirdparty: "Tiers", thirdparty: "Tiers",

View File

@ -27,7 +27,7 @@
</div> </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> <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 }}">
{{ $t(getGender) + ' ' + $d(birthdate, 'text') }} {{ $t(getGender) + ' ' + $d(birthdate, 'text') }}
@ -35,7 +35,7 @@
<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 }}
</time> </time>
<!-- <span class="age">{{ person.age }}</span> --> <span v-if="options.addAge" class="age">{{ getAge }} {{ $t('renderbox.years_old')}}</span>
</p> </p>
</div> </div>
</div> </div>
@ -114,12 +114,14 @@ export default {
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(){
var date = new Date(this.person.birthdate.datetime); const date = new Date(this.person.birthdate.datetime);
return dateToISO(date); return dateToISO(date);
}, },
deathdate: function(){ 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); return dateToISO(date);
}
}, },
altNameLabel: function(){ altNameLabel: function(){
for(let i = 0; i < this.person.altNames.length; i++){ for(let i = 0; i < this.person.altNames.length; i++){
@ -131,6 +133,12 @@ export default {
return this.person.altNames[i].key 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> </script>
@ -153,6 +161,12 @@ div.flex-table {
} }
} }
} }
.age{
margin-left: 0.5em;
&:before { content: '('; }
&:after { content: ')'; }
}
</style> </style>