add a list of suggested persons on activity

This commit is contained in:
Julien Fastré 2021-08-22 00:50:37 +02:00
parent 2a3f869882
commit d6135641c5
2 changed files with 207 additions and 182 deletions

View File

@ -2,7 +2,7 @@
<teleport to="#add-persons"> <teleport to="#add-persons">
<div class="flex-bloc concerned-groups" :class="getContext"> <div class="flex-bloc concerned-groups" :class="getContext">
<persons-bloc <persons-bloc
v-for="bloc in contextPersonsBlocs" v-for="bloc in contextPersonsBlocs"
v-bind:key="bloc.key" v-bind:key="bloc.key"
v-bind:bloc="bloc" v-bind:bloc="bloc"
@ -10,7 +10,15 @@
</persons-bloc> </persons-bloc>
</div> </div>
<add-persons <div v-if="getContext === 'accompanyingCourse' && filterSuggestedPersons.length > 0">
<ul>
<li v-for="p in filterSuggestedPersons" @click="addNewPerson(p)">
{{ p.text }}
</li>
</ul>
</div>
<add-persons
buttonTitle="activity.add_persons" buttonTitle="activity.add_persons"
modalTitle="activity.add_persons" modalTitle="activity.add_persons"
v-bind:key="addPersons.key" v-bind:key="addPersons.key"
@ -18,12 +26,12 @@
@addNewPersons="addNewPersons" @addNewPersons="addNewPersons"
ref="addPersons"> ref="addPersons">
</add-persons> </add-persons>
</teleport> </teleport>
</template> </template>
<script> <script>
import { mapState } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'; import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import PersonsBloc from './ConcernedGroups/PersonsBloc.vue'; import PersonsBloc from './ConcernedGroups/PersonsBloc.vue';
@ -36,29 +44,29 @@ export default {
data() { data() {
return { return {
personsBlocs: [ personsBlocs: [
{ key: 'persons', { key: 'persons',
title: 'activity.bloc_persons', title: 'activity.bloc_persons',
persons: [], persons: [],
included: false included: false
}, },
{ key: 'personsAssociated', { key: 'personsAssociated',
title: 'activity.bloc_persons_associated', title: 'activity.bloc_persons_associated',
persons: [], persons: [],
included: false included: false
}, },
{ key: 'personsNotAssociated', { key: 'personsNotAssociated',
title: 'activity.bloc_persons_not_associated', title: 'activity.bloc_persons_not_associated',
persons: [], persons: [],
included: false included: false
}, },
{ key: 'thirdparty', { key: 'thirdparty',
title: 'activity.bloc_thirdparty', title: 'activity.bloc_thirdparty',
persons: [], persons: [],
included: true included: true
}, },
{ key: 'users', { key: 'users',
title: 'activity.bloc_users', title: 'activity.bloc_users',
persons: [], persons: [],
included: true included: true
}, },
], ],
@ -79,6 +87,9 @@ export default {
users: state => state.activity.users, users: state => state.activity.users,
accompanyingCourse: state => state.activity.accompanyingPeriod accompanyingCourse: state => state.activity.accompanyingPeriod
}), }),
...mapGetters([
'filterSuggestedPersons'
]),
getContext() { getContext() {
return (this.accompanyingCourse) ? "accompanyingCourse" : "person"; return (this.accompanyingCourse) ? "accompanyingCourse" : "person";
}, },
@ -91,10 +102,10 @@ export default {
}, },
methods: { methods: {
setPersonsInBloc() { setPersonsInBloc() {
let groups; let groups;
if (this.accompanyingCourse) { if (this.accompanyingCourse) {
groups = this.splitPersonsInGroups(); groups = this.splitPersonsInGroups();
} }
this.personsBlocs.forEach(bloc => { this.personsBlocs.forEach(bloc => {
if (this.accompanyingCourse) { if (this.accompanyingCourse) {
switch (bloc.key) { switch (bloc.key) {
@ -109,7 +120,7 @@ export default {
} }
} else { } else {
switch (bloc.key) { switch (bloc.key) {
case 'persons': case 'persons':
bloc.persons = this.persons; bloc.persons = this.persons;
bloc.included = true; bloc.included = true;
break; break;
@ -128,7 +139,7 @@ export default {
splitPersonsInGroups() { splitPersonsInGroups() {
let personsAssociated = []; let personsAssociated = [];
let personsNotAssociated = this.persons; let personsNotAssociated = this.persons;
let participations = this.getCourseParticipations(); let participations = this.getCourseParticipations();
this.persons.forEach(person => { this.persons.forEach(person => {
participations.forEach(participation => { participations.forEach(participation => {
if (person.id === participation.id) { if (person.id === participation.id) {
@ -138,9 +149,9 @@ export default {
} }
}); });
}); });
return { return {
'personsAssociated': personsAssociated, 'personsAssociated': personsAssociated,
'personsNotAssociated': personsNotAssociated 'personsNotAssociated': personsNotAssociated
}; };
}, },
getCourseParticipations() { getCourseParticipations() {
@ -161,7 +172,11 @@ export default {
this.$refs.addPersons.resetSearch(); // to cast child method this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false; modal.showModal = false;
this.setPersonsInBloc(); this.setPersonsInBloc();
} },
addNewPerson(person) {
this.$store.dispatch('addPersonsInvolved', { result: person, type: 'person' });
this.setPersonsInBloc();
},
} }
} }
</script> </script>

View File

@ -5,165 +5,175 @@ const debug = process.env.NODE_ENV !== 'production';
//console.log('window.activity', window.activity); //console.log('window.activity', window.activity);
const addIdToValue = (string, id) => { const addIdToValue = (string, id) => {
let array = string ? string.split(',') : []; let array = string ? string.split(',') : [];
array.push(id.toString()); array.push(id.toString());
let str = array.join(); let str = array.join();
return str; return str;
}; };
const removeIdFromValue = (string, id) => { const removeIdFromValue = (string, id) => {
let array = string.split(','); let array = string.split(',');
array = array.filter(el => el !== id.toString()); array = array.filter(el => el !== id.toString());
let str = array.join(); let str = array.join();
return str; return str;
}; };
const store = createStore({ const store = createStore({
strict: debug, strict: debug,
state: { state: {
activity: window.activity, activity: window.activity,
socialIssuesOther: [], socialIssuesOther: [],
socialActionsList: [], socialActionsList: [],
}, },
mutations: { getters: {
filterSuggestedPersons(state) {
// SocialIssueAcc if (typeof(state.activity.accompanyingPeriod) === 'undefined') {
addIssueInList(state, issue) { return [];
//console.log('add issue list', issue.id);
state.activity.accompanyingPeriod.socialIssues.push(issue);
},
addIssueSelected(state, issue) {
//console.log('add issue selected', issue.id);
state.activity.socialIssues.push(issue);
},
updateIssuesSelected(state, issues) {
//console.log('update issues selected', issues);
state.activity.socialIssues = issues;
},
updateIssuesOther(state, payload) {
//console.log('update issues other');
state.socialIssuesOther = payload;
},
removeIssueInOther(state, issue) {
//console.log('remove issue other', issue.id);
state.socialIssuesOther = state.socialIssuesOther.filter(i => i.id !== issue.id);
},
resetActionsList(state) {
//console.log('reset list actions');
state.socialActionsList = [];
},
addActionInList(state, action) {
//console.log('add action list', action.id);
state.socialActionsList.push(action);
},
updateActionsSelected(state, actions) {
//console.log('update actions selected', actions);
state.activity.socialActions = actions;
},
filterList(state, list) {
const filterList = (list) => {
// remove duplicates entries
list = list.filter((value, index) => list.findIndex(array => array.id === value.id) === index);
// alpha sort
list.sort((a,b) => (a.text > b.text) ? 1 : ((b.text > a.text) ? -1 : 0));
return list;
};
if (list === 'issues') {
state.activity.accompanyingPeriod.socialIssues = filterList(state.activity.accompanyingPeriod.socialIssues);
}
if (list === 'actions') {
state.socialActionsList = filterList(state.socialActionsList);
}
},
// ConcernedGroups
addPersonsInvolved(state, payload) {
//console.log('### mutation addPersonsInvolved', payload.result.type);
switch (payload.result.type) {
case 'person':
state.activity.persons.push(payload.result);
break;
case 'thirdparty':
state.activity.thirdParties.push(payload.result);
break;
case 'user':
state.activity.users.push(payload.result);
break;
};
},
removePersonInvolved(state, payload) {
//console.log('### mutation removePersonInvolved', payload.type);
switch (payload.type) {
case 'person':
state.activity.persons = state.activity.persons.filter(person => person !== payload);
break;
case 'thirdparty':
state.activity.thirdParties = state.activity.thirdParties.filter(thirdparty => thirdparty !== payload);
break;
case 'user':
state.activity.users = state.activity.users.filter(user => user !== payload);
break;
};
} }
}, let existingPersonIds = state.activity.persons.map(p => p.id);
actions: { return state.activity.accompanyingPeriod.participations.filter(p => p.endDate === null)
addIssueSelected({ commit }, issue) { .map(p => p.person)
let aSocialIssues = document.getElementById("chill_activitybundle_activity_socialIssues"); .filter(p => !existingPersonIds.includes(p.id))
aSocialIssues.value = addIdToValue(aSocialIssues.value, issue.id); }
commit('addIssueSelected', issue); },
}, mutations: {
updateIssuesSelected({ commit }, payload) { // SocialIssueAcc
let aSocialIssues = document.getElementById("chill_activitybundle_activity_socialIssues"); addIssueInList(state, issue) {
aSocialIssues.value = ''; //console.log('add issue list', issue.id);
payload.forEach(item => { state.activity.accompanyingPeriod.socialIssues.push(issue);
aSocialIssues.value = addIdToValue(aSocialIssues.value, item.id); },
}); addIssueSelected(state, issue) {
commit('updateIssuesSelected', payload); //console.log('add issue selected', issue.id);
}, state.activity.socialIssues.push(issue);
updateActionsSelected({ commit }, payload) { },
let aSocialActions = document.getElementById("chill_activitybundle_activity_socialActions"); updateIssuesSelected(state, issues) {
aSocialActions.value = ''; //console.log('update issues selected', issues);
payload.forEach(item => { state.activity.socialIssues = issues;
aSocialActions.value = addIdToValue(aSocialActions.value, item.id); },
}); updateIssuesOther(state, payload) {
commit('updateActionsSelected', payload); //console.log('update issues other');
}, state.socialIssuesOther = payload;
addPersonsInvolved({ commit }, payload) { },
//console.log('### action addPersonsInvolved', payload.result.type); removeIssueInOther(state, issue) {
switch (payload.result.type) { //console.log('remove issue other', issue.id);
case 'person': state.socialIssuesOther = state.socialIssuesOther.filter(i => i.id !== issue.id);
let aPersons = document.getElementById("chill_activitybundle_activity_persons"); },
aPersons.value = addIdToValue(aPersons.value, payload.result.id); resetActionsList(state) {
break; //console.log('reset list actions');
case 'thirdparty': state.socialActionsList = [];
let aThirdParties = document.getElementById("chill_activitybundle_activity_thirdParties"); },
aThirdParties.value = addIdToValue(aThirdParties.value, payload.result.id); addActionInList(state, action) {
break; //console.log('add action list', action.id);
case 'user': state.socialActionsList.push(action);
let aUsers = document.getElementById("chill_activitybundle_activity_users"); },
aUsers.value = addIdToValue(aUsers.value, payload.result.id); updateActionsSelected(state, actions) {
break; //console.log('update actions selected', actions);
}; state.activity.socialActions = actions;
commit('addPersonsInvolved', payload); },
}, filterList(state, list) {
removePersonInvolved({ commit }, payload) { const filterList = (list) => {
//console.log('### action removePersonInvolved', payload); // remove duplicates entries
switch (payload.type) { list = list.filter((value, index) => list.findIndex(array => array.id === value.id) === index);
case 'person': // alpha sort
let aPersons = document.getElementById("chill_activitybundle_activity_persons"); list.sort((a,b) => (a.text > b.text) ? 1 : ((b.text > a.text) ? -1 : 0));
aPersons.value = removeIdFromValue(aPersons.value, payload.id); return list;
break; };
case 'thirdparty': if (list === 'issues') {
let aThirdParties = document.getElementById("chill_activitybundle_activity_thirdParties"); state.activity.accompanyingPeriod.socialIssues = filterList(state.activity.accompanyingPeriod.socialIssues);
aThirdParties.value = removeIdFromValue(aThirdParties.value, payload.id);
break;
case 'user':
let aUsers = document.getElementById("chill_activitybundle_activity_users");
aUsers.value = removeIdFromValue(aUsers.value, payload.id);
break;
};
commit('removePersonInvolved', payload);
} }
if (list === 'actions') {
state.socialActionsList = filterList(state.socialActionsList);
}
},
// ConcernedGroups
addPersonsInvolved(state, payload) {
//console.log('### mutation addPersonsInvolved', payload.result.type);
switch (payload.result.type) {
case 'person':
state.activity.persons.push(payload.result);
break;
case 'thirdparty':
state.activity.thirdParties.push(payload.result);
break;
case 'user':
state.activity.users.push(payload.result);
break;
};
},
removePersonInvolved(state, payload) {
//console.log('### mutation removePersonInvolved', payload.type);
switch (payload.type) {
case 'person':
state.activity.persons = state.activity.persons.filter(person => person !== payload);
break;
case 'thirdparty':
state.activity.thirdParties = state.activity.thirdParties.filter(thirdparty => thirdparty !== payload);
break;
case 'user':
state.activity.users = state.activity.users.filter(user => user !== payload);
break;
};
}
},
actions: {
addIssueSelected({ commit }, issue) {
let aSocialIssues = document.getElementById("chill_activitybundle_activity_socialIssues");
aSocialIssues.value = addIdToValue(aSocialIssues.value, issue.id);
commit('addIssueSelected', issue);
},
updateIssuesSelected({ commit }, payload) {
let aSocialIssues = document.getElementById("chill_activitybundle_activity_socialIssues");
aSocialIssues.value = '';
payload.forEach(item => {
aSocialIssues.value = addIdToValue(aSocialIssues.value, item.id);
});
commit('updateIssuesSelected', payload);
},
updateActionsSelected({ commit }, payload) {
let aSocialActions = document.getElementById("chill_activitybundle_activity_socialActions");
aSocialActions.value = '';
payload.forEach(item => {
aSocialActions.value = addIdToValue(aSocialActions.value, item.id);
});
commit('updateActionsSelected', payload);
},
addPersonsInvolved({ commit }, payload) {
//console.log('### action addPersonsInvolved', payload.result.type);
switch (payload.result.type) {
case 'person':
let aPersons = document.getElementById("chill_activitybundle_activity_persons");
aPersons.value = addIdToValue(aPersons.value, payload.result.id);
break;
case 'thirdparty':
let aThirdParties = document.getElementById("chill_activitybundle_activity_thirdParties");
aThirdParties.value = addIdToValue(aThirdParties.value, payload.result.id);
break;
case 'user':
let aUsers = document.getElementById("chill_activitybundle_activity_users");
aUsers.value = addIdToValue(aUsers.value, payload.result.id);
break;
};
commit('addPersonsInvolved', payload);
},
removePersonInvolved({ commit }, payload) {
//console.log('### action removePersonInvolved', payload);
switch (payload.type) {
case 'person':
let aPersons = document.getElementById("chill_activitybundle_activity_persons");
aPersons.value = removeIdFromValue(aPersons.value, payload.id);
break;
case 'thirdparty':
let aThirdParties = document.getElementById("chill_activitybundle_activity_thirdParties");
aThirdParties.value = removeIdFromValue(aThirdParties.value, payload.id);
break;
case 'user':
let aUsers = document.getElementById("chill_activitybundle_activity_users");
aUsers.value = removeIdFromValue(aUsers.value, payload.id);
break;
};
commit('removePersonInvolved', payload);
}
} }
}); });