split personAction in sub-component

src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php

@@ -85,6 +85,7 @@ class AccompanyingCourseController extends Controller
              */
             $person = $participation->getPerson();
             $persons[$k] = [
+                'id' => $person->getId(),
                 'firstname' => $person->getFirstName(),
                 'lastname' => $person->getLastName(),
                 'email' => $person->getEmail(),

src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonAction.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: 'PersonAction',
+   props: {
+      person: { type: Object, required: true }
+   },
+   emits: ['remove']
+}
+</script>

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

@@ -1,7 +1,9 @@
 <template>
 <div class="vue-component">
    <h3>Usagers concernés</h3>
+    
    <label>{{ counter }} usagers</label>
+   
    <table class="rounded"> 
       <thead>
          <tr>
@@ -13,40 +15,32 @@
          </tr>
       </thead>
       <tbody> 
-           <tr v-for="person in persons_associated">
+         <person-action v-for="person in persons_associated" :key="person.id" :person="person" @remove="removePerson" />
-              <td>{{ person.firstname }}</td>
-              <td>{{ person.lastname }}</td>
-              <td>{{ person.startdate }}</td>
-              <td>{{ person.enddate }}</td>
-              <td>
-                 <ul class="record_actions">
-                    <li><a class="sc-button bt-show"></a></li>
-                    <li><a class="sc-button bt-update"></a></li>
-                    <li><a class="sc-button bt-delete"></a></li>
-                 </ul>
-              </td>
-           </tr>
       </tbody>
    </table>
+   
    <ul class="record_actions">
-        <li>
+      <li><button class="sc-button bt-create" @click="addPerson">Ajouter un usager</button></li>
-           <button class="sc-button bt-create" @click="addPerson">Add Person</button>
-        </li>
    </ul>
+   
 </div>
 </template>
 
 <script>
+import PersonAction from "./PersonAction.vue"
+
 export default {
    name: 'PersonsAssociated',
    props: { 
-      'persons_associated': Array
+      persons_associated: Array 
+   },
+   components: { 
+      PersonAction 
    },
    computed: {
-      counter() {
+      async counter() {
-         console.log(typeof(this.persons_associated));
          // Pourquoi je peux pas compter un tableau avec length ???!!!
-         return this.persons_associated; //.length     <= boum !
+         return this.persons_associated.length //     <= boum !
       }
    },
    methods: {
@@ -57,6 +51,9 @@ export default {
             "startdate": "1975-09-15",
             "enddate": "2021-04-20"
          })
+      },
+      removePerson(item) {
+         this.persons_associated = this.persons_associated.filter(person => person !== item)
       }
    }
 }