mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 23:23:51 +00:00
activity vue component add and remove persons (in store)
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
Reference in New Issue
Block a user