renaming vuejs root dir

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AccompanyingCourse.vue

@@ -0,0 +1,28 @@
+<template>
+   <div class="vue-component">
+      <h3>{{ $t('title.course') }}</h3>
+      <dl>
+         <dt>{{ $t('course.id') }}</dt>
+            <dd>{{ accompanying_course.id }}</dd>
+         <dt>{{ $t('course.opening_date') }}</dt>
+            <dd>{{ $d(accompanying_course.openingDate.datetime, 'short') }}</dd>
+         <dt>{{ $t('course.closing_date') }}</dt>
+            <dd>{{ $d(accompanying_course.closingDate.datetime, 'short') }}</dd>
+         <dt>{{ $t('course.remark') }}</dt>
+            <dd>{{ accompanying_course.remark }}</dd>
+         <dt>{{ $t('course.closing_motive') }}</dt>
+            <dd>{{ accompanying_course.closing_motive }}</dd>
+      </dl>
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'AccompanyingCourse',
+   computed: {
+      accompanying_course() {
+         return this.$store.state.accompanying_course
+      }
+   }
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonItem.vue

@@ -0,0 +1,40 @@
+<template>
+<tr>
+   <td>{{ participation.person.firstName }}</td>
+   <td>{{ participation.person.lastName }}</td>
+   <td><span v-if="participation.startDate">
+       {{ $d(participation.startDate.datetime, 'short') }}</span>
+   </td>
+   <td><span v-if="participation.endDate">
+       {{ $d(participation.endDate.datetime, 'short') }}</span>
+   </td>
+   <td>
+      <ul class="record_actions">
+         <li>
+            <button class="sc-button bt-show"
+               :title="$t('action.show')">
+            </button>
+         </li>
+         <li>
+            <button class="sc-button bt-update"
+               :title="$t('action.edit')">
+            </button>
+         </li>
+         <li>
+            <button class="sc-button bt-delete"
+               :title="$t('action.remove')" 
+               @click.prevent="$emit('remove', participation)">
+            </button>
+         </li>
+      </ul>
+   </td>
+</tr>
+</template>
+
+<script>
+export default {
+   name: 'PersonItem',
+   props: ['participation'],
+   emits: ['remove']
+}
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+<div class="vue-component">
+   <h3>{{ $t('title.persons_associated')}}</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="removePerson">
+         </person-item>
+      </tbody>
+   </table>
+   <ul class="record_actions">
+      <li>
+         <button class="sc-button bt-create" @click="addPerson">
+            {{ $t('persons_associated.addPerson') }}
+         </button>
+      </li>
+   </ul>
+</div>
+
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import PersonItem from "./PersonItem.vue"
+
+let SimpsonId = 10000
+
+export default {
+   name: 'PersonsAssociated',
+   components: { 
+      PersonItem,
+   },
+   computed: mapState({
+      participations: state => state.accompanying_course.participations,
+      counter: state => state.accompanying_course.participations.length
+   }),
+   methods: {
+      addPerson() {
+         this.$store.commit('addParticipation', {
+            id: SimpsonId++,
+            person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
+            startDate: { datetime: "1975-09-15T00:00:00+0100" }, 
+            endDate: { datetime: "1975-09-28T00:00:00+0100" }, 
+         })
+      },
+      removePerson(item) {
+         this.$store.commit('removeParticipation', item)
+      }
+   }
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue

@@ -0,0 +1,18 @@
+<template>
+   <div class="vue-component">
+      <h3>{{ $t('title.requestor') }}</h3>
+      {{ accompanying_course.id }}
+      {{ accompanying_course.remark }}
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'Requestor',
+   computed: {
+      accompanying_course() {
+         return this.$store.state.accompanying_course
+      }
+   }
+}
+</script>