From 204c28d373efe0fb9c84fadaf313ea20ebce732e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Wed, 22 Mar 2023 10:37:38 +0100
Subject: [PATCH] Feature: [address reference] adapt vue app AccompanyingCourse
 to allow to open address details modal

---
 .../PersonsAssociated/ParticipationItem.vue   |  33 +-
 .../components/Resources/ResourceItem.vue     |  48 +-
 .../_components/Entity/PersonRenderBox.vue    | 466 +++++++++---------
 .../Entity/ThirdPartyRenderBox.vue            | 277 ++++++-----
 4 files changed, 424 insertions(+), 400 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
index b5ee21caa..5bd7551d5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
@@ -15,33 +15,36 @@
       :person="participation.person"
       :returnPath="getAccompanyingCourseReturnPath">
 
-      <template v-slot:record-actions>
-         <ul class="record_actions">
+      <template v-slot:end-bloc>
+        <div class="item-row separator">
+          <ul class="record_actions">
             <button-location
-               v-if="hasCurrentHouseholdAddress"
-               v-bind:person="participation.person">
+                v-if="hasCurrentHouseholdAddress"
+                v-bind:person="participation.person">
             </button-location>
             <li v-if="participation.person.current_household_id">
-               <a class="btn btn-sm btn-chill-beige"
-                  :href="getCurrentHouseholdUrl"
-                  :title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })">
-                  <i class="fa fa-fw fa-home"></i>
-               </a>
+              <a class="btn btn-sm btn-chill-beige"
+                 :href="getCurrentHouseholdUrl"
+                 :title="$t('persons_associated.show_household_number', { id: participation.person.current_household_id })">
+                <i class="fa fa-fw fa-home"></i>
+              </a>
             </li>
             <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="show"></on-the-fly></li>
             <li><on-the-fly :type="participation.person.type" :id="participation.person.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly" ref="onTheFly"></on-the-fly></li>
             <li>
-               <button v-if="!participation.endDate"
-                  class="btn btn-sm btn-remove"
-                  v-bind:title="$t('persons_associated.leave_course')"
-                       @click="modal.showModal = true">
-               </button>
+              <button v-if="!participation.endDate"
+                      class="btn btn-sm btn-remove"
+                      v-bind:title="$t('persons_associated.leave_course')"
+                      @click="modal.showModal = true">
+              </button>
             </li>
-         </ul>
+          </ul>
+        </div>
 
       </template>
    </person-render-box>
 
+
    <teleport to="body">
       <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
          <template v-slot:header>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
index 287d98b07..c2368d9ab 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
@@ -12,40 +12,42 @@
          hLevel : 3,
          isConfidential : true
       }">
-      <template v-slot:record-actions>
-         <ul class="record_actions">
+      <template v-slot:end-bloc>
+        <div class="item-row separator">
+          <ul class="record_actions">
             <li>
-               <write-comment
+              <write-comment
                   :resource="resource"
                   @updateComment="updateComment"
-               ></write-comment>
+              ></write-comment>
             </li>
             <li>
-               <on-the-fly
+              <on-the-fly
                   :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="show">
-               </on-the-fly>
+              </on-the-fly>
             </li>
             <li>
-               <on-the-fly
+              <on-the-fly
                   :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
                   @saveFormOnTheFly="saveFormOnTheFly"
                   ref="onTheFly">
-               </on-the-fly>
+              </on-the-fly>
             </li>
             <li>
-               <button
+              <button
                   class="btn btn-sm btn-remove"
                   :title="$t('action.remove')"
                   @click.prevent="$emit('remove', resource)">
-               </button>
+              </button>
             </li>
-         </ul>
+          </ul>
+        </div>
       </template>
    </person-render-box>
 
@@ -59,40 +61,42 @@
          addInfo: false,
          hLevel: 3
       }">
-      <template v-slot:record-actions>
-         <ul class="record_actions">
+      <template v-slot:end-bloc>
+        <div class="item-row separator">
+          <ul class="record_actions">
             <li>
