Merge branch 'issue389_add_age' into 'master'

add age/ person text component See merge request Chill-Projet/chill-bundles!308
2025-06-07 18:44:08 +00:00 · 2022-01-31 12:04:48 +00:00 · 2022-01-31 12:04:48 +00:00 · 6894fa7101
commit 6894fa7101
parent ac5675933d 41fa1d9ca6
29 changed files with 299 additions and 202 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -14,6 +14,7 @@ and this project adheres to
 * [parcours]: component added to change the opening date of a parcours (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/411)
 * [search]: listing of parcours display changed (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/410)
 * [user]: page with accompanying periods to which is user is referent (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/408)
+* [person] age added to renderstring + renderbox/ vue component created to display person text (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/389)


 ## Test releases
@ -35,7 +36,6 @@ and this project adheres to
 * [parcours] comments truncated if too long + link added (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/406)
 * [person]: possibility to add person resources (https://gitlab.com/champs-libres/departement-de-la-vendee/chill/-/issues/382)
 * [person ressources]: module added
-* [parcours] bugfix if deathdate is not defined (eg. for a thirdparty) parcours is still displayed. Gave error before.


 ### test release 2022-01-24
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
@ -13,7 +13,8 @@
      <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
         <ul class="list-suggest add-items inline">
               <li v-for="(p, i) in suggestedEntities" @click="addSuggestedEntity(p)" :key="`suggestedEntities-${i}`">
-                    <span>{{ p.text }}</span>
+                  <person-text v-if="p.type === 'person'" :person="p"></person-text>
+                  <span v-else>{{ p.text }}</span>
               </li>
         </ul>
      </div>
@ -34,12 +35,14 @@
 import { mapState, mapGetters } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import PersonsBloc from './ConcernedGroups/PersonsBloc.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';

 export default {
   name: "ConcernedGroups",
   components: {
      AddPersons,
-      PersonsBloc
+      PersonsBloc,
+      PersonText
   },
   data() {
      return {
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
@ -1,21 +1,29 @@
 <template>
   <li>
      <span :title="person.text">
-         <span class="chill_denomination" @click.prevent="$emit('remove', person)">{{ textCutted }}</span>
+         <span class="chill_denomination" @click.prevent="$emit('remove', person)">
+            <person-text :person="person" :isCut="true"></person-text>
+         </span>
      </span>
   </li>
 </template>

 <script>
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+
+
 export default {
   name: "PersonBadge",
   props: ['person'],
-   computed: {
-      textCutted() {
-         let more = (this.person.text.length > 15) ?'…' : '';
-         return this.person.text.slice(0,15) + more;
-      }
+   components: {
+      PersonText
   },
+   // computed: {
+   //    textCutted() {
+   //       let more = (this.person.text.length > 15) ?'…' : '';
+   //       return this.person.text.slice(0,15) + more;
+   //    }
+   // },
   emits: ['remove'],
 }
 </script>
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list_recent.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list_recent.html.twig
@ -48,7 +48,7 @@
                        <li class="associated-persons">
                            <span class="item-key">{{ 'Participants'|trans ~ ' : ' }}</span>
                            {% for p in activity.personsAssociated %}
-                                <span class="badge-person">{{ p|chill_entity_render_box }}</span>
+                                <span class="badge-person">{{ p|chill_entity_render_box({'addAgeBadge': true}) }}</span>
                            {% endfor %}
                        </li>
                    </ul>
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
@ -12,6 +12,7 @@
        display: block;
        top: calc(50% - 7px);
        right: 10px;
+        line-height: 11px;
    }
 }

@ -62,14 +63,19 @@ ul.list-suggest {
            & span:hover {
                color: $chill-l-gray;
            }
+            .person-text {
+                span {
+                    padding-left: 0px;
+                }
+            }
        }
    }
    &.remove-items {
        li {
            position: relative;
-            span {
+            & > span {
                display: block;
-                padding-right: .75rem;
+                padding-right: 1.75rem;
                @include remove_link;
            }
        }
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/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",
+
      }
   }
 };
--- a/src/Bundle/ChillMainBundle/Resources/views/OnTheFly/_insert_vue_onthefly.html.twig
+++ b/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') }}
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/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) {
--- a/src/Bundle/ChillPersonBundle/Controller/UserAccompanyingPeriodController.php
+++ b/src/Bundle/ChillPersonBundle/Controller/UserAccompanyingPeriodController.php
@ -9,7 +9,6 @@

 declare(strict_types=1);

-
 namespace Chill\PersonBundle\Controller;

 use Chill\MainBundle\Pagination\PaginatorFactory;
@ -20,7 +19,6 @@ use Symfony\Component\Routing\Annotation\Route;

 class UserAccompanyingPeriodController extends AbstractController
 {
-
    private AccompanyingPeriodRepository $accompanyingPeriodRepository;

    private PaginatorFactory $paginatorFactory;
@ -38,13 +36,16 @@ class UserAccompanyingPeriodController extends AbstractController
    {
        $total = $this->accompanyingPeriodRepository->countBy(['user' => $this->getUser()]);
        $pagination = $this->paginatorFactory->create($total);
-        $accompanyingPeriods = $this->accompanyingPeriodRepository->findBy(['user' => $this->getUser()],
-            ['openingDate' => 'DESC'], $pagination->getItemsPerPage(), $pagination->getCurrentPageFirstItemNumber());
+        $accompanyingPeriods = $this->accompanyingPeriodRepository->findBy(
+            ['user' => $this->getUser()],
+            ['openingDate' => 'DESC'],
+            $pagination->getItemsPerPage(),
+            $pagination->getCurrentPageFirstItemNumber()
+        );

        return $this->render('@ChillPerson/AccompanyingPeriod/user_periods_list.html.twig', [
            'accompanyingPeriods' => $accompanyingPeriods,
            'pagination' => $pagination,
        ]);
-
    }
 }
--- a/src/Bundle/ChillPersonBundle/Menu/UserMenuBuilder.php
+++ b/src/Bundle/ChillPersonBundle/Menu/UserMenuBuilder.php
@ -12,9 +12,7 @@ declare(strict_types=1);
 namespace Chill\PersonBundle\Menu;

 use Chill\MainBundle\Routing\LocalMenuBuilderInterface;
-use Chill\TaskBundle\Templating\UI\CountNotificationTask;
 use Knp\Menu\MenuItem;
-use Symfony\Component\Security\Core\Authentication\Token\Storage\TokenStorageInterface;
 use Symfony\Component\Security\Core\Authorization\AuthorizationCheckerInterface;
 use Symfony\Contracts\Translation\TranslatorInterface;

@ -25,7 +23,6 @@ class UserMenuBuilder implements LocalMenuBuilderInterface
     */
    public $authorizationChecker;

-
    /**
     * @var TranslatorInterface
     */
--- a/src/Bundle/ChillPersonBundle/Repository/AccompanyingPeriodRepository.php
+++ b/src/Bundle/ChillPersonBundle/Repository/AccompanyingPeriodRepository.php
@ -26,6 +26,11 @@ final class AccompanyingPeriodRepository implements ObjectRepository
        $this->repository = $entityManager->getRepository(AccompanyingPeriod::class);
    }

