webpack alias + move vues firsts files in better place

src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/App.vue

@@ -1,25 +0,0 @@
-<template>
-   <div id="app">
-      <!-- la balise contacts corresponds au composant accompanying_courses passé ci-dessous -->
-      <accompanying_course></accompanying_course>
-   </div>
-</template>
-
-<script>
-   //  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 accompanying_course comme composant
-         accompanying_course,
-      }
-   }
-</script>
-
-<style>
-   #app {}
-   .container {}
-   .componentItem{}
-</style>

src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import App from './components/App.vue'
+import App from 'ChillPersonAssets/js/AccompanyingCourse.vue'
 
 new Vue({
     el: '#app',

src/Bundle/ChillMainBundle/chill.webpack.config.js

@@ -44,6 +44,7 @@ module.exports = function(encore, entries)
 
     // Aliases are used when webpack is trying to resolve modules path
     encore.addAliases({
+        ChillMainAssets: __dirname + '/Resources/public',
         ChillMainSass: __dirname + '/Resources/public/modules/scratch',
         ShowHide: __dirname + '/Resources/public/modules/show_hide'
     });

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue

@@ -0,0 +1,19 @@
+<template>
+   <div id="app">
+      <persons_associated></persons_associated>
+   </div>
+</template>
+
+<script>
+   import persons_associated from './components/PersonsAssociated.vue'
+
+   export default {
+      name: 'app',
+      components: {
+         persons_associated,
+      }
+   }
+</script>
+
+<style>
+</style>

src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue

@@ -1,16 +1,17 @@
 <template>
     <div class="vue-component">
+        <h3>Usagers concernés</h3>
         <dl>
             <dt>id</dt>
-                <dd>{{ accompanying_course.id }}</dd>
+                <dd>{{ persons_associated.id }}</dd>
             <dt>opening_date</dt>
-                <dd>{{ accompanying_course.opening_date }}</dd>
+                <dd>{{ persons_associated.opening_date }}</dd>
             <dt>closing_date</dt>
-                <dd>{{ accompanying_course.closing_date }}</dd>
+                <dd>{{ persons_associated.closing_date }}</dd>
             <dt>remark</dt>
-                <dd>{{ accompanying_course.remark }}</dd>
+                <dd>{{ persons_associated.remark }}</dd>
             <dt>closing_motive</dt>
-                <dd>{{ accompanying_course.closing_motive }}</dd>
+                <dd>{{ persons_associated.closing_motive }}</dd>
         </dl>
         <label>{{counter}} usagers concernés</label>
         <table class="rounded">
@@ -24,7 +25,7 @@
                 </tr>
             </thead>
             <tbody>
-                <tr v-for="person in accompanying_course.persons">
+                <tr v-for="person in persons_associated.persons">
                     <td>{{ person.firstname }}</td>
                     <td>{{ person.lastname }}</td>
                     <td>{{ person.startdate }}</td>
@@ -56,7 +57,7 @@
     export default{
         data () {
             return {
-                accompanying_course: []
+                persons_associated: []
             }
         },
         http: {
@@ -64,17 +65,17 @@
         },
         methods: {
             addPerson(){
-                this.accompanying_course.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
+                this.persons_associated.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
             }
         },
         computed: {
             counter() {
-                return this.accompanying_course.persons.length
+                return this.persons_associated.persons.length
             }
         },
-        mounted() {
+        created() {
             this.$resource('parcours/861/show').get().then((response) => {
-                this.accompanying_course = response.data
+                this.persons_associated = response.data
             }, (response) => {
                 console.log('erreur', response);
             })

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig

@@ -22,11 +22,10 @@ usagers:
 {% endfor %}
     </pre>
     {{ dump() }}
+    {% verbatim %}{% endverbatim %}
 #}
 
-    {% verbatim %}
-        <div id="app" data-name="{{ app.user.username }}"></div>
-    {% endverbatim %}
+    <div id="app" data-name="{{ accompanyingCourse.id }}"></div>
     {{ encore_entry_script_tags('vuejs') }}
 
 {% endblock %}

src/Bundle/ChillPersonBundle/chill.webpack.config.js

@@ -1,4 +1,10 @@
 // this file loads all assets from the Chill person bundle
-module.exports = function(encore, entries) {
+module.exports = function(encore, entries)
+{
     entries.push(__dirname + '/Resources/public/index.js');
+
+    // Aliases are used when webpack is trying to resolve modules path
+    encore.addAliases({
+        ChillPersonAssets: __dirname + '/Resources/public'
+    });
 };