-               <write-comment
+              <write-comment
                   :resource="resource"
                   @updateComment="updateComment"
-               ></write-comment>
+              ></write-comment>
             </li>
             <li>
-               <on-the-fly
+              <on-the-fly
                   :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="show">
-               </on-the-fly>
+              </on-the-fly>
             </li>
             <li>
-               <on-the-fly
+              <on-the-fly
                   :parent="parent"
                   :type="resource.resource.type"
                   :id="resource.resource.id"
                   action="edit"
                   @saveFormOnTheFly="saveFormOnTheFly"
                   ref="onTheFly">
-               </on-the-fly>
+              </on-the-fly>
             </li>
             <li>
-               <button
+              <button
                   class="btn btn-sm btn-remove"
                   :title="$t('action.remove')"
                   @click.prevent="$emit('remove', resource)">
-               </button>
+              </button>
             </li>
-         </ul>
+          </ul>
+        </div>
       </template>
    </third-party-render-box>
 </template>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index f024e3a7c..740eb0039 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -1,184 +1,191 @@
 <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">
+      <div class="item-row entity-bloc">
 
-        <div  class="item-col">
-            <div class="entity-label">
+        <div class="item-col">
+          <div class="entity-label">
 
-                <div :class="'denomination h' + options.hLevel">
+            <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.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
-                        <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
+              <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.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
+                <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
                             <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                         </span>
-                    </a>
+              </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.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
-                    <span v-if="person.deathdate" class="deathdate"> (‡)</span>
-                    <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
+              <!-- 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.suffixText" class="suffixtext">&nbsp;{{ person.suffixText }}</span>
+              <span v-if="person.deathdate" class="deathdate"> (‡)</span>
+              <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
                         <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                     </span>
 
-                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
+              <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
 
-                    <badge-entity v-if="options.addEntity === true"
-                        :entity="person"
-                        :options="{ displayLong: options.entityDisplayLong }">
-                    </badge-entity>
+              <badge-entity v-if="options.addEntity === true"
+                            :entity="person"
+                            :options="{ displayLong: options.entityDisplayLong }">
+              </badge-entity>
 
-                </div>
-
-                <p v-if="options.addInfo === true" class="moreinfo">
-                    <i :class="'fa fa-fw ' + getGenderIcon" :title="$t(getGender)"></i>
-
-                    <time v-if="person.birthdate && !person.deathdate" :datetime="person.birthdate" :title="birthdate">
-                        {{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }}
-                    </time>
-
-                    <time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
-                        {{ $d(birthdate) }} - {{ $d(deathdate) }}
-                    </time>
-
-                    <time v-else-if="person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
-                        {{ $t('renderbox.deathdate') + ' ' + deathdate }}
-                    </time>
-
-                    <span v-if="options.addAge && person.birthdate" class="age">{{ $tc('renderbox.years_old', person.age) }}</span>
-                </p>
             </div>
+
+            <p v-if="options.addInfo === true" class="moreinfo">
+              <i :class="'fa fa-fw ' + getGenderIcon" :title="$t(getGender)"></i>
+
+              <time v-if="person.birthdate && !person.deathdate" :datetime="person.birthdate" :title="birthdate">
+                {{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }}
+              </time>
+
+              <time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate"
+                    :title="person.deathdate">
+                {{ $d(birthdate) }} - {{ $d(deathdate) }}
+              </time>
+
+              <time v-else-if="person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
+                {{ $t('renderbox.deathdate') + ' ' + deathdate }}
+              </time>
+
+              <span v-if="options.addAge && person.birthdate" class="age">{{
+                  $tc('renderbox.years_old', person.age)
+                }}</span>
+            </p>
+          </div>
         </div>
 
         <div class="item-col">
