From a8f55e064d6bbd216ebff5297190fc436fe33d05 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 25 Apr 2021 10:24:46 +0200
Subject: [PATCH] split personAction in sub-component

---
 .../AccompanyingCourseController.php          |  1 +
 .../public/js/AccompanyingCourse.vue          |  2 +-
 .../public/js/components/PersonAction.vue     | 25 ++++++
 .../js/components/PersonsAssociated.vue       | 77 +++++++++----------
 4 files changed, 64 insertions(+), 41 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonAction.vue

diff --git a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php
index 6933ca7bb..e92c84765 100644
--- a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php
+++ b/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(),
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
index fe2447547..2b7c4f604 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
@@ -15,7 +15,7 @@
       </dl>
    </div>
    <persons-associated v-bind:persons_associated="accompanying_course.persons"/>
-   <requestor v-bind:accompanying_course="accompanying_course" />
+   <requestor v-bind:accompanying_course="accompanying_course"/>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonAction.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonAction.vue
new file mode 100644
index 000000000..be356895c
--- /dev/null
+++ b/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>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
index e8e044ee4..f26f39d6c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
@@ -1,52 +1,46 @@
 <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>
-           <tr v-for="person in persons_associated">
-              <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>
-           <button class="sc-button bt-create" @click="addPerson">Add Person</button>
-        </li>
-      </ul>
-   </div>
+<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-action v-for="person in persons_associated" :key="person.id" :person="person" @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 PersonAction from "./PersonAction.vue"
+
 export default {
    name: 'PersonsAssociated',
-   props: {
-      'persons_associated': Array
+   props: { 
+      persons_associated: Array 
+   },
+   components: { 
+      PersonAction 
    },
    computed: {
-      counter() {
-         console.log(typeof(this.persons_associated));
+      async counter() {
          // 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)
       }
    }
 }