AddressRenderBox created and added to PersonRenderBox, still some styling issue with address. Render options not done yet

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>

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>

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 -->
+                <address-render-box
-                </li>
+                :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>
+                <li v-if="this.person.mobilenumber">
-                    <div v-if="this.person.mobilenumber">
+                    <i class="fa fa-li fa-mobile"></i>
-                        <i class="fa fa-li fa-mobile"></i>
+                    <a href="#">{{ person.mobilenumber }}</a>
-                        <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>
+                <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(){