From 425d51649f79616b261df645183dc6aed39e9546 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 15 Apr 2021 16:58:15 +0200
Subject: [PATCH] vuejs hello world component

---
 .../public/modules/vue/components/App.vue     | 25 ++++++++
 .../modules/vue/components/Contacts.vue       | 59 +++++++++++++++++++
 .../Resources/public/modules/vue/index.js     |  6 ++
 .../views/AccompanyingCourse/show.html.twig   |  5 ++
 4 files changed, 95 insertions(+)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/App.vue
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/Contacts.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/App.vue b/src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/App.vue
new file mode 100644
index 000000000..50b898cfa
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/App.vue
@@ -0,0 +1,25 @@
+<template>
+   <div id="app">
+      <!-- la balise contacts corresponds au composant contacts passé ci-dessous -->
+      <contacts></contacts>
+   </div>
+</template>
+
+<script>
+   //  importe dans contacts les datas d'une requête rest GET en json
+   import contacts from './Contacts.vue'
+
+   export default {
+      name: 'app',
+      components: {
+        // passe l'objet contacts comme composant
+         contacts,
+      }
+   }
+</script>
+
+<style>
+   #app {}
+   .container {}
+   .componentItem{}
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/Contacts.vue b/src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/Contacts.vue
new file mode 100644
index 000000000..f4bb02d7c
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/vue/components/Contacts.vue
@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <table>
+            <tr v-for="contact in contacts">
+                <td>{{contact.firstname}}</td>
+                <td>{{contact.lastname}}</td>
+            </tr>
+        </table>
+        <button @click="addContact">Add</button>
+        <label>#contacts {{counter}}</label>
+    </div>
+</template>
+
+<script>
+    // la balise script dans ce fichier vue, est un peu comme une classe Contacts
+    // namespace components/Contacts
+    import Vue from 'vue'
+    import VueResource from 'vue-resource'
+
+    // injection de dépendance pour dealer du REST json
+    Vue.use(VueResource)
+
+    export default{
+        // initialise les données
+        data () {
+            return {
+                // constructeur du tableau-objet vide 'contacts' qui est passé à App.vue
+                contacts: []
+            }
+        },
+        // Rest GET json
+        http: {
+            root: 'http://localhost:3000'
+        },
+        // méthodes
+        methods: {
+            addContact(){
+                this.contacts.push({"firstname":"Lisa", "lastname":"Simpson", "age":"10"})
+            }
+        },
+        // traitements
+        computed:{
+            counter(){
+                return this.contacts.length
+            }
+        },
+        // on dirait un setter
+        mounted() {
+            this.$resource('contacts').get().then((response) => {
+                this.contacts = response.data
+            }, (response) => {
+                console.log('erreur', response);
+            })
+        }
+    }
+</script>
+
+<style>
+</style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js b/src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js
index 9448490d7..c789f16ba 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/vue/index.js
@@ -1 +1,7 @@
 import Vue from 'vue'
+import App from './components/App.vue'
+
+new Vue({
+       el: '#app',
+   render: h => h(App)
+})
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
index 80c08c854..b90aae74e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
@@ -23,5 +23,10 @@ usagers:
 
     {{ dump() }}
 
+    <h3>TESTS AREA vuejs:</h3>
+    {% verbatim %}
+        <div id="app" data-name="{{ app.user.username }}"></div>
+    {% endverbatim %}
+    {{ encore_entry_script_tags('vuejs') }}
 
 {% endblock %}