From 1a6c0529cccc1dad6e9b510ba05b04fe9c9264cb Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 17 Aug 2021 14:05:48 +0200
Subject: [PATCH 01/10] date formatting using dateToISO function, still fix
 with translations. + record-actions inserted via <slot>

---
 .../PersonsAssociated/ParticipationItem.vue   | 79 ++++++++--------
 .../_components/Entity/PersonRenderBox.vue    | 89 ++++++-------------
 2 files changed, 71 insertions(+), 97 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 a50fa049f..fce8351c2 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
@@ -1,5 +1,5 @@
 <template>
-
+<div class="flex-table mb-3">
    <person-render-box
       :options="{
                addInfo : true,
@@ -10,8 +10,47 @@
                addAge : false,
                hLevel : 1
             }"
-      :participation="participation"
-   ></person-render-box>
+      :person="participation.person"
+   >
+   
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <li>
+               <on-the-fly
+                  v-bind:type="participation.person.type"
+                  v-bind:id="participation.person.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  v-bind:type="participation.person.type"
+                  v-bind:id="participation.person.id"
+                  action="edit">
+               </on-the-fly>
+            </li>
+            <!-- <li>
+               <button class="btn btn-delete"
+                  :title="$t('action.delete')" 
+                  @click.prevent="$emit('remove', participation)">
+               </button>
+            </li> -->
+            <li>
+               <button v-if="!participation.endDate"
+                  class="btn btn-remove"
+                  v-bind:title="$t('action.remove')" 
+                  @click.prevent="$emit('close', participation)">
+               </button>
+               <button v-else class="btn btn-remove disabled"></button>
+            </li>
+         </ul>
+      </template>
+
+   </person-render-box>
+</div>
+</template>
+
+
 <!-- <tr>
    <td>
       {{ participation.person.firstName }}
@@ -28,39 +67,9 @@
        {{ $d(participation.endDate.datetime, 'short') }}</span>
    </td>
    <td>
-      <ul class="record_actions">
-         <li>
-            <on-the-fly
-               v-bind:type="participation.person.type"
-               v-bind:id="participation.person.id"
-               action="show">
-            </on-the-fly>
-         </li>
-         <li>
-            <on-the-fly
-               v-bind:type="participation.person.type"
-               v-bind:id="participation.person.id"
-               action="edit">
-            </on-the-fly>
-         </li>
-         li>
-            <button class="btn btn-delete"
-               :title="$t('action.delete')" 
-               @click.prevent="$emit('remove', participation)">
-            </button>
-         </li
-         <li>
-            <button v-if="!participation.endDate"
-               class="btn btn-remove"
-               v-bind:title="$t('action.remove')" 
-               @click.prevent="$emit('close', participation)">
-            </button>
-            <button v-else class="btn btn-remove disabled"></button>
-         </li>
-      </ul>
+
    </td>
 </tr> -->
