move AccompanyingCourse component in his own directory

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App.vue

@@ -0,0 +1,45 @@
+<template>
+   <accompanying-course v-bind:accompanying_course="accompanying_course"/>
+   <persons-associated v-bind:persons_associated="accompanying_course.persons"/>
+   <requestor v-bind:accompanying_course="accompanying_course"/>
+</template>
+
+<script>
+import AccompanyingCourse from './components/AccompanyingCourse.vue';
+import PersonsAssociated from './components/PersonsAssociated.vue';
+import Requestor from './components/Requestor.vue';
+
+export default {
+   name: 'App',
+   components: { 
+      AccompanyingCourse,
+      PersonsAssociated, 
+      Requestor
+   },
+   data() {
+      return {
+         accompanying_course: {}
+      };
+   },
+   computed: {
+      accompanyingCourseId() {
+         return window.accompanyingCourseId;
+      }
+   },
+   methods: {
+      async getAccompanyingCourse() {
+         let data_;
+         return fetch(`/fr/api/parcours/${accompanyingCourseId}/show`)
+            .then(response => response.json())
+            .then(data => {
+               this.$data.accompanying_course = data;
+            });
+      }
+   },
+   async mounted() {
+      await this.getAccompanyingCourse();
+   }
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,26 @@
+<template>
+   <div class="vue-component">
+      <h3>Parcours</h3>
+      <dl>
+         <dt>id</dt>
+            <dd>{{ accompanying_course.id }}</dd>
+         <dt>opening_date</dt>
+            <dd>{{ accompanying_course.opening_date }}</dd>
+         <dt>closing_date</dt>
+            <dd>{{ accompanying_course.closing_date }}</dd>
+         <dt>remark</dt>
+            <dd>{{ accompanying_course.remark }}</dd>
+         <dt>closing_motive</dt>
+            <dd>{{ accompanying_course.closing_motive }}</dd>
+      </dl>
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'AccompanyingCourse',
+   props: {
+      accompanying_course: Object
+   }
+}
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+<tr>
+   <td>{{ person.firstname }}</td>
+   <td>{{ person.lastname }}</td>
+   <td>{{ person.startdate }}</td>
+   <td>{{ person.enddate }}</td>
+   <td>
+      <ul class="record_actions">
+         <li><button class="sc-button bt-show"></button></li>
+         <li><button class="sc-button bt-update"></button></li>
+         <li><button class="sc-button bt-delete" @click.prevent="$emit('remove', person)"></button></li>
+      </ul>
+   </td>
+</tr>
+</template>
+
+<script>
+export default {
+   name: 'PersonItem',
+   props: {
+      person: { type: Object, required: true }
+   },
+   emits: ['remove']
+}
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+<div class="vue-component">
+   <h3>Usagers concernés</h3>
+    
+   <label>{{ counter }} usagers</label>
+   
+   <table class="rounded"> 
+      <thead>
+         <tr>
+            <th class="chill-orange">firstname</th>
+            <th class="chill-orange">lastname</th>
+            <th class="chill-orange">startdate</th>
+            <th class="chill-orange">enddate</th>
+            <th class="chill-orange">actions</th>
+         </tr>
+      </thead>
+      <tbody> 
+         <person-item 
+            v-for="person in persons_associated" 
+            v-bind:person="person" 
+            v-bind:key="person.id" 
+            @remove="removePerson" />
+      </tbody>
+   </table>
+   
+   <ul class="record_actions">
+      <li><button class="sc-button bt-create" @click="addPerson">Ajouter un usager</button></li>
+   </ul>
+   
+</div>
+</template>
+
+<script>
+import PersonItem from "./PersonItem.vue"
+
+export default {
+   name: 'PersonsAssociated',
+   components: { 
+      PersonItem 
+   },
+   props: { 
+      persons_associated: Array 
+   },
+   data() {
+      return {
+         persons: this.persons_associated
+      }
+   },
+   computed: {
+      async counter() {
+         // Pourquoi je peux pas compter un tableau avec length ???!!!
+         return this.persons_associated.length //     <= boum !
+      }
+   },
+   methods: {
+      addPerson() {
+         this.persons_associated.push({
+            "firstname": "Lisa",
+            "lastname": "Simpson",
+            "startdate": "1975-09-15",
+            "enddate": "2021-04-20"
+         })
+      },
+      removePerson(item) {
+         this.persons_associated = this.persons_associated.filter(person => person !== item)
+      }
+   }
+}
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+   <div class="vue-component">
+      <h3>Demandeur</h3>
+      {{ accompanying_course.id }}
+      {{ accompanying_course.remark }}
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'Requestor',
+   props: {
+      accompanying_course: Object
+   }
+}
+</script>

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/index.js

@@ -0,0 +1,8 @@
+import App from './App.vue';
+import { createApp } from 'vue';
+
+const app = createApp({
+   template: `<app></app>`
+})
+.component('app', App)
+.mount('#accompanying-course');