rename and cleaning

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

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

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

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

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

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

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

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

src/Bundle/ChillPersonBundle/Resources/public/js/index.js

@@ -2,8 +2,8 @@ import AccompanyingCourseComponent from './AccompanyingCourse.vue';
 import { createApp } from 'vue';
 
 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)
 .mount('#app');

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

@@ -8,14 +8,12 @@
 
    <h1>{{ block('title') }}</h1>
    
-  <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') }}
 
+   <script type="text/javascript">
+      window.accompanyingCourseId = {{ accompanyingCourse.id|e('js') }};
+   </script>
+   
 {% endblock %}