+    public function countBy(array $criteria): int
+    {
+        return $this->repository->count($criteria);
+    }
+
    public function createQueryBuilder(string $alias, ?string $indexBy = null): QueryBuilder
    {
        return $this->repository->createQueryBuilder($alias, $indexBy);
@ -49,11 +54,6 @@ final class AccompanyingPeriodRepository implements ObjectRepository
        return $this->repository->findBy($criteria, $orderBy, $limit, $offset);
    }

-    public function countBy(array $criteria): int
-    {
-        return $this->repository->count($criteria);
-    }
-
    public function findOneBy(array $criteria): ?AccompanyingPeriod
    {
        return $this->findOneBy($criteria);
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/PersonsAssociated.vue
+++ b/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>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@ -27,7 +27,7 @@
                  :value="p.person.id"
               />
               <label class="form-check-label">
-                  {{ p.person.text }}
+                  <person-text :person="p.person"></person-text>
               </label>
            </div>
            <input type="hidden" name="expand_suggestions" value="true">
@ -50,7 +50,7 @@
   <div v-if="suggestedPersons.length > 0">
      <ul class="list-suggest add-items inline">
         <li v-for="p in suggestedPersons" :key="p.id" @click="addSuggestedPerson(p)">
-             <span>{{ p.text }}</span>
+            <person-text :person="p"></person-text>
         </li>
      </ul>
   </div>
@ -76,12 +76,14 @@
 import {mapGetters, mapState} from 'vuex';
 import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue";
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';

 export default {
   name: 'PersonsAssociated',
   components: {
      ParticipationItem,
-      AddPersons
+      AddPersons,
+      PersonText
   },
   data() {
      return {
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/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>
@ -136,7 +137,8 @@
   <div v-if="accompanyingCourse.requestor === null && suggestedEntities.length > 0">
      <ul class="list-suggest add-items inline">
         <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
-             <span>{{ p.text }}</span>
+            <person-text v-if="p.type === 'person'" :person="p"></person-text>
+            <span v-else>{{ p.text }}</span>
         </li>
      </ul>
   </div>
@ -162,6 +164,8 @@ import PersonRenderBox from '../../_components/Entity/PersonRenderBox.vue';
 import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import { mapState } from 'vuex';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+

 export default {
   name: 'Requestor',
@ -170,7 +174,8 @@ export default {
      OnTheFly,
      PersonRenderBox,
      ThirdPartyRenderBox,
-      Confidential
+      Confidential,
+      PersonText
   },
   props: ['isAnonymous'],
   data() {
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@ -22,7 +22,8 @@
   <div v-if="suggestedEntities.length > 0">
      <ul class="list-suggest add-items inline">
         <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
-            <span>{{ p.text }}</span>
+            <person-text v-if="p.type === 'person'" :person="p"></person-text>
+            <span v-else>{{ p.text }}</span>
         </li>
      </ul>
   </div>
@ -45,12 +46,15 @@
 import { mapState } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import ResourceItem from './Resources/ResourceItem.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
+

 export default {
   name: 'Resources',
   components: {
      AddPersons,
-      ResourceItem
+      ResourceItem,
+      PersonText
   },
   data() {
      return {
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
@ -57,8 +57,12 @@

        <ul>
          <li v-for="p in personsReachables" :key="p.id">
-            <input type="checkbox" :value="p.id" v-model="personsPicked">
-            <person-render-box render="badge" :options="{}" :person="p"></person-render-box>
+            <div class="form-check">
+              <input type="checkbox" :value="p.id" v-model="personsPicked" class="form-check-input" :id="'person_check'+p.id">
+              <label class="form-check-label" :for="'person_check' + p.id">
+                <person-text :person="p"></person-text>
+              </label>
+            </div>
          </li>
        </ul>
      </div>
@ -124,7 +128,7 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import VueMultiselect from 'vue-multiselect';
 import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
-import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';

 const i18n = {
  messages: {
@ -146,7 +150,7 @@ export default {
  name: 'App',
  components: {
    VueMultiselect,
-    PersonRenderBox,
+    PersonText,
  },
  methods: {
    submit() {
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@ -141,10 +141,12 @@

         <ul class="list-unstyled">
            <li v-for="p in personsReachables" :key="p.id">
-               <label :for="p.id">
-                  <input v-model="personsPicked" :value="p.id" :id="p.id" type="checkbox" class="me-2">
-                  {{ p.text }}
+              <div class="form-check">
+                <input v-model="personsPicked" :value="p.id" type="checkbox" class="me-2 form-check-input" :id="'person_check'+p.id">
+                <label :for="'person_check'+p.id" class="form-check-label">
+                  <person-text :person="p"></person-text>
               </label>
+              </div>
            </li>
         </ul>
      </div>
@ -281,6 +283,7 @@ import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/
 import PickTemplate from 'ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue';
 import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue';
 import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';

 const i18n = {
   messages: {
@ -329,7 +332,8 @@ export default {
      ThirdPartyRenderBox,
      PickTemplate,
      PickWorkflow,
-      OnTheFly
+      OnTheFly,
+     PersonText,
   },
   i18n,
   data() {
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
+++ b/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([
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
@ -11,7 +11,8 @@
      >
          <div class="pick-position item-row">
            <div class="person">
-              <h3>{{ conc.person.text }}</h3>
+              <!-- <h3>{{ conc.person.text }}</h3> -->
+              <h3><person-text :person="conc.person"></person-text></h3>
            </div>
            <div class="holder">
              <button
@ -53,6 +54,7 @@ import {mapGetters, mapState} from "vuex";
 import CurrentHousehold from "./CurrentHousehold";
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
 import PersonComment from './PersonComment';
+import PersonText from '../../_components/Entity/PersonText.vue';

 export default {
  name: "Positioning",
@ -60,6 +62,7 @@ export default {
    CurrentHousehold,
    PersonRenderBox,
    PersonComment,
+    PersonText
  },
  computed: {
    ...mapState([
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/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%;
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypePerson.vue
+++ b/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: {
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue
+++ b/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">
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@ -1,5 +1,5 @@
 <template>
-  <div v-if="render === 'bloc'" class="item-bloc">
+<div v-if="render === 'bloc'" class="item-bloc">
    <section class="chill-entity entity-person">
        <div class="item-row entity-bloc">

@ -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>
@ -47,7 +49,7 @@
                        {{ $t('renderbox.deathdate') + ' ' + deathdate }}
                    </time>

-                    <span v-if="options.addAge && person.birthdate" class="age">{{ getAge }} {{ $t('renderbox.years_old')}}</span>
+                    <span v-if="options.addAge && person.birthdate" class="age">{{ $tc('renderbox.years_old', person.age) }}</span>
                </p>
            </div>
        </div>
@ -59,7 +61,6 @@
                        <slot name="record-actions"></slot>
                    </div>
                    <ul class="list-content fa-ul">
-
                        <li v-if="person.current_household_id">
                            <i class="fa fa-li fa-map-marker"></i>
                            <address-render-box v-if="person.current_household_address"
@ -118,27 +119,26 @@

        </div>
    </section>
-  </div>
+</div>

-  <span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
+<span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
    <a v-if="options.addLink === true" :href="getUrl">
        <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
            <i class="fa fa-circle fa-stack-1x text-success"></i>
            <i class="fa fa-stack-1x">T</i>
        </span>
-      {{ person.text }}
-      <span v-if="person.deathdate" class="deathdate"> (‡)</span>
+
+        <person-text :person="person"></person-text>
    </a>
    <span v-else>
        <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
            <i class="fa fa-circle fa-stack-1x text-success"></i>
            <i class="fa fa-stack-1x">T</i>
        </span>
-      {{ person.text }}
-      <span v-if="person.deathdate" class="deathdate"> (‡)</span>
+        <person-text :person="person"></person-text>
    </span>
    <slot name="post-badge"></slot>
-  </span>
+</span>

 </template>

@ -147,13 +147,15 @@ import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';

 export default {
    name: "PersonRenderBox",
    components: {
        AddressRenderBox,
        Confidential,
-        BadgeEntity
+        BadgeEntity,
+        PersonText
    },
    props: ['person', 'options', 'render', 'returnPath'],
    computed: {
@ -200,24 +202,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}`
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonText.vue
@ -0,0 +1,50 @@
+<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 && person.altNames.length > 0" class="altnames">
+            <span :class="'altname altname-' + altNameKey"> ({{ altNameLabel }})</span>
+        </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>
+
+<script>
+
+export default {
+    name: "PersonText",
+    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++){
+                return this.person.altNames[i].label
+            }
+        },
+        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>
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig
@ -31,7 +31,7 @@
                    <li class="associated-persons">
                        <span class="item-key">{{ 'Participants'|trans ~ ' : ' }}</span>
                        {% for p in w.persons %}
-                            <span class="badge-person">{{ p|chill_entity_render_box }}</span>
+                            <span class="badge-person">{{ p|chill_entity_render_box({'addAgeBadge': true}) }}</span>
                        {% endfor %}
                    </li>
                </ul>
--- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig
@ -11,6 +11,7 @@
    * addCenter     bool
    * hLevel        integer
    * addDeath      bool
+    * addAgeBadge   bool
    * address_multiline     bool
    * customButtons [
        'before'    Twig\Markup, (injected with macro)
@ -40,6 +41,11 @@
        {%- endfor -%}
        </span>
    {%- endif -%}
+    {%- if options['addAgeBadge'] -%}
+        {% if person.age is not null and person.deathDate is null %}
+        <span>({{- 'years_old'|trans({ 'age': person.age }) -}})</span>
+        {% endif %}
+    {% endif %}
 {% endmacro raw %}

 {% macro label(person, options) %}
--- a/src/Bundle/ChillPersonBundle/Resources/views/Household/_render_member.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Household/_render_member.html.twig
@ -14,6 +14,7 @@
                'render': 'label',
                'addLink': true,
                'addInfo': true,
+                'addAgeBadge': true,
                'customArea': {
                    'afterLabel': _self.addHolder(member.holder)
                }
--- a/src/Bundle/ChillPersonBundle/Serializer/Normalizer/PersonJsonNormalizer.php
+++ b/src/Bundle/ChillPersonBundle/Serializer/Normalizer/PersonJsonNormalizer.php
@ -179,11 +179,13 @@ 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),
            'deathdate' => $this->normalizer->normalize($person->getDeathdate(), $format, $context),
+            'age' => $this->normalizer->normalize($person->getAge(), $format, $context),
            'centers' => $this->normalizer->normalize($this->centerResolverManager->resolveCenters($person), $format, $context),
            'phonenumber' => $person->getPhonenumber(),
            'mobilenumber' => $person->getMobilenumber(),
--- a/src/Bundle/ChillPersonBundle/Templating/Entity/PersonRender.php
+++ b/src/Bundle/ChillPersonBundle/Templating/Entity/PersonRender.php
@ -15,6 +15,7 @@ use Chill\MainBundle\Templating\Entity\AbstractChillEntityRender;
 use Chill\PersonBundle\Config\ConfigPersonAltNamesHelper;
 use Chill\PersonBundle\Entity\Person;
 use Symfony\Component\Templating\EngineInterface;
+use Symfony\Contracts\Translation\TranslatorInterface;

 use function array_key_exists;

@ -27,12 +28,16 @@ class PersonRender extends AbstractChillEntityRender

    private EngineInterface $engine;

+    private TranslatorInterface $translator;
+
    public function __construct(
        ConfigPersonAltNamesHelper $configAltNamesHelper,
-        EngineInterface $engine
+        EngineInterface $engine,
+        TranslatorInterface $translator
    ) {
        $this->configAltNamesHelper = $configAltNamesHelper;
        $this->engine = $engine;
+        $this->translator = $translator;
    }

    /**
@ -53,6 +58,7 @@ class PersonRender extends AbstractChillEntityRender
            'customButtons' => $options['customButtons'] ?? [],
            'customArea' => $options['customArea'] ?? [],
            'addDeath' => $options['addDeath'] ?? true,
+            'addAgeBadge' => $options['addAgeBadge'] ?? false,
        ];

        return
@ -70,6 +76,13 @@ class PersonRender extends AbstractChillEntityRender
     */
    public function renderString($person, array $options): string
    {
+        $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()]) . ')';
+        }
+
        return $person->getFirstName() . ' ' . $person->getLastName()
            . $this->addAltNames($person, false);
    }