activity vue component add and remove persons (in store)

src/Bundle/ChillActivityBundle/Form/ActivityType.php

@@ -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'),

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue

@@ -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">
+            v-bind:bloc="bloc"
-         </display-persons-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_associated', 
-               key: 'personsAssociated',
+               persons: [] 
-               title: 'activity.bloc_persons',
             },
-            {
+            {  key: 'personsNotAssociated', title: 'activity.bloc_persons_not_associated', 
-               key: 'personsNotAssociated',
+               persons: [] 
-               title: 'activity.bloc_persons_not_associated',
             },
-            {
+            {  key: 'thirdparty', title: 'activity.bloc_thirdparty', 
-               key: 'thirdparty',
+               persons: []
-               title: 'activity.bloc_thirdparty',
             },
-            {
+            {  key: 'users', title: 'activity.bloc_users', 
-               key: 'users',
+               persons: []
-               title: 'activity.bloc_users',
             },
          ],
          addPersons: {
             key: 'activity',
             options: {
-               type: ['person', 'thirdparty'],
+               type: ['person', 'thirdparty'], // TODO 'user'
                priority: null,
                uniq: false,
             }
          }
       }
    },
-   computed: mapState([
+   computed: {
-      'activity'
+      ...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;
                }

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonBadge.vue

@@ -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",
+   name: "PersonBadge",
-   props: ['bloc', 'person'],
+   props: ['person'],
-   emits: ['close']
+   computed: {
+      textCutted() {
+         let more = (this.person.text.length > 15) ?'…' : '';
+         return this.person.text.slice(0,15) + more;
+      }
+   },
+   emits: ['remove'],
 }
 </script>
 

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonsBloc.vue

@@ -7,10 +7,10 @@
          <div class="item-col">
             <ul class="list-content">
                <person-badge
-                  v-for="person in persons"
+                  v-for="person in bloc.persons"
-                  v-bind:key="person.key"
+                  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'],
+   props: ['bloc', 'setPersonsInBloc'],
-   data() {
-      return {
-         persons: [
-            { key: 97, name: "Joseph" },
-            { key: 62, name: "Clelia" },
-         ]
-      }
-   },
-   computed: {
-      
-   },
    methods: {
-      closePerson(item) {
+      removePerson(item) {
-         console.log('@@ CLICK close person: item', item);
+         console.log('@@ CLICK remove person: item', item);
-         //this.$store.dispatch('closePerson', item);
+         this.$store.dispatch('removePersonInvolved', item);
-      },
+         this.setPersonsInBloc();
+      }
    }
 }
 </script>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js

@@ -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",

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js

@@ -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 el = document.getElementById('form['activity']['xxx']['xxxx']');
-        //let option = document.createElement('option');
+         //let option = document.createElement('option');
-        //option.value = person.id;
+         //option.value = person.id;
-        //el.appendChild(option);
+         //el.appendChild(option);
-        commit('addPersonsInvolved', payload)
+         commit('addPersonsInvolved', payload);
-     }
+      },
+      removePersonInvolved({ commit }, payload) {
+         console.log('### action removePersonInvolved', payload);
+         commit('removePersonInvolved', payload);
+      }
   }
 });