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/_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>