Merge branch 'ameliorations_composants_vue' into improve_ux

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

@@ -9,7 +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">
+   <participation-item
+      v-for="participation in participations"
+      v-bind:participation="participation"
+      v-bind:key="participation.id"
+      @remove="removeParticipation"
+      @close="closeParticipation">
+   </participation-item>
+
+   <!-- <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>
@@ -19,15 +27,15 @@
          </tr>
       </thead>
       <tbody>
-         <person-item
+         <participation-item
             v-for="participation in participations"
             v-bind:participation="participation"
             v-bind:key="participation.id"
             @remove="removeParticipation"
             @close="closeParticipation">
-         </person-item>
+         </participation-item>
       </tbody>
-   </table>
+   </table> -->
 
    <div>
       <add-persons
@@ -45,13 +53,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

@@ -1,8 +1,26 @@
 <template>
-<tr>
+
+   <person-render-box
+      :options="{
+               addInfo : true,
+               addId : true,
+               addEntity: false,
+               addLink: false,
+               addAltNames: true,
+               addAge : false,
+               hLevel : 1
+            }"
+      :participation="participation">
+   </person-render-box>
+
+<!-- <tr>
    <td>
       {{ participation.person.firstName }}
       {{ participation.person.lastName }}
+      <person-render-box
+         v-bind:options="options"
+         v-bind:participation="participation"
+      ></person-render-box>
    </td>
    <td><span v-if="participation.startDate">
        {{ $d(participation.startDate.datetime, 'short') }}</span>
@@ -30,12 +48,12 @@
                action="edit">
             </on-the-fly>
          </li>
-         <!--li>
+         li>
             <button class="btn btn-delete"
                :title="$t('action.delete')"
                @click.prevent="$emit('remove', participation)">
             </button>
-         </li-->
+         </li
          <li>
             <button v-if="!participation.endDate"
                class="btn btn-sm btn-remove"
@@ -46,21 +64,36 @@
          </li>
       </ul>
    </td>
-</tr>
+</tr> -->
 </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: 'PersonItem',
+   name: 'ParticipationItem',
    components: {
       OnTheFly,
-      ButtonLocation
+      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