manage selected and suggested arrays: fix duplicate

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

@@ -22,9 +22,18 @@ let getDataPromise = getAccompanyingCourse(id)
             errorMsg: []
          },
          getters: {
-            //getSelectedByid: (state) => (id) => {
+            selectedAndSuggested: state => {
-            //   return state.add_persons.selected.find(item => item.id === id)
+               let uniqBy = (a, key) => [
-            //}
+                     ...new Map(
+                        a.map(x => [key(x), x])
+                     ).values()
+               ];
+               let union = [...new Set([
+                  ...state.add_persons.selected, 
+                  ...state.add_persons.suggested,
+               ])];
+               return uniqBy(union, k => k.id);
+            }
          },
          mutations: {
             removeParticipation(state, item) {
@@ -55,49 +64,9 @@ let getDataPromise = getAccompanyingCourse(id)
                state.add_persons = Object.assign({}, state.add_persons, query);
             },
             loadSuggestions(state, suggested) { 
-               
+               state.add_persons.suggested = suggested;
-               // les résultats combinent les valeurs suggérées et les valeurs sélectionnées 
-               // si on change de recherche les valeurs sélectionnées doivent restées affichées !
-               // c'est pq on affiche indépendamment les 2 tableaux, 
-               // mais on veut s'assurer d'enlever les doublons dans le tableau des suggestions
-               
-               // problème: certaines fonctions javascript ne supportent pas de manipuler les 2 tableaux 
-               // si l'un est un objet virtuel de vue (Proxy)
-               // [{},{},{}] et [Proxy,Proxy,Proxy]
-               
-               // a. remplace par les nouvelles valeurs
-               //state.add_persons.suggested = suggested;
-               
-               // b.1 réinitialise avec un tableau vide
-               //state.add_persons.suggested = []; // <== empêche la création du proxy, réinitialiser autrement
-               
-               // b.2 vide le tableau avec splice
-               state.add_persons.suggested.splice(0, 
-                  state.add_persons.suggested.length
-               ); 
-               
-               console.log('suggestions', state.add_persons.suggested); 
-               
-               // b. pousse les nouvelles valeurs dans le tableau
-               suggested.forEach(function(item) {
-                  state.add_persons.suggested.push(item);
-               });
-               
-               console.log('selections', state.add_persons.selected);  
-               console.log('suggestions', state.add_persons.suggested); 
-               
-               // calcule l'intersection des 2 tableaux
-               let intersection = state.add_persons.suggested.filter(
-                  item => state.add_persons.selected.indexOf(item) !== -1
-                  //function(item) {let x = state.add_persons.selected.indexOf(item); console.log('indexof', x); return x !== -1; }
-               );
-               console.log('intersection', intersection);
-               // enlève l'intersection des 2 tableaux
-               state.add_persons.suggested = state.add_persons.suggested.filter(item => item !== intersection);
-               
             },
             updateSelected(state, value) {
-               console.log('update selected values', value);
                state.add_persons.selected = value;
             }
          },
@@ -131,7 +100,7 @@ let getDataPromise = getAccompanyingCourse(id)
             },
             setQuery({ commit }, payload) {
                commit('setQuery', payload);
-               console.log('## action: setquery: payload', payload);
+               //console.log('## action: setquery: payload', payload);
                if (payload.query.length >= 3) {
                   searchPersons(payload.query)
                      .then(suggested => new Promise((resolve, reject) => {
@@ -143,6 +112,7 @@ let getDataPromise = getAccompanyingCourse(id)
                }
             },
             updateSelected({ commit }, payload) {
+               //console.log('## action: update selected values: payload', payload);
                commit('updateSelected', payload);
             }
          }

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

@@ -65,8 +65,6 @@ import { mapState } from 'vuex';
 import Modal from 'ChillPersonAssets/vuejs/_components/Modal';
 import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion';
 
-const SimpsonId = 10000;
-
 export default {
    name: 'AddPersons',
    components: {
@@ -101,12 +99,11 @@ export default {
          return this.add_persons.selected;
       }, 
       selectedCounter() {
-         if (! this.add_persons.selected) { return 0; }
          return this.add_persons.selected.length;
       },
       selectedAndSuggested() {
-         return [...new Set([...this.selected, ...this.suggested])];
+         return this.$store.getters.selectedAndSuggested;
-      },
+      }
    },
    methods: {
       openModal() {

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

@@ -45,6 +45,9 @@ export default {
             return this.$store.state.add_persons.selected;
          }
       },
+      selectedAndSuggested() {
+         return this.$store.getters.selectedAndSuggested;
+      },
       isChecked() {
          return (this.selected.indexOf(this.item) === -1) ? false : true;
       }