chill-bundles/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue

<template>
   <teleport to="#add-persons">

      <div class="flex-bloc">
         <display-persons-bloc 
            v-for="bloc in personsBlocs"
            v-bind:key="bloc.key"
            v-bind:bloc="bloc">
         </display-persons-bloc>
      </div>

      <add-persons 
         buttonTitle="activity.add_persons"
         modalTitle="activity.add_persons"
         v-bind:key="addPersons.key"
         v-bind:options="addPersons.options"
         @addNewPersons="addNewPersons"
         ref="addPersons">
      </add-persons>
 
  </teleport>
</template>

<script>
import { mapState } from 'vuex';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import DisplayPersonsBloc from './components/DisplayPersonsBloc.vue';

export default {
   name: "App",
   components: {
      AddPersons,
      DisplayPersonsBloc
   },
   data() {
      return {
         personsBlocs: [
            {
               key: 'personsAssociated',
               title: 'activity.bloc_persons',
            },
            {
               key: 'personsNotAssociated',
               title: 'activity.bloc_persons_not_associated',
            },
            {
               key: 'thirdparty',
               title: 'activity.bloc_thirdparty',
            },
            {
               key: 'users',
               title: 'activity.bloc_users',
            },
         ],
         addPersons: {
            key: 'activity',
            options: {
               type: ['person', 'thirdparty'],
               priority: null,
               uniq: false,
            }
         }
      }
   },
   computed: mapState([
      'activity'
   ]),
   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;
      }
   }
}
</script>

<style lang="scss">
div.flex-bloc {
   margin-top: 1em;
   div.item-bloc {
      flex-basis: 25%;
      ul.list-content {
         list-style-type: none;
         padding-left: 0;
         li {
            a {
               color: white;
               &:hover {
                  color: #ffffffab;
               }
            }
         }
      }
   }
}
select#chill_activitybundle_activity_persons,
select#chill_activitybundle_activity_thirdParties,
select#chill_activitybundle_activity_users {
   display: none;
}
</style>