fetch postParticipation request, catch fetch error, store mutation+action

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

@@ -1,31 +1,36 @@
 const 
    locale = 'fr',
-   format = 'json',
+   format = 'json'
-   accompanying_period_id = () => window.accompanyingCourseId 
+   , accompanying_period_id = window.accompanyingCourseId //tmp
 ;
 
 // 1. chill_person_accompanying_course_api_show (GET)
-let getAccompanyingCourse = (accompanying_period_id) => {
+let getAccompanyingCourse = (accompanying_period_id___) => { //tmp
    const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/show.${format}`;
    return fetch(url)
-      .then(response => response.json());
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
 };
 
 // 2. chill_person_accompanying_course_api_add_participation (POST)
-let postParticipation = (accompanying_period_id, participation) => {
+let postParticipation = (accompanying_period_id, person_id) => {
    const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}`
    return fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          },
-         body: JSON.stringify(participation)
+         body: JSON.stringify({id: person_id})
       })
-      .then(response => response.json());
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
 };
 
-export { getAccompanyingCourse, postParticipation };
+export { 
-
+   getAccompanyingCourse, 
-/// TODO
+   postParticipation 
-// * cfr. promise.all() pour plusieurs promesses
+};
-// * catch throw sur le dernier then pour capturer l'erreur

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

@@ -54,7 +54,7 @@ export default {
    methods: {
       addPerson() {
          console.log('[wip] opening add persons modal');
-         this.$store.commit('addParticipation', {
+         this.$store.dispatch('addParticipation', {
             id: SimpsonId++,
             person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
             startDate: { datetime: "1975-09-15T00:00:00+0100" }, 
@@ -62,7 +62,7 @@ export default {
          })
       },
       removePerson(item) {
-         this.$store.commit('removeParticipation', item)
+         this.$store.dispatch('removeParticipation', item)
       },
       savePersons() {
          console.log('[wip] saving persons');

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

@@ -4,49 +4,46 @@ import { getAccompanyingCourse, postParticipation } from '../api/accompanyingCou
 
 const debug = process.env.NODE_ENV !== 'production';
 
-const id = window.accompanyingCourseId;
+const id = window.accompanyingCourseId; //tmp
 
 let getDataPromise = getAccompanyingCourse(id)
    .then(accompanying_course => new Promise((resolve, reject) => {
+            
       const store = createStore({
          strict: debug,
          state: {
-            accompanying_course: accompanying_course
+            accompanying_course: accompanying_course,
+            errorMsg: []
          },
          getters: {
          },
          mutations: {
             removeParticipation(state, item) {
-               //console.log('remove item', item.id);
+               console.log('remove item', item.id);
                state.accompanying_course.participations = state.accompanying_course.participations.filter(
                   participation => participation !== item
                )
             },
             addParticipation(state, item) {
-               //console.log('add new item');
+               console.log('add new item');
                state.accompanying_course.participations.push(item)
             }
          },
          actions: {
+            addParticipation({ commit }, payload) {
+               console.log('payload', payload);
+               commit('addParticipation', payload);
+               
+               postParticipation(id, payload.id).catch((error) => {
+                  commit('removeParticipation', payload)
+                  state.errorMsg.push(error.message);      
+               }) 
+               // result action ??
+            }
          }
       });
       console.log('store object', store.state.accompanying_course.id);
       resolve(store);
    }));
-   
-let postDataPromise = postParticipation(id)
-   .then(participation => new Promise((resolve, reject) => {
-      // get store 
-      // use store.actions to post (async way)
-      console.log(store);
-      resolve(store);
-   }));
-
-/*
-let allPromises = Promise.all([getDataPromise, postDataPromise])
-   .then((values) => {
-     console.log('all promises values', values);
-   });
-*/
 
 export { getDataPromise };

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig

@@ -5,15 +5,13 @@
 {% endblock %}
 
 {% block content %}
-
    <h1>{{ block('title') }}</h1>
-   
    <div id="accompanying-course"></div>    
+{% endblock %}
 
-   {{ encore_entry_script_tags('accompanying_course') }}
+{% block js %}
-
    <script type="text/javascript">
       window.accompanyingCourseId = {{ accompanyingCourse.id|e('js') }};
    </script>
-   
+   {{ encore_entry_script_tags('accompanying_course') }}
 {% endblock %}