concerned parties in vue component: display 3 or 4 bloc according to context

src/Bundle/ChillActivityBundle/Resources/public/scss/chillactivity.scss

@@ -18,6 +18,7 @@ div.flex-bloc.concerned-groups {
          list-style-type: none;
          padding-left: 0;
          li {
+            margin-bottom: 0.2em;
             a {
                color: white;
                cursor: pointer;

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

@@ -1,9 +1,9 @@
 <template>
    <teleport to="#add-persons">
 
-      <div class="flex-bloc">
+      <div class="flex-bloc concerned-groups" :class="getContext">
          <persons-bloc 
-            v-for="bloc in personsBlocs"
+            v-for="bloc in contextPersonsBlocs"
             v-bind:key="bloc.key"
             v-bind:bloc="bloc"
             v-bind:setPersonsInBloc="setPersonsInBloc">
@@ -36,21 +36,30 @@ export default {
    data() {
       return {
          personsBlocs: [
+            {  key: 'persons', 
+               title: 'activity.bloc_persons', 
+               persons: [], 
+               included: false 
+            },
             {  key: 'personsAssociated', 
                title: 'activity.bloc_persons_associated', 
-               persons: [] 
+               persons: [], 
+               included: false 
             },
             {  key: 'personsNotAssociated', 
                title: 'activity.bloc_persons_not_associated', 
-               persons: [] 
+               persons: [], 
+               included: false 
             },
             {  key: 'thirdparty', 
                title: 'activity.bloc_thirdparty', 
-               persons: []
+               persons: [], 
+               included: true
             },
             {  key: 'users', 
                title: 'activity.bloc_users', 
-               persons: []
+               persons: [], 
+               included: true
             },
          ],
          addPersons: {
@@ -69,23 +78,54 @@ export default {
          thirdParties: state => state.activity.thirdParties,
          users: state => state.activity.users,
          accompanyingCourse: state => state.activity.accompanyingPeriod
-      })
+      }),
+      getContext() {
+         return (this.accompanyingCourse) ? "accompanyingCourse" : "person";
+      },
+      contextPersonsBlocs() {
+         return this.personsBlocs.filter(bloc => bloc.included !== false);
+      }
    },
    mounted() {
       this.setPersonsInBloc();
    },
    methods: {
-      addNewPersons({ selected, modal }) {
-         console.log('@@@ CLICK button addNewPersons', selected);
-         selected.forEach(function(item) {
-               this.$store.dispatch('addPersonsInvolved', item);
-            }, this
-         );
-         this.$refs.addPersons.resetSearch(); // to cast child method
-         modal.showModal = false;
-         this.setPersonsInBloc();
+      setPersonsInBloc() {
+         let groups; 
+         if (this.accompanyingCourse) {
+            groups = this.splitPersonsInGroups();
+         }     
+         this.personsBlocs.forEach(bloc => {
+            if (this.accompanyingCourse) {
+               switch (bloc.key) {
+                  case 'personsAssociated':
+                     bloc.persons = groups.personsAssociated;
+                     bloc.included = true;
+                     break;
+                  case 'personsNotAssociated':
+                     bloc.persons = groups.personsNotAssociated;
+                     bloc.included = true;
+                     break;
+               }
+            } else {
+               switch (bloc.key) {
+                  case 'persons': 
+                     bloc.persons = this.persons;
+                     bloc.included = true;
+                     break;
+               }
+            }
+            switch (bloc.key) {
+               case 'thirdparty':
+                  bloc.persons = this.thirdParties;
+                  break;
+               case 'users':
+                  bloc.persons = this.users;
+                  break;
+            }
+         }, groups);
       },
-      setPersonsInBloc() {         
+      splitPersonsInGroups() {
          let personsAssociated = [];
          let personsNotAssociated = this.persons;
          let participations = this.getCourseParticipations();         
@@ -98,24 +138,10 @@ export default {
                }
             });
          });
-         this.personsBlocs.forEach(bloc => {
-            switch (bloc.key) {
-               case 'personsAssociated':
-                  console.log('personsAssociated', personsAssociated);
-                  bloc.persons = personsAssociated;
-                  break;
-               case 'personsNotAssociated':
-                  console.log('personsNotAssociated', personsNotAssociated);
-                  bloc.persons = personsNotAssociated;
-                  break;
-               case 'thirdparty':
-                  bloc.persons = this.thirdParties;
-                  break;
-               case 'users':
-                  bloc.persons = this.users;
-                  break;
-            }
-         });
+         return { 
+            'personsAssociated': personsAssociated, 
+            'personsNotAssociated': personsNotAssociated 
+         };
       },
       getCourseParticipations() {
          let participations = [];
@@ -125,29 +151,20 @@ export default {
             }
          });
          return participations;
+      },
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         selected.forEach(function(item) {
+               this.$store.dispatch('addPersonsInvolved', item);
+            }, this
+         );
+         this.$refs.addPersons.resetSearch(); // to cast child method
+         modal.showModal = false;
+         this.setPersonsInBloc();
       }
    }
 }
 </script>
 
 <style lang="scss">
-div.flex-bloc {
-   margin-top: 1em;
-   div.item-bloc {
-      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;
-               }
-            }
-         }
-      }
-   }
-}
 </style>

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

@@ -4,6 +4,7 @@ const appMessages = {
    fr: {
       activity: {
          add_persons: "Ajouter des personnes concernées",
+         bloc_persons: "Usagers",
          bloc_persons_associated: "Usagers du parcours",
          bloc_persons_not_associated: "Tiers non-pro.",
          bloc_thirdparty: "Tiers professionnels",