Merge branch 'ameliorations_composants_vue' of gitlab.com:Chill-Projet/chill-bundles into ameliorations_composants_vue

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue

@@ -1,18 +1,39 @@
 <template>
-   <div class="chill-entity entity-address my-3">
+<div class="chill-entity entity-address my-3"></div>
-      <div class="address multiline">
+   
-         <p v-if="address.text"
+   <component :is="component" :class="'address'+ isMultiline">
-            class="street">
+      <p v-if="address.text"
-            {{ address.text }}
+         class="street">
-         </p>
+         {{ address.text }},
-         <p v-if="address.postcode"
+      </p>
-            class="postcode">
+      <p v-if="address.postcode"
-            {{ address.postcode.code }} {{ address.postcode.name }}
+         class="postcode">
-         </p>
+         {{ address.postcode.code }} {{ address.postcode.name }}
-         <p v-if="address.country"
+      </p>
-            class="country">
+      <p v-if="address.country"
-            {{ address.country.name.fr }}
+         class="country">
-         </p>
+         {{ address.country.name.fr }}
+      </p>
+
+      <div v-if="address.floor">
+         <span class="floor">
+            <b>{{ $t('floor') }}</b>: {{ address.floor }}
+         </span>
+      </div>
+      <div v-if="address.corridor">
+         <span class="corridor">
+            <b>{{ $t('corridor') }}</b>: {{ address.corridor }}
+         </span>
+      </div>
+      <div v-if="address.steps">
+         <span class="steps">
+            <b>{{ $t('steps') }}</b>: {{ address.steps }}
+         </span>
+      </div>
+      <div v-if="address.flat">
+         <span class="flat">
+            <b>{{ $t('flat') }}</b>: {{ address.flat }}
+         </span>
       </div>
       <div>
          <div v-if="address.floor">
@@ -51,12 +72,38 @@
             </span>
          </div>
       </div>
-   </div>
+   </component>
+
 </template>
 
 <script>
 export default {
-   name: "ShowAddress",
+   name: 'ShowAddress',
-   props: ['address']
+   props: {
-}
+      address: {
+         type: Object
+      },
+      multiline: {
+         default: true,
+         type: Boolean
+      }
+   },
+   computed: {
+      component(){
+         return this.multiline == true ? "div" : "span";
+      },
+      isMultiline(){
+         return this.multiline == true ? " multiline" : "";
+      }
+   }
+};
 </script>
+
+<style lang="scss" scoped>
+p{
+   &:after{
+      content: " ";
+      margin-right: 0.3em;
+   }
+}
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js

@@ -65,6 +65,18 @@ const messages = {
             thirdparty: "un nouveau tiers professionnel"
          },
       },
+      renderbox: {
+         person: "Person",
+         birthday: {
+            man: "Né le",
+            woman: "Née le"
+         } ,
+         no_information: "Pas d'information",
+         type: {
+            thirdparty: "Tiers",
+            person: "Usager"
+         }
+      }
    }
 };
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -93,8 +93,9 @@ export default {
          }
          & > div {
             margin: 1em 3em 0;
-         }
+            &.flex-table {
-         table {
+               margin: 1em 0 0;
+            }
          }
 
          &.errors {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue

@@ -9,33 +9,15 @@
       <label class="chill-no-data-statement">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
 
-   <participation-item
+   <div class="flex-table mb-3">
-      v-for="participation in participations"
+      <participation-item
-      v-bind:participation="participation"
+         v-for="participation in participations"
-      v-bind:key="participation.id"
+         v-bind:participation="participation"
-      @remove="removeParticipation"
+         v-bind:key="participation.id"
-      @close="closeParticipation">
+         @remove="removeParticipation"
-   </participation-item>
+         @close="closeParticipation">
-
+      </participation-item>
-   <!-- <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
+   </div>
-      <thead>
-         <tr>
-            <th class="chill-orange">{{ $t('persons_associated.name') }}</th>
-            <th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>
-            <th class="chill-orange">{{ $t('persons_associated.enddate') }}</th>
-            <th class="chill-orange">{{ $t('action.actions') }}</th>
-         </tr>
-      </thead>
-      <tbody>
-         <participation-item
-            v-for="participation in participations"
-            v-bind:participation="participation"
-            v-bind:key="participation.id"
-            @remove="removeParticipation"
-            @close="closeParticipation">
-         </participation-item>
-      </tbody>
-   </table> -->
 
    <div>
       <add-persons

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue

@@ -1,5 +1,4 @@
 <template>
-
    <person-render-box
       :options="{
                addInfo : true,
@@ -10,61 +9,53 @@
                addAge : false,
                hLevel : 1
             }"
