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] 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>