From 21fd69488f065f75cdb5ca229ff04a6953d5014a Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 12 Aug 2021 15:21:33 +0200
Subject: [PATCH 1/7] start of PersonRenderBox in vue

---
 .../_components/Entity/PersonRenderBox.vue    | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
new file mode 100644
index 000000000..3fead699c
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -0,0 +1,102 @@
+<template>
+    <!-- ENTIRE RENDER_BOX -->
+    <div class="item-row entity-bloc">
+
+        <!-- LABEL -->
+        <div class="item-col">
+            <div class="entity-label">
+
+                <!-- NAME TAG -->
+                <div class="denomination **h_level**">
+
+                    <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
+                    <a href="#">
+                        <span class="firstname">**firstname**</span>
+                        <span class="lastname">**lastname**</span>
+                        <!-- IF ALT NAMES -->
+                        <!-- <span class="altnames"> -->
+                            <!-- LOOP THROUGH ALT NAMES -->
+                            <!-- <span class="altname altname-**key**">**label**</span> -->
+                            <!-- END LOOP -->
+                        <!-- </span> -->
+                    </a>
+
+                    <!-- WITHOUT LINK JUST NAME -->
+                    <span class="firstname">**firstname**</span>
+                    <span class="lastname">**lastname**</span>
+                    <!-- IF ALT NAMES -->
+                    <span class="altnames">
+                        <!-- LOOP THROUGH ALT NAMES -->
+                        <span class="altname altname-**key**">**label**</span>
+                        <!-- END LOOP -->
+                    </span>
+
+                    <!-- IF ADD ENTITY OPTION -->
+                    <span class="badge rounded-pill bg-secondary">**Person object?**</span>
+                    <span class="id-number" title="**n°person_id**">**person_id**</span>
+
+                </div>
+                <!-- END NAME TAG -->
+
+                <!-- BIRTHDATE / DEATHDATE AND AGE -->
+                <p class="moreinfo">
+                    <i class="fa fa-fw **gender**" title="**gender title**"></i>
+                    <time datetime="13/05/1867" title="**birthdate**">
+                        birthdate
+                    </time>
+                    <span class="age">**age**</span>
+                </p>
+                <!-- END BIRTH/DEATH AND AGE -->
+
+            </div>
+        </div>
+        <!-- END LABEL -->
+
+        <!-- EXTRA INFO AND ACTIONS-->
+        <div class="item-col">
+            <ul class="list-content fa-ul">
+                <li>
+                <!-- ADDRESS -->
+                </li>
+
+                <!-- PHONENUMBER -->
+                <li>
+                    <i class="fa fa-li fa-mobile"></i><a href="#">**mobilenumber**</a>
+                    <i class="fa fa-li fa-phone"></i>
+                    <a href="#">**regular phonenumber**</a>
+                    <span class="chill-no-data-statement">**no phonenumber**</span>
+                </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>
+            <!-- END ACTIONS -->
+        </div>
+        <!-- END EXTRA INFO AND ACTIONS -->
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PersonRenderBox",
+    props: [
+        'options'
+    ],
+    data() {
+        return {
+
+            }
+    },
+    computed: {
+    },  
+}
+</script>
+
+

From c48586cd0e95ce126ff6b3de0725e9d209277a5f Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 12 Aug 2021 15:55:35 +0200
Subject: [PATCH 2/7] renaming of PersonItem into ParticipationItem

---
 .../AccompanyingCourse/components/PersonsAssociated.vue   | 8 ++++----
 .../{PersonItem.vue => ParticipationItem.vue}             | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/{PersonItem.vue => ParticipationItem.vue} (98%)

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 0155d89dc..c5efafa16 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -16,13 +16,13 @@
          </tr>
       </thead>
       <tbody>
-         <person-item
+         <participation-item
             v-for="participation in participations"
             v-bind:participation="participation"
             v-bind:key="participation.id"
             @remove="removeParticipation"
             @close="closeParticipation">
-         </person-item>
+         </participation-item>
       </tbody>
    </table>
 
@@ -42,13 +42,13 @@
 
 <script>
 import { mapState } from 'vuex';