-      :participation="participation">
+      :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-sm btn-remove"
+                  v-bind:title="$t('action.remove')"
+                  @click.prevent="$emit('close', participation)">
+               </button>
+               <button v-else class="btn btn-sm btn-remove disabled"></button>
+            </li>
+         </ul>
+
+      </template>
    </person-render-box>
 
-<!-- <tr>
+   <!-- dates of participation
-   <td>
+      <tr>
-      {{ participation.person.firstName }}
+         <td><span v-if="participation.startDate">
-      {{ participation.person.lastName }}
+             {{ $d(participation.startDate.datetime, 'short') }}</span>
-      <person-render-box
+         </td>
-         v-bind:options="options"
+         <td><span v-if="participation.endDate">
-         v-bind:participation="participation"
+             {{ $d(participation.endDate.datetime, 'short') }}</span>
-      ></person-render-box>
+         </td>
-   </td>
+      </tr>
-   <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>
-      <ul class="record_actions">
-         <button-location
-            v-if="hasCurrentHouseholdAddress"
-            v-bind:person="participation.person">
-         </button-location>
-         <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-sm btn-remove"
-               v-bind:title="$t('action.remove')"
-               @click.prevent="$emit('close', participation)">
-            </button>
-            <button v-else class="btn btn-sm btn-remove" disabled></button>
-         </li>
-      </ul>
-   </td>
-</tr> -->
 </template>
 
 <script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue

@@ -10,24 +10,14 @@
       <label class="chill-no-data-statement">{{ $tc('resources.counter', counter) }}</label>
    </div>
 
-   <table class="table table-bordered table-striped border-dark align-middle" v-if="resources.length > 0">
+   <div class="flex-table mb-3">
-      <thead>
+      <resource-item
-         <tr>
+         v-for="resource in resources"
-            <th class="chill-orange">{{ $t('resources.text') }}</th>
+         v-bind:resource="resource"
-            <th class="chill-orange">{{ $t('resources.description') }}</th>
+         v-bind:key="resource.id"
-            <th class="chill-orange">{{ $t('action.actions') }}</th>
+         @remove="removeResource">
-         </tr>
+      </resource-item>
-      </thead>
+   </div>
-      <tbody>
-         <resource-item
-            v-for="resource in resources"
-            v-bind:resource="resource"
-            v-bind:key="resource.id"
-            @remove="removeResource">
-         </resource-item>
-      </tbody>
-   </table>
-
    <div>
       <add-persons
         buttonTitle="resources.add_resources"

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue

@@ -1,64 +1,52 @@
 <template>
-<tr>
+      <third-party-render-box
+         :options="{
+            addLink : false,
+            addId : false,
+            addEntity: true,
+            addInfo: true
+         }"
+         :thirdparty="resource">
 
