diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js index e6afa6374..2247e078d 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js @@ -22,9 +22,18 @@ let getDataPromise = getAccompanyingCourse(id) errorMsg: [] }, getters: { - //getSelectedByid: (state) => (id) => { - // return state.add_persons.selected.find(item => item.id === id) - //} + selectedAndSuggested: state => { + 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) { - - // 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); - + state.add_persons.suggested = suggested; }, 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); } } diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue index 54e00c63a..efb5ce832 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue +++ b/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() { diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue index 86071ae22..943ee731a 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue +++ b/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; }