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();
$persons[$k] = [
'id' => $person->getId(),
'firstname' => $person->getFirstName(),
'lastname' => $person->getLastName(),
'email' => $person->getEmail(),

View File

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

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>
<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)
}
}
}