-   <td>
+         <template v-slot:record-actions>
-      <span class="badge rounded-pill bg-secondary"
+            <ul class="record_actions">
-         v-bind:title="resource.resource.id">
+               <li>
-         <span v-if="resource.resource.type === 'person'" >{{ $t('item.type_person') }}</span>
+                  <on-the-fly
-         <span v-if="resource.resource.type === 'thirdparty'" >{{ $t('item.type_thirdparty') }}</span>
+                     v-bind:type="resource.resource.type"
-      </span>
+                     v-bind:id="resource.resource.id"
-      {{ resource.resource.text }}
+                     action="show">
-   </td>
+                  </on-the-fly>
-
+               </li>
-   <td v-if="resource.resource.type === 'person'">
+               <li>
-      {{ $tc('person.born') }}{{ $d(resource.resource.birthdate.datetime, 'short') }}
+                  <on-the-fly
-   </td>
+                     v-bind:type="resource.resource.type"
-   <td v-else-if="resource.resource.type === 'thirdparty'">
+                     v-bind:id="resource.resource.id"
-      {{ resource.resource.address.text }}<br>
+                     action="edit">
-      {{ resource.resource.address.postcode.name }}
+                  </on-the-fly>
-   </td>
+               </li>
-
+               <li>
-   <td>
+                  <button
-      <ul class="record_actions">
+                     class="btn btn-sm btn-remove"
-         <button-location
+                     v-bind:title="$t('action.remove')"
-            v-if="hasCurrentHouseholdAddress"
+                     @click.prevent="$emit('remove', resource)">
-            v-bind:person="resource.resource">
+                  </button>
-         </button-location>
+               </li>
-         <li>
+            </ul>
-            <on-the-fly
+         </template>
-               v-bind:type="resource.resource.type"
+      </third-party-render-box>
-               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-sm btn-remove"
-               v-bind:title="$t('action.remove')"
-               @click.prevent="$emit('remove', resource)">
-            </button>
-         </li>
-      </ul>
-   </td>
-</tr>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
+import ThirdPartyRenderBox from '../../../../../../../ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue'
 
 export default {
    name: 'ResourceItem',
    components: {
       OnTheFly,
-      ButtonLocation
+      ButtonLocation,
+      ThirdPartyRenderBox
    },
    props: ['resource'],
    emits: ['remove'],

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue

@@ -0,0 +1,48 @@
+// CURRENTLY NOT IN USE
+
+<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 ' + {'multiline' : options.multiline === true}">
+                
+                    
+                    <!-- 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

@@ -1,5 +1,5 @@
 <template>
-<div class="flex-table mb-3">
+
     <div class="item-bloc">
     <section class="chill-entity entity-person">
     <!-- ENTIRE RENDER_BOX -->
@@ -10,12 +10,14 @@
             <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">{{ participation.person.firstName }}</span>
+                        <span class="firstname">{{ person.firstName }}</span>
-                        <span class="lastname">{{ participation.person.lastName }}</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 +27,8 @@
                     </a>
 
                     <!-- WITHOUT LINK JUST NAME -->
-                    <span class="firstname">{{ participation.person.firstName }}</span>
+                    <span class="firstname">{{ person.firstName }}</span>
-                    <span class="lastname">{{ participation.person.lastName }}</span>
+                    <span class="lastname">{{ person.lastName }}</span>
                     <!-- IF ALT NAMES -->
                     <span v-if="this.options.addAltNames ==  true" class="altnames">
                         <!-- LOOP THROUGH ALT NAMES -->
@@ -35,124 +37,97 @@
                     </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° 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 -->
 
                 <!-- 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? -->
-                    <time datetime="{{ participation.person.birthdate }}" title="**birthdate**">
+                    <i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
-                        Né le {{ birthdate }}
+                    <time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}">
+                        {{ $t(getGender) + ' ' + $d(birthdate, 'text') }}
                     </time>
-                    <span class="age">{{ participation.person.age }}</span>
+                    <time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
+                        {{ birthdate }} - {{ deathdate }}
+                    </time>
+                    <span class="age">{{ person.age }}</span>
                 </p>
                 <!-- END BIRTH/DEATH AND AGE -->
             </div>
         </div>
         <!-- END LABEL -->
 
-        <!-- EXTRA INFO AND ACTIONS-->
+        <!-- CONTACT INFO AND ACTIONS-->
         <div class="item-col">
             <ul class="list-content fa-ul">
-                <li>
                 <!-- ADDRESS -->
+                <li v-if="person.current_household_address" class="chill-entity entity-address">
+                    <i class="fa fa-li fa-map-marker"></i>
+                    <show-address :address="person.current_household_address" :multiline="false"></show-address>
                 </li>
