Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 13:24:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

rename and cleaning

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-04-23 15:29:17 +02:00
parent 928e0e1eed
commit b0fc4e190f
6 changed files with 89 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,105 +1,88 @@
<template> <template>
<div id="kkk"> <div>
<h3>Usagers concernés</h3> <h3>Usagers concernés</h3>
<dl> <dl>
<dt>id</dt> <dt>id</dt>
<dd>{{ course.id }}</dd> <dd>{{ accompanying_course.id }}</dd>
<dt>opening_date</dt> <dt>opening_date</dt>
<dd>{{ course.opening_date }}</dd> <dd>{{ accompanying_course.opening_date }}</dd>
<dt>closing_date</dt> <dt>closing_date</dt>
<dd>{{ course.closing_date }}</dd> <dd>{{ accompanying_course.closing_date }}</dd>
<dt>remarkzzzzz</dt> <dt>remark</dt>
<dd>{{ course.remark }}</dd> <dd>{{ accompanying_course.remark }}</dd>
<dt>closing_motive</dt> <dt>closing_motive</dt>
<dd>{{ course.closing_motive }}</dd> <dd>{{ accompanying_course.closing_motive }}</dd>
</dl> </dl>
<label>{{counter}} usagers concernés</label> <label>{{counter}} usagers concernés</label>
<table class="rounded"> <table class="rounded">
<thead> <thead>
<tr> <tr>
<th class="chill-orange">firstname</th> <th class="chill-orange">firstname</th>
<th class="chill-orange">lastname</th> <th class="chill-orange">lastname</th>
<th class="chill-orange">startdate</th> <th class="chill-orange">startdate</th>
<th class="chill-orange">enddate</th> <th class="chill-orange">enddate</th>
<th class="chill-orange">actions</th> <th class="chill-orange">actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="person in course.persons"> <tr v-for="person in accompanying_course.persons">
<td>{{ person.firstname }}</td> <td>{{ person.firstname }}</td>
<td>{{ person.lastname }}</td> <td>{{ person.lastname }}</td>
<td>{{ person.startdate }}</td> <td>{{ person.startdate }}</td>
<td>{{ person.enddate }}</td> <td>{{ person.enddate }}</td>
<td> <td>
<ul class="record_actions"> <ul class="record_actions">
<li><a class="sc-button bt-show"></a></li> <li><a class="sc-button bt-show"></a></li>
<li><a class="sc-button bt-update"></a></li> <li><a class="sc-button bt-update"></a></li>
<li><a class="sc-button bt-delete"></a></li> <li><a class="sc-button bt-delete"></a></li>
</ul> </ul>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<button class="sc-button bt-create" @click="addPerson">Add Person</button> <button class="sc-button bt-create" @click="addPerson">Add Person</button>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
import { createApp } from 'vue'; export default {
name: 'AccompanyingCourse',
const App = { data() {
name: 'AppAccompanyingCourse', return {
//delimiters: ['${', '}'], works only for template "in browser", not for template in vue files accompanying_course: {}
data() { };
return { course: },
{ computed: {
id: 50, accompanyingCourseId() {
opening_date: null, return window.accompanyingCourseId;
closing_date: null, }
remark: 'bim', },
closing_motive: 'bam', methods: {
counter: 0, addPerson() {
persons: [] this.accompanying_course.persons.push({
} "firstname": "Lisa",
}; "lastname": "Simpson",
"startdate": "1975-09-15",
"enddate": "2021-04-20"
})
}, },
computed: { async getAccompanyingCourse() {
courseId() { let data_;
return window.courseId; return fetch(`/fr/api/parcours/${accompanyingCourseId}/show`)
}
},
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(response => response.json())
.then(data => { .then(data => {
console.log(data); this.$data.accompanying_course = data;
console.log(this); });
this.$data.course = data;
console.log(this.data);
console.log('get course finish');
});
}
} }
}; },
async mounted() {
export default App; await this.getAccompanyingCourse();
}
};
</script> </script>
<style></style> <style scoped></style>

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

@ -1,34 +0,0 @@
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/861/show').get().then((response) => {
this.persons_associated = response.data
}, (response) => {
console.log('erreur', response);
});
}
};

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

@ -1,34 +1 @@
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/861/show').get().then((response) => {
this.persons_associated = response.data
}, (response) => {
console.log('erreur', response);
})
}
}

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

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

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

@ -6,16 +6,14 @@
{% block content %} {% block content %}
<h1>{{ block('title') }}</h1> <h1>{{ block('title') }}</h1>
<div id="app"></div>
<script type="text/javascript"> {{ encore_entry_script_tags('accompanying_course') }}
window.courseId = {{ accompanyingCourse.id|e('js') }};
console.log(window.courseId);
</script>
<div id="app"></div>
{{ encore_entry_script_tags('accompanying_course') }}
<script type="text/javascript">
window.accompanyingCourseId = {{ accompanyingCourse.id|e('js') }};
</script>
{% endblock %} {% endblock %}