Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

props, datas and sub-components

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-04-23 19:54:49 +02:00
parent b0fc4e190f
commit 7df753f1cb
4 changed files with 111 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
View File

@ -1,56 +1,33 @@
<template>
<div>
<h3>Usagers concernés</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>
<label>{{counter}} usagers concernés</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 accompanying_course.persons">
<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>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>
<persons-associated v-bind:persons_associated="accompanying_course.persons"/>
<requestor v-bind:accompanying_course="accompanying_course" />
</template>
<script>
import PersonsAssociated from './components/PersonsAssociated.vue';
import Requestor from './components/Requestor.vue';
export default {
name: 'AccompanyingCourse',
components: {
PersonsAssociated,
Requestor
},
data() {
return {
accompanying_course: {}
@ -62,14 +39,6 @@ export default {
}
},
methods: {
addPerson() {
this.accompanying_course.persons.push({
"firstname": "Lisa",
"lastname": "Simpson",
"startdate": "1975-09-15",
"enddate": "2021-04-20"
})
},
async getAccompanyingCourse() {
let data_;
return fetch(`/fr/api/parcours/${accompanyingCourseId}/show`)

64
src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
View File

@ -1 +1,63 @@
<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>
</template>
<script>
export default {
name: 'PersonsAssociated',
props: {
'persons_associated': Array
},
computed: {
counter() {
console.log(typeof(this.persons_associated));
// 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"
})
}
}
}
</script>

20
src/Bundle/ChillPersonBundle/Resources/public/js/components/Requestor.vue Normal file
View File

@ -0,0 +1,20 @@
<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
},
computed: {
},
methods: {
}
}
</script>

8
src/Bundle/ChillPersonBundle/Resources/public/js/index.js
View File

@ -1,9 +1,9 @@
import AccompanyingCourseComponent from './AccompanyingCourse.vue';
import AccompanyingCourse from './AccompanyingCourse.vue';
import { createApp } from 'vue';
const app = createApp({
name: 'AppGlobal',
template: '<div class="vue-component"><accompanying-course></accompanying-course></div>',
name: 'App',
template: `<accompanying-course></accompanying-course>`
})
.component('accompanying-course', AccompanyingCourseComponent)
.component('accompanying-course', AccompanyingCourse)
.mount('#app');