Confirm post request, change state step and hide components

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

@@ -5,8 +5,8 @@
    <social-issue></social-issue>
    <referrer></referrer>
    <resources></resources>
-   <comment></comment>
+   <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
-   <confirm></confirm>
+   <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
    <!--test></test-->
 </template>
 

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

@@ -13,18 +13,6 @@ const getAccompanyingCourse = (id) => {
       });
 };
 
-/*
-* Endpoint 
-*/
-const getSocialIssues = () => {
-   const url = `/api/1.0/person/social-work/social-issue.json`;
-   return fetch(url)
-      .then(response => {
-         if (response.ok) { return response.json(); }
-         throw Error('Error with request resource response'); 
-      });
-};
-
 /*
 * Endpoint v.2 chill_api_single_accompanying_course__entity
 * method PATCH, patch AccompanyingCourse Instance
@@ -48,6 +36,33 @@ const patchAccompanyingCourse = (id, body) => {
       });
 };
 
+/*
+* Endpoint to change 'DRAFT' step to 'CONFIRMED'
+*/
+const confirmAccompanyingCourse = (id) => {
+   const url = `/api/1.0/person/accompanying-course/${id}/confirm.json`
+   return fetch(url, {
+         method: 'POST',
+         headers: {'Content-Type': 'application/json;charset=utf-8'}
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+/*
+* Endpoint 
+*/
+const getSocialIssues = () => {
+   const url = `/api/1.0/person/social-work/social-issue.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
 /*
 * Endpoint v.2 chill_api_single_accompanying_course_participation, 
 * method POST/DELETE, add/close a participation to the accompanyingCourse
@@ -133,8 +148,9 @@ const postResource = (id, payload, method) => {
 
 export { 
    getAccompanyingCourse,
-   getSocialIssues,
    patchAccompanyingCourse,
+   confirmAccompanyingCourse,
+   getSocialIssues,
    postParticipation,
    postRequestor,
    postResource,

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

@@ -2,18 +2,18 @@
   <div class="vue-component">
      <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'">
+     <div>
-        {{ $t('confirm.text_draft') }}
+        <p>
-     </p>
+           {{ $t('confirm.text_draft') }}
+           <span class="badge badge-pill badge-secondary">{{ $t('course.step.draft') }}</span>
+        </p>
+        <p>
+           {{ $t('confirm.text_active') }}
+           <span class="badge badge-pill badge-primary">{{ $t('course.step.active') }}</span>
+        </p>
+     </div>
      
      <dl v-if="accompanyingCourse.closingDate">
         <dt>{{ $t('course.closing_date') }}</dt>
@@ -44,8 +44,15 @@ export default {
    },
    methods: {
       confirmCourse() {
-         console.log('confirmCourse');
+         console.log('@@ CLICK confirmCourse');
+         this.$store.dispatch('confirmAccompanyingCourse');
       }
    }
 }
 </script>
+
+<style lang="scss" scoped>
+   div.vue-component > div {
+      margin: 1em;
+   }
+</style>

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

@@ -14,7 +14,6 @@ const appMessages = {
          status: "État",
          step: {
             draft: "Brouillon",
-            open: "Ouvert",
             active: "En file active"
          },
          open_at: "ouvert le ",
@@ -71,8 +70,9 @@ 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.",
+         text_draft: "Le parcours est actuellement à l'état de ",
-         ok: "Activer le parcours"
+         text_active: "En validant cette étape, vous lui donnez le statut ",
+         ok: "Confirmer le parcours"
       },
 
    }

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

@@ -1,7 +1,8 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
 import { getAccompanyingCourse, 
-   patchAccompanyingCourse, 
+   patchAccompanyingCourse,
+   confirmAccompanyingCourse,
    postParticipation, 
    postRequestor,
    postResource } from '../api';
@@ -75,6 +76,10 @@ let initPromise = getAccompanyingCourse(id)
             postFirstComment(state, comment) {
                console.log('### mutation: postFirstComment', comment);
                state.accompanyingCourse.initialComment = comment;
+            },
+            confirmAccompanyingCourse(state, response) {
+               //console.log('### mutation: confirmAccompanyingCourse: response', response);
+               state.accompanyingCourse.step = response.step;
             }
          },
          actions: {
@@ -168,6 +173,15 @@ let initPromise = getAccompanyingCourse(id)
                   commit('postFirstComment', course.initialComment);
                   resolve();
                })).catch((error) => { commit('catchError', error) });
+            },
+            
+            confirmAccompanyingCourse({ commit }) {
+               console.log('## action: confirmAccompanyingCourse');
+               confirmAccompanyingCourse(id)
+               .then(response => new Promise((resolve, reject) => {
+                  commit('confirmAccompanyingCourse', response);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
             }
          }
       });