-            <div class="float-button bottom">
-                <div class="box">
-                    <div class="action">
-                        <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"
-                                :address="person.current_household_address"
-                                :isMultiline="isMultiline">
-                            </address-render-box>
-                            <p v-else class="chill-no-data-statement">
-                                {{ $t('renderbox.household_without_address') }}
-                            </p>
-                            <a v-if="options.addHouseholdLink === true"
-                                :href="getCurrentHouseholdUrl"
-                                :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
+          <div class="float-button bottom">
+            <div class="box">
+              <div class="action">
+                <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"
+                                      :address="person.current_household_address"
+                                      :isMultiline="isMultiline">
+                  </address-render-box>
+                  <p v-else class="chill-no-data-statement">
+                    {{ $t('renderbox.household_without_address') }}
+                  </p>
+                  <a v-if="options.addHouseholdLink === true"
+                     :href="getCurrentHouseholdUrl"
+                     :title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
                                 <span class="badge rounded-pill bg-chill-beige">
                                     <i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
                                 </span>
-                            </a>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-map-marker"></i>
-                            <p class="chill-no-data-statement">
-                                {{ $t('renderbox.no_data') }}
-                            </p>
-                        </li>
+                  </a>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-map-marker"></i>
+                  <p class="chill-no-data-statement">
+                    {{ $t('renderbox.no_data') }}
+                  </p>
+                </li>
 
-                        <li v-if="person.email">
-                            <i class="fa fa-li fa-envelope-o"></i>
-                            <a :href="'mailto: ' + person.email">{{ person.email }}</a>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-envelope-o"></i>
-                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                        </li>
+                <li v-if="person.email">
+                  <i class="fa fa-li fa-envelope-o"></i>
+                  <a :href="'mailto: ' + person.email">{{ person.email }}</a>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-envelope-o"></i>
+                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
 
-                        <li v-if="person.mobilenumber">
-                            <i class="fa fa-li fa-mobile"></i>
-                            <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-mobile"></i>
-                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                        </li>
-                        <li v-if="person.phonenumber">
-                            <i class="fa fa-li fa-phone"></i>
-                            <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-phone"></i>
-                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                        </li>
+                <li v-if="person.mobilenumber">
+                  <i class="fa fa-li fa-mobile"></i>
+                  <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-mobile"></i>
+                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                <li v-if="person.phonenumber">
+                  <i class="fa fa-li fa-phone"></i>
+                  <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-phone"></i>
+                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
 
-                        <li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
-                            <i class="fa fa-li fa-long-arrow-right"></i>
-                            <template v-for="c in person.centers">{{ c.name }}</template>
-                        </li>
-                        <li v-else-if="options.addNoData">
-                            <i class="fa fa-li fa-long-arrow-right"></i>
-                            <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
-                        </li>
-                        <slot name="custom-zone"></slot>
+                <li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
+                  <i class="fa fa-li fa-long-arrow-right"></i>
+                  <template v-for="c in person.centers">{{ c.name }}</template>
+                </li>
+                <li v-else-if="options.addNoData">
+                  <i class="fa fa-li fa-long-arrow-right"></i>
+                  <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                <slot name="custom-zone"></slot>
 
-                    </ul>
-                </div>
+              </ul>
             </div>
+          </div>
         </div>
 
-        <div class="item-col mx-3" v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
-            <div class="float-button bottom">
-                <div class="box" >
-                    <ul class="list-content fa-ul">
-                        <li v-for="(addr, i) in person.current_residential_addresses" :key="i">
-                            <i class="fa fa-li fa-map-marker"></i>
-                            <div v-if="addr.address">
-                                <address-render-box
-                                    :address="addr.address"
-                                    :isMultiline="isMultiline">
-                                </address-render-box>
-                                <p>({{ $t('renderbox.residential_address') }})</p>
-                            </div>
-                            <div v-else-if="addr.hostPerson" class="mt-3">
-                                <p>{{ $t('renderbox.located_at') }}:</p>
-                                <span class="chill-entity entity-person badge-person">
+        <div class="item-col mx-3"
+             v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
+          <div class="float-button bottom">
+            <div class="box">
+              <ul class="list-content fa-ul">
+                <li v-for="(addr, i) in person.current_residential_addresses" :key="i">
+                  <i class="fa fa-li fa-map-marker"></i>
+                  <div v-if="addr.address">
+                    <address-render-box
+                        :address="addr.address"
+                        :isMultiline="isMultiline">
+                    </address-render-box>
+                    <p>({{ $t('renderbox.residential_address') }})</p>
+                  </div>
+                  <div v-else-if="addr.hostPerson" class="mt-3">
+                    <p>{{ $t('renderbox.located_at') }}:</p>
+                    <span class="chill-entity entity-person badge-person">
                                     <person-text
                                         v-if="addr.hostPerson"
                                         :person="addr.hostPerson"
                                     ></person-text>
                                 </span>