-
                 <!-- PHONENUMBER -->
-                <li>
+                <!-- todo: change href for phonenumbers and format phone number? -->
-                    <div v-if="this.participation.person.mobilenumber">
+                <li v-if="this.person.mobilenumber">
-                        <i class="fa fa-li fa-mobile"></i>
+                    <i class="fa fa-li fa-mobile"></i>
-                        <a href="#">{{ participation.person.mobilenumber }}</a>
+                    <a :href="'tel: ' + person.mobilenumber">{{ 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">Pas d'information</span>
                 </li>
-            </ul>
+                <li v-else-if="this.person.phonenumber">
-            <ul class="record_actions">
+                    <i class="fa fa-li fa-phone"></i>
-                <li>
+                    <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
-                    <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>
+                <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
+                
             </ul>
             <!-- END ADDRESS AND PHONE NUMBER -->
 
             <!-- ACTION BUTTONS -->
-            <!-- <ul class="record_actions">
+            <slot name="record-actions"></slot>
-                <li>
-                    <a class="btn btn-show" target="_blank" title="Show person"
-                    href="#"></a>
-                </li>
-            </ul> -->
             <!-- END ACTIONS -->
         </div>
-        <!-- END EXTRA INFO AND ACTIONS -->
+        <!-- END CONTACT INFO AND ACTIONS -->
-
     </div>
     </section>
     </div>
-</div>
+
 </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 ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
 
 export default {
     name: "PersonRenderBox",
     components: {
-        OnTheFly
+        ShowAddress
     },
-    props: ['participation', 'options'],
+    props: ['person', 'options'],
     computed: {
         getGender: function() {
-            // gender 
+            return this.person.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
-            return this.participation.person.gender == 'woman' ? 'fa-venus' : this.participation.person.gender == 'man' ? 'fa-mars' : 'fa-neuter';
+        },
+        getGenderIcon: function() {
+            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 date = new Date(this.person.birthdate.datetime);
-            var day = date.getDate()
+            return dateToISO(date);
-            var months = ["Jan.", "Fevr.", "Mars", "Avril", "Mai", "Juin", "Juill.", "Août", "Sept.", "Oct.", "Nov.", "Dec."]
+        },
-            var month = date.getMonth()
+        deathdate: function(){
-            var year = date.getFullYear()
+            var date = new Date(this.person.deathdate.datetime);
-            return `${day} ${months[month]} ${year}`;
+            return dateToISO(date);
         },
         altNameLabel: function(){
-            for(let i = 0; i < this.participation.person.altNames.length; i++){
+            for(let i = 0; i < this.person.altNames.length; i++){
-                return this.participation.person.altNames[i].label
+                return this.person.altNames[i].label
             }
         },
         altNameKey: function(){
-            for(let i = 0; i < this.participation.person.altNames.length; i++){
+            for(let i = 0; i < this.person.altNames.length; i++){
-                return this.participation.person.altNames[i].key
+                return this.person.altNames[i].key
             }
         },
     }  

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue

@@ -0,0 +1,127 @@
+<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">
+                
+                    <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.resource.text }}</span>
+                    </a>
+                    <!-- WITHOUT LINK JUST NAME -->
+                    <span class="name">{{ thirdparty.resource.text }}</span>
+    
+                    <!-- IF ADD ENTITY OPTION -->
+                  
+                    <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: 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>
+        <!-- END LABEL -->
+
+        <!-- CONTACT INFO AND ACTIONS-->
+        <div class="item-col">
+            <ul class="list-content fa-ul">
+                <!-- 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="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 v-if="thirdparty.resource.type == 'thirdparty'">
+                    <i class="fa fa-li fa-envelope-o"></i>
+                    <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>
+            <!-- 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';
+import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
+
+export default {
+    name: "ThirdPartyRenderBox",
+    components: {
+        ShowAddress
+    },
+    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 lang="scss">
+
+.lastname{
+    &:before{
+        content: " "
+    }
+}
+.name{
+    &:before{
+        content: " "
+    }
+}
+
+</style>
+
+