rename and cleaning

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

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');

View File

@ -1,105 +1,88 @@
<template>
<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>
<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>
</template>
<script>
import { createApp } from 'vue';
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: []
}
};
export default {
name: 'AccompanyingCourse',
data() {
return {
accompanying_course: {}
};
},
computed: {
accompanyingCourseId() {
return window.accompanyingCourseId;
}
},
methods: {
addPerson() {
this.accompanying_course.persons.push({
"firstname": "Lisa",
"lastname": "Simpson",
"startdate": "1975-09-15",
"enddate": "2021-04-20"
})
},
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`)
async getAccompanyingCourse() {
let data_;
return fetch(`/fr/api/parcours/${accompanyingCourseId}/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');
});
}
this.$data.accompanying_course = data;
});
}
};
export default App;
},
async mounted() {
await this.getAccompanyingCourse();
}
};
</script>
<style></style>
<style scoped></style>

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);
});
}
};

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);
})
}
}

View File

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

View File

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