controller return json to vue via twig; init vue App

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 %}