Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-20 22:53:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

A first VueJS component, get api datas, a simple button add person

Browse Source 
* !! composer require serializer !!
* see: http://localhost:8001/fr/parcours/861/show
This commit is contained in:
Mathieu Jaumotte
2021-04-21 00:10:46 +02:00
parent 69ea88a4d5
commit e7df62b373
12 changed files with 193 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillMainBundle/Resources/public/main.js
View File

@@ -35,7 +35,7 @@ require('./modules/download-report/index.js');
require('./modules/select_interactive_loading/index.js');
require('./modules/export-list/export-list.scss');
require('./modules/entity/index.js');
require('./modules/tabs/index.js');
//require('./modules/tabs/index.js');
/*
* load img

87
src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/AccompanyingCourse.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<div class="vue-component">
<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>
</template>
<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
export default{
data () {
return {
accompanying_course: []
}
},
http: {
root: 'http://localhost:8001/fr/api'
},
methods: {
addPerson(){
this.accompanying_course.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
}
},
computed: {
counter() {
return this.accompanying_course.persons.length
}
},
mounted() {
this.$resource('parcours/861/show').get().then((response) => {
this.accompanying_course = response.data
}, (response) => {
console.log('erreur', response);
})
}
}
</script>
<style>
</style>

12
src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/App.vue
View File

@@ -1,19 +1,19 @@
<template>
<div id="app">
<!-- la balise contacts corresponds au composant contacts passé ci-dessous -->
<contacts></contacts>
<!-- la balise contacts corresponds au composant accompanying_courses passé ci-dessous -->
<accompanying_course></accompanying_course>
</div>
</template>
<script>
// importe dans contacts les datas d'une requête rest GET en json
import contacts from './Contacts.vue'
// importe dans accompanying_course les datas d'une requête rest GET en json
import accompanying_course from './AccompanyingCourse.vue'
export default {
name: 'app',
components: {
// passe l'objet contacts comme composant
contacts,
// passe l'objet accompanying_course comme composant
accompanying_course,
}
}
</script>

59
src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/Contacts.vue
View File

@@ -1,59 +0,0 @@
<template>
<div>
<table>
<tr v-for="contact in contacts">
<td>{{contact.firstname}}</td>
<td>{{contact.lastname}}</td>
</tr>
</table>
<button @click="addContact">Add</button>
<label>#contacts {{counter}}</label>
</div>
</template>
<script>
// la balise script dans ce fichier vue, est un peu comme une classe Contacts
// namespace components/Contacts
import Vue from 'vue'
import VueResource from 'vue-resource'
// injection de dépendance pour dealer du REST json
Vue.use(VueResource)
export default{
// initialise les données
data () {
return {
// constructeur du tableau-objet vide 'contacts' qui est passé à App.vue
contacts: []
}
},
// Rest GET json
http: {
root: 'http://localhost:3000'
},
// méthodes
methods: {
addContact(){
this.contacts.push({"firstname":"Lisa", "lastname":"Simpson", "age":"10"})
}
},
// traitements
computed:{
counter(){
return this.contacts.length
}
},
// on dirait un setter
mounted() {
this.$resource('contacts').get().then((response) => {
this.contacts = response.data
}, (response) => {
console.log('erreur', response);
})
}
}
</script>
<style>
</style>

4
src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js
View File

@@ -2,6 +2,6 @@ import Vue from 'vue'
import App from './components/App.vue'
new Vue({
el: '#app',
render: h => h(App)
el: '#app',
render: h => h(App)
})

18
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

@@ -35,7 +35,23 @@ div#header-accompanying_course-details {
/* /!\ Contourne le positionnement problématique du div#content_conainter suivant,
* car sa position: relative le place au-dessus du bandeau et les liens sont incliquables */
div.subheader {
height: 130px;
}
div.vue-component {
padding: 1.5em;
margin: 2em 0;
border: 2px dashed grey;
position: relative;
&:before {
content: "vuejs component";
position: absolute;
left: 1.5em;
top: -0.9em;
background-color: white;
color: grey;
padding: 0 0.3em;
}
dd { margin-left: 1em; }
}