split personAction in sub-component

This commit is contained in:
Mathieu Jaumotte 2021-04-25 10:24:46 +02:00
parent 7df753f1cb
commit a8f55e064d
4 changed files with 64 additions and 41 deletions

View File

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

View File

@ -15,7 +15,7 @@
</dl> </dl>
</div> </div>
<persons-associated v-bind:persons_associated="accompanying_course.persons"/> <persons-associated v-bind:persons_associated="accompanying_course.persons"/>
<requestor v-bind:accompanying_course="accompanying_course" /> <requestor v-bind:accompanying_course="accompanying_course"/>
</template> </template>
<script> <script>

View File

@ -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>

View File

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