Merge branch 'master' into person_renderbox_thirdparty_onthefly

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

@@ -5,11 +5,13 @@
                addId : false,
                addEntity: false,
                addLink: false,
+               addHouseholdLink: true,
                addAltNames: true,
                addAge : true,
                hLevel : 3,
             }"
-      :person="participation.person">
+      :person="participation.person"
+      :returnPath="getAccompanyingCourseReturnPath">
 
       <template v-slot:record-actions>
          <ul class="record_actions">
@@ -40,34 +42,54 @@
             <li>
                <button v-if="!participation.endDate"
                   class="btn btn-sm btn-remove"
-                  v-bind:title="$t('action.remove')"
-                  @click.prevent="$emit('close', participation)">
+                  v-bind:title="$t('persons_associated.leave_course')"
+                       @click="modal.showModal = true">
                </button>
-               <button v-else
-                  class="btn btn-sm btn-remove disabled"></button>
             </li>
          </ul>
 
       </template>
    </person-render-box>
+
+   <teleport to="body">
+      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+         <template v-slot:header>
+            <h2 class="modal-title">{{ $t('persons_associated.sure') }}</h2>
+         </template>
+         <template v-slot:body>
+            <p>{{ $t('persons_associated.sure_description') }}</p>
+         </template>
+         <template v-slot:footer>
+            <button class="btn btn-danger" @click.prevent="$emit('close', participation)">
+               {{ $t('persons_associated.ok') }}
+            </button>
+         </template>
+      </modal>
+   </teleport>
 </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 Modal from 'ChillMainAssets/vuejs/_components/Modal';
 
 export default {
    name: 'ParticipationItem',
    components: {
       OnTheFly,
       ButtonLocation,
-      PersonRenderBox
+      PersonRenderBox,
+      Modal
    },
    props: ['participation'],
    emits: ['remove', 'close'],
    data() {
       return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         },
          PersonRenderBox: {
             participation: 'participation',
             options: {
@@ -86,6 +108,9 @@ export default {
             return true;
          }
          return false;
+      },
+      getAccompanyingCourseReturnPath() {
+         return `fr/parcours/${this.$store.state.accompanyingCourse.id}/edit#section-10`;
       }
    }
 }
@@ -93,10 +118,7 @@ export default {
 /*
  *  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">