activity vue component add and remove persons (in store)

This commit is contained in:
2021-05-28 17:30:11 +02:00
parent 666c1e7ae7
commit e123ee5d03
6 changed files with 118 additions and 58 deletions

View File

@@ -2,11 +2,12 @@
<teleport to="#add-persons">
<div class="flex-bloc">
<display-persons-bloc
<persons-bloc
v-for="bloc in personsBlocs"
v-bind:key="bloc.key"
v-bind:bloc="bloc">
</display-persons-bloc>
v-bind:bloc="bloc"
v-bind:setPersonsInBloc="setPersonsInBloc">
</persons-bloc>
</div>
<add-persons
@@ -24,57 +25,87 @@
<script>
import { mapState } from 'vuex';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import DisplayPersonsBloc from './components/DisplayPersonsBloc.vue';
import PersonsBloc from './components/PersonsBloc.vue';
export default {
name: "App",
components: {
AddPersons,
DisplayPersonsBloc
PersonsBloc
},
data() {
return {
personsBlocs: [
{
key: 'personsAssociated',
title: 'activity.bloc_persons',
{ key: 'personsAssociated', title: 'activity.bloc_persons_associated',
persons: []
},
{
key: 'personsNotAssociated',
title: 'activity.bloc_persons_not_associated',
{ key: 'personsNotAssociated', title: 'activity.bloc_persons_not_associated',
persons: []
},
{
key: 'thirdparty',
title: 'activity.bloc_thirdparty',
{ key: 'thirdparty', title: 'activity.bloc_thirdparty',
persons: []
},
{
key: 'users',
title: 'activity.bloc_users',
{ key: 'users', title: 'activity.bloc_users',
persons: []
},
],
addPersons: {
key: 'activity',
options: {
type: ['person', 'thirdparty'],
type: ['person', 'thirdparty'], // TODO 'user'
priority: null,
uniq: false,
}
}
}
},
computed: mapState([
'activity'
]),
computed: {
...mapState({
persons: state => state.activity.persons,
thirdParties: state => state.activity.thirdParties,
users: state => state.activity.users,
accompanyingCourse: state => state.activity.accompanyingPeriod
})
},
methods: {
addNewPersons({ selected, modal }) {
console.log('@@@ CLICK button addNewPersons', selected);
selected.forEach(function(item) {
this.$store.dispatch('addPersonsInvolved', item);
console.log('item', item);
}, this
);
this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false;
this.setPersonsInBloc();
},
setPersonsInBloc() {
this.courseParticipations();
console.log('setPersonsInBloc');
this.personsBlocs.forEach(bloc => {
switch (bloc.key) {
case 'personsAssociated':
bloc.persons = this.persons;
break;
case 'personsNotAssociated':
//bloc.persons = this.persons;
break;
case 'thirdparty':
bloc.persons = this.thirdParties;
break;
case 'users':
bloc.persons = this.users;
break;
}
});
},
courseParticipations() {
this.accompanyingCourse.participations.forEach(participation => {
if (participation.endDate) {
console.log('usager du parcours', participation.person.text);
}
});
}
}
}
@@ -84,13 +115,14 @@ export default {
div.flex-bloc {
margin-top: 1em;
div.item-bloc {
flex-basis: 25%;
flex-grow: 0; flex-shrink: 0; flex-basis: 25%;
ul.list-content {
list-style-type: none;
padding-left: 0;
li {
a {
color: white;
cursor: pointer;
&:hover {
color: #ffffffab;
}