-                                <address-render-box v-if="addr.hostPerson.address"
-                                    :address="addr.hostPerson.address"
-                                    :isMultiline="isMultiline">
-                                </address-render-box>
-                            </div>
-                            <div v-else-if="addr.hostThirdParty" class="mt-3">
-                                <p>{{ $t('renderbox.located_at') }}:</p>
-                                <span class="chill-entity entity-person badge-thirdparty">
+                    <address-render-box v-if="addr.hostPerson.address"
+                                        :address="addr.hostPerson.address"
+                                        :isMultiline="isMultiline">
+                    </address-render-box>
+                  </div>
+                  <div v-else-if="addr.hostThirdParty" class="mt-3">
+                    <p>{{ $t('renderbox.located_at') }}:</p>
+                    <span class="chill-entity entity-person badge-thirdparty">
                                     <third-party-text
                                         v-if="addr.hostThirdParty"
                                         :thirdparty="addr.hostThirdParty"
                                     ></third-party-text>
                                 </span>
-                                <address-render-box v-if="addr.hostThirdParty.address"
-                                    :address="addr.hostThirdParty.address"
-                                    :isMultiline="isMultiline">
-                                </address-render-box>
-                            </div>
+                    <address-render-box v-if="addr.hostThirdParty.address"
+                                        :address="addr.hostThirdParty.address"
+                                        :isMultiline="isMultiline">
+                    </address-render-box>
+                  </div>
 
-                        </li>
-                    </ul>
-                </div>
+                </li>
+              </ul>
             </div>
+          </div>
         </div>
 
-        </div>
+      </div>
+
+      <slot name="end-bloc"></slot>
+
     </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>
@@ -209,109 +216,116 @@ import ThirdPartyText from 'ChillThirdPartyAssets/vuejs/_components/Entity/Third
 import AddressDetailsButton from "ChillMainAssets/vuejs/_components/AddressDetails/AddressDetailsButton.vue";
 
 export default {
-    name: "PersonRenderBox",
-    components: {
-        AddressRenderBox,
-        Confidential,
-        BadgeEntity,
-        PersonText,
-        ThirdPartyText
+  name: "PersonRenderBox",
+  components: {
+    AddressRenderBox,
+    Confidential,
+    BadgeEntity,
+    PersonText,
+    ThirdPartyText
+  },
+  props: {
+    person: {
+      required: true,
     },
-    props: {
-      person: {
-        required: true,
-      },
-      options: {
-        type: Object,
-        required: false,
-      },
-      render: {
-        type: String,
-      },
-      returnPath: {
-        type: String,
-      },
-      showResidentialAddresses: {
-        type: Boolean,
-        default: false,
+    options: {
+      type: Object,
+      required: false,
+    },
+    render: {
+      type: String,
+    },
+    returnPath: {
+      type: String,
+    },
+    showResidentialAddresses: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    isMultiline: function () {
+      if (this.options.isMultiline) {
+        return this.options.isMultiline
+      } else {
+        return false
       }
     },
-    computed: {
-        isMultiline: function() {
-            if(this.options.isMultiline){
-                return this.options.isMultiline
-            } else {
-                return false
-            }
-        },
-        getGenderIcon: function() {
-            return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
-        },
-        getGenderTranslation: function() {
-            return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
-        },
-        getGender() {
-            return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';
-        },
-        birthdate: function(){
-            if(this.person.birthdate !== null || this.person.birthdate === "undefined"){
-            return new Date(this.person.birthdate.datetime);
-            } else {
-                return "";
-            }
-        },
-        deathdate: function(){
-            if(this.person.deathdate !== null || this.person.birthdate === "undefined"){
-               return new Date(this.person.deathdate.datetime);
-            } else {
-                return "";
-            }
-        },
-        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
-            }
-        },
-        getUrl: function() {
-            return `/fr/person/${this.person.id}/general`;
-        },
-        getCurrentHouseholdUrl: function() {
-           let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
-           return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
-        }
+    getGenderIcon: function () {
+      return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
+    },
+    getGenderTranslation: function () {
+      return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+    },
+    getGender() {
+      return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';
+    },
+    birthdate: function () {
+      if (this.person.birthdate !== null || this.person.birthdate === "undefined") {
+        return new Date(this.person.birthdate.datetime);
+      } else {
+        return "";
+      }
+    },
+    deathdate: function () {
+      if (this.person.deathdate !== null || this.person.birthdate === "undefined") {
+        return new Date(this.person.deathdate.datetime);
+      } else {
+        return "";
+      }
+    },
+    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
+      }
+    },
+    getUrl: function () {
+      return `/fr/person/${this.person.id}/general`;
+    },
+    getCurrentHouseholdUrl: function () {
+      let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
+      return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
     }
+  }
 }
 </script>
 
 <style lang='scss'>
 
