no store for AddPersons, move store in data component

note: this allow to use same addPersons component
to add participations, requestor, or interlocutors.
each addPersons component has his own data()

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

@@ -25,9 +25,10 @@
 
    <add-persons 
       buttonTitle="persons_associated.add_persons"
-      v-bind:key="addNewPersons.key"
-      v-bind:options="addNewPersons.options"
-      @addNewPersons="addNewPersons">
+      v-bind:key="addPersons.key"
+      v-bind:options="addPersons.options"
+      @addNewPersons="addNewPersons"
+      ref="addPersons"> <!-- to cast child method -->
    </add-persons>
 
 </div>
@@ -46,7 +47,7 @@ export default {
    },
    data() {
       return {
-         addNewPersons: {
+         addPersons: {
             key: 'persons_associated',
             options: {
                type: ['person'],
@@ -62,6 +63,7 @@ export default {
    }),
    methods: {
       removeParticipation(item) {
+         console.log('@@ CLICK remove participation: item', item);
          this.$store.dispatch('removeParticipation', item);
       },
       closeParticipation(item) {
@@ -71,10 +73,10 @@ export default {
       addNewPersons({ selected, modal }) {
          console.log('@@@ CLICK button addNewPersons', selected);
          selected.forEach(function(item) {
-               //console.log('# dispatch action for each item', item);
                this.$store.dispatch('addParticipation', item);
             }, this
          );
+         this.$refs.addPersons.resetSearch(); // to cast child method
          modal.showModal = false;
       }
    }

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

@@ -1,6 +1,6 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import addPersons from './modules/addPersons'
+//import addPersons from './modules/addPersons'
 import { getAccompanyingCourse, postParticipation } from '../api';
 
 const debug = process.env.NODE_ENV !== 'production';
@@ -13,7 +13,7 @@ let initPromise = getAccompanyingCourse(id)
       const store = createStore({
          strict: debug,
          modules: {
-            addPersons
+            //addPersons
          },
          state: {
             accompanyingCourse: accompanying_course,
@@ -53,12 +53,12 @@ let initPromise = getAccompanyingCourse(id)
                      state.errorMsg.push(error.message); 
                   }); 
             },
-            addParticipation(addPersons, payload) {
+            addParticipation({ commit }, payload) {
                //console.log('## action: fetch post participation: payload', payload.id);
                postParticipation(id, payload.id, 'POST')
                   .then(participation => new Promise((resolve, reject) => {
-                     addPersons.commit('addParticipation', participation);
-                     addPersons.commit('resetState', payload);
+                     commit('addParticipation', participation);
+                     //addPersons.commit('resetState', payload);
                      resolve();
                   }))
                   .catch((error) => { 

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

@@ -44,8 +44,10 @@
 
                <person-suggestion
                   v-for="item in this.selectedAndSuggested.slice().reverse()"
+                  v-bind:key="item.id"
                   v-bind:item="item"
-                  v-bind:key="item.id">
+                  v-bind:search="search"
+                  @updateSelected="updateSelected">
                </person-suggestion>
 
                <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
@@ -66,51 +68,66 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion';
+import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons';
 
 export default {
    name: 'AddPersons',
-   props: ['buttonTitle', 'options'],
    components: {
       Modal,
       PersonSuggestion,
    },
+   props: [
+      'buttonTitle', 
+      'options'
+   ],
+   emits: ['addNewPersons'],
    data() {
       return {
          modal: {
             showModal: false,
             modalDialogClass: "modal-dialog-scrollable modal-xl"
          },
+         search: {
+            query: "",
+            suggested: [],
+            selected: []
+         }
       }
    },
    computed: {
-      ...mapState({
-         addPersons: state => state.addPersons
-      }),
       query: {
-         set(query, options) {
-            this.$store.dispatch('setQuery', { query, options });
+         set(query) {
+            return this.setQuery(query);
          },
          get() {
-            return this.addPersons.query;
+            return this.search.query;
          }
       },
       suggested() {
-         return this.addPersons.suggested;
+         return this.search.suggested;
       },
       suggestedCounter() {
-         return this.addPersons.suggested.length;
+         return this.search.suggested.length;
       },
       selected() {
-         return this.addPersons.selected;
+         return this.search.selected;
       },
       selectedCounter() {
-         return this.addPersons.selected.length;
+         return this.search.selected.length;
       },
       selectedAndSuggested() {
-         return this.$store.getters.selectedAndSuggested;
+         const uniqBy = (a, key) => [
+               ...new Map(
+                  a.map(x => [key(x), x])
+               ).values()
+         ];
+         let union = [...new Set([
+            ...this.suggested.slice().reverse(),
+            ...this.selected.slice().reverse(), 
+         ])];
+         return uniqBy(union, k => k.id);
       },
       options() {
          return this.options;
@@ -118,13 +135,35 @@ export default {
    },
    methods: {
       openModal() {
-         console.log('options 1', this.options);
          this.modal.showModal = true;
          this.$nextTick(function() {
             this.$refs.search.focus();
          })
+      },
+      setQuery(query) {
+         console.log('options 1', this.options);
+         this.search.query = query;
+         if (query.length >= 3) {
+            searchPersons({ query, options: this.options })
+               .then(suggested => new Promise((resolve, reject) => {
+                  this.loadSuggestions(suggested.results);
+                  resolve();
+            }));
+         } else {
+            this.loadSuggestions([]);
+         }
+      },
+      loadSuggestions(suggested) { 
+         this.search.suggested = suggested;
+      },
+      updateSelected(value) {
+         this.search.selected = value;
+      },
+      resetSearch() {
+         this.search.selected = [];
+         this.search.query = "";
+         this.search.suggested = [];
       }
    },
-   emits: ['addNewPersons'],
 }
 </script>

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

@@ -5,7 +5,7 @@
          <!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a-->
          <input class="" 
             type="checkbox" 
-            v-model="selected" 
+            v-model="selected"
             :value="item" />
             
          {{ item.text }}
@@ -27,27 +27,31 @@ import { mapState } from 'vuex';
 
 export default {
    name: 'PersonSuggestion',
-   props: ['item'],
+   props: [
+      'item', 
+      'search'
+   ],
+   emits: ['updateSelected'],
    data() {
       return {
          url: {
             show: '/fr/person/' + this.item.id + '/general',
             edit: '/fr/person/' + this.item.id + '/general/edit'
-         }
+         },
       }
    },
    computed: {
       selected: {
          set(value) {
-            this.$store.dispatch('updateSelected', value);
+            this.$emit('updateSelected', value);
          },
          get() {
-            return this.$store.state.addPersons.selected;
+            return this.search.selected;
          }
       },
       isChecked() {
-         return (this.selected.indexOf(this.item) === -1) ? false : true;
+         return (this.search.selected.indexOf(this.item) === -1) ? false : true;
       }
-   }
+   },
 };
 </script>