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

test app

Browse Source
This commit is contained in:
Julien Fastré 2021-04-22 20:42:48 +02:00
parent 2de8338651
commit f73d3bf320
7 changed files with 104 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillMainBundle/chill.webpack.config.js
View File

@ -56,7 +56,7 @@ module.exports = function(encore, entries)
// Chill2 new assets
encore.addEntry('forkawesome', __dirname + '/Resources/public/modules/forkawesome/index.js');
encore.addEntry('bootstrap', __dirname + '/Resources/public/modules/bootstrap/index.js');
encore.addEntry('vuejs', __dirname + '/Resources/public/modules/vue/index.js');
//encore.addEntry('vuejs', __dirname + '/Resources/public/modules/vue/index.js');
// CKEditor5
buildCKEditor(encore);

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

@ -14,6 +14,3 @@
}
}
</script>
<style>
</style>

35
src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.js Normal file
View File

@ -0,0 +1,35 @@
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource);
export default {
template: '#vue-usagers',
delimiters: ['${', '}'],
data () {
return {
persons_associated: []
};
},
http: {
root: 'http://localhost:8001/fr/api'
},
methods: {
addPerson(){
this.persons_associated.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
}
},
computed: {
counter() {
return this.persons_associated.persons.length;
}
},
created() {
this.$resource('parcours/270/show').get().then((response) => {
this.persons_associated = response.data
}, (response) => {
console.log('erreur', response);
});
}
};

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

@ -1,60 +1,12 @@
<template>
<div class="vue-component">
<h3>Usagers concernés</h3>
<dl>
<dt>id</dt>
<dd>{{ persons_associated.id }}</dd>
<dt>opening_date</dt>
<dd>{{ persons_associated.opening_date }}</dd>
<dt>closing_date</dt>
<dd>{{ persons_associated.closing_date }}</dd>
<dt>remark</dt>
<dd>{{ persons_associated.remark }}</dd>
<dt>closing_motive</dt>
<dd>{{ persons_associated.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 persons_associated.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 {
template: '#vue-usagers',
delimiters: ['${', '}'],
data () {
return {
persons_associated: []
@ -74,15 +26,12 @@
}
},
created() {
this.$resource('parcours/861/show').get().then((response) => {
this.$resource('parcours/270/show').get().then((response) => {
this.persons_associated = response.data
}, (response) => {
console.log('erreur', response);
})
}
}
</script>
<style>
</style>

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

@ -1,7 +1,7 @@
import Vue from 'vue'
import App from 'ChillPersonAssets/js/AccompanyingCourse.vue'
import App from './AccompanyingCourse.vue'
new Vue({
el: '#app',
render: h => h(App)
})
});

61
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
View File

@ -25,7 +25,64 @@ usagers:
{% verbatim %}{% endverbatim %}
#}
<div id="app" data-name="{{ accompanyingCourse.id }}"></div>
{{ encore_entry_script_tags('vuejs') }}
<div id="app" course-id="{{ accompanyingCourse.id }}"></div>
<template id="accompanying" type="text/x-template">
<div class="vue-component">
<persons_associated></persons_associated>
</div>
</template>
<template id="vue-usagers" type="text/x-template">
<div class="vue-component">
<h3>Usagers concernés</h3>
<dl>
<dt>id</dt>
<dd>${ persons_associated.id }</dd>
<dt>opening_date</dt>
<dd>${ persons_associated.opening_date }</dd>
<dt>closing_date</dt>
<dd>${ persons_associated.closing_date }</dd>
<dt>remarkzzzzz</dt>
<dd>${ persons_associated.remark }</dd>
<dt>closing_motive</dt>
<dd>${ persons_associated.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 persons_associated.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>
{{ encore_entry_script_tags('accompanying_course') }}
{% endblock %}

3
src/Bundle/ChillPersonBundle/chill.webpack.config.js
View File

@ -7,4 +7,7 @@ module.exports = function(encore, entries)
encore.addAliases({
ChillPersonAssets: __dirname + '/Resources/public'
});
encore.addEntry('accompanying_course', __dirname + '/Resources/public/js/index.js');
};