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

<template>
<div class="vue-component">
   <h2><a name="section-90"></a>
      {{ $t('confirm.title') }}
   </h2>

   <div>
      <p>
         {{ $t('confirm.text_draft') }}
         <span class="badge bg-secondary">{{ $t('course.step.draft') }}</span>
      </p>
      <p>
         {{ $t('confirm.text_active') }}
         <span class="badge bg-primary">{{ $t('course.step.active') }}</span>
      </p>

      <ul class="record_actions">
         <li>
            <button class="btn btn-save" @click="modal.showModal = true">
               {{ $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="btn btn-danger" @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
      }
   },
   methods: {
      confirmCourse() {
        //console.log('@@ CLICK confirmCourse');
         this.$store.dispatch('confirmAccompanyingCourse');
        //console.log('confirm last');
      }
   }
}
</script>

<style lang="scss" scoped>
div.vue-component > div {
    //margin: 1em;
}
</style>