creation of vue component person-text

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js

@@ -61,14 +61,15 @@ const messages = {
             woman: "Née le"
          },
          deathdate: "Date de décès",
-         years_old: "ans",
          household_without_address: "Le ménage de l'usager est sans adresse",
          no_data: "Aucune information renseignée",
          type: {
             thirdparty: "Tiers",
             person: "Usager"
          },
-         holder: "Titulaire"
+         holder: "Titulaire",
+         years_old: "an | {n} an | {n} ans",
+
       }
    }
 };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue

@@ -0,0 +1,53 @@
+<template>
+    <span v-if="isCut">{{ cutText }}</span>
+    <span v-else class="person-text">
+        <span class="firstname">{{ person.firstName }}</span>
+        <span class="lastname">{{ person.lastName }}</span>
+        <span v-if="person.altNames.length > 0" class="altnames">
+            <span :class="'altname altname-' + altNameKey"> ({{ altNameLabel }})</span>
+        </span>
+        <span class="age" v-if="person.birthdate !== null && person.deathdate === null">{{ $tc('renderbox.years_old', this.getAge) }}</span>
+    </span>
+</template>
+
+<script>
+
+export default {
+    name: "PersonText",
+    props: ['person', 'isCut'],
+    computed: {
+        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())
+            } else if(this.person.birthdate && this.person.deathdate){
+                    const birthday = new Date(this.person.birthdate.datetime)
+                    const deathdate = new Date(this.person.deathdate.datetime)
+                    return (deathdate.getFullYear() - birthday.getFullYear())
+            } else if(!this.person.birthdate && this.person.deathdate.datetime) {
+                // todo: change this
+                    return "Age unknown"
+            } else {
+                // todo: change this
+                    return "Age unknown"
+            }
+        },
+        altNameLabel: function() {
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].label
+            }
+            console.log(this.person.altNames)
+        },
+        altNameKey: function() {
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].key
+            }
+        },
+        cutText: function() {
+            let more = (this.person.text.length > 15) ?'…' : '';
+            return this.person.text.slice(0,15) + more;
+        }
+    }
+}
+</script>