From f9402ec981db4008e0db15c37b747a4e09bb3a38 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 6 Sep 2021 16:04:38 +0200
Subject: [PATCH] adding confirmation modal when person leave accourse

---
 .../PersonsAssociated/ParticipationItem.vue   | 34 +++++++++++++------
 .../vuejs/AccompanyingCourse/js/i18n.js       |  3 ++
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
index 45cdd9775..b56ab0617 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue
+++ b/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)">
-               </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>
+                       @click="modal.showModal = true">
                </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: {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 9ce5eb8b8..66c45dc13 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/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"
       },