confirm modal "are you sure ?"

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

@@ -1,42 +1,71 @@
 <template>
-  <div class="vue-component">
-     <h2><a name="section-70"></a>
-        {{ $t('confirm.title') }}
-     </h2>
-     
-     <div>
-        <p>
-           {{ $t('confirm.text_draft') }}
-           <span class="badge badge-secondary">{{ $t('course.step.draft') }}</span>
-        </p>
-        <p>
-           {{ $t('confirm.text_active') }}
-           <span class="badge badge-primary">{{ $t('course.step.active') }}</span>
-        </p>
-     </div>
-     
-     <dl v-if="accompanyingCourse.closingDate">
-        <dt>{{ $t('course.closing_date') }}</dt>
-        <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
-           
-        <dt>{{ $t('course.closing_motive') }}</dt>
-        <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
-     </dl>
-     
-     <ul class="record_actions">
-        <li>
-           <button class="sc-button bt-save"
-              @click="confirmCourse">
-              {{ $t('confirm.ok') }}
-           </button>
-        </li>
-     </ul>
-  </div>
+<div class="vue-component">
+   <h2><a name="section-70"></a>
+      {{ $t('confirm.title') }}
+   </h2>
+
+   <div>
+      <p>
+         {{ $t('confirm.text_draft') }}
+         <span class="badge badge-secondary">{{ $t('course.step.draft') }}</span>
+      </p>
+      <p>
+         {{ $t('confirm.text_active') }}
+         <span class="badge badge-primary">{{ $t('course.step.active') }}</span>
+      </p>
+   </div>
+
+   <dl v-if="accompanyingCourse.closingDate">
+      <dt>{{ $t('course.closing_date') }}</dt>
+      <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
+
+      <dt>{{ $t('course.closing_motive') }}</dt>
+      <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
+   </dl>
+
+   <ul class="record_actions">
+      <li>
+         <button class="sc-button bt-save" @click="modal.showModal = true">
+            {{ $t('confirm.ok') }}
+         </button>
+      </li>
+   </ul>
+
+   <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 {
-      margin: 1em;
-   }
+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) });
             }