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

src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss

@@ -73,7 +73,7 @@ ul.list-suggest {
     &.remove-items {
         li {
             position: relative;
-            span {
+            & > span {
                 display: block;
                 padding-right: 1.75rem;
                 @include remove_link;

src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig

@@ -42,6 +42,3 @@
     {% endif %}
 
 ></span>
-
-{{ encore_entry_script_tags('vue_onthefly') }}
-{{ encore_entry_link_tags('vue_onthefly') }}

src/Bundle/ChillMainBundle/Resources/views/layout.html.twig

@@ -13,6 +13,7 @@
     {{ encore_entry_link_tags('mod_ckeditor5') }}
     {{ encore_entry_link_tags('chill') }}
     {{ encore_entry_link_tags('mod_blur') }}
+    {{ encore_entry_link_tags('vue_onthefly') }}
     {% block css %}<!-- nothing added to css -->{% endblock %}
 </head>
 
@@ -94,6 +95,7 @@
     {{ encore_entry_script_tags('mod_ckeditor5') }}
     {{ encore_entry_script_tags('mod_blur') }}
     {{ encore_entry_script_tags('chill') }}
+    {{ encore_entry_script_tags('vue_onthefly') }}
 
     <script type="text/javascript">
         window.addEventListener('DOMContentLoaded', function(e) {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue

@@ -4,7 +4,7 @@
          <i class="fa fa-home fa-fw text-light" :title="$t('persons_associated.show_household_number', { id: h.id })"></i>
       </a>
       <span v-for="person in h.persons" class="me-1" :key="person.id">
-         <on-the-fly :type="person.type" :id="person.id" :buttonText="person.text" :displayBadge="'true' === 'true'" action="show"></on-the-fly>
+         <on-the-fly :type="person.type" :id="person.id" :buttonText="person.textAge" :displayBadge="'true' === 'true'" action="show"></on-the-fly>
       </span>
    </span>
 </template>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue

@@ -45,7 +45,8 @@
                   addInfo: true,
                   hLevel: 3,
                   isMultiline: true,
-                  isConfidential: false
+                  isConfidential: false,
+                  addAge: true,
                   }"
             >
                <template v-slot:record-actions>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue

@@ -11,7 +11,7 @@
 
     <ul class="list-suggest remove-items inline">
       <li v-for="c in concerned" :key="c.person.id" @click="removeConcerned(c)">
-        <span>{{ c.person.text }}</span>
+        <span><person-text :person="c.person"></person-text></span>
       </li>
     </ul>
 
@@ -57,12 +57,14 @@
 import { mapState, mapGetters } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
 
 export default {
   name: 'Concerned',
   components: {
     AddPersons,
     PersonRenderBox,
+    PersonText,
   },
   computed: {
     ...mapState([

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 class="age" v-if="this.addAge && person.birthdate !== null && person.deathdate === null">{{ $tc('renderbox.years_old', person.age) }}</span>
-        <span v-else-if="person.deathdate !== null"> (‡)</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++){

src/Bundle/ChillPersonBundle/Serializer/Normalizer/PersonJsonNormalizer.php

@@ -179,7 +179,8 @@ class PersonJsonNormalizer implements
         return [
             'type' => 'person',
             'id' => $person->getId(),
-            'text' => $this->render->renderString($person),
+            'text' => $this->render->renderString($person, ['addAge' => false]),
+            'textAge' => $this->render->renderString($person, ['addAge' => true]),
             'firstName' => $person->getFirstName(),
             'lastName' => $person->getLastName(),
             'birthdate' => $this->normalizer->normalize($person->getBirthdate(), $format, $context),

src/Bundle/ChillPersonBundle/Templating/Entity/PersonRender.php

@@ -76,7 +76,9 @@ class PersonRender extends AbstractChillEntityRender
      */
     public function renderString($person, array $options): string
     {
-        if (null !== $person->getAge() && $person->getDeathDate() === null) {
+        $options = array_merge(['addAge' => true], $options);
+
+        if (null !== $person->getAge() && $person->getDeathDate() === null && $options['addAge']) {
             return $person->getFirstName() . ' ' . $person->getLastName()
             . $this->addAltNames($person, false) . ' (' . $this->translator->trans('years_old', ['age' => $person->getAge()]) . ')';
         }