adding confirmation modal when person leave accourse

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

@@ -42,39 +42,53 @@
                <button v-if="!participation.endDate"
                   class="btn btn-sm btn-remove"
                   v-bind:title="$t('persons_associated.leave_course')"
-                  @click.prevent="$emit('close', participation)">
+                       @click="modal.showModal = true">
-               </button>
-               <button v-else
-                  class="btn btn-sm btn-secondary"
-                  :title="$t('persons_associated.date_start_to_end', {
-                    start: $d(participation.startDate.datetime, 'short'),
-                    end: $d(participation.endDate.datetime, 'short')
-                  })">
-                  <i class="fa fa-fw fa-info"></i>
                </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: {

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

@@ -43,6 +43,9 @@ const appMessages = {
          add_persons: "Ajouter des usagers",
          date_start_to_end: "Participation du {start} au {end}",
          leave_course: "L'usager quitte le parcours",
+         sure: "Êtes-vous sûr ?",
+         sure_description: "Une fois confirmé, il ne sera pas possible de faire marche arrière ! La sortie restera cependant consignée dans l'historique du parcours.",
+         ok: "Oui, l'usager quitte le parcours",
          show_household_number: "Voir le ménage (n° {id})",
          show_household: "Voir le ménage"
       },