ThirdPartyRenderBox created and old view replaced

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

@@ -69,7 +69,11 @@ const messages = {
             man: "Né le",
             woman: "Née le"
          } ,
-         no_information: "Pas d'information"
+         no_information: "Pas d'information",
+         type: {
+            thirdparty: "Tiers",
+            person: "Usager"
+         }
       }
    }
 };

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

@@ -15,16 +15,15 @@
             <th class="chill-orange">{{ $t('action.actions') }}</th>
          </tr>
       </thead>
-      <tbody>
-         <resource-item
-            v-for="resource in resources"
-            v-bind:resource="resource"
-            v-bind:key="resource.id"
-            @remove="removeResource">
-         </resource-item>
-      </tbody>
    </table>
-   
+   <div class="flex-table mb-3">
+      <resource-item
+         v-for="resource in resources"
+         v-bind:resource="resource"
+         v-bind:key="resource.id"
+         @remove="removeResource">
+      </resource-item>
+   </div>
    <div>
       <add-persons 
         buttonTitle="resources.add_resources"

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

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

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

@@ -1,5 +1,4 @@
 <template>
-
     <div class="item-bloc">
     <section class="chill-entity entity-person">
     <!-- ENTIRE RENDER_BOX -->
@@ -13,24 +12,34 @@
                 <!-- 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.name }}</span>
+                        <span class="name">{{ thirdparty.resource.text }}</span>
                     </a>
                     <!-- WITHOUT LINK JUST NAME -->
-                    <span v-else class="name">{{ thirdparty.name }}</span>
+                    <span class="name">{{ thirdparty.resource.text }}</span>
     
                     <!-- IF ADD ENTITY OPTION -->
-                    <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.third_party') }}</span>
-                    <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
+                  
+                    <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: what to add here as extra info? -->
+                    <!-- 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>
@@ -40,20 +49,21 @@
         <div class="item-col">
             <ul class="list-content fa-ul">
                 <!-- ADDRESS -->
-                <li v-if="thirdparty.address" class="chill-entity entity-address">
-                    <i class="fa fa-fw fa-map-marker"></i>
-                    <show-address :address="thirdparty.address" :multiline="false"></show-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="this.thirdparty.telephone" :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
+                    <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>
+                <li v-if="thirdparty.resource.type == 'thirdparty'">
                     <i class="fa fa-li fa-envelope-o"></i>
-                    <a v-if="this.thirdparty.telephone" :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
+                    <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>
@@ -72,21 +82,44 @@
 
 <script>
 import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
+import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 
 export default {
     name: "ThirdPartyRenderBox",
     components: {
-        ThirdPartyRenderBox,
         ShowAddress
     },
-    props: ['thirdparty', 'options'], 
+    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>
+<style lang="scss">
 
-.lastname:before{
-    content: " "
+.lastname{
+    &:before{
+        content: " "
+    }
+}
+.name{
+    &:before{
+        content: " "
+    }
 }
 
 </style>