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

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 -->
-                </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(){