-import PersonItem from "./PersonsAssociated/PersonItem.vue"
+import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue"
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
 
 export default {
    name: 'PersonsAssociated',
    components: {
-      PersonItem,
+      ParticipationItem,
       AddPersons
    },
    data() {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
similarity index 98%
rename from src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
rename to src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
index 7d07c3567..685b140a9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
@@ -49,7 +49,7 @@
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 
 export default {
-   name: 'PersonItem',
+   name: 'ParticipationItem',
    components: {
       OnTheFly
    },

From 6bb5440220befc62c73ec4bf5f84ce3f49ea8e10 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Thu, 12 Aug 2021 16:23:58 +0200
Subject: [PATCH 3/7] injecting person data into renderbox, no styling yet

---
 .../PersonsAssociated/ParticipationItem.vue   | 25 ++++++++++++++--
 .../_components/Entity/PersonRenderBox.vue    | 29 ++++++++++---------
 2 files changed, 37 insertions(+), 17 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 685b140a9..ea27b59f8 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,8 +1,12 @@
 <template>
 <tr>
    <td>
-      {{ participation.person.firstName }}
-      {{ participation.person.lastName }}
+      <!-- {{ 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>
@@ -47,13 +51,28 @@
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import PersonRenderBox from '../../../_components/Entity/PersonRenderBox.vue';
 
 export default {
    name: 'ParticipationItem',
    components: {
-      OnTheFly
+      OnTheFly,
+      PersonRenderBox
    },
    props: ['participation'],
    emits: ['remove', 'close'],
+   data() {
+      return {
+         PersonRenderBox: {
+            participation : 'participation',
+            options : {
+               addInfo : true,
+               addId : true,
+               addAge : false,
+               hLevel : 1
+            }
+         }
+      }
+   }
 }
 </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 3fead699c..232fff316 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -3,7 +3,7 @@
     <div class="item-row entity-bloc">
 
         <!-- LABEL -->
-        <div class="item-col">
+        <div  class="item-col">
             <div class="entity-label">
 
                 <!-- NAME TAG -->
@@ -11,19 +11,19 @@
 
                     <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
                     <a href="#">
-                        <span class="firstname">**firstname**</span>
-                        <span class="lastname">**lastname**</span>
+                        <span class="firstname">{{ participation.person.firstName }}</span>
+                        <span class="lastname">{{ participation.person.lastName }}</span>
                         <!-- IF ALT NAMES -->
-                        <!-- <span class="altnames"> -->
+                        <span class="altnames">
                             <!-- LOOP THROUGH ALT NAMES -->
-                            <!-- <span class="altname altname-**key**">**label**</span> -->
+                            <span class="altname altname-**key**">**label**</span>
                             <!-- END LOOP -->
-                        <!-- </span> -->
+                        </span>
                     </a>
 
                     <!-- WITHOUT LINK JUST NAME -->
-                    <span class="firstname">**firstname**</span>
-                    <span class="lastname">**lastname**</span>
+                    <span class="firstname">{{ participation.person.firstName }}</span>
+                    <span class="lastname">{{ participation.person.lastName }}</span>
                     <!-- IF ALT NAMES -->
                     <span class="altnames">
                         <!-- LOOP THROUGH ALT NAMES -->
@@ -33,7 +33,7 @@
 
                     <!-- IF ADD ENTITY OPTION -->
                     <span class="badge rounded-pill bg-secondary">**Person object?**</span>
-                    <span class="id-number" title="**n°person_id**">**person_id**</span>
+                    <span class="id-number" title="n° participation.person.id">{{ participation.person.id }}</span>
 
                 </div>
                 <!-- END NAME TAG -->
@@ -42,9 +42,9 @@
                 <p class="moreinfo">
                     <i class="fa fa-fw **gender**" title="**gender title**"></i>
                     <time datetime="13/05/1867" title="**birthdate**">
-                        birthdate
+                        {{ participation.person.birthdate }}
                     </time>
-                    <span class="age">**age**</span>
+                    <span class="age">{{ participation.person.age }}</span>
                 </p>
                 <!-- END BIRTH/DEATH AND AGE -->
 
@@ -61,9 +61,9 @@
 
                 <!-- PHONENUMBER -->
                 <li>
-                    <i class="fa fa-li fa-mobile"></i><a href="#">**mobilenumber**</a>
+                    <i class="fa fa-li fa-mobile"></i><a href="#">{{ participation.person.mobilenumber }}</a>
                     <i class="fa fa-li fa-phone"></i>
-                    <a href="#">**regular phonenumber**</a>
+                    <a href="#">{{ participation.person.phonenumber }}</a>
                     <span class="chill-no-data-statement">**no phonenumber**</span>
                 </li>
             </ul>
@@ -87,7 +87,8 @@
 export default {
     name: "PersonRenderBox",
     props: [
-        'options'
+        'options',
+        'participation'
     ],
     data() {
         return {

From 166144e57e5ac340fcdb5551792d383ec8a8e916 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Fri, 13 Aug 2021 13:15:08 +0200
Subject: [PATCH 4/7] first conditionalities added analog to twig template

---
 .../components/PersonsAssociated.vue          | 12 +++++--
 .../PersonsAssociated/ParticipationItem.vue   | 27 +++++++++++----
 .../_components/Entity/PersonRenderBox.vue    | 34 +++++++++----------
 3 files changed, 46 insertions(+), 27 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 c5efafa16..cd05eb709 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -5,8 +5,16 @@
    <div>
       <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
+
+   <participation-item
+   v-for="participation in participations"
+   v-bind:participation="participation"
+   v-bind:key="participation.id"
+   @remove="removeParticipation"
+   @close="closeParticipation">
+   </participation-item>
    
-   <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
+   <!-- <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
       <thead>
          <tr>
             <th class="chill-orange">{{ $t('persons_associated.name') }}</th>
@@ -24,7 +32,7 @@
             @close="closeParticipation">
          </participation-item>
       </tbody>
-   </table>
+   </table> -->
 
    <div>
       <add-persons 
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 ea27b59f8..1c2978b80 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,8 +1,21 @@
 <template>
-<tr>
+
+   <person-render-box
+      :options="{
+               addInfo : false,
+               addId : true,
+               addEntity: false,
+               addLink: false,
+               addAltNames: false,
+               addAge : false,
+               hLevel : 1
+            }"
+      :participation="participation"
+   ></person-render-box>
+<!-- <tr>
    <td>
-      <!-- {{ participation.person.firstName }}
-      {{ participation.person.lastName }} -->
+      {{ participation.person.firstName }}
+      {{ participation.person.lastName }}
       <person-render-box
          v-bind:options="options"
          v-bind:participation="participation"
@@ -30,12 +43,12 @@
                action="edit">
             </on-the-fly>
          </li>
-         <!--li>
+         li>
             <button class="btn btn-delete"
                :title="$t('action.delete')" 
                @click.prevent="$emit('remove', participation)">
             </button>
-         </li-->
+         </li
          <li>
             <button v-if="!participation.endDate"
                class="btn btn-remove"
@@ -46,7 +59,7 @@
          </li>
       </ul>
    </td>
-</tr>
+</tr> -->
 </template>
 
 <script>
@@ -66,7 +79,7 @@ export default {
          PersonRenderBox: {
             participation : 'participation',
             options : {
-               addInfo : true,
+               addInfo : false,
                addId : true,
                addAge : false,
                hLevel : 1
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 232fff316..8d979d0b9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -8,13 +8,13 @@
 
                 <!-- NAME TAG -->
                 <div class="denomination **h_level**">
-
+                
                     <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
-                    <a href="#">
+                    <a v-if="this.options.addLink ==  true" href="#">
                         <span class="firstname">{{ participation.person.firstName }}</span>
                         <span class="lastname">{{ participation.person.lastName }}</span>
                         <!-- IF ALT NAMES -->
-                        <span class="altnames">
+                        <span v-if="this.options.addAltNames ==  true" class="altnames">
                             <!-- LOOP THROUGH ALT NAMES -->
                             <span class="altname altname-**key**">**label**</span>
                             <!-- END LOOP -->
@@ -25,21 +25,21 @@
                     <span class="firstname">{{ participation.person.firstName }}</span>
                     <span class="lastname">{{ participation.person.lastName }}</span>
                     <!-- IF ALT NAMES -->
-                    <span class="altnames">
+                    <span v-if="this.options.addAltNames ==  true" class="altnames">
                         <!-- LOOP THROUGH ALT NAMES -->
                         <span class="altname altname-**key**">**label**</span>
                         <!-- END LOOP -->
                     </span>
 
                     <!-- IF ADD ENTITY OPTION -->
-                    <span class="badge rounded-pill bg-secondary">**Person object?**</span>
-                    <span class="id-number" title="n° participation.person.id">{{ participation.person.id }}</span>
+                    <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>
 
                 </div>
                 <!-- END NAME TAG -->
 
                 <!-- BIRTHDATE / DEATHDATE AND AGE -->
-                <p class="moreinfo">
+                <p v-if="this.options.addInfo == true" class="moreinfo">
                     <i class="fa fa-fw **gender**" title="**gender title**"></i>
                     <time datetime="13/05/1867" title="**birthdate**">
                         {{ participation.person.birthdate }}
@@ -86,18 +86,16 @@
 <script>
 export default {
     name: "PersonRenderBox",
-    props: [
-        'options',
-        'participation'
-    ],
-    data() {
-        return {
-
-            }
-    },
-    computed: {
-    },  
+    props: ['participation', 'options'],  
 }
 </script>
 
+<style>
+
+.item-row{
+    border: 1px solid black;
+}
+
+</style>
+
 

From 438134690fb394824989aef4b0d2a91b133d5aa5 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Fri, 13 Aug 2021 14:57:56 +0200
Subject: [PATCH 5/7] styling fixed with proper class cascade

---
 .../PersonsAssociated/ParticipationItem.vue   |  4 +--
 .../_components/Entity/PersonRenderBox.vue    | 33 ++++++++++++++-----
 2 files changed, 26 insertions(+), 11 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 1c2978b80..a50fa049f 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
@@ -2,11 +2,11 @@
 
    <person-render-box
       :options="{
-               addInfo : false,
+               addInfo : true,
                addId : true,
                addEntity: false,
                addLink: false,
-               addAltNames: false,
+               addAltNames: true,
                addAge : false,
                hLevel : 1
             }"
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 8d979d0b9..72f9a2c37 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -1,4 +1,7 @@
 <template>
+<div class="flex-table mb-3">
+    <div class="item-bloc">
+    <section class="chill-entity entity-person">
     <!-- ENTIRE RENDER_BOX -->
     <div class="item-row entity-bloc">
 
@@ -7,7 +10,7 @@
             <div class="entity-label">
 
                 <!-- NAME TAG -->
-                <div class="denomination **h_level**">
+                <div class="denomination h3">
                 
                     <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
                     <a v-if="this.options.addLink ==  true" href="#">
@@ -40,12 +43,13 @@
 
                 <!-- BIRTHDATE / DEATHDATE AND AGE -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
-                    <i class="fa fa-fw **gender**" title="**gender title**"></i>
+                    <i :class="'fa fa-fw' + this.gender" title="{{this.gender}}"></i>
                     <time datetime="13/05/1867" title="**birthdate**">
                         {{ participation.person.birthdate }}
                     </time>
                     <span class="age">{{ participation.person.age }}</span>
                 </p>
+                <p>{{this.gender}}</p>
                 <!-- END BIRTH/DEATH AND AGE -->
 
             </div>
@@ -61,10 +65,15 @@
 
                 <!-- PHONENUMBER -->
                 <li>
-                    <i class="fa fa-li fa-mobile"></i><a href="#">{{ participation.person.mobilenumber }}</a>
-                    <i class="fa fa-li fa-phone"></i>
-                    <a href="#">{{ participation.person.phonenumber }}</a>
-                    <span class="chill-no-data-statement">**no phonenumber**</span>
+                    <div v-if="this.participation.person.mobilenumber">
+                        <i class="fa fa-li fa-mobile"></i>
+                        <a href="#">{{ participation.person.mobilenumber }}</a>
+                    </div>
+                    <div v-else-if="this.participation.person.phonenumber">
+                        <i class="fa fa-li fa-phone"></i>
+                        <a href="#">{{ participation.person.phonenumber }}</a>
+                    </div>
+                    <span v-else class="chill-no-data-statement">No phonenumber listed</span>
                 </li>
             </ul>
             <!-- END ADDRESS AND PHONE NUMBER -->
@@ -81,19 +90,25 @@
         <!-- END EXTRA INFO AND ACTIONS -->
 
     </div>
+    </section>
+    </div>
+</div>
 </template>
 
 <script>
 export default {
     name: "PersonRenderBox",
-    props: ['participation', 'options'],  
+    props: ['participation', 'options'],
+    computed: {
+
+    }  
 }
 </script>
 
 <style>
 
-.item-row{
-    border: 1px solid black;
+.lastname:before{
+    content: " "
 }
 
 </style>

From b89a66b20cb35c00b79518e53452d6275c806895 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Fri, 13 Aug 2021 18:31:15 +0200
Subject: [PATCH 6/7] dynamic properties displayed

---
 .../_components/Entity/PersonRenderBox.vue    | 65 ++++++++++++++++---
 1 file changed, 55 insertions(+), 10 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 72f9a2c37..6fc3933a8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -19,7 +19,7 @@
                         <!-- IF ALT NAMES -->
                         <span v-if="this.options.addAltNames ==  true" class="altnames">
                             <!-- LOOP THROUGH ALT NAMES -->
-                            <span class="altname altname-**key**">**label**</span>
+                            <span class="altname altname-**key**">hello</span>
                             <!-- END LOOP -->
                         </span>
                     </a>
@@ -30,7 +30,7 @@
                     <!-- IF ALT NAMES -->
                     <span v-if="this.options.addAltNames ==  true" class="altnames">
                         <!-- LOOP THROUGH ALT NAMES -->
-                        <span class="altname altname-**key**">**label**</span>
+                        <span v-for="alt in participation.person.altnames" :key="alt.label" class="altname altname-**key**">{{ alt.label }}</span>
                         <!-- END LOOP -->
                     </span>
 
@@ -43,13 +43,12 @@
 
                 <!-- BIRTHDATE / DEATHDATE AND AGE -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
-                    <i :class="'fa fa-fw' + this.gender" title="{{this.gender}}"></i>
-                    <time datetime="13/05/1867" title="**birthdate**">
-                        {{ participation.person.birthdate }}
+                    <i :class="'fa fa-fw ' + getGender" title="{{ getGender }}"></i>
+                    <time datetime="{{ participation.person.birthdate }}" title="**birthdate**">
+                        Né le {{ birthdate }}
                     </time>
                     <span class="age">{{ participation.person.age }}</span>
                 </p>
-                <p>{{this.gender}}</p>
                 <!-- END BIRTH/DEATH AND AGE -->
 
             </div>
@@ -73,18 +72,48 @@
                         <i class="fa fa-li fa-phone"></i>
                         <a href="#">{{ participation.person.phonenumber }}</a>
                     </div>
-                    <span v-else class="chill-no-data-statement">No phonenumber listed</span>
+                    <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">
+            <!-- <ul class="record_actions">
                 <li>
                     <a class="btn btn-show" target="_blank" title="Show person"
                     href="#"></a>
                 </li>
-            </ul>
+            </ul> -->
             <!-- END ACTIONS -->
         </div>
         <!-- END EXTRA INFO AND ACTIONS -->
@@ -96,11 +125,27 @@
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
     name: "PersonRenderBox",
+    components: {
+        OnTheFly
+    },
     props: ['participation', 'options'],
     computed: {
-
+        getGender: function() {
+            // gender 
+            return this.participation.person.gender == 'woman' ? 'fa-venus' : this.participation.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}`;
+        },
     }  
 }
 </script>

From 77fe497994c19b5b4e79d0b3c457692cca1db575 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Sat, 14 Aug 2021 12:01:44 +0200
Subject: [PATCH 7/7] altNames displayed dynamically

---
 .../vuejs/_components/Entity/PersonRenderBox.vue  | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 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 6fc3933a8..d504cb60f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -19,7 +19,7 @@
                         <!-- IF ALT NAMES -->
                         <span v-if="this.options.addAltNames ==  true" class="altnames">
                             <!-- LOOP THROUGH ALT NAMES -->
-                            <span class="altname altname-**key**">hello</span>
+                            <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                             <!-- END LOOP -->
                         </span>
                     </a>
@@ -30,7 +30,7 @@
                     <!-- IF ALT NAMES -->
                     <span v-if="this.options.addAltNames ==  true" class="altnames">
                         <!-- LOOP THROUGH ALT NAMES -->
-                        <span v-for="alt in participation.person.altnames" :key="alt.label" class="altname altname-**key**">{{ alt.label }}</span>
+                        <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
                         <!-- END LOOP -->
                     </span>
 
@@ -50,7 +50,6 @@
                     <span class="age">{{ participation.person.age }}</span>
                 </p>
                 <!-- END BIRTH/DEATH AND AGE -->
-
             </div>
         </div>
         <!-- END LABEL -->
@@ -146,6 +145,16 @@ export default {
             var year = date.getFullYear()
             return `${day} ${months[month]} ${year}`;
         },
+        altNameLabel: function(){
+            for(let i = 0; i < this.participation.person.altNames.length; i++){
+                return this.participation.person.altNames[i].label
+            }
+        },
+        altNameKey: function(){
+            for(let i = 0; i < this.participation.person.altNames.length; i++){
+                return this.participation.person.altNames[i].key
+            }
+        },
     }  
 }
 </script>