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

<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>
</template>

<script>
export default {
   name: "Confirm",
   computed: {
      accompanyingCourse() {
         return this.$store.state.accompanyingCourse
      }
   },
   methods: {
      confirmCourse() {
         console.log('@@ CLICK confirmCourse');
         this.$store.dispatch('confirmAccompanyingCourse');
      }
   }
}
</script>

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