-</template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
@@ -77,7 +86,7 @@ export default {
    data() {
       return {
          PersonRenderBox: {
-            participation : 'participation',
+            person : 'participation.person',
             options : {
                addInfo : false,
                addId : true,
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 d504cb60f..e7a0d2486 100644
--- 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 class="flex-table mb-3">
+
     <div class="item-bloc">
     <section class="chill-entity entity-person">
     <!-- ENTIRE RENDER_BOX -->
@@ -14,8 +14,8 @@
                 
                     <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
                     <a v-if="this.options.addLink ==  true" href="#">
-                        <span class="firstname">{{ participation.person.firstName }}</span>
-                        <span class="lastname">{{ participation.person.lastName }}</span>
+                        <span class="firstname">{{ person.firstName }}</span>
+                        <span class="lastname">{{ person.lastName }}</span>
                         <!-- IF ALT NAMES -->
                         <span v-if="this.options.addAltNames ==  true" class="altnames">
                             <!-- LOOP THROUGH ALT NAMES -->
@@ -25,8 +25,8 @@
                     </a>
 
                     <!-- WITHOUT LINK JUST NAME -->
-                    <span class="firstname">{{ participation.person.firstName }}</span>
-                    <span class="lastname">{{ participation.person.lastName }}</span>
+                    <span class="firstname">{{ person.firstName }}</span>
+                    <span class="lastname">{{ person.lastName }}</span>
                     <!-- IF ALT NAMES -->
                     <span v-if="this.options.addAltNames ==  true" class="altnames">
                         <!-- LOOP THROUGH ALT NAMES -->
@@ -36,7 +36,7 @@
 
                     <!-- IF ADD ENTITY OPTION -->
                     <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">Person</span>
-                    <span v-if="this.options.addId ==  true" class="id-number" title="n° participation.person.id">{{ participation.person.id }}</span>
+                    <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
 
                 </div>
                 <!-- END NAME TAG -->
@@ -44,10 +44,10 @@
                 <!-- BIRTHDATE / DEATHDATE AND AGE -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
                     <i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i>
-                    <time datetime="{{ participation.person.birthdate }}" title="**birthdate**">
+                    <time datetime="{{ person.birthdate }}" title="**birthdate**">
                         Né le {{ birthdate }}
                     </time>
-                    <span class="age">{{ participation.person.age }}</span>
+                    <span class="age">{{ person.age }}</span>
                 </p>
                 <!-- END BIRTH/DEATH AND AGE -->
             </div>
@@ -63,96 +63,61 @@
 
                 <!-- PHONENUMBER -->
                 <li>
-                    <div v-if="this.participation.person.mobilenumber">
+                    <div v-if="this.person.mobilenumber">
                         <i class="fa fa-li fa-mobile"></i>
-                        <a href="#">{{ participation.person.mobilenumber }}</a>
+                        <a href="#">{{ person.mobilenumber }}</a>
                     </div>
-                    <div v-else-if="this.participation.person.phonenumber">
+                    <div v-else-if="this.person.phonenumber">
                         <i class="fa fa-li fa-phone"></i>
-                        <a href="#">{{ participation.person.phonenumber }}</a>
+                        <a href="#">{{ person.phonenumber }}</a>
                     </div>
                     <span v-else class="chill-no-data-statement">Pas d'information</span>
                 </li>
             </ul>
-            <ul class="record_actions">
-                <li>
-                    <on-the-fly
-                        v-bind:type="participation.person.type"
-                        v-bind:id="participation.person.id"
-                        action="show">
-                    </on-the-fly>
-                </li>
-                <li>
-                    <on-the-fly
-                        v-bind:type="participation.person.type"
-                        v-bind:id="participation.person.id"
-                        action="edit">
-                    </on-the-fly>
-                </li>
-                <li>
-                    <button class="btn btn-delete"
-                        :title="$t('action.delete')" 
-                        @click.prevent="$emit('remove', participation)">
-                    </button>
-                </li>
-                <li>
-                    <button v-if="!participation.endDate"
-                        class="btn btn-remove"
-                        v-bind:title="$t('action.remove')" 
-                        @click.prevent="$emit('close', participation)">
-                    </button>
-                    <button v-else class="btn btn-remove disabled"></button>
-                </li>
-            </ul>
             <!-- END ADDRESS AND PHONE NUMBER -->
 
             <!-- ACTION BUTTONS -->
-            <!-- <ul class="record_actions">
-                <li>
-                    <a class="btn btn-show" target="_blank" title="Show person"
-                    href="#"></a>
-                </li>
-            </ul> -->
+            <slot name="record-actions"></slot>
             <!-- END ACTIONS -->
         </div>
         <!-- END EXTRA INFO AND ACTIONS -->
-
     </div>
     </section>
     </div>
-</div>
+
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 
 export default {
     name: "PersonRenderBox",
     components: {
         OnTheFly
     },
-    props: ['participation', 'options'],
+    props: ['person', 'options'],
     computed: {
         getGender: function() {
             // gender 
-            return this.participation.person.gender == 'woman' ? 'fa-venus' : this.participation.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
+            return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
         },
         birthdate: function(){
-            var date = new Date(this.participation.person.birthdate.datetime);
-            var day = date.getDate()
-            var months = ["Jan.", "Fevr.", "Mars", "Avril", "Mai", "Juin", "Juill.", "Août", "Sept.", "Oct.", "Nov.", "Dec."]
-            var month = date.getMonth()
-            var year = date.getFullYear()
-            return `${day} ${months[month]} ${year}`;
+            var date = new Date(this.person.birthdate.datetime);
+            // var day = date.getDate()
+            // var months = ["Jan.", "Fevr.", "Mars", "Avril", "Mai", "Juin", "Juill.", "Août", "Sept.", "Oct.", "Nov.", "Dec."]
+            // var month = date.getMonth()
+            // var year = date.getFullYear()
+            return dateToISO(date);
         },
         altNameLabel: function(){
-            for(let i = 0; i < this.participation.person.altNames.length; i++){
-                return this.participation.person.altNames[i].label
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].label
             }
         },
         altNameKey: function(){
-            for(let i = 0; i < this.participation.person.altNames.length; i++){
-                return this.participation.person.altNames[i].key
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].key
             }
         },
     }  

From 7af85bc40127868eda21b01cb7c5e2fa423e91b5 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 17 Aug 2021 16:14:08 +0200
Subject: [PATCH 02/10] AddressRenderBox created and added to PersonRenderBox,
 still some styling issue with address. Render options not done yet

---
 .../PersonsAssociated/ParticipationItem.vue   | 24 ----------
 .../_components/Entity/AddressRenderBox.vue   | 46 +++++++++++++++++++
 .../_components/Entity/PersonRenderBox.vue    | 44 ++++++++++--------
 3 files changed, 70 insertions(+), 44 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue

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 fce8351c2..dc5e0c6ce 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
@@ -52,23 +52,12 @@
 
 
 <!-- <tr>
-   <td>
-      {{ participation.person.firstName }}
-      {{ participation.person.lastName }}
-      <person-render-box
-         v-bind:options="options"
-         v-bind:participation="participation"
-      ></person-render-box>
-   </td>
    <td><span v-if="participation.startDate">
        {{ $d(participation.startDate.datetime, 'short') }}</span>
    </td>
    <td><span v-if="participation.endDate">
        {{ $d(participation.endDate.datetime, 'short') }}</span>
    </td>
-   <td>
-
-   </td>
 </tr> -->
 
 <script>
@@ -83,18 +72,5 @@ export default {
    },
    props: ['participation'],
    emits: ['remove', 'close'],
-   data() {
-      return {
-         PersonRenderBox: {
-            person : 'participation.person',
-            options : {
-               addInfo : false,
-               addId : true,
-               addAge : false,
-               hLevel : 1
-            }
-         }
-      }
-   }
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
new file mode 100644
index 000000000..e90242d15
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
@@ -0,0 +1,46 @@
+<template>
+
+        <li v-if="address" class="chill-entity entity-address">
+            <i v-if="options.with_picto == true" class="fa fa-fw fa-map-marker"></i>
+            <span v-if="options.render == 'list' || options.render == 'list'" class="address">
+                
+                    
+                    <!-- if address.street is not empty -->
+                    <p v-if="address.street" class="street">{{ address.street }}
+                        <!-- if address.streetNumber is not empty -->
+                        <span v-if="address.streetNumber" class="streetnumber">{{ address.streetNumber }}</span>
+                    </p>
+
+                        <!-- if options['extended_infos'] -->
+                        <div v-if="options.extended_infos == true">
+                            <span v-if="address.floor" class="floor">{{ address.floor }}</span>
+                            <span v-if="address.corridor" class="corridor">{{ address.corridor }}</span>
+                            <span v-if="address.steps" class="steps">{{ address.steps }}</span>
+                            <span v-if="address.buildingName" class="buildingName">{{ address.buildingName }}</span>
+                            <span v-if="address.flat" class="flat">{{ address.flat }}</span>
+                            <span v-if="address.distribution" class="distribution">{{ address.distribution }}</span>
+                            <span v-if="address.extra" class="extra">{{ address.extra }}</span>
+                        </div>
+
+                    <!-- if address.postCode is not empty -->
+                    <div v-if="address.postCode">
+                        <p class="postcode">
+                            <span class="code">{{ address.postCode.code }}</span>
+                            <span class="name">{{ address.postCode.name }}</span>
+                        </p>
+                        <p class="country">{{ address.postCode.country.name }}</p>
+                    </div>
+                
+            </span>
+        </li> 
+
+</template>
+
+<script>
+
+export default{
+    name: "AddressRenderBox",
+    props: ['address', 'options']
+}
+
+</script>
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 e7a0d2486..36aa19ff7 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -57,22 +57,30 @@
         <!-- EXTRA INFO AND ACTIONS-->
         <div class="item-col">
             <ul class="list-content fa-ul">
-                <li>
-                <!-- ADDRESS -->
-                </li>
+                
+                <address-render-box
+                :options="{
+                    render: 'list',
+                    with_picto: true,
+                    multiline: false,
+                    extended_infos: false,
+                    with_valid_from: false
+                }"
+                :address="person.current_household_address"
+                ></address-render-box>
+                
 
                 <!-- PHONENUMBER -->
-                <li>
-                    <div v-if="this.person.mobilenumber">
-                        <i class="fa fa-li fa-mobile"></i>
-                        <a href="#">{{ person.mobilenumber }}</a>
-                    </div>
-                    <div v-else-if="this.person.phonenumber">
-                        <i class="fa fa-li fa-phone"></i>
-                        <a href="#">{{ person.phonenumber }}</a>
-                    </div>
-                    <span v-else class="chill-no-data-statement">Pas d'information</span>
+                <li v-if="this.person.mobilenumber">
+                    <i class="fa fa-li fa-mobile"></i>
+                    <a href="#">{{ person.mobilenumber }}</a>
                 </li>
+                <li v-else-if="this.person.phonenumber">
+                    <i class="fa fa-li fa-phone"></i>
+                    <a href="#">{{ person.phonenumber }}</a>
+                </li>
+                <span v-else class="chill-no-data-statement">Pas d'information</span>
+                
             </ul>
             <!-- END ADDRESS AND PHONE NUMBER -->
 
@@ -88,26 +96,22 @@
 </template>
 
 <script>
-import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+// import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
+import AddressRenderBox from './AddressRenderBox.vue';
 
 export default {
     name: "PersonRenderBox",
     components: {
-        OnTheFly
+        AddressRenderBox
     },
     props: ['person', 'options'],
     computed: {
         getGender: function() {
-            // gender 
             return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
         },
         birthdate: function(){
             var date = new Date(this.person.birthdate.datetime);
-            // var day = date.getDate()
-            // var months = ["Jan.", "Fevr.", "Mars", "Avril", "Mai", "Juin", "Juill.", "Août", "Sept.", "Oct.", "Nov.", "Dec."]
-            // var month = date.getMonth()
-            // var year = date.getFullYear()
             return dateToISO(date);
         },
         altNameLabel: function(){

From eac4c48d8fec043541257314e21fa9cf56bd3f83 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 17 Aug 2021 16:30:26 +0200
Subject: [PATCH 03/10] deathdate added if not null

---
 .../public/vuejs/_components/Entity/PersonRenderBox.vue    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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 36aa19ff7..75566a996 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -44,8 +44,11 @@
                 <!-- BIRTHDATE / DEATHDATE AND AGE -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
                     <i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i>
-                    <time datetime="{{ person.birthdate }}" title="**birthdate**">
-                        Né le {{ birthdate }}
+                    <time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}">
+                        Birthday {{ birthdate }}
+                    </time>
+                    <time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
+                        {{ birthdate }} - {{ deathdate }}
                     </time>
                     <span class="age">{{ person.age }}</span>
                 </p>

From 34e1a9b7482d1e648379c575b560abce33576418 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 18 Aug 2021 16:22:38 +0200
Subject: [PATCH 04/10] address added to personrenderbox w/ ShowAddress.
 Adapted to include a multiline option

---
 .../vuejs/Address/components/ShowAddress.vue  | 22 ++++++++++--
 .../Resources/public/vuejs/_js/i18n.js        |  8 +++++
 .../_components/Entity/AddressRenderBox.vue   |  2 +-
 .../_components/Entity/PersonRenderBox.vue    | 35 +++++++++----------
 4 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
index 786f0dce6..45a5f9fb1 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
@@ -1,5 +1,5 @@
 <template>
-   <div class="address multiline">
+   <component :is="component" :class="'address'+ isMultiline">
       <p v-if="address.text"
          class="street">
          {{ address.text }}
@@ -48,17 +48,33 @@
             <b>{{ $t('distribution') }}</b>: {{ address.distribution }}
          </span>
       </div>
-   </div>
+   </component>
 </template>
 
 <script>
 
 export default {
    name: 'ShowAddress',
-   props: ['address'],
+   props: {
+      address: {
+         type: Object
+      },
+      multiline: {
+         default: true,
+         type: Boolean
+      }
+   },
    data() {
       return {
       }
    },
+   computed: {
+      component(){
+         return this.multiline == true ? "div" : "span";
+      },
+      isMultiline(){
+         return this.multiline == true ? " multiline" : "";
+      }
+   }
 };
 </script>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index 3964a85fe..e60ce5f8a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -63,6 +63,14 @@ const messages = {
             thirdparty: "un nouveau tiers professionnel"
          },         
       },
+      renderbox: {
+         person: "Person",
+         birthday: {
+            man: "Né le",
+            woman: "Née le"
+         } ,
+         no_information: "Pas d'information"
+      }
    }
 };
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
index e90242d15..daee4177f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
@@ -2,7 +2,7 @@
 
         <li v-if="address" class="chill-entity entity-address">
             <i v-if="options.with_picto == true" class="fa fa-fw fa-map-marker"></i>
-            <span v-if="options.render == 'list' || options.render == 'list'" class="address">
+            <span v-if="options.render == 'list' || options.render == 'list'" :class="'address ' + {'multiline' : options.multiline === true}">
                 
                     
                     <!-- if address.street is not empty -->
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 75566a996..4e177da21 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -35,7 +35,7 @@
                     </span>
 
                     <!-- IF ADD ENTITY OPTION -->
-                    <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">Person</span>
+                    <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
                     <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
 
                 </div>
@@ -43,9 +43,10 @@
 
                 <!-- BIRTHDATE / DEATHDATE AND AGE -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
-                    <i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i>
+                    <!-- todo: change icon if person is deceased? -->
+                    <i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
                     <time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}">
-                        Birthday {{ birthdate }}
+                        {{ $t(getGender) + ' ' + $d(birthdate, 'text') }}
                     </time>
                     <time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
                         {{ birthdate }} - {{ deathdate }}
@@ -60,20 +61,13 @@
         <!-- EXTRA INFO AND ACTIONS-->
         <div class="item-col">
             <ul class="list-content fa-ul">
-                
-                <address-render-box
-                :options="{
-                    render: 'list',
-                    with_picto: true,
-                    multiline: false,
-                    extended_infos: false,
-                    with_valid_from: false
-                }"
-                :address="person.current_household_address"
-                ></address-render-box>
-                
-
+                <!-- ADDRESS -->
+                <li v-if="person.current_household_address" class="chill-entity entity-address">
+                    <i class="fa fa-fw fa-map-marker"></i>
+                    <show-address :address="person.current_household_address" :multiline="false"></show-address>
+                </li>
                 <!-- PHONENUMBER -->
