controller return json to vue via twig; init vue App

src/Bundle/ChillActivityBundle/Controller/ActivityController.php

@@ -209,19 +209,8 @@ class ActivityController extends AbstractController
             throw $this->createNotFoundException('Template not found');
         }
 
-        //$activity_json = $this->serializer->serialize($entity, 'json', []);
-        // "A circular reference has been detected when serializing the object of class "Chill\PersonBundle\Entity\AccompanyingPeriod" (configured limit: 1)."
+        $activity_json = $this->serializer->serialize($entity, 'json', ['groups' => 'read']);
         
-        $activity_json = null;
-        // activity_json doit retourner qqch comme :
-        // {
-        //  "type": "activity",
-        //  "persons": [
-        //    { type: person, id: xxx, ...}
-        //    { ...}
-        //  ], ""
-        // }
-                
         return $this->render($view, [
             'person'   => $person,
             'accompanyingCourse' => $accompanyingPeriod,
@@ -334,13 +323,15 @@ class ActivityController extends AbstractController
             throw $this->createNotFoundException('Template not found');
         }
 
+        $activity_json = $this->serializer->serialize($entity, 'json', ['groups' => ['read']]);
+         
         return $this->render($view, array(
             'entity'      => $entity,
             'edit_form'   => $form->createView(),
             'delete_form' => $deleteForm->createView(),
             'person' => $person,
             'accompanyingCourse' => $accompanyingPeriod,
-            'activity_json' => null
+            'activity_json' => $activity_json
         ));
     }
 

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue

@@ -0,0 +1,18 @@
+<template>
+  hello
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+   name: "App",
+   components: {},
+   computed: mapState([
+      'activity'
+   ])
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js

@@ -0,0 +1,8 @@
+const appMessages = {
+   fr: {
+      
+   }
+}
+export {
+   appMessages
+};

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+import { appMessages } from './i18n'
+import store from './store'
+
+import App from './App.vue';
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+   template: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#activity');

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js

@@ -0,0 +1,31 @@
+import 'es6-promise/auto';
+import { createStore } from 'vuex';
+
+const debug = process.env.NODE_ENV !== 'production';
+//console.log('window.activity', window.activity);
+
+const store = createStore({
+   strict: debug,
+   state: {
+     activity: window.activity
+   },
+   getters: {
+
+   },
+   mutations: {
+      addPerson(state, payload) {
+
+      }
+   },
+   actions: {
+      addPerson() {
+        //let el = document.getElementById('form['activity']['xxx']['xxxx']');
+        //let option = document.createElement('option');
+        //option.value = person.id;
+        //el.appendChild(option);
+        commit('addPerson', payload)
+     }
+  }
+});
+
+export default store;

src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig

@@ -1,6 +1,15 @@
 <h1>{{ "Update activity"|trans }}</h1>
 
 {{ form_start(edit_form) }}
+{{ form_errors(edit_form) }}
+
+{%- if edit_form.emergency is defined -%}
+    {{ form_row(edit_form.emergency) }}
+{% endif %}
+
+{%- if edit_form.sentReceived is defined -%}
+    {{ form_row(edit_form.sentReceived) }}
+{% endif %}
 
 {%- if edit_form.user is defined -%}
     {{ form_row(edit_form.user) }}
@@ -10,45 +19,55 @@
     {{ form_row(edit_form.scope) }}
 {% endif %}
 
-<h2>{{ 'Activity data'|trans }}</h2>
+.. type
 
-{%- if form.date is defined -%}
-    {{ form_row(form.date) }}
+{%- if edit_form.reasons is defined -%}
+    {{ form_row(edit_form.reasons) }}
 {% endif %}
-{%- if form.durationTime is defined -%}
-    {{ form_row(form.durationTime) }}
+
+<h2 class="chill-red">Parties concernées</h2>
+
+{%- if edit_form.persons is defined -%}
+    {{ form_row(edit_form.persons) }}
 {% endif %}
-{%- if form.travelTime is defined -%}
-    {{ form_row(form.travelTime) }}
+{%- if edit_form.thirdParties is defined -%}
+    {{ form_row(edit_form.thirdParties) }}
 {% endif %}
-{%- if form.attendee is defined -%}
-    {{ form_row(form.attendee) }}
+{%- if edit_form.users is defined -%}
+    {{ form_row(edit_form.users) }}
 {% endif %}
-{%- if form.comment is defined -%}
-    {{ form_row(form.comment) }}
+
+<h2 class="chill-red">{{ 'Activity data'|trans }}</h2>
+
+{%- if edit_form.date is defined -%}
+    {{ form_row(edit_form.date) }}
 {% endif %}
-{%- if form.reasons is defined -%}
-    {{ form_row(form.reasons) }}
+
+.. location
+
+{%- if edit_form.durationTime is defined -%}
+    {{ form_row(edit_form.durationTime) }}
 {% endif %}
