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 async working

Browse Source
This commit is contained in:
Julien Fastré 2021-04-23 12:10:37 +02:00
parent bc1f624e14
commit 3e7c79d6ce
4 changed files with 134 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.js Normal file
View File

@ -0,0 +1,20 @@
import Vue from 'vue';
const AccompanyingCourseComponent = {
data() {
return {
id: 7,
persons_associated: []
};
},
};
let app = Vue.CreateApp({
delimiters: ['${', '}']
})
.component(AccompanyingCourseComponent)
;
app.mount('#app');

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

@ -1,16 +1,105 @@
<template>
<div id="app">
<persons_associated></persons_associated>
</div>
<div id="kkk">
<h3>Usagers concernés</h3>
<dl>
<dt>id</dt>
<dd>{{ course.id }}</dd>
<dt>opening_date</dt>
<dd>{{ course.opening_date }}</dd>
<dt>closing_date</dt>
<dd>{{ course.closing_date }}</dd>
<dt>remarkzzzzz</dt>
<dd>{{ course.remark }}</dd>
<dt>closing_motive</dt>
<dd>{{ 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 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 persons_associated from './components/PersonsAssociated.vue'
import { createApp } from 'vue';
export default {
name: 'app',
components: {
persons_associated,
const App = {
name: 'AppAccompanyingCourse',
//delimiters: ['${', '}'], works only for template "in browser", not for template in vue files
data() {
return { course:
{
id: 50,
opening_date: null,
closing_date: null,
remark: 'bim',
closing_motive: 'bam',
counter: 0,
persons: []
}
};
},
computed: {
courseId() {
return window.courseId;
}
},
async mounted() {
console.log('mounted');
console.log(this.data);
console.log(this.courseId);
await this.getCourse();
console.log(this.data);
console.log('mounted stop');
},
methods: {
async getCourse() {
console.log('get course start');
console.log(this);
courseId = this.courseId;
let data_;
return fetch(`/fr/api/parcours/${courseId}/show`)
.then(response => response.json())
.then(data => {
console.log(data);
console.log(this);
this.$data.course = data;
console.log(this.data);
console.log('get course finish');
});
}
}
}
};
export default App;
</script>
<style></style>

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

@ -1,7 +1,10 @@
import Vue from 'vue'
import App from './AccompanyingCourse.vue'
import AccompanyingCourseComponent from './AccompanyingCourse.vue';
import { createApp } from 'vue';
new Vue({
el: '#app',
render: h => h(App)
});
const app = createApp({
name: 'AccCourseGlobal',
template: '<div class="abcde"><accompanying-course></accompanying-course></div>',
})
.component('accompanying-course', AccompanyingCourseComponent)
.mount('#app');

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

@ -8,81 +8,14 @@
<h1>{{ block('title') }}</h1>
{#
<pre>
{{ accompanyingCourse.id }}
{{ accompanyingCourse.openingDate|format_date('short') }}
{{ accompanyingCourse.closingDate|format_date('short') }}
{{ accompanyingCourse.closingMotive|chill_entity_render_box }}
{{ accompanyingCourse.remark|raw }}
{{ accompanyingCourse.user }}
usagers:
{% for p in accompanyingCourse.participations %}
{{ p.person.id }} | <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">{{ p.person.fullnamecanonical }}</a> | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
{% endfor %}
</pre>
{{ dump() }}
{% verbatim %}{% endverbatim %}
#}
<div id="app" course-id="{{ accompanyingCourse.id }}"></div>
<script type="text/javascript">
window.courseId = {{ accompanyingCourse.id|e('js') }};
console.log(window.courseId);
</script>
<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>
<div id="app"></div>
{{ encore_entry_script_tags('accompanying_course') }}
{% endblock %}