add age in some place and re-organize some usage of the component

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -87,7 +87,7 @@ export default {
                & > input {
                   margin-right: 0.8em;
                }
-               span:not(.name) {
+               > span:not(.name) {
                   margin-left: 0.5em;
                   opacity: 0.5;
                   font-size: 90%;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue

@@ -1,7 +1,7 @@
 <template>
    <div class="container">
       <span class="name">
-         {{ item.result.text }}
+         <person-text :person="item.result"></person-text>
       </span>
       <span class="birthday" v-if="hasBirthdate">
          {{ $d(item.result.birthdate.datetime, 'short') }}
@@ -28,12 +28,14 @@
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
    name: 'SuggestionPerson',
    components: {
      OnTheFly,
-     BadgeEntity
+     BadgeEntity,
+     PersonText,
    },
    props: ['item'],
    computed: {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue

@@ -2,7 +2,7 @@
     <div class="container tpartycontainer">
       <div class="tparty-identification">
         <span class="name">
-           {{ item.result.text }}
+           {{ item.result.text }}&nbsp;
         </span>
           <span class="location">
           <template v-if="hasAddress">

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

@@ -9,6 +9,7 @@
                 <div :class="'denomination h' + options.hLevel">
 
                     <a v-if="options.addLink === true" :href="getUrl">
+                      <!-- use person-text here to avoid code duplication ? TODO -->
                         <span class="firstname">{{ person.firstName }}</span>
                         <span class="lastname">{{ person.lastName }}</span>
                         <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
@@ -16,6 +17,7 @@
                         </span>
                     </a>
 
+                  <!-- use person-text here to avoid code duplication ? TODO -->
                     <span class="firstname">{{ person.firstName }}</span>
                     <span class="lastname">{{ person.lastName }}</span>
                     <span v-if="person.deathdate" class="deathdate"> (‡)</span>
@@ -127,7 +129,6 @@
         </span>
 
         <person-text :person="person"></person-text>
-        <span v-if="person.deathdate" class="deathdate"> (‡)</span>
     </a>
     <span v-else>
         <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
@@ -202,24 +203,6 @@ export default {
         getUrl: function() {
             return `/fr/person/${this.person.id}/general`;
         },
-        // getAge: function() {
-        //     // TODO only one abstract 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"
-        //     }
-        // },
         getCurrentHouseholdUrl: function() {
            let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
            return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`

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

@@ -6,8 +6,8 @@
         <span v-if="person.altNames && 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', person.age) }}</span>
-        <span v-else-if="person.deathdate !== null"> (‡)</span>
+        <span class="age" v-if="this.addAge && person.birthdate !== null && person.deathdate === null">{{ $tc('renderbox.years_old', person.age) }}</span>
+        <span v-else-if="this.addAge && person.deathdate !== null">&nbsp;(‡)</span>
     </span>
 </template>
 
@@ -15,7 +15,21 @@
 
 export default {
     name: "PersonText",
-    props: ['person', 'isCut'],
+    props: {
+      person: {
+        required: true,
+      },
+      isCut: {
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      addAge: {
+        type: Boolean,
+        required: false,
+        default: true,
+      }
+    },
     computed: {
         altNameLabel: function() {
             for(let i = 0; i < this.person.altNames.length; i++){