confirm modal "are you sure ?"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="vue-component">
+<div class="vue-component">
    <h2><a name="section-70"></a>
       {{ $t('confirm.title') }}
    </h2>
@@ -25,18 +25,47 @@
 
    <ul class="record_actions">
       <li>
-           <button class="sc-button bt-save"
+         <button class="sc-button bt-save" @click="modal.showModal = true">
-              @click="confirmCourse">
             {{ $t('confirm.ok') }}
          </button>
       </li>
    </ul>
-  </div>
+
+   <teleport to="body">
+      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+         <template v-slot:header>
+            <h2 class="modal-title">{{ $t('confirm.sure') }}</h2>
+         </template>
+         <template v-slot:body>
+            <p>{{ $t('confirm.sure_description') }}</p>
+         </template>
+         <template v-slot:footer>
+            <button class="sc-button red" @click="confirmCourse">
+               {{ $t('confirm.ok') }}
+            </button>
+         </template>
+      </modal>
+   </teleport>
+
+</div>
 </template>
 
 <script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+
 export default {
    name: "Confirm",
+   components: {
+      Modal,
+   },
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         }
+      }
+   },
    computed: {
       accompanyingCourse() {
          return this.$store.state.accompanyingCourse
@@ -46,13 +75,14 @@ export default {
       confirmCourse() {
          console.log('@@ CLICK confirmCourse');
          this.$store.dispatch('confirmAccompanyingCourse');
+         console.log('confirm last');
       }
    }
 }
 </script>
 
 <style lang="scss" scoped>
-   div.vue-component > div {
+div.vue-component > div {
     margin: 1em;
-   }
+}
 </style>

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

@@ -68,13 +68,15 @@ const appMessages = {
       },
       comment: {
          title: "Observations",
-         label: "Ajout d'une première note",
+         label: "Ajout d'une note",
          content: "Rédigez une première note..."
       },
       confirm: {
          title: "Confirmation",
          text_draft: "Le parcours est actuellement à l'état de ",
          text_active: "En validant cette étape, vous lui donnez le statut ",
+         sure: "Êtes-vous sûr ?",
+         sure_description: "Une fois le changement confirmé, il n'est plus possible de le remettre à l'état de brouillon !",
          ok: "Confirmer le parcours"
       },
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -180,6 +180,7 @@ let initPromise = getAccompanyingCourse(id)
                confirmAccompanyingCourse(id)
                .then(response => new Promise((resolve, reject) => {
                   commit('confirmAccompanyingCourse', response);
+                  console.log('fetch resolve'); // redirection with #top anchor
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             }