manage selected and suggested arrays: fix duplicate

This commit is contained in:
Mathieu Jaumotte 2021-05-06 17:43:32 +02:00
parent e1fcc41ace
commit b4ad0128e4
3 changed files with 20 additions and 50 deletions

View File

@ -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);
}
}

View File

@ -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() {

View File

@ -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;
}