onTheFly with hardcoded data. needs to be changed when endpoint is created

src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig

@@ -54,7 +54,7 @@
     {{ form_row(edit_form.date) }}
 {% endif %}
 
-.. location
+{# TODO .. location #}
 
 {%- if edit_form.durationTime is defined -%}
     {{ form_row(edit_form.durationTime) }}
@@ -65,7 +65,7 @@
 {% endif %}
 
 {%- if edit_form.comment is defined -%}
-    .. public and private
+    {# TODO .. public and private #}
     {{ form_row(edit_form.comment) }}
 {% endif %}
 
@@ -77,7 +77,7 @@
     {{ form_row(edit_form.attendee) }}
 {% endif %}
 
-.. status
+{# TODO .. status #}
 
 {% set person_id = null %}
 {% if entity.person %}

src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig

@@ -55,7 +55,7 @@
     {{ form_row(form.date) }}
 {% endif %}
 
-.. location
+{# TODO .. location #}
 
 {%- if form.durationTime is defined -%}
     {{ form_row(form.durationTime) }}
@@ -66,7 +66,7 @@
 {% endif %}
 
 {%- if form.comment is defined -%}
-    .. public and private
+    {# TODO .. public and private #}
     {{ form_row(form.comment) }}
 {% endif %}
 
@@ -78,7 +78,7 @@
     {{ form_row(form.attendee) }}
 {% endif %}
 
-.. status
+{# TODO .. status #}
 
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">

src/Bundle/ChillActivityBundle/translations/messages.fr.yml

@@ -81,9 +81,9 @@ activity:
 '%user% has done an %activity_type%': '%user% a effectué une activité de type "%activity_type%"'
 
 #controller
-'Success : activity created!': Bravo ! L'activité a été créée.
+'Success : activity created!': L'activité a été créée.
 'The form is not valid. The activity has not been created !': Le formulaire est invalide. L'activité n'a pas été créée.
-'Success : activity updated!': Bravo ! L'activité a été mise à jour.
+'Success : activity updated!': L'activité a été mise à jour.
 'The form is not valid. The activity has not been updated !': Le formulaire est invalide. L'activité n'a pas été mise à jour.
 
 # ROLES

src/Bundle/ChillAsideActivityBundle/src/Form/AsideActivityFormType.php

@@ -17,15 +17,19 @@ use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\FormEvent;
 use Symfony\Component\Form\FormEvents;
+use Symfony\Component\Security\Core\Authentication\Token\Storage\TokenStorageInterface;
+use Symfony\Component\Security\Core\Security;
 
 final class AsideActivityFormType extends AbstractType
 {
     protected array $timeChoices;
     private TranslatableStringHelper $translatableStringHelper;
+    private TokenStorageInterface $storage;
 
-    public function __construct (TranslatableStringHelper $translatableStringHelper, array $timeChoices){
+    public function __construct (TranslatableStringHelper $translatableStringHelper, array $timeChoices, TokenStorageInterface $storage){
         $this->timeChoices = $timeChoices;
         $this->translatableStringHelper = $translatableStringHelper;
+        $this->storage = $storage;
     }
 
     public function buildForm(FormBuilderInterface $builder, array $options)
@@ -48,7 +52,8 @@ final class AsideActivityFormType extends AbstractType
                 'label' => 'Agent',
                 'required' => true,
                 'class' => User::class,
-                //translate
+                'data' => $this->storage->getToken()->getUser(),
+                'attr' => array('class' => 'select2 '),
                 'placeholder' => 'Choose the agent for whom this activity is created',
                 'choice_label' => 'username'
             ])

src/Bundle/ChillAsideActivityBundle/src/Resources/views/asideActivity/list.html.twig

@@ -1,12 +1,14 @@
 {% extends "@ChillMain/layout.html.twig" %}
 
+{% block title %}{{ 'Aside activity list' |trans }}{% endblock title %}
+
 {% block content %}
 <div class="col-md-10 col-xxl asideactivity-list">
 <h2>{{ 'My aside activities' |trans }}</h2>
 
 {% if entities|length == 0 %}
     <p class="chill-no-data-statement">
-        {{ "There isn't any activities."|trans }}
+        {{ "There aren't any aside activities."|trans }}
         <a href="{{ path('chill_crud_aside_activity_new') }}" class="btn btn-create button-small"></a>
     </p>
 {% else %}
@@ -30,13 +32,13 @@
                     {% if entity.date %}
                         <p>{{ entity.date|format_date('long') }}</p>
                     {% endif %}
-{# 
+
                     <div class="duration">
                             <p>
                                 <i class="fa fa-fw fa-hourglass-end"></i>
                                 {{ entity.duration|date('H:i') }}
                             </p>
-                    </div> #}
+                    </div>
 
                 </div>
                 <div class="item-col">
@@ -66,9 +68,9 @@
             <div class="item-col">
                 <ul class="list-content">
                     <ul class="record_actions">
-                        <li>
+                        {# <li>
                             <a href="{{ path('chill_crud_aside_activity_view', { 'id': entity.id} ) }}" class="btn btn-show "></a>
-                        </li>
+                        </li> #}
                         {# TOOD
                         {% if is_granted('CHILL_ACTIVITY_UPDATE', activity) %}
                         #}
@@ -91,18 +93,15 @@
         </div>
         {% endif %}
     {% endfor %}
+</div>
+    <ul class="record_actions">
+        <li>
+            <a href="{{ path('chill_crud_aside_activity_new') }}" class="btn btn-create">
+                {{ 'Add a new aside activity' | trans }}
+            </a>
+        </li>
+    </ul>
 </div>
 {% endif %}
 
-
-
-{# TODO set this condition in configuration #}
-  <ul class="record_actions">
-      <li>
-          <a href="{{ path('chill_crud_aside_activity_new') }}" class="btn btn-create">
-              {{ 'Add a new activity' | trans }}
-          </a>
-      </li>
-  </ul>
-</div>
-   {% endblock %}
+{% endblock %}

src/Bundle/ChillAsideActivityBundle/src/Resources/views/asideActivityCategory/index.html.twig

@@ -36,8 +36,8 @@
 
         <ul class="record_actions">
         <li>
-            <a href="{{ path('chill_crud_activity_type_new') }}" class="btn btn-create">
-                {{ 'Create a new activity type'|trans }}
+            <a href="{{ path('chill_crud_aside_activity_category_new') }}" class="btn btn-create">
+                {{ 'Create a new aside activity type'|trans }}
             </a>
         </li>
     </ul>

src/Bundle/ChillAsideActivityBundle/src/config/services/form.yaml

@@ -5,5 +5,6 @@ services:
         arguments:
             - "@chill.main.helper.translatable_string"
             - "%chill_activity.form.time_duration%"
+            - "@security.token_storage"
         tags:
             - { name: form.type, alias: chill_asideactivitybundle_asideactivity }

src/Bundle/ChillAsideActivityBundle/src/translations/messages.fr.yml

@@ -8,7 +8,7 @@ user_username: nom de l'utilisateur
 Remark: Commentaire
 No comments: Aucun commentaire
 Add a new aside activity: Ajouter une nouvelle activité annexe
-Aside activity list: Liste des activités annexes
+Aside activity list: Activités annexes
 present: présent
 not present: absent
 Delete: Supprimer
@@ -32,7 +32,7 @@ location: Lieu
 crud:
   aside_activity:
     title_view: Détail de l'activité annexe
-    title_new: Nouveau activité annexe
+    title_new: Nouvelle activité annexe
     title_edit: Edition d'une activité annexe
     title_delete: Supprimation d'une activité annexe
     button_delete: Supprimer
@@ -43,14 +43,20 @@ crud:
 
 #forms
 Activity creation: Nouvelle activité annexe
+Create a new aside activity type: Nouvelle categorie d'activité annexe
 Create: Créer
 Back to the list: Retour à la liste
 Save activity: Sauver l'activité
 Reset form: Remise à zéro du formulaire
-Choose the agent for whom this activity is created: Choissisez l'agent pour qui l'activitée est creeé.
+Choose the agent for whom this activity is created: Choissisez l'utilisateur pour qui l'activité est creéé.
 Choose the activity category: Choissisez le type d'activité
 Choose the duration: Choisir la durée
 Choose a category: Choisir un categorie
+Is active: Actif
+Agent: Utilisateur
+date: Date
+Duration: Durée
+Note: Note
 5 minutes: 5 minutes
 10 minutes: 10 minutes
 15 minutes: 15 minutes

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

@@ -1,9 +1,10 @@
 <template>
-   <div class="chill-entity entity-address my-3">
-      <div class="address multiline">
+   <component :is="component" class="chill-entity entity-address my-3">
+
+      <component :is="component" class="address" :class="multiline">
          <p v-if="address.text"
             class="street">
-            {{ address.text }}
+            {{ address.text }},
          </p>
          <p v-if="address.postcode"
             class="postcode">
@@ -13,8 +14,9 @@
             class="country">
             {{ address.country.name.fr }}
          </p>
-      </div>
-      <div>
+      </component>
+
+      <div v-if="isMultiline">
          <div v-if="address.floor">
             <span class="floor">
                <b>{{ $t('floor') }}</b>: {{ address.floor }}
@@ -35,28 +37,76 @@
                <b>{{ $t('flat') }}</b>: {{ address.flat }}
             </span>
          </div>
-         <div v-if="address.buildingName">
-            <span class="buildingName">
-               <b>{{ $t('buildingName') }}</b>: {{ address.buildingName }}
-            </span>
-         </div>
-         <div v-if="address.extra">
-            <span class="extra">
-               <b>{{ $t('extra') }}</b>: {{ address.extra }}
-            </span>
-         </div>
-         <div v-if="address.distribution">
-            <span class="distribution">
-               <b>{{ $t('distribution') }}</b>: {{ address.distribution }}
-            </span>
+         <div>
+            <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 v-if="address.buildingName">
+               <span class="buildingName">
+                  <b>{{ $t('buildingName') }}</b>: {{ address.buildingName }}
+               </span>
+            </div>
+            <div v-if="address.extra">
+               <span class="extra">
+                  <b>{{ $t('extra') }}</b>: {{ address.extra }}
+               </span>
+            </div>
+            <div v-if="address.distribution">
+               <span class="distribution">
+                  <b>{{ $t('distribution') }}</b>: {{ address.distribution }}
+               </span>
+            </div>
          </div>
       </div>
-   </div>
+
+   </component>
 </template>
 
 <script>
 export default {
-   name: "ShowAddress",
-   props: ['address']
-}
+   name: 'ShowAddress',
+   props: {
+      address: {
+         type: Object
+      },
+      isMultiline: {
+         default: true,
+         type: Boolean
+      }
+   },
+   computed: {
+      component(){
+         return this.isMultiline == true ? "div" : "span";
+      },
+      multiline(){
+         return this.isMultiline == true ? "multiline" : "";
+      }
+   }
+};
 </script>
+
+<style lang="scss" scoped>
+p {
+   &:after {
+      content: " ";
+      margin-right: 0.3em;
+   }
+}
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly.vue

@@ -43,8 +43,9 @@
 
          <template v-slot:footer>
             <button v-if="action === 'show'"
-               @click="changeActionTo('edit')"
-               class="btn btn-update">
+               @click="goToLocation(id, type)"
+               :title="$t(titleMessage)"
+               class="btn btn-show">{{ $t(buttonMessage) }}
             </button>
             <button v-else
                class="btn btn-save"
@@ -60,9 +61,9 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
-import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
-import OnTheFlyThirdparty from './OnTheFly/ThirdParty.vue';
 import OnTheFlyCreate from './OnTheFly/Create.vue';
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
+import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
 
 export default {
    name: 'OnTheFly',
@@ -115,6 +116,22 @@ export default {
             case 'create':
                return 'onthefly.create.title';
          }
+      },
+      titleMessage() {
+         switch (this.type){
+            case 'person':
+               return 'action.redirect.' + this.type;
+            case 'thirdparty':
+               return 'action.redirect.' + this.type;
+         }
+      },
+      buttonMessage(){
+         switch (this.type){
+            case 'person':
+               return 'onthefly.show.file_' + this.type;
+            case 'thirdparty':
+               return 'onthefly.show.file_' + this.type;
+         }
       }
    },
    methods: {
@@ -139,6 +156,13 @@ export default {
             this.$refs.castNew.castByType();
          }
          this.modal.showModal = false;
+      },
+      goToLocation(id, type){
+         if(type == 'person'){
+            window.location = `../../person/${id}/general`
+         } else if(type == 'thirdparty') {
+            window.location = `../../thirdparty/thirdparty/${id}/show`
+         }
       }
    }
 }
@@ -148,4 +172,5 @@ export default {
 a {
    cursor: pointer;
 }
+
 </style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue

@@ -35,7 +35,7 @@
 
 <script>
 import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
-import OnTheFlyThirdparty from './ThirdParty.vue'; // TODO move in ChillThirdpartyAssets
+import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue'; 
 
 export default {
    name: "OnTheFlyCreate",

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue

@@ -1,23 +0,0 @@
-<template>
-   <div v-if="action === 'show'">
-      show
-      thirdparty
-      {{ id }}
-   </div>
-   <div v-else-if="action === 'edit' || action === 'create'">
-      {{ action }}
-      thirdparty 
-      {{ id }}
-   </div>
-</template>
-
-<script>
-export default {
-   name: "OnTheFlyThirdParty",
-   props: ['id', 'type', 'action']
-}
-// TODO move in ChillThirdpartyAssets
-</script>
-
-<style lang="css" scoped>
-</style>

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

@@ -41,7 +41,11 @@ const messages = {
          close: "Fermer",
          back: "Retour",
          check_all: "cocher tout",
-         reset: "réinitialiser"
+         reset: "réinitialiser",
+         redirect: {
+            person: "Quitter la page et ouvrir le dossier",
+            thirdparty: "Quitter la page et voir le tiers",
+         }
       },
       nav: {
          next: "Suivant",
@@ -52,7 +56,9 @@ const messages = {
       onthefly: {
          show: {
             person: "Détails de l'usager",
-            thirdparty: "Détails du tiers"
+            thirdparty: "Détails du tiers",
+            file_person: "Ouvrir le dossier",
+            file_thirdparty: "Voir le Tiers",
          },
          edit: {
             person: "Modifier un usager",
@@ -65,6 +71,18 @@ const messages = {
             thirdparty: "un nouveau tiers professionnel"
          },
       },
+      renderbox: {
+         person: "Person",
+         birthday: {
+            man: "Né le",
+            woman: "Née le"
+         } ,
+         no_data: "Aucune information renseignée",
+         type: {
+            thirdparty: "Tiers",
+            person: "Usager"
+         }
+      }
    }
 };
 

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

@@ -93,8 +93,17 @@ export default {
          }
          & > div {
             margin: 1em 3em 0;
+            &.flex-table {
+               margin: 1em 0 0;
+            }
          }
-         table {
+
+         div.flex-table {
+            div.item-row {
+               div.item-col:first-child {
+                  flex-basis: 33%;
+               }
+            }
          }
 
          &.errors {

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

@@ -9,25 +9,15 @@
       <label class="chill-no-data-statement">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
 
-   <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
-      <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>
-         <person-item
-            v-for="participation in participations"
-            v-bind:participation="participation"
-            v-bind:key="participation.id"
-            @remove="removeParticipation"
-            @close="closeParticipation">
-         </person-item>
-      </tbody>
-   </table>
+   <div class="flex-table mb-3">
+      <participation-item
+         v-for="participation in participations"
+         v-bind:participation="participation"
+         v-bind:key="participation.id"
+         @remove="removeParticipation"
+         @close="closeParticipation">
+      </participation-item>
+   </div>
 
    <div>
       <add-persons
@@ -45,13 +35,13 @@
 
 <script>
 import { mapState } from 'vuex';
-import PersonItem from "./PersonsAssociated/PersonItem.vue"
+import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue"
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
 
 export default {
    name: 'PersonsAssociated',
    components: {
-      PersonItem,
+      ParticipationItem,
       AddPersons
    },
    data() {

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

@@ -0,0 +1,111 @@
+<template>
+   <person-render-box
+      :options="{
+               addInfo : true,
+               addId : false,
+               addEntity: false,
+               addLink: false,
+               addAltNames: true,
+               addAge : false,
+               hLevel : 3,
+            }"
+      :person="participation.person">
+
+      <template v-slot:record-actions>
+         <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>
+
+      </template>
+   </person-render-box>
+</template>
+
+<script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import ButtonLocation from '../ButtonLocation.vue';
+import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+
+export default {
+   name: 'ParticipationItem',
+   components: {
+      OnTheFly,
+      ButtonLocation,
+      PersonRenderBox
+   },
+   props: ['participation'],
+   emits: ['remove', 'close'],
+   data() {
+      return {
+         PersonRenderBox: {
+            participation: 'participation',
+            options: {
+               addInfo: false,
+               addId: true,
+               addAge: false,
+               hLevel: 1
+            }
+         }
+      }
+   },
+   computed: {
+      hasCurrentHouseholdAddress() {
+         if ( !this.participation.endDate
+            && this.participation.person.current_household_address !== null ) {
+            return true;
+         }
+         return false;
+      }
+   }
+}
+
+/*
+ *  dates of participation
+ *
+ *   :title="$t('persons_associated.date_start_to_end', {
+ *      start: $d(participation.startDate.datetime, 'short'),
+ *      end: $d(participation.endDate.datetime, 'short')
+ *   })"
+ *
+ *   <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>
+ *   </tr>
+ *
+*/
+</script>

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

@@ -1,74 +0,0 @@
-<template>
-<tr>
-   <td>
-      {{ participation.person.firstName }}
-      {{ participation.person.lastName }}
-   </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>
-      <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>
-import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
-import ButtonLocation from '../ButtonLocation.vue';
-
-export default {
-   name: 'PersonItem',
-   components: {
-      OnTheFly,
-      ButtonLocation
-   },
-   props: ['participation'],
-   emits: ['remove', 'close'],
-   computed: {
-      hasCurrentHouseholdAddress() {
-         if ( !this.participation.endDate
-            && this.participation.person.current_household_address !== null ) {
-            return true;
-         }
-         return false;
-      }
-   }
-}
-</script>

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

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-component">
-
+<!-- {{ accompanyingCourse.requestor }} -->
    <h2><a name="section-40"></a>{{ $t('requestor.title') }}</h2>
 
    <div v-if="accompanyingCourse.requestor" class="flex-table">
@@ -10,8 +10,49 @@
          {{ $t('requestor.is_anonymous') }}
       </label>
       
-      <div class="item-bloc">
-         <h4>
+      <third-party-render-box v-if="accompanyingCourse.requestor.type == 'thirdparty'"
+         :thirdparty="accompanyingCourse.requestor"
+         :options="{
+            addLink: false,
+            addId: false,
+            addEntity: true,
+            addInfo: true,
+            hLevel: 3,
+            isMultiline: true
+            }"
+      >
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <button-location v-if="hasCurrentHouseholdAddress" :thirdparty="accompanyingCourse.requestor"></button-location>
+            <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
+            <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit"></on-the-fly></li>
+         </ul>
+      </template>
+      </third-party-render-box>
+
+      <person-render-box v-else-if="accompanyingCourse.requestor.type == 'person'"
+         :person="accompanyingCourse.requestor"
+         :options="{
+            addLink: false,
+            addId: false,
+            addAltNames: false,
+            addEntity: true,
+            addInfo: true,
+            hLevel: 3,
+            isMultiline: true
+            }"
+      >
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <button-location v-if="hasCurrentHouseholdAddress" :person="accompanyingCourse.requestor"></button-location>
+            <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="show"></on-the-fly></li>
+            <li><on-the-fly :type="accompanyingCourse.requestor.type" :id="accompanyingCourse.requestor.id" action="edit"></on-the-fly></li>
+         </ul>
+      </template>
+      </person-render-box>
+      
+
+         <!-- <h4>
             <span class="badge rounded-pill bg-secondary">{{ accompanyingCourse.requestor.type }}</span>
             {{ accompanyingCourse.requestor.text }}
          </h4>
@@ -54,8 +95,8 @@
                   action="edit">
                </on-the-fly>
             </li>
-         </ul>
-      </div>
+         </ul> -->
+
       <ul class="record_actions">
          <li>
             <button class="btn btn-remove"
@@ -87,12 +128,16 @@
 <script>
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import PersonRenderBox from '../../_components/Entity/PersonRenderBox.vue';
+import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 
 export default {
    name: 'Requestor',
    components: {
       AddPersons,
-      OnTheFly
+      OnTheFly,
+      PersonRenderBox,
+      ThirdPartyRenderBox,
    },
    data() {
       return {

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">
-      <thead>
-         <tr>
-            <th class="chill-orange">{{ $t('resources.text') }}</th>
-            <th class="chill-orange">{{ $t('resources.description') }}</th>
-            <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,71 +1,54 @@
 <template>
-<tr>
+   <person-render-box
+      v-if="resource.resource.type === 'person'"
+      :person="resource.resource"
+      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3 }"
+      >
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <button-location v-if="hasCurrentHouseholdAddress" :person="resource.resource"></button-location>
+            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
+            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit"></on-the-fly></li>
+            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+         </ul>
+      </template>
 
-   <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>
-         <span v-if="resource.resource.type === 'thirdparty'" >{{ $t('item.type_thirdparty') }}</span>
-      </span>
-      {{ resource.resource.text }}
-   </td>
+   </person-render-box>
+   <third-party-render-box
+      v-if="resource.resource.type === 'thirdparty'"
+      :thirdparty="resource.resource"
+      :options="{ addLink : false, addId : false, addEntity: true, addInfo: true, hLevel: 3 }"
+      >
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="show"></on-the-fly></li>
+            <li><on-the-fly :type="resource.resource.type" :id="resource.resource.id" action="edit"></on-the-fly></li>
+            <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+         </ul>
+      </template>
 
-   <td v-if="resource.resource.type === 'person'">
-      {{ $tc('person.born') }}{{ $d(resource.resource.birthdate.datetime, 'short') }}
-   </td>
-   <td v-else-if="resource.resource.type === 'thirdparty'">
-      {{ resource.resource.address.text }}<br>
-      {{ resource.resource.address.postcode.name }}
-   </td>
-
-   <td>
-      <ul class="record_actions">
-         <button-location
-            v-if="hasCurrentHouseholdAddress"
-            v-bind:person="resource.resource">
-         </button-location>
-         <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-sm btn-remove"
-               v-bind:title="$t('action.remove')"
-               @click.prevent="$emit('remove', resource)">
-            </button>
-         </li>
-      </ul>
-   </td>
-</tr>
+   </third-party-render-box>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
+import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
 
 export default {
    name: 'ResourceItem',
    components: {
       OnTheFly,
-      ButtonLocation
+      ButtonLocation,
+      PersonRenderBox,
+      ThirdPartyRenderBox
    },
    props: ['resource'],
    emits: ['remove'],
    computed: {
       hasCurrentHouseholdAddress() {
-         if ( this.resource.resource.type === 'person'
-            && this.resource.resource.current_household_address !== null ) {
+         if ( this.resource.resource.current_household_address !== null ) {
             return true;
          }
          return false;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -41,6 +41,7 @@ const appMessages = {
          startdate: "Date d'entrée",
          enddate: "Date de sortie",
          add_persons: "Ajouter des usagers",
+         date_start_to_end: "Participation du {start} au {end}",
       },
       requestor: {
          title: "Demandeur",

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

@@ -0,0 +1,158 @@
+<template>
+ <div class="item-bloc">
+    <section class="chill-entity entity-person">
+    <div class="item-row entity-bloc">
+
+        <div  class="item-col">
+            <div class="entity-label">
+
+                <div :class="'denomination h' + options.hLevel">
+
+                   <a v-if="this.options.addLink ==  true" href="#">
+                        <span class="firstname">{{ person.firstName }}</span>
+                        <span class="lastname">{{ person.lastName }}</span>
+                        <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
+                            <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
+                        </span>
+                    </a>
+
+                   <span class="firstname">{{ person.firstName }}</span>
+                   <span class="lastname">{{ person.lastName }}</span>
+                   <span v-if="person.altNames && options.addAltNames ==  true" class="altnames">
+                       <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
+                   </span>
+
+                   <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
+                   <span v-if="options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.person') }}</span>
+
+                </div>
+
+                <p v-if="this.options.addInfo == true" class="moreinfo">
+                    <i :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
+                    <time v-if="person.birthdate" datetime="{{ person.birthdate }}" title="{{ birthdate }}">
+                        {{ $t(getGender) + ' ' + $d(birthdate, 'text') }}
+                    </time>
+                    <time v-else-if="person.deathdate" datetime="{{ person.deathdate }}" title="{{ person.deathdate }}">
+                        {{ birthdate }} - {{ deathdate }}
+                    </time>
+                    <!-- <span class="age">{{ person.age }}</span> -->
+                </p>
+            </div>
+        </div>
+
+        <div class="item-col separator">
+            <ul class="list-content fa-ul">
+                
+                <li v-if="person.current_household_address">
+                    <i class="fa fa-li fa-map-marker"></i>
+                    <show-address :address="person.current_household_address" :isMultiline="isMultiline"></show-address>
+                </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-map-marker"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+
+                <li v-if="person.mobilenumber">
+                    <i class="fa fa-li fa-mobile"></i>
+                    <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
+                </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-mobile"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                <li v-if="person.phonenumber">
+                    <i class="fa fa-li fa-phone"></i>
+                    <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
+                </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-phone"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                
+                <li v-if="person.center && options.addCenter">
+                    <i class="fa fa-li fa-long-arrow-right"></i>
+                    {{ person.center.name }}
+                </li>
+                <li v-else-if="options.addNoData">
+                    <i class="fa fa-li fa-long-arrow-right"></i>
+                    <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
+                </li>
+                <slot name="custom-zone"></slot>
+
+            </ul>
+
+            <slot name="record-actions"></slot>
+        </div>
+
+    </div>
+    </section>
+ </div>
+</template>
+
+<script>
+import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
+import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
+
+export default {
+    name: "PersonRenderBox",
+    components: {
+        ShowAddress
+    },
+    props: ['person', 'options'],
+    computed: {
+        getGender: function() {
+            return this.person.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+        },
+        isMultiline: function() {
+            if(this.options.isMultiline){
+                return this.options.isMultiline
+            } else {
+                return false
+            }
+        },
+        getGenderIcon: function() {
+            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);
+            return dateToISO(date);
+        },
+        deathdate: function(){
+            var date = new Date(this.person.deathdate.datetime);
+            return dateToISO(date);
+        },
+        altNameLabel: function(){
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].label
+            }
+        },
+        altNameKey: function(){
+            for(let i = 0; i < this.person.altNames.length; i++){
+                return this.person.altNames[i].key
+            }
+        },
+    }
+}
+</script>
+
+<style lang='scss'>
+.lastname:before{
+    content: " "
+}
+
+div.item-col:first-child{
+    width: 33%;
+}
+
+div.flex-table {
+   div.item-bloc {
+      div.item-row {
+         div.item-col:last-child {
+            justify-content: flex-start;
+         }
+      }
+   }
+}
+</style>
+
+

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -1,57 +1,23 @@
 <template>
 <div v-if="action === 'show'">
-
    <div class="flex-table">
-      <div class="item-bloc">
-         <div class="item-row">
-            <div class="item-col">
-               <h3 :title="person.id">{{ person.text }}</h3>
-               <p>
-                  <i class="fa fa-fw"
-                     :class="genderClass">
-                     <!--
-                     :title="$t(genderTranslation)"
-                     -->
-                  </i>
-                  <span v-if="person.birthdate">
-                     {{ $t('person.born', { e: feminized }) }}
-                     {{ $d(person.birthdate.datetime, 'short') }}
-                  </span>
-               </p>
-            </div>
-            <div class="item-col">
-               <dl class="list-content">
-                  <dt>{{ $t('person.firstname') }}</dt>
-                  <dd>{{ person.firstName }}</dd>
-
-                  <dt>{{ $t('person.lastname') }}</dt>
-                  <dd>{{ person.lastName }}</dd>
-
-                  <dt>{{ $t('person.altnames') }}</dt>
-                  <dd>{{ person.altNames }}</dd>
-
-                  <span v-if="person.center">
-                     <dt>{{ $t('person.center_name') }}</dt>
-                     <dd :title="person.center.id">{{ person.center.name }}</dd>
-                  </span>
-
-                  <dt>{{ $t('person.phonenumber') }}</dt>
-                  <dd>{{ person.phonenumber }}</dd>
-
-                  <dt>{{ $t('person.mobilenumber') }}</dt>
-                  <dd>{{ person.mobilenumber }}</dd>
-
-                  <dt>{{ $t('person.gender.title') }}</dt>
-                  <!--
-                  <dd>{{ $t(genderTranslation) }}</dd>
-                  -->
-               </dl>
-            </div>
-         </div>
-      </div>
+      <person-render-box
+         :person="person"
+         :options="{
+            addInfo: true,
+            addEntity: false,
+            addAltNames: true,
+            addId: true,
+            addLink: false,
+            hLevel: 3,
+            addCenter: true,
+            addNoData: true,
+            isMultiline: true
+         }"
+      ></person-render-box>
    </div>
-
 </div>
+
 <div v-else-if="action === 'edit' || action === 'create'">
 
    <div class="form-floating mb-3">
@@ -109,10 +75,14 @@
 
 <script>
 import { getPerson, postPerson } from '../../_api/OnTheFly';
+import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 
 export default {
    name: "OnTheFlyPerson",
    props: ['id', 'type', 'action'],
+   components: {
+      PersonRenderBox
+   },
    data() {
       return {
          person: {
@@ -204,10 +174,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-ul {
-   li::marker {
-   }
-}
 div.flex-table {
    div.item-bloc {
       div.item-row {

src/Bundle/ChillPersonBundle/Resources/views/Entity/person.html.twig

@@ -137,13 +137,14 @@
                 {{ options['customButtons']['before'] }}
             {% endif %}
 
-            {%- if options['customButtons']['replace'] is not defined and is_granted('CHILL_PERSON_SEE', person) -%}
+            {%- if options['customButtons']['replace'] is defined -%}
+                {{ options['customButtons']['replace'] }}
+            {%- elseif is_granted('CHILL_PERSON_SEE', person) -%}
                 <li>
                     <a class="btn btn-sm btn-show" target="_blank" title="{{ 'Show person'|trans }}"
                     href="{{ path('chill_person_view', { person_id: person.id }) }}"></a>
                 </li>
             {%- else -%}
-                {{ options['customButtons']['replace'] }}
             {%- endif -%}
 
             {% if options['customButtons']['after'] is defined %}

src/Bundle/ChillPersonBundle/Resources/views/Person/layout.html.twig

@@ -37,7 +37,10 @@
         'activeRouteKey': activeRouteKey
     }) }}
 
-    <div class="block-post-menu">
-        {{ chill_delegated_block('person_post_vertical_menu', { 'person': person } ) }}
-    </div>
+    {% block block_post_menu %}
+        <div class="block-post-menu">
+            {{ chill_delegated_block('person_post_vertical_menu', { 'person': person } ) }}
+        </div>
+    {% endblock %}
+
 {% endblock %}

src/Bundle/ChillPersonBundle/translations/messages.en.yml

@@ -46,7 +46,7 @@ Married: Marié(e)
 Return: Retour
 Submit: Submit
 Reset: 'Remise à zéro'
-'The person data has been updated': 'Bravo ! Les données ont été mises à jour.'
+'The person data has been updated': 'Les données ont été mises à jour.'
 '{1} The person field %field% is incorrect. Please check. | ]1, Inf] Several person fields are incorrect. Please check.': '{1} Le champs %field% est incorrect. Veuillez le corriger. | ]1, Inf] Plusieurs champs sont incorrects. Veuillez les vérifier.'
 'Add a person': 'Ajout d''une personne'
 'Person Menu': 'Menu personne'

src/Bundle/ChillPersonBundle/translations/messages.fr.yml

@@ -125,7 +125,7 @@ Show person: Voir le dossier de la personne
 Return: Retour
 Submit: Envoi
 Reset: 'Remise à zéro'
-'The person data has been updated': 'Bravo ! Les données ont été mises à jour.'
+'The person data has been updated': 'Les données ont été mises à jour.'
 'The person data provided are not valid': 'Les données introduites ne sont pas valides'
 '{1} The person field %field% is incorrect. Please check. | ]1, Inf] Several person fields are incorrect. Please check.': '{1} Le champs %field% est incorrect. Veuillez le corriger. | ]1, Inf] Plusieurs champs sont incorrects. Veuillez les vérifier.'
 'Add a person': 'Ajout d''une personne'

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue

@@ -0,0 +1,103 @@
+<template>
+<div class="item-bloc col">
+    <section class="chill-entity entity-thirdparty">
+    <div class="item-row entity-bloc">
+
+        <div  class="item-col">
+            <div class="entity-label">
+
+                <div :class="'denomination h' + options.hLevel">
+
+                    <a v-if="this.options.addLink ==  true" href="#">
+                        <span class="name">{{ thirdparty.text }}</span>
+                    </a>
+                    <span class="name">{{ thirdparty.text }}</span>
+
+                    <span v-if="options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
+                    <span v-if="options.addEntity ==  true && thirdparty.type == 'thirdparty'" class="badge rounded-pill bg-secondary">{{ $t('renderbox.type.thirdparty') }}</span>
+
+                </div>
+
+                <p v-if="this.options.addInfo == true" class="moreinfo">
+                    <i v-if="thirdparty.birthdate" :class="'fa fa-fw ' + getGenderIcon" title="{{ getGender }}"></i>
+                    <time v-if="thirdparty.birthdate" datetime="{{ thirdparty.birthdate.datetime }}" title="{{ birthdate }}">
+                        {{ $t(getGender) + ' ' + $d(birthdate, 'short') }}
+                    </time>
+                    <time v-else-if="thirdparty.deathdate" datetime="{{ thirdparty.deathdate.datetime }}" title="{{ thirdparty.deathdate }}">
+                        {{ birthdate }} - {{ deathdate }}
+                    </time>
+                    <span class="age">{{ thirdparty.age }}</span>
+                </p>
+            </div>
+        </div>
+
+        <div class="item-col separator">
+            <ul class="list-content fa-ul">
+                <li v-if="thirdparty.address">
+                    <i class="fa fa-li fa-map-marker"></i>
+                    <show-address :address="thirdparty.address" :isMultiline="isMultiline"></show-address>
+                </li>
+                <li v-if="thirdparty.telephone">
+                    <i class="fa fa-li fa-mobile"></i>
+                    <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
+                </li>
+                <li v-if="thirdparty.email">
+                    <i class="fa fa-li fa-envelope-o"></i>
+                    <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
+                </li>
+
+            </ul>
+
+            <slot name="record-actions"></slot>
+        </div>
+    </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: {
+        isMultiline: function() {
+            if(this.options.isMultiline){
+                return this.options.isMultiline
+            } else {
+                return false
+            }
+        },
+        getGender: function() {
+            return this.thirdparty.gender == 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
+        },
+        getGenderIcon: function() {
+            return this.thirdparty.gender == 'woman' ? 'fa-venus' : this.thirdparty.gender == 'man' ? 'fa-mars' : 'fa-neuter';
+        },
+        birthdate: function(){
+            var date = new Date(this.thirdparty.birthdate.datetime);
+            return dateToISO(date);
+        },
+        deathdate: function(){
+            var date = new Date(this.thirdparty.deathdate.datetime);
+            return dateToISO(date);
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+.name{
+    &:before{
+        content: " "
+    }
+}
+</style>
+
+

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue

@@ -0,0 +1,80 @@
+<template>
+<!-- !!!! DATA still hardcoded until endpoint is fixed -->
+
+   <div v-if="action === 'show'">
+      <div class="flex-table">
+         <third-party-render-box
+            :thirdparty="thirdparty"
+            :options="{
+               addInfo: true,
+               addEntity: false,
+               addAltNames: true,
+               addId: true,
+               addLink: false,
+               hLevel: 3,
+               addCenter: true,
+               addNoData: true,
+               isMultiline: true
+            }"
+         ></third-party-render-box>
+      </div>
+   </div>
+   <div v-else-if="action === 'edit' || action === 'create'">
+      <div class="form-floating mb-3">
+         <input class="form-control form-control-lg" id="firstname" v-model="thirdparty.firstName" v-bind:placeholder="$t('thirdparty.firstname')" />
+         <label for="firstname">{{ $t('thirdparty.firstname') }}</label>
+      </div>
+
+      <div class="form-floating mb-3">
+         <input class="form-control form-control-lg" id="lastname" v-model="thirdparty.lastName" v-bind:placeholder="$t('thirdparty.lastname')" />
+         <label for="lastname">{{ $t('thirdparty.lastname') }}</label>
+      </div>
+
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="email"><i class="fa fa-fw fa-envelope"></i></span>
+         <input class="form-control form-control-lg"
+            v-model="thirdparty.email"
+            v-bind:placeholder="$t('thirdparty.email')"
+            v-bind:aria-label="$t('thirdparty.email')"
+            aria-describedby="email" />
+      </div>
+
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
+         <input class="form-control form-control-lg"
+            v-model="thirdparty.telephone"
+            v-bind:placeholder="$t('thirdparty.phonenumber')"
+            v-bind:aria-label="$t('thirdparty.phonenumber')"
+            aria-describedby="phonenumber" />
+      </div>
+
+   </div>
+</template>
+
+<script>
+import ThirdPartyRenderBox from '../Entity/ThirdPartyRenderBox.vue'
+
+export default {
+   name: "OnTheFlyThirdParty",
+   props: ['id', 'type', 'action'],
+   components: {
+      ThirdPartyRenderBox,
+   },
+   data: function() {
+      return {
+         thirdparty: {
+            text : "Bart Maes",
+            firstName : "Bart",
+            lastName : "Maes",
+            email : "bartmaes@gmail.com",
+            telephone : "0475 94 66 15",
+
+         }
+      }
+   }
+}
+// TODO move in ChillThirdpartyAssets
+</script>
+
+<style lang="css" scoped>
+</style>

src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig

@@ -94,13 +94,12 @@
 
                 {% if options['customButtons']['replace'] is defined %}
                     {{ options['customButtons']['replace'] }}
-                {% elseif  is_granted('CHILL_3PARTY_3PARTY_SHOW', thirdparty) %}
+                {% elseif is_granted('CHILL_3PARTY_3PARTY_SHOW', thirdparty) %}
                     <li>
                         <a class="btn btn-sm btn-show" target="_blank" title="{{ 'Show thirdparty'|trans }}"
                             href="{{ path('chill_3party_3party_show', { thirdparty_id: thirdparty.id }) }}"></a>
                     </li>
                 {% else %}
-                    {# rien faire ? j'ai eu un bug car options['customButtons'] était vide (marc)  #}
                 {% endif %}
 
                 {% if options['customButtons']['after'] is defined %}

src/Bundle/ChillThirdPartyBundle/chill.webpack.config.js

@@ -1,4 +1,9 @@
 module.exports = function(encore, entries)
 {
     entries.push(__dirname + '/Resources/public/chill/index.js');
+
+    // Aliases are used when webpack is trying to resolve modules path
+    encore.addAliases({
+        ChillThirdPartyAssets: __dirname + '/Resources/public'
+    });
 };