load vue banner component for each page of AccompanyingCourse context

* vue css and js loaded from layout.html.twig
* rename 'show' template to 'edit' template
* overwrite js block for 'edit' template (load all component, not only banner)

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

@@ -4,20 +4,47 @@ import { appMessages } from './js/i18n'
 import { initPromise } from './store'
 
 import App from './App.vue';
+import Banner from './components/Banner.vue';
 
-initPromise.then(store => {
+const root = window.vueRootComponent;
 
-   //console.log('store in create_store', store);
-   //console.log('store accompanyingCourse', store.state.accompanyingCourse);
-
-   const i18n = _createI18n(appMessages);
-  
-   const app = createApp({
-      template: `<app></app>`,
-   })
-   .use(store)
-   .use(i18n)
-   .component('app', App)
-   .mount('#accompanying-course');
+/*
+*  Load all App component, for AccompanyingCourse edition page
+*/
+if (root === 'app') {
    
-});
+   initPromise.then(store => {
+      
+      const i18n = _createI18n(appMessages);
+      
+      const app = createApp({
+         template: `<app></app>`,
+      })
+      .use(store)
+      .use(i18n)
+      .component('app', App)
+      .mount('#accompanying-course');
+      
+   });
+}
+
+/*
+*  Load only Banner sub-component, for all others AccompanyingCourse page
+*/
+if (root === 'banner') {
+
+   initPromise.then(store => {
+      
+      const i18n = _createI18n(appMessages);
+      
+      const app = createApp({
+         template: `<banner></banner>`,
+      })
+      .use(store)
+      .use(i18n)
+      .component('banner', Banner)
+      .mount('#accompanying-course');
+      
+   });
+   
+}

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

@@ -10,13 +10,10 @@
    <div id="accompanying-course"></div> {#  <== insert accompanyingCourse vue component  #}
 {% endblock %}
 
-{% block css %}
-   {{ encore_entry_link_tags('accompanying_course') }}
-{% endblock %}
-
 {% block js %}
    <script type="text/javascript">
       window.accompanyingCourseId = {{ accompanyingCourse.id|e('js') }};
+      window.vueRootComponent = 'app';
    </script>
    {{ encore_entry_script_tags('accompanying_course') }}
 {% endblock %}

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

@@ -9,18 +9,20 @@
     <h1>{{ block('title') }}</h1>
 
     <pre>
-{{ accompanyingCourse.id }}
-{{ accompanyingCourse.openingDate|format_date('short') }}
-{{ accompanyingCourse.closingDate|format_date('short') }}
-{{ accompanyingCourse.closingMotive|chill_entity_render_box }}
-{{ accompanyingCourse.remark|raw }}
-{{ accompanyingCourse.user }}
-usagers:
-{% for p in accompanyingCourse.participations %}
-    {{ p.person.id }} | <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">{{ p.person.fullnamecanonical }}</a> | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
-{% endfor %}
+    {{ accompanyingCourse.id }}
+    {{ accompanyingCourse.openingDate|format_date('short') }}
+    {{ accompanyingCourse.closingDate|format_date('short') }}
+    {{ accompanyingCourse.closingMotive|chill_entity_render_box }}
+    {{ accompanyingCourse.remark|raw }}
+    {{ accompanyingCourse.user }}
+    usagers:
+    {% for p in accompanyingCourse.participations %}
+        {{ p.person.id }} | <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">{{ p.person.fullnamecanonical }}</a> | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
+    {% endfor %}
     </pre>
 
     {{ dump() }}
 
+    {#  ==> insert accompanyingCourse vue component  #}
+    <div id="accompanying-course"></div> 
 {% endblock %}

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

@@ -156,4 +156,7 @@
 
     <h2>{{ 'Last events on accompanying course'|trans }}</h2>
 
+
+    {#  ==> insert accompanyingCourse vue component  #}
+    <div id="accompanying-course"></div> 
 {% endblock %}

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

@@ -16,7 +16,13 @@
 {% endblock %}
 
 {% block css %}
+    {{ encore_entry_link_tags('accompanying_course') }}
 {% endblock %}
 
 {% block js %}
+    <script type="text/javascript">
+       window.accompanyingCourseId = {{ accompanyingCourse.id|e('js') }};
+       window.vueRootComponent = 'banner';
+    </script>
+    {{ encore_entry_script_tags('accompanying_course') }}
 {% endblock %}