adding show/edit links (prepare modal) + save button

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

@@ -4,7 +4,7 @@ const
    accompanying_period_id = () => window.accompanyingCourseId 
 ;
 
-// 1. chill_person_accompanying_course_api_show
+// 1. chill_person_accompanying_course_api_show (GET)
 let getAccompanyingCourse = (accompanying_period_id) => {
    const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/show.${format}`;
    return fetch(url)
@@ -12,15 +12,19 @@ let getAccompanyingCourse = (accompanying_period_id) => {
 };
 
 // 2. chill_person_accompanying_course_api_add_participation (POST)
-let getParticipations = (accompanying_period_id) => {
+let postParticipation = (accompanying_period_id, participation) => {
    const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}`
-   return fetch(url)
+   return fetch(url, {
+         method: 'POST',
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(participation)
+      })
       .then(response => response.json());
 };
 
-export { getAccompanyingCourse, getParticipations };
+export { getAccompanyingCourse, postParticipation };
-
-
 
 /// TODO
 // * cfr. promise.all() pour plusieurs promesses

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

@@ -11,14 +11,16 @@
    <td>
       <ul class="record_actions">
          <li>
-            <button class="sc-button bt-show"
+            <a class="sc-button bt-show" target="_blank"
+               :href="url.show"
                :title="$t('action.show')">
-            </button>
+            </a>
          </li>
          <li>
-            <button class="sc-button bt-update"
+            <a class="sc-button bt-update" target="_blank"
+               :href="url.edit"
                :title="$t('action.edit')">
-            </button>
+            </a>
          </li>
          <li>
             <button class="sc-button bt-delete"
@@ -35,6 +37,14 @@
 export default {
    name: 'PersonItem',
    props: ['participation'],
+   data() {
+      return {
+         url: {
+            show: '/fr/person/' + this.participation.person.id + '/general',
+            edit: '/fr/person/' + this.participation.person.id + '/general/edit'
+         }
+      }
+   },
    emits: ['remove']
 }
 </script>

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

@@ -27,9 +27,13 @@
             {{ $t('persons_associated.addPerson') }}
          </button>
       </li>
+      <li>
+         <button class="sc-button orange" @click="savePersons">
+            {{ $t('action.save') }}
+         </button>
+      </li>
    </ul>
 </div>
-
 </template>
 
 <script>
@@ -49,6 +53,7 @@ export default {
    }),
    methods: {
       addPerson() {
+         console.log('[wip] opening add persons modal');
          this.$store.commit('addParticipation', {
             id: SimpsonId++,
             person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
@@ -58,6 +63,9 @@ export default {
       },
       removePerson(item) {
          this.$store.commit('removeParticipation', item)
+      },
+      savePersons() {
+         console.log('[wip] saving persons');
       }
    }
 }

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

@@ -1,11 +1,11 @@
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 import { datetimeFormats, messages } from './js/i18n'
-import createStore from './store'
+import { getDataPromise, postDataPromise } from './store'
 
 import App from './App.vue';
 
-createStore.then(store => {
+getDataPromise.then(store => {
 
    //console.log('store in create_store', store);
    console.log('store accompanyingCourse', store.state.accompanying_course);
@@ -24,4 +24,5 @@ createStore.then(store => {
    .use(i18n)
    .component('app', App)
    .mount('#accompanying-course');
+   
 });

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

@@ -30,6 +30,7 @@ const messages = {
          create: "Créer",
          remove: "Enlever",
          delete: "Supprimer",
+         save: "Enregistrer",
       }
    }
 };

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

@@ -1,12 +1,14 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import { getAccompanyingCourse, getParticipations } from '../api/accompanyingCourse';
+import { getAccompanyingCourse, postParticipation } from '../api/accompanyingCourse';
 
 const debug = process.env.NODE_ENV !== 'production';
 
-let promise = getAccompanyingCourse(window.accompanyingCourseId)
+const id = window.accompanyingCourseId;
+
+let getDataPromise = getAccompanyingCourse(id)
    .then(accompanying_course => new Promise((resolve, reject) => {
-      let store = createStore({
+      const store = createStore({
          strict: debug,
          state: {
             accompanying_course: accompanying_course
@@ -15,19 +17,36 @@ let promise = getAccompanyingCourse(window.accompanyingCourseId)
          },
          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)
+               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: {
          }
       });
-      //console.log('store', store);
+      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);
    }));
 
-export default promise;
+/*
+let allPromises = Promise.all([getDataPromise, postDataPromise])
+   .then((values) => {
+     console.log('all promises values', values);
+   });
+*/
+
+export { getDataPromise };