create addPersons store module, move state/getters/mutations/actions in module

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

@@ -22,10 +22,11 @@ let getAccompanyingCourse = (accompanying_period_id___) => { //tmp
 
 /*
 * Endpoint chill_person_accompanying_course_api_add_participation, 
-* method POST, add a participation to the accompanyingCourse
+* method POST/DELETE, add/close a participation to the accompanyingCourse
 *
 *  @accompanying_period_id integer - id of accompanyingCourse
-*  @person_id integer - id of person
+*  @person_id  integer - id of person
+*  @method     string - POST or DELETE
 */
 let postParticipation = (accompanying_period_id, person_id, method) => {
    const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}`

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

@@ -1,14 +1,14 @@
 import { createApp } from 'vue'
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { appMessages } from './js/i18n'
-import { getDataPromise } from './store'
+import { initPromise } from './store'
 
 import App from './App.vue';
 
-getDataPromise.then(store => {
+initPromise.then(store => {
 
    //console.log('store in create_store', store);
-   console.log('store accompanyingCourse', store.state.accompanying_course);
+   //console.log('store accompanyingCourse', store.state.accompanying_course);
 
    const i18n = _createI18n(appMessages);
   

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

@@ -1,39 +1,25 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
+import addPersons from './modules/addPersons'
 import { getAccompanyingCourse, postParticipation } from '../api';
-import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons'
 
 const debug = process.env.NODE_ENV !== 'production';
 
 const id = window.accompanyingCourseId; //tmp
 
-let getDataPromise = getAccompanyingCourse(id)
+let initPromise = getAccompanyingCourse(id)
    .then(accompanying_course => new Promise((resolve, reject) => {
             
       const store = createStore({
          strict: debug,
+         modules: {
+            addPersons: addPersons
+         },
          state: {
             accompanying_course: accompanying_course,
-            add_persons: {
-               query: "",
-               suggested: [],
-               selected: []
-            },
             errorMsg: []
          },
          getters: {
-            selectedAndSuggested: state => {
-               const uniqBy = (a, key) => [
-                     ...new Map(
-                        a.map(x => [key(x), x])
-                     ).values()
-               ];
-               let union = [...new Set([
-                  ...state.add_persons.suggested.slice().reverse(),
-                  ...state.add_persons.selected.slice().reverse(), 
-               ])];
-               return uniqBy(union, k => k.id);
-            }
          },
          mutations: {
             removeParticipation(state, item) {
@@ -49,33 +35,17 @@ let getDataPromise = getAccompanyingCourse(id)
                // pousse la participation
                state.accompanying_course.participations.push(participation);
             },
-            addParticipation(state, { participation, payload }) {
+            addParticipation(state, participation) {
                //console.log('### mutation: add participation', participation);
                state.accompanying_course.participations.push(participation);
-               //console.log('count participations from state', state.accompanying_course.participations.length);
-               //console.log('avant', state.add_persons.selected);
-               state.add_persons.selected = state.add_persons.selected.filter(value => value !== payload);
-               //console.log('après', state.add_persons.selected);
-               state.add_persons.query = "";
-               state.add_persons.suggested = [];
             },
-            setQuery(state, query) {
-               //console.log('q=', query);
-               state.add_persons = Object.assign({}, state.add_persons, query);
-            },
-            loadSuggestions(state, suggested) { 
-               state.add_persons.suggested = suggested;
-            },
-            updateSelected(state, value) {
-               state.add_persons.selected = value;
-            }
          },
          actions: {
             removeParticipation({ commit }, payload) {
                commit('removeParticipation', payload);
             },
             closeParticipation({ commit }, payload) {
-               console.log('## action: fetch delete participation: payload', payload.person.id);
+               //console.log('## action: fetch delete participation: payload', payload.person.id);
                postParticipation(id, payload.person.id, 'DELETE')
                   .then(participation => new Promise((resolve, reject) => {
                      //console.log('payload', payload);
@@ -83,42 +53,26 @@ let getDataPromise = getAccompanyingCourse(id)
                      resolve();
                   }))
                   .catch((error) => { 
-                     console.log('error', error);
                      state.errorMsg.push(error.message); 
                   }); 
             },
-            addParticipation({ commit }, payload) {
+            addParticipation(addPersons, payload) {
-               console.log('## action: fetch post participation: payload', payload.id);
+               //console.log('## action: fetch post participation: payload', payload.id);
                postParticipation(id, payload.id, 'POST')
                   .then(participation => new Promise((resolve, reject) => {
-                     commit('addParticipation', { participation, payload });
+                     //console.log(participation, payload);
+                     addPersons.commit('addParticipation', participation);
+                     addPersons.commit('resetState', payload);
                      resolve();
                   }))
                   .catch((error) => { 
                      state.errorMsg.push(error.message); 
                   }); 
             },
-            setQuery({ commit }, payload) {
-               commit('setQuery', payload);
-               //console.log('## action: setquery: payload', payload);
-               if (payload.query.length >= 3) {
-                  searchPersons(payload.query)
-                     .then(suggested => new Promise((resolve, reject) => {
-                        commit('loadSuggestions', suggested.results);
-                        resolve();
-                  }));
-               } else {
-                  commit('loadSuggestions', []);
-               }
-            },
-            updateSelected({ commit }, payload) {
-               //console.log('## action: update selected values: payload', payload);
-               commit('updateSelected', payload);
-            }
          }
       });
-      console.log('store object', store.state.accompanying_course.id);
+      //console.log('store object', store.state.accompanying_course.id);
       resolve(store);
    }));
 
-export { getDataPromise };
+export { initPromise };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/modules/addPersons.js

@@ -0,0 +1,76 @@
+import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons'
+import { postParticipation } from '../../api';
+
+
+// initial state
+const state = {
+   query: "",
+   suggested: [],
+   selected: []
+}
+
+// getters
+const getters = {
+   selectedAndSuggested: state => {
+      const uniqBy = (a, key) => [
+            ...new Map(
+               a.map(x => [key(x), x])
+            ).values()
+      ];
+      let union = [...new Set([
+         ...state.suggested.slice().reverse(),
+         ...state.selected.slice().reverse(), 
+      ])];
+      return uniqBy(union, k => k.id);
+   }
+}
+
+// mutations
+const mutations = {
+   setQuery(state, query) {
+      //console.log('q=', query);
+      state.query = query;
+   },
+   loadSuggestions(state, suggested) { 
+      state.suggested = suggested;
+   },
+   updateSelected(state, value) {
+      state.selected = value;
+   },
+   resetState(state, selected) {
+      //console.log('avant', state.selected);
+      state.selected = state.selected.filter(value => value !== selected);
+      //console.log('après', state.selected);
+      state.query = "";
+      state.suggested = [];
+   }
+}
+
+// actions
+const actions = {
+   setQuery({ commit }, payload) {
+      //console.log('## action: setquery: payload', payload);
+      commit('setQuery', payload.query);
+      if (payload.query.length >= 3) {
+         searchPersons(payload.query)
+            .then(suggested => new Promise((resolve, reject) => {
+               commit('loadSuggestions', suggested.results);
+               resolve();
+         }));
+      } else {
+         commit('loadSuggestions', []);
+      }
+   },
+   updateSelected({ commit }, payload) {
+      //console.log('## action: update selected values: payload', payload);
+      commit('updateSelected', payload);
+   }
+}
+
+export default {
+  //namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -55,7 +55,7 @@
          </template>
                
          <template v-slot:footer>
-            <button class="sc-button green" @click="addPersons">
+            <button class="sc-button green" @click="addNewPersons">
                <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
             </button>
          </template>
@@ -84,26 +84,28 @@ export default {
       }
    },
    computed: {
-      ...mapState(['add_persons']),
+      ...mapState({
+         addPersons: state => state.addPersons
+      }),
       query: {
          set(query) {
             this.$store.dispatch('setQuery', { query });
          },
          get() {
-            return this.add_persons.query;
+            return this.addPersons.query;
          }
       },
       suggested() {
-         return this.add_persons.suggested;
+         return this.addPersons.suggested;
       },
       suggestedCounter() {
-         return this.add_persons.suggested.length;
+         return this.addPersons.suggested.length;
       }, 
       selected() {
-         return this.add_persons.selected;
+         return this.addPersons.selected;
       }, 
       selectedCounter() {
-         return this.add_persons.selected.length;
+         return this.addPersons.selected.length;
       },
       selectedAndSuggested() {
          return this.$store.getters.selectedAndSuggested;
@@ -116,7 +118,7 @@ export default {
             this.$refs.search.focus();
          })
       },
-      addPersons() {
+      addNewPersons() {
          console.log('@@@ CLICK button addPersons')
          this.selected.forEach(function(item) {
                //console.log('# dispatch action for each item', item); 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue

@@ -42,12 +42,9 @@ export default {
             this.$store.dispatch('updateSelected', value);
          },
          get() {
-            return this.$store.state.add_persons.selected;
+            return this.$store.state.addPersons.selected;
          }
       },
-      //selectedAndSuggested() {
-      //   return this.$store.getters.selectedAndSuggested;
-      //},
       isChecked() {
          return (this.selected.indexOf(this.item) === -1) ? false : true;
       }