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

<template>
<div class="vue-component">
   <h3>{{ $t('persons_associated.title')}}</h3>
   <label>{{ $tc('persons_associated.counter', counter) }}</label>
   <table class="rounded"> 
      <thead>
         <tr>
            <th class="chill-orange">{{ $t('persons_associated.firstname') }}</th>
            <th class="chill-orange">{{ $t('persons_associated.lastname') }}</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> 
         <person-item 
            v-for="participation in participations" 
            v-bind:participation="participation" 
            v-bind:key="participation.id" 
            @remove="removeParticipation">
         </person-item>
      </tbody>
   </table>
   <add-persons></add-persons>
   <ul class="record_actions">
      <!--li>
         <button class="sc-button orange" @click="savePersons">
            {{ $t('action.save') }}
         </button>
      </li-->
   </ul>
</div>
</template>

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

export default {
   name: 'PersonsAssociated',
   components: { 
      PersonItem,
      AddPersons
   },
   computed: mapState({
      participations: state => state.accompanying_course.participations,
      counter: state => state.accompanying_course.participations.length
   }),
   methods: {
      removeParticipation(item) {
         this.$store.dispatch('removeParticipation', item)
      },
      /*
      savePersons() {
         console.log('[wip] saving persons');
      }
*/
   }
}
</script>