-{%- if form.persons is defined -%}
-    {{ form_row(form.persons) }}
+
+{%- if edit_form.travelTime is defined -%}
+    {{ form_row(edit_form.travelTime) }}
 {% endif %}
-{%- if form.thirdParties is defined -%}
-    {{ form_row(form.thirdParties) }}
+
+{%- if edit_form.comment is defined -%}
+    .. public and private
+    {{ form_row(edit_form.comment) }}
 {% endif %}
-{%- if form.users is defined -%}
-    {{ form_row(form.users) }}
+
+{%- if edit_form.documents is defined -%}
+    {{ form_row(edit_form.documents) }}
 {% endif %}
-{%- if form.emergency is defined -%}
-    {{ form_row(form.emergency) }}
-{% endif %}
-{%- if form.sentReceived is defined -%}
-    {{ form_row(form.sentReceived) }}
-{% endif %}
-{%- if form.documents is defined -%}
-    {{ form_row(form.documents) }}
+
+{%- if edit_form.attendee is defined -%}
+    {{ form_row(edit_form.attendee) }}
 {% endif %}
 
+.. status
+
 {% set person_id = null %}
 {% if entity.person %}
     {% set person_id = entity.person.id %}

src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig

@@ -5,16 +5,21 @@
 {% block title  'Update activity'|trans %}
 
 {% block content %}
+    <div id="activity"></div> {# <=== vue component #}
     {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
+    {{ dump() }}
 {% endblock %}
 
 {% block js %}
     <script src="{{ asset('build/async_upload.js') }}" type="text/javascript"></script>
     <script type="text/javascript">
         chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]', '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
+        window.activity = {{ activity_json|json_encode|raw }}; 
     </script>
+    {{ encore_entry_script_tags('vue_activity') }}
 {% endblock %}
 
 {% block css %}
     <link rel="stylesheet" href="{{ asset('build/async_upload.css') }}"/>
+    {{ encore_entry_link_tags('vue_activity') }}
 {% endblock %}

src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig

@@ -22,15 +22,19 @@
 
 {% block personcontent %}
     {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
+    <div id="activity"></div> {# <=== vue component #}
 {% endblock %}
 
 {% block js %}
     <script src="{{ asset('build/async_upload.js') }}" type="text/javascript"></script>
     <script type="text/javascript">
         chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]', '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
+        window.activity = {{ activity_json|e('js') }};
     </script>
+    {{ encore_entry_script_tags('vue_activity') }}
 {% endblock %}
 
 {% block css %}
     <link rel="stylesheet" href="{{ asset('build/async_upload.css') }}"/>
+    {{ encore_entry_link_tags('vue_activity') }}
 {% endblock %}

src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig

@@ -1,4 +1,4 @@
-<h2 class="chill-red">{{ "Activity creation"|trans }}</h2>
+<h1>{{ "Activity creation"|trans }}</h1>
 
 {{ form_start(form) }}
 {{ form_errors(form) }}
@@ -20,7 +20,7 @@
     {{ form_row(form.scope) }}
 {% endif %}
 
-type..
+.. type
 
 {%- if form.reasons is defined -%} 
     {{ form_row(form.reasons) }}

src/Bundle/ChillActivityBundle/Resources/views/Activity/newAccompanyingCourse.html.twig

@@ -5,6 +5,7 @@
 {% block title 'Activity creation' |trans %}
 
 {% block content %}
+    <div id="activity"></div> {# <=== vue component #}
     {% include 'ChillActivityBundle:Activity:new.html.twig' %}
     {{ dump() }}
 {% endblock %}
@@ -13,15 +14,7 @@
     <script src="{{ asset('build/async_upload.js') }}" type="text/javascript"></script>
     <script type="text/javascript">
         chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]', '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
-        window.activity = 
-            {
-                "type": "activity",
-                "persons": [],
-                ""
-            };
-        {# 
-            {{ activity_json|e('json') }}; 
-        #}
+        window.activity = {{ activity_json|json_encode|raw }}; 
     </script>
     {{ encore_entry_script_tags('vue_activity') }}
 {% endblock %}

src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig

@@ -6,13 +6,14 @@
 
 {% block personcontent %}
     {% include 'ChillActivityBundle:Activity:new.html.twig' %}
+    <div id="activity"></div> {# <=== vue component #}
 {% endblock %}
 
 {% block js %}
     <script src="{{ asset('build/async_upload.js') }}" type="text/javascript"></script>
     <script type="text/javascript">
         chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]', '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
-        window.activity = {{ activity_json|e('json') }};
+        window.activity = {{ activity_json|e('js') }};
     </script>
     {{ encore_entry_script_tags('vue_activity') }}
 {% endblock %}