chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue

<template>
<div class="vue-component">
   <h2><a name="section-10"></a>{{ $t('persons_associated.title')}}</h2>
   
   <div>
      <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
   </div>

   <participation-item
   v-for="participation in participations"
   v-bind:participation="participation"
   v-bind:key="participation.id"
   @remove="removeParticipation"
   @close="closeParticipation">
   </participation-item>
   
   <!-- <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
      <thead>
         <tr>
            <th class="chill-orange">{{ $t('persons_associated.name') }}</th>
            <th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>
            <th class="chill-orange">{{ $t('persons_associated.enddate') }}</th>
            <th class="chill-orange">{{ $t('action.actions') }}</th>
         </tr>
      </thead>
      <tbody>
         <participation-item
            v-for="participation in participations"
            v-bind:participation="participation"
            v-bind:key="participation.id"
            @remove="removeParticipation"
            @close="closeParticipation">
         </participation-item>
      </tbody>
   </table> -->

   <div>
      <add-persons 
         buttonTitle="persons_associated.add_persons"
         modalTitle="add_persons.title"
         v-bind:key="addPersons.key"
         v-bind:options="addPersons.options"
         @addNewPersons="addNewPersons"
         ref="addPersons"> <!-- to cast child method -->
      </add-persons>
   </div>

</div>
</template>

<script>
import { mapState } from 'vuex';
import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue"
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'

export default {
   name: 'PersonsAssociated',
   components: {
      ParticipationItem,
      AddPersons
   },
   data() {
      return {
         addPersons: {
            key: 'persons_associated',
            options: {
               type: ['person'],
               priority: null,
               uniq: false,
            }
         }
      }
   },
   computed: mapState({
      participations: state => state.accompanyingCourse.participations,
      counter: state => state.accompanyingCourse.participations.length
   }),
   methods: {
      removeParticipation(item) {
         console.log('@@ CLICK remove participation: item', item);
         this.$store.dispatch('removeParticipation', item);
      },
      closeParticipation(item) {
         console.log('@@ CLICK close participation: item', item);
         this.$store.dispatch('closeParticipation', item);
      },
      addNewPersons({ selected, modal }) {
         console.log('@@@ CLICK button addNewPersons', selected);
         selected.forEach(function(item) {
               this.$store.dispatch('addParticipation', item);
            }, this
         );
         this.$refs.addPersons.resetSearch(); // to cast child method
         modal.showModal = false;
      }
   }
}
</script>