+                <!-- todo: change href for phonenumbers -->
                 <li v-if="this.person.mobilenumber">
                     <i class="fa fa-li fa-mobile"></i>
                     <a href="#">{{ person.mobilenumber }}</a>
@@ -82,7 +76,7 @@
                     <i class="fa fa-li fa-phone"></i>
                     <a href="#">{{ person.phonenumber }}</a>
                 </li>
-                <span v-else class="chill-no-data-statement">Pas d'information</span>
+                <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
                 
             </ul>
             <!-- END ADDRESS AND PHONE NUMBER -->
@@ -102,15 +96,20 @@
 // import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from './AddressRenderBox.vue';
+import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
 
 export default {
     name: "PersonRenderBox",
     components: {
-        AddressRenderBox
+        AddressRenderBox,
+        ShowAddress
     },
     props: ['person', 'options'],
     computed: {
         getGender: function() {
+            return this.person.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+        },
+        getGenderIcon: function() {
             return this.person.gender == 'woman' ? 'fa-venus' : this.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
         },
         birthdate: function(){

From 42b9e25403cc85c48299fedb9e8d8eeaa386519a Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 18 Aug 2021 17:20:17 +0200
Subject: [PATCH 05/10] some todo's added in comment + most href's made dynamic

---
 .../vuejs/_components/Entity/PersonRenderBox.vue     | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

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 4e177da21..f30a9a43b 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -10,9 +10,11 @@
             <div class="entity-label">
 
                 <!-- NAME TAG -->
+                <!-- todo: make h class dynamic -->
                 <div class="denomination h3">
                 
                     <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
+                    <!-- todo: change href -->
                     <a v-if="this.options.addLink ==  true" href="#">
                         <span class="firstname">{{ person.firstName }}</span>
                         <span class="lastname">{{ person.lastName }}</span>
@@ -58,7 +60,7 @@
         </div>
         <!-- END LABEL -->
 
-        <!-- EXTRA INFO AND ACTIONS-->
+        <!-- CONTACT INFO AND ACTIONS-->
         <div class="item-col">
             <ul class="list-content fa-ul">
                 <!-- ADDRESS -->
@@ -67,14 +69,14 @@
                     <show-address :address="person.current_household_address" :multiline="false"></show-address>
                 </li>
                 <!-- PHONENUMBER -->
-                <!-- todo: change href for phonenumbers -->
+                <!-- todo: change href for phonenumbers and format phone number? -->
                 <li v-if="this.person.mobilenumber">
                     <i class="fa fa-li fa-mobile"></i>
-                    <a href="#">{{ person.mobilenumber }}</a>
+                    <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
                 </li>
                 <li v-else-if="this.person.phonenumber">
                     <i class="fa fa-li fa-phone"></i>
-                    <a href="#">{{ person.phonenumber }}</a>
+                    <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
                 </li>
                 <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
                 
@@ -85,7 +87,7 @@
             <slot name="record-actions"></slot>
             <!-- END ACTIONS -->
         </div>
-        <!-- END EXTRA INFO AND ACTIONS -->
+        <!-- END CONTACT INFO AND ACTIONS -->
     </div>
     </section>
     </div>

From a6b360c1935100aa46506ebf3513d5f47fa0f61e Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 18 Aug 2021 17:20:57 +0200
Subject: [PATCH 06/10] setup of ThirdPartyRenderBox

---
 .../vue/_components/ThirdPartyRenderbox.vue   | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 src/Bundle/ChillThirdPartyBundle/Resources/public/vue/_components/ThirdPartyRenderbox.vue

diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vue/_components/ThirdPartyRenderbox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vue/_components/ThirdPartyRenderbox.vue
new file mode 100644
index 000000000..9421d8b72
--- /dev/null
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vue/_components/ThirdPartyRenderbox.vue
@@ -0,0 +1,94 @@
+<template>
+
+    <div class="item-bloc">
+    <section class="chill-entity entity-person">
+    <!-- ENTIRE RENDER_BOX -->
+    <div class="item-row entity-bloc">
+
+        <!-- LABEL -->
+        <div  class="item-col">
+            <div class="entity-label">
+
+                <!-- NAME TAG -->
+                <!-- todo: make h class dynamic -->
+                <div class="denomination h3">
+                
+                    <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
+                    <!-- todo: change href -->
+                    <a v-if="this.options.addLink ==  true" href="#">
+                        <span class="name">{{ thirdparty.name }}</span>
+                    </a>
+                    <!-- WITHOUT LINK JUST NAME -->
+                    <span v-else class="name">{{ thirdparty.name }}</span>
+    
+                    <!-- IF ADD ENTITY OPTION -->
+                    <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.third_party') }}</span>
+                    <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
+
+                </div>
+                <!-- END NAME TAG -->
+
+                <!-- EXTRA INFO -->
+                <p v-if="this.options.addInfo == true" class="moreinfo">
+                    <!-- todo: what to add here as extra info? -->
+                </p>
+            </div>
+        </div>
+        <!-- END LABEL -->
+
+        <!-- CONTACT INFO AND ACTIONS-->
+        <div class="item-col">
+            <ul class="list-content fa-ul">
+                <!-- ADDRESS -->
+                <li v-if="thirdparty.address" class="chill-entity entity-address">
+                    <i class="fa fa-fw fa-map-marker"></i>
+                    <show-address :address="thirdparty.address" :multiline="false"></show-address>
+                </li>
+                <!-- PHONENUMBER -->
+                <!-- todo: change href for phonenumbers -->
+                <li>
+                    <i class="fa fa-li fa-mobile"></i>
+                    <a v-if="this.thirdparty.telephone" :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
+                    <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
+                </li>
+                <li>
+                    <i class="fa fa-li fa-envelope-o"></i>
+                    <a v-if="this.thirdparty.telephone" :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
+                </li>
+                
+            </ul>
+            <!-- END ADDRESS AND PHONE NUMBER -->
+
+            <!-- ACTION BUTTONS -->
+            <slot name="record-actions"></slot>
+            <!-- END ACTIONS -->
+        </div>
+        <!-- END CONTACT INFO AND ACTIONS -->
+    </div>
+    </section>
+    </div>
+
+</template>
+
+<script>
+import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
+
+export default {
+    name: "ThirdPartyRenderBox",
+    components: {
+        ThirdPartyRenderBox,
+        ShowAddress
+    },
+    props: ['thirdparty', 'options'], 
+}
+</script>
+
+<style>
+
+.lastname:before{
+    content: " "
+}
+
+</style>
+
+

From 3e9d96368dea1ebea9290eff57a88dc27dd7b216 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 19 Aug 2021 12:21:06 +0200
Subject: [PATCH 07/10] style added to create space between streetname and city
 + margin of flex-table fixed

---
 .../public/vuejs/Address/components/ShowAddress.vue  | 12 +++++++++++-
 .../public/vuejs/AccompanyingCourse/App.vue          |  5 +++--
 .../_components/ThirdPartyRenderbox.vue              |  0
 3 files changed, 14 insertions(+), 3 deletions(-)
 rename src/Bundle/ChillThirdPartyBundle/Resources/public/{vue => vuejs}/_components/ThirdPartyRenderbox.vue (100%)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
index 45a5f9fb1..2a873732a 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue
@@ -2,7 +2,7 @@
    <component :is="component" :class="'address'+ isMultiline">
       <p v-if="address.text"
          class="street">
-         {{ address.text }}
+         {{ address.text }},
       </p>
       <p v-if="address.postcode"
          class="postcode">
@@ -78,3 +78,13 @@ export default {
    }
 };
 </script>
+
+<style lang="scss" scoped>
+p{
+   &:after{
+      content: " ";
+      margin-right: 0.3em;
+   }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 8f6a92584..c7073e424 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -79,8 +79,9 @@ export default {
          }
          & > div {
             margin: 1em 3em 0;
-         }
-         table {
+            &.flex-table {
+               margin: 1em 0 0;
+            }
          }
       }
 
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vue/_components/ThirdPartyRenderbox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue
similarity index 100%
rename from src/Bundle/ChillThirdPartyBundle/Resources/public/vue/_components/ThirdPartyRenderbox.vue
rename to src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue

From 4a0ffd2cbaf06f2cb40c23fe8d8d1fcbcfc38879 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 19 Aug 2021 12:29:08 +0200
Subject: [PATCH 08/10] flex-table taken out of for-loop

---
 .../vuejs/AccompanyingCourse/components/PersonsAssociated.vue | 4 ++--
 .../components/PersonsAssociated/ParticipationItem.vue        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index cd05eb709..bc4f66fdd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -5,7 +5,7 @@
    <div>
       <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
-
+<div class="flex-table mb-3">
    <participation-item
    v-for="participation in participations"
    v-bind:participation="participation"
@@ -13,7 +13,7 @@
    @remove="removeParticipation"
    @close="closeParticipation">
    </participation-item>
-   
+</div>   
    <!-- <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
       <thead>
          <tr>
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 dc5e0c6ce..84ff60307 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
@@ -1,5 +1,5 @@
 <template>
-<div class="flex-table mb-3">
+
    <person-render-box
       :options="{
                addInfo : true,
@@ -47,7 +47,7 @@
       </template>
 
    </person-render-box>
-</div>
+
 </template>
 
 

From 90cfcd0569a2f23d16abffd5db1fbe079cfeb28b Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 19 Aug 2021 12:31:16 +0200
Subject: [PATCH 09/10] ThirdPartyRenderBox created and old view replaced

---
 .../Resources/public/vuejs/_js/i18n.js        |  6 +-
 .../components/Resources.vue                  | 17 ++---
 .../components/Resources/ResourceItem.vue     | 75 ++++++++++++-------
 .../vuejs/_components/ThirdPartyRenderbox.vue | 67 ++++++++++++-----
 4 files changed, 109 insertions(+), 56 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index e60ce5f8a..1afc0e212 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -69,7 +69,11 @@ const messages = {
             man: "Né le",
             woman: "Née le"
          } ,
-         no_information: "Pas d'information"
+         no_information: "Pas d'information",
+         type: {
+            thirdparty: "Tiers",
+            person: "Usager"
+         }
       }
    }
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
index 6a39a138f..ff67510fd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@@ -15,16 +15,15 @@
             <th class="chill-orange">{{ $t('action.actions') }}</th>
          </tr>
       </thead>