-.lastname:before{
-    content: " "
+.lastname:before {
+  content: " "
 }
 
 div.flex-table {
-   div.item-bloc {
-      div.item-row {
-         div.item-col:first-child {
-            width: 33%;
-         }
-         div.item-col:last-child {
-            justify-content: flex-start;
-
-         }
+  div.item-bloc {
+    div.item-row {
+      div.item-col:first-child {
+        width: 33%;
       }
-   }
+
+      div.item-col:last-child {
+        justify-content: flex-start;
+
+      }
+    }
+  }
 }
 
-.age{
-    margin-left: 0.5em;
-    &:before { content: '('; }
-    &:after { content: ')'; }
+.age {
+  margin-left: 0.5em;
+
+  &:before {
+    content: '(';
+  }
+
+  &:after {
+    content: ')';
+  }
 }
 </style>
 
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
index 49066a082..0a3831df7 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
@@ -1,100 +1,100 @@
 <template>
-<div class="item-bloc col">
+  <div class="item-bloc col">
     <section class="chill-entity entity-thirdparty">
-    <div class="item-row entity-bloc">
+      <div class="item-row entity-bloc">
 
-        <div  class="item-col">
-            <div class="entity-label">
-                <div :class="'denomination h' + options.hLevel">
+        <div class="item-col">
+          <div class="entity-label">
+            <div :class="'denomination h' + options.hLevel">
 
-                    <a v-if="this.options.addLink === true" href="#">
-                        <span class="name">{{ thirdparty.text }}</span>
-                    </a>
-                    <span class="name" v-else>{{ thirdparty.text }}</span>
+              <a v-if="this.options.addLink === true" href="#">
+                <span class="name">{{ thirdparty.text }}</span>
+              </a>
+              <span class="name" v-else>{{ thirdparty.text }}</span>
 
-                    <span v-if="options.addId === true" class="id-number" :title="'n° ' + thirdparty.id">
+              <span v-if="options.addId === true" class="id-number" :title="'n° ' + thirdparty.id">
                         {{ thirdparty.id }}
                     </span>
 
-                    <badge-entity v-if="options.addEntity === true"
-                        :entity="thirdparty"
-                        :options="{ displayLong: options.entityDisplayLong }">
-                    </badge-entity>
-                </div>
-
-                <p v-if="this.options.addInfo === true" class="moreinfo">
-                </p>
+              <badge-entity v-if="options.addEntity === true"
+                            :entity="thirdparty"
+                            :options="{ displayLong: options.entityDisplayLong }">
+              </badge-entity>
             </div>
+
+            <p v-if="this.options.addInfo === true" class="moreinfo">
+            </p>
+          </div>
         </div>
 
         <div class="item-col">
-        <div class="float-button bottom">
+          <div class="float-button bottom">
             <div class="box">
-                <div class="action">
-                    <slot name="record-actions"></slot>
-                </div>
-                <ul class="list-content fa-ul">
-                    <li v-if="getProfession.length > 0">
-                        <i class="fa fa-li fa-id-card"></i>
-                        <p><span>{{ getProfession[0] }}</span></p>
-                    </li>
-                    <li v-if="hasParent">
-                        <i class="fa fa-li fa-hand-o-right"></i>
-                        <b class="me-2">{{ $t('child_of') }}</b>
-                    <on-the-fly
-                        :type="thirdparty.parent.type"
-                        :id="thirdparty.parent.id"
-                        :buttonText="thirdparty.parent.text"
-                        :displayBadge="'true' === 'true'"
-                        action="show">
-                    </on-the-fly>
-                    </li>
-                    <!-- TODO hasChildren
-                        NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
-                    -->
-                </ul>
-                <div v-if="thirdparty.contactDataAnonymous">
-                    <confidential :positionBtnFar="false">
-                        <template v-slot:confidential-content>
-                            <ul class="list-content fa-ul">
-                                <li v-if="thirdparty.address">
-                                <i class="fa fa-li fa-map-marker"></i>
-                                <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
-                                </li>
-                                <li v-if="thirdparty.telephone">
-                                <i class="fa fa-li fa-mobile"></i>
-                                <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
-                                </li>
-                                <li v-if="thirdparty.email">
-                                <i class="fa fa-li fa-envelope-o"></i>
-                                <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
-                                </li>
-                            </ul>
-                        </template>
-                    </confidential>
-                </div>
-                <ul v-else class="list-content fa-ul">
-                    <li v-if="thirdparty.address">
+              <div class="action">
+                <slot name="record-actions"></slot>
+              </div>
+              <ul class="list-content fa-ul">
+                <li v-if="getProfession.length > 0">
+                  <i class="fa fa-li fa-id-card"></i>
+                  <p><span>{{ getProfession[0] }}</span></p>
+                </li>
+                <li v-if="hasParent">
+                  <i class="fa fa-li fa-hand-o-right"></i>
+                  <b class="me-2">{{ $t('child_of') }}</b>
+                  <on-the-fly
+                    :type="thirdparty.parent.type"
+                    :id="thirdparty.parent.id"
+                    :buttonText="thirdparty.parent.text"
+                    :displayBadge="'true' === 'true'"
+                    action="show">
+                  </on-the-fly>
+                </li>
+                <!-- TODO hasChildren
+                    NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
+                -->
+              </ul>
+              <div v-if="thirdparty.contactDataAnonymous">
+                <confidential :positionBtnFar="false">
+                  <template v-slot:confidential-content>
+                    <ul class="list-content fa-ul">
+                      <li v-if="thirdparty.address">
                         <i class="fa fa-li fa-map-marker"></i>
-                        <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
-                    </li>
-                    <li v-if="thirdparty.telephone">
+                        <address-render-box :address="thirdparty.address"
+                                            :isMultiline="isMultiline"></address-render-box>
+                      </li>
+                      <li v-if="thirdparty.telephone">
                         <i class="fa fa-li fa-mobile"></i>
                         <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
-                    </li>
-                    <li v-if="thirdparty.email">
+                      </li>
+                      <li v-if="thirdparty.email">
                         <i class="fa fa-li fa-envelope-o"></i>
                         <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
-                    </li>
-                </ul>
+                      </li>
+                    </ul>
+                  </template>
+                </confidential>
+              </div>
+              <ul v-else class="list-content fa-ul">
+                <li v-if="thirdparty.address">
+                  <i class="fa fa-li fa-map-marker"></i>
+                  <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
+                </li>
+                <li v-if="thirdparty.telephone">
+                  <i class="fa fa-li fa-mobile"></i>
+                  <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
+                </li>
+                <li v-if="thirdparty.email">
+                  <i class="fa fa-li fa-envelope-o"></i>
+                  <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
+                </li>
+              </ul>
             </div>
+          </div>
         </div>
-        </div>
-
-
-    </div>
+      </div>
+      <slot name="end-bloc"></slot>
     </section>
-</div>
+  </div>
 
 </template>
 
@@ -104,75 +104,78 @@ import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
 
 export default {
-    name: "ThirdPartyRenderBox",
-    components: {
-        AddressRenderBox,
-        Confidential,
-        BadgeEntity,
-    },
-    // To avoid components recursively invoking eachother resolve OnTheFly component here
-    beforeCreate() {
-        this.$options.components.OnTheFly = require('ChillMainAssets/vuejs/OnTheFly/components/OnTheFly').default;
-    },
-    i18n: {
-        messages: {
-            fr: {
-                children: "Personnes de contact: ",
-                child_of: "Contact de: ",
-        }}
-    },
-    props: ['thirdparty', 'options'],
-    computed: {
-        isMultiline: function() {
-            if (this.options.isMultiline){
-                return this.options.isMultiline
-            } else {
-                return false
-            }
-        },
-        hasParent() {
-            return !(this.thirdparty.parent === null || this.thirdparty.parent === undefined);
-        },
-        getProfession() {
-            let profession = []
-            if (this.hasParent && this.thirdparty.profession) {
-                profession.push(this.thirdparty.profession)
-                return profession;
-            }
-
-            if (!this.hasParent && this.thirdparty.category) {
-                profession = this.thirdparty.category.map((category) => category.text);
-            }
-
-            return profession;
-        }
-        /* TODO need backend normalizer to serve children without circular reference
-        hasChildren() {
-            //console.log(this.thirdparty.activeChildren.length > 0)
-            return false
-        } */
+  name: "ThirdPartyRenderBox",
+  components: {
+    AddressRenderBox,
+    Confidential,
+    BadgeEntity,
+  },
+  // To avoid components recursively invoking eachother resolve OnTheFly component here
+  beforeCreate() {
+    this.$options.components.OnTheFly = require('ChillMainAssets/vuejs/OnTheFly/components/OnTheFly').default;
+  },
+  i18n: {
+    messages: {
+      fr: {
+        children: "Personnes de contact: ",
+        child_of: "Contact de: ",
+      }
     }
+  },
+  props: ['thirdparty', 'options'],
+  computed: {
+    isMultiline: function () {
+      if (this.options.isMultiline) {
+        return this.options.isMultiline
+      } else {
+        return false
+      }
+    },
+    hasParent() {
+      return !(this.thirdparty.parent === null || this.thirdparty.parent === undefined);
+    },
+    getProfession() {
+      let profession = []
+      if (this.hasParent && this.thirdparty.profession) {
+        profession.push(this.thirdparty.profession)
+        return profession;
+      }
+
+      if (!this.hasParent && this.thirdparty.category) {
+        profession = this.thirdparty.category.map((category) => category.text);
+      }
+
+      return profession;
+    }
+    /* TODO need backend normalizer to serve children without circular reference
+    hasChildren() {
+        //console.log(this.thirdparty.activeChildren.length > 0)
+        return false
+    } */
+  }
 }
 </script>
 
 <style lang="scss">
-.name{
-    &:before{
-        content: " "
-    }
-    &.tparty-parent {
-        font-weight: bold;
-        font-variant: all-small-caps;
-    }
+.name {
+  &:before {
+    content: " "
+  }
+
+  &.tparty-parent {
+    font-weight: bold;
+    font-variant: all-small-caps;
+  }
 }
 
 .list-professions {
-    &::after {
-        content: " | ";
-    }
-    &:last-child::after {
-        content: ""
-    }
+  &::after {
+    content: " | ";
+  }
+
+  &:last-child::after {
+    content: ""
+  }
 }
 </style>