building Confirm component

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

@@ -1,45 +1,30 @@
 <template>
-   <div class="vue-component">
+   <div class="vue-component" style="display: none;">
       <h3>{{ $t('course.title') }}</h3>
       <dl>
-         <dt>{{ $t('course.id') }}</dt>
+        <dt>{{ $t('course.id') }}</dt>
-         <dd>{{ accompanyingCourse.id }}</dd>
+        <dd>{{ accompanyingCourse.id }}</dd>
-         
+     </dl>
-         <dt>{{ $t('course.status') }}</dt>
-         <dd>
-            <div v-if="accompanyingCourse.step !== 'DRAFT'"
-               class="badge badge-pill badge-primary">
-               {{ $t('course.step.active') }}</div>
-            <div v-else class="badge badge-pill badge-secondary">
-               {{ $t('course.step.draft') }}</div>
-         </dd>
-         
-         <dt>{{ $t('course.closing_date') }}</dt>
-         <dd v-if="accompanyingCourse.closingDate">{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
-            
-         <dt>{{ $t('course.closing_motive') }}</dt>
-         <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
-      </dl>
-         
-      <teleport to="#header-accompanying_course-name .grid-4">
-         <toggle-flags
-            v-bind:emergency="accompanyingCourse.emergency"
-            v-bind:confidential="accompanyingCourse.confidential">
-         </toggle-flags>
-      </teleport>
-         
-      <teleport to="#header-accompanying_course-name .grid-3">
-         <p style="text-align: right;">
-            <span v-if="accompanyingCourse.openingDate">
-               <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
-            </span><br>
-            <span v-if="accompanyingCourse.user">
-               {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
-            </span>
-         </p>
-      </teleport>
-
    </div>
+      
+   <teleport to="#header-accompanying_course-name .grid-4">
+      <toggle-flags
+         v-bind:emergency="accompanyingCourse.emergency"
+         v-bind:confidential="accompanyingCourse.confidential">
+      </toggle-flags>
+   </teleport>
+      
+   <teleport to="#header-accompanying_course-name .grid-3">
+      <p style="text-align: right;">
+         <span v-if="accompanyingCourse.openingDate">
+            <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
+         </span><br>
+         <span v-if="accompanyingCourse.user">
+            {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
+         </span>
+      </p>
+   </teleport>
+
 </template>
 
 <script>

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

@@ -1,11 +1,45 @@
 <template>
   <div class="vue-component">
-     <h3>{{ $t('confirm.title') }}</h3>
+     <h3>
+        {{ $t('confirm.title') }}
+        <span v-if="accompanyingCourse.step !== 'DRAFT'"
+           class="badge badge-pill badge-primary">
+           {{ $t('course.step.active') }}</span>
+        <span v-else class="badge badge-pill badge-secondary">
+           {{ $t('course.step.draft') }}</span>
+     </h3>
+     
+     <p v-if="accompanyingCourse.step === 'DRAFT'">
+        {{ $t('confirm.text_draft') }}
+     </p>
+     
+     <dl>
+        <dt>{{ $t('course.closing_date') }}</dt>
+        <dd v-if="accompanyingCourse.closingDate">{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
+           
+        <dt>{{ $t('course.closing_motive') }}</dt>
+        <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
+     </dl>
+     
+     <button class="sc-button bt-save"
+         @click="confirmCourse">
+         {{ $t('confirm.ok') }}
+     </button>
   </div>
 </template>
 
 <script>
 export default {
    name: "Confirm",
+   computed: {
+      accompanyingCourse() {
+         return this.$store.state.accompanyingCourse
+      }
+   },
+   methods: {
+      confirmCourse() {
+         console.log('confirmCourse');
+      }
+   }
 }
 </script>

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

@@ -67,6 +67,8 @@ const appMessages = {
       },
       confirm: {
          title: "Confirmation",
+         text_draft: "Le parcours est actuellement au statut de brouillon. En validant cette étape, vous lui donnez le statut actif.",
+         ok: "Activer le parcours"
       },
 
    }