-      <tbody>
-         <resource-item
-            v-for="resource in resources"
-            v-bind:resource="resource"
-            v-bind:key="resource.id"
-            @remove="removeResource">
-         </resource-item>
-      </tbody>
    </table>
-   
+   <div class="flex-table mb-3">
+      <resource-item
+         v-for="resource in resources"
+         v-bind:resource="resource"
+         v-bind:key="resource.id"
+         @remove="removeResource">
+      </resource-item>
+   </div>
    <div>
       <add-persons 
         buttonTitle="resources.add_resources"
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 b8c94c998..3714a0f2c 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
@@ -1,7 +1,7 @@
 <template>
-<tr>
+<!-- <tr> -->
    
-   <td>
+   <!-- <td>
       <span class="badge rounded-pill bg-secondary" 
          v-bind:title="resource.resource.id">
          <span v-if="resource.resource.type === 'person'" >{{ $t('item.type_person') }}</span>
@@ -18,41 +18,58 @@
       {{ resource.resource.address.postcode.name }}
    </td>
    
-   <td>
-      <ul class="record_actions">
-         <li>
-            <on-the-fly
-               v-bind:type="resource.resource.type"
-               v-bind:id="resource.resource.id"
-               action="show">
-            </on-the-fly>
-         </li>
-         <li>
-            <on-the-fly
-               v-bind:type="resource.resource.type"
-               v-bind:id="resource.resource.id"
-               action="edit">
-            </on-the-fly>
-         </li>
-         <li>
-            <button
-               class="btn btn-remove"
-               v-bind:title="$t('action.remove')" 
-               @click.prevent="$emit('remove', resource)">
-            </button>
-         </li>
-      </ul>
-   </td>
-</tr>
+   <td> -->
+      <third-party-render-box
+         :options="{
+            addLink : false,
+            addId : false,
+            addEntity: true,
+            addInfo: true
+         }"
+         :thirdparty="resource"
+      >
+         <template v-slot:record-actions>
+            <ul class="record_actions">
+               <li>
+                  <on-the-fly
+                     v-bind:type="resource.resource.type"
+                     v-bind:id="resource.resource.id"
+                     action="show">
+                  </on-the-fly>
+               </li>
+               <li>
+                  <on-the-fly
+                     v-bind:type="resource.resource.type"
+                     v-bind:id="resource.resource.id"
+                     action="edit">
+                  </on-the-fly>
+               </li>
+               <li>
+                  <button
+                     class="btn btn-remove"
+                     v-bind:title="$t('action.remove')" 
+                     @click.prevent="$emit('remove', resource)">
+                  </button>
+               </li>
+            </ul>
+         </template>
+      
+      
+      </third-party-render-box>
+      
+   <!-- </td>
+</tr> -->
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import ThirdPartyRenderBox from '../../../../../../../ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue'
 
 export default {
    name: 'ResourceItem',
    components: {
-      OnTheFly
+      OnTheFly,
+      ThirdPartyRenderBox
    },
    props: ['resource'],
    emits: ['remove']
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue
index 9421d8b72..b3df82cd2 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue
@@ -1,5 +1,4 @@
 <template>
-
     <div class="item-bloc">
     <section class="chill-entity entity-person">
     <!-- ENTIRE RENDER_BOX -->
@@ -13,24 +12,34 @@
                 <!-- todo: make h class dynamic -->
                 <div class="denomination h3">
                 
+                    <span v-if="options.addEntity ==  true && thirdparty.resource.type == 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
+                    <span v-if="options.addEntity ==  true && thirdparty.resource.type == 'person'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.person') }}</span>
                     <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
                     <!-- todo: change href -->
                     <a v-if="this.options.addLink ==  true" href="#">
-                        <span class="name">{{ thirdparty.name }}</span>
+                        <span class="name">{{ thirdparty.resource.text }}</span>
                     </a>
                     <!-- WITHOUT LINK JUST NAME -->
-                    <span v-else class="name">{{ thirdparty.name }}</span>
+                    <span class="name">{{ thirdparty.resource.text }}</span>
     
                     <!-- IF ADD ENTITY OPTION -->
-                    <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.third_party') }}</span>
-                    <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
+                  
+                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
 
                 </div>
                 <!-- END NAME TAG -->
 
                 <!-- EXTRA INFO -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
-                    <!-- todo: what to add here as extra info? -->
+                    <!-- todo: change icon if person is deceased? -->
+                    <i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
+                    <time v-if="thirdparty.resource.birthdate" datetime="{{ thirdparty.birthdate.datetime }}" title="{{ birthdate }}">
+                        {{ $t(getGender) + ' ' + $d(birthdate, 'short') }}
+                    </time>
+                    <time v-else-if="thirdparty.resource.deathdate" datetime="{{ thirdparty.deathdate.datetime }}" title="{{ thirdparty.deathdate }}">
+                        {{ birthdate }} - {{ deathdate }}
+                    </time>
+                    <span class="age">{{ thirdparty.age }}</span>
                 </p>
             </div>
         </div>
@@ -40,20 +49,21 @@
         <div class="item-col">
             <ul class="list-content fa-ul">
                 <!-- ADDRESS -->
-                <li v-if="thirdparty.address" class="chill-entity entity-address">
-                    <i class="fa fa-fw fa-map-marker"></i>
-                    <show-address :address="thirdparty.address" :multiline="false"></show-address>
+                <li v-if="thirdparty.resource.address" class="chill-entity entity-address">
+                    <i class="fa fa-li fa-map-marker"></i>
+                    <show-address :address="thirdparty.resource.address" :multiline="false"></show-address>
                 </li>
                 <!-- PHONENUMBER -->
                 <!-- todo: change href for phonenumbers -->
                 <li>
                     <i class="fa fa-li fa-mobile"></i>
-                    <a v-if="this.thirdparty.telephone" :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
+                    <a v-if="thirdparty.resource.telephone" :href="'tel: ' + thirdparty.resource.telephone">{{ thirdparty.resource.telephone }}</a>
                     <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
                 </li>
-                <li>
+                <li v-if="thirdparty.resource.type == 'thirdparty'">
                     <i class="fa fa-li fa-envelope-o"></i>
-                    <a v-if="this.thirdparty.telephone" :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
+                    <a v-if="thirdparty.resource.email" :href="'mailto: ' + thirdparty.resource.email">{{ thirdparty.resource.email }}</a>
+                    <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
                 </li>
                 
             </ul>
@@ -72,21 +82,44 @@
 
 <script>
 import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
+import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 
 export default {
     name: "ThirdPartyRenderBox",
     components: {
-        ThirdPartyRenderBox,
         ShowAddress
     },
-    props: ['thirdparty', 'options'], 
+    props: ['thirdparty', 'options'],
+    computed: {
+        getGender: function() {
+            return this.thirdparty.resource.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+        },
+        getGenderIcon: function() {
+            return this.thirdparty.resource.gender == 'woman' ? 'fa-venus' : this.thirdparty.resource.gender == 'man' ? 'fa-mars' : 'fa-neuter';
+        },
+        birthdate: function(){
+            var date = new Date(this.thirdparty.resource.birthdate.datetime);
+            return dateToISO(date);
+        },
+        deathdate: function(){
+            var date = new Date(this.thirdparty.resource.deathdate.datetime);
+            return dateToISO(date);
+        },
+    }
 }
 </script>
 
-<style>
+<style lang="scss">
 
-.lastname:before{
-    content: " "
+.lastname{
+    &:before{
+        content: " "
+    }
+}
+.name{
+    &:before{
+        content: " "
+    }
 }
 
 </style>

From de7322464b8db374c816ff8fc58acd56bdabb3d1 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 19 Aug 2021 12:32:26 +0200
Subject: [PATCH 10/10] deathdate fix in personrenderbox, in case there is a
 deathdate

---
 .../public/vuejs/_components/Entity/AddressRenderBox.vue  | 2 ++
 .../public/vuejs/_components/Entity/PersonRenderBox.vue   | 8 +++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
index daee4177f..8334f6263 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
@@ -1,3 +1,5 @@
+// CURRENTLY NOT IN USE
+
 <template>
 
         <li v-if="address" class="chill-entity entity-address">
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 f30a9a43b..2d81b3654 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -65,7 +65,7 @@
             <ul class="list-content fa-ul">
                 <!-- ADDRESS -->
                 <li v-if="person.current_household_address" class="chill-entity entity-address">
-                    <i class="fa fa-fw fa-map-marker"></i>
+                    <i class="fa fa-li fa-map-marker"></i>
                     <show-address :address="person.current_household_address" :multiline="false"></show-address>
                 </li>
                 <!-- PHONENUMBER -->
@@ -97,13 +97,11 @@
 <script>
 // import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
-import AddressRenderBox from './AddressRenderBox.vue';
 import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
 
 export default {
     name: "PersonRenderBox",
     components: {
-        AddressRenderBox,
         ShowAddress
     },
     props: ['person', 'options'],
@@ -118,6 +116,10 @@ export default {
             var date = new Date(this.person.birthdate.datetime);
             return dateToISO(date);
         },
+        deathdate: function(){
+            var date = new Date(this.person.deathdate.datetime);
+            return dateToISO(date);
+        },
         altNameLabel: function(){
             for(let i = 0; i < this.person.altNames.length; i++){
                 return this.person.altNames[i].label