mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
activity vue component add and remove persons (in store)
This commit is contained in:
parent
666c1e7ae7
commit
e123ee5d03
@ -160,7 +160,7 @@ class ActivityType extends AbstractType
|
||||
}
|
||||
|
||||
if ($activityType->isVisible('persons')) {
|
||||
// TODO Faire évoluer le selecteur et la query
|
||||
// TODO Faire évoluer le selecteur et la query <=
|
||||
$builder->add('persons', EntityType::class, [
|
||||
'label' => $activityType->getLabel('persons'),
|
||||
'required' => $activityType->isRequired('persons'),
|
||||
@ -176,6 +176,7 @@ class ActivityType extends AbstractType
|
||||
}
|
||||
|
||||
if ($activityType->isVisible('thirdParties')) {
|
||||
// TODO Faire évoluer le selecteur et la query <=
|
||||
$builder->add('thirdParties', EntityType::class, [
|
||||
'label' => $activityType->getLabel('thirdParties'),
|
||||
'required' => $activityType->isRequired('thirdParties'),
|
||||
@ -200,6 +201,7 @@ class ActivityType extends AbstractType
|
||||
}
|
||||
|
||||
if ($activityType->isVisible('users')) {
|
||||
// TODO Faire évoluer le selecteur et la query <=
|
||||
$builder->add('users', EntityType::class, [
|
||||
'label' => $activityType->getLabel('users'),
|
||||
'required' => $activityType->isRequired('users'),
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,17 +1,25 @@
|
||||
<template>
|
||||
<li>
|
||||
<span class="badge badge-primary">{{ person.name }}
|
||||
<span class="badge badge-primary" :title="person.text">
|
||||
{{ textCutted }}
|
||||
<a class="fa fa-times"
|
||||
@click.prevent="$emit('close', person)"></a>
|
||||
@click.prevent="$emit('remove', person)">
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"PersonBadge",
|
||||
props: ['bloc', 'person'],
|
||||
emits: ['close']
|
||||
name: "PersonBadge",
|
||||
props: ['person'],
|
||||
computed: {
|
||||
textCutted() {
|
||||
let more = (this.person.text.length > 15) ?'…' : '';
|
||||
return this.person.text.slice(0,15) + more;
|
||||
}
|
||||
},
|
||||
emits: ['remove'],
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -7,10 +7,10 @@
|
||||
<div class="item-col">
|
||||
<ul class="list-content">
|
||||
<person-badge
|
||||
v-for="person in persons"
|
||||
v-bind:key="person.key"
|
||||
v-for="person in bloc.persons"
|
||||
v-bind:key="person.id"
|
||||
v-bind:person="person"
|
||||
@close="closePerson">
|
||||
@remove="removePerson">
|
||||
</person-badge>
|
||||
</ul>
|
||||
</div>
|
||||
@ -21,27 +21,17 @@
|
||||
<script>
|
||||
import PersonBadge from './PersonBadge.vue';
|
||||
export default {
|
||||
name:"DisplayPersonsBloc",
|
||||
name:"PersonsBloc",
|
||||
components: {
|
||||
PersonBadge
|
||||
},
|
||||
props: ['bloc'],
|
||||
data() {
|
||||
return {
|
||||
persons: [
|
||||
{ key: 97, name: "Joseph" },
|
||||
{ key: 62, name: "Clelia" },
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
props: ['bloc', 'setPersonsInBloc'],
|
||||
methods: {
|
||||
closePerson(item) {
|
||||
console.log('@@ CLICK close person: item', item);
|
||||
//this.$store.dispatch('closePerson', item);
|
||||
},
|
||||
removePerson(item) {
|
||||
console.log('@@ CLICK remove person: item', item);
|
||||
this.$store.dispatch('removePersonInvolved', item);
|
||||
this.setPersonsInBloc();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -4,7 +4,7 @@ const appMessages = {
|
||||
fr: {
|
||||
activity: {
|
||||
add_persons: "Ajouter des personnes concernées",
|
||||
bloc_persons: "Usagers du parcours",
|
||||
bloc_persons_associated: "Usagers du parcours",
|
||||
bloc_persons_not_associated: "Tiers non-pro.",
|
||||
bloc_thirdparty: "Tiers professionnels",
|
||||
bloc_users: "T(M)S",
|
||||
|
||||
@ -10,22 +10,50 @@ const store = createStore({
|
||||
activity: window.activity
|
||||
},
|
||||
getters: {
|
||||
|
||||
},
|
||||
mutations: {
|
||||
addPersonsInvolved(state, payload) {
|
||||
console.log('### mutation addPersonsInvolved', 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: {
|
||||
addPersonsInvolved({ commit }, payload) {
|
||||
console.log('### action addPersonsInvolved', payload);
|
||||
//let el = document.getElementById('form['activity']['xxx']['xxxx']');
|
||||
//let option = document.createElement('option');
|
||||
//option.value = person.id;
|
||||
//el.appendChild(option);
|
||||
commit('addPersonsInvolved', payload)
|
||||
}
|
||||
//let el = document.getElementById('form['activity']['xxx']['xxxx']');
|
||||
//let option = document.createElement('option');
|
||||
//option.value = person.id;
|
||||
//el.appendChild(option);
|
||||
commit('addPersonsInvolved', payload);
|
||||
},
|
||||
removePersonInvolved({ commit }, payload) {
|
||||
console.log('### action removePersonInvolved', payload);
|
||||
commit('removePersonInvolved', payload);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user