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/Controller/AccompanyingCourseController.php

@@ -72,7 +72,7 @@ class AccompanyingCourseController extends Controller
         $em->persist($period);
         $em->flush();
 
-        return $this->redirectToRoute('chill_person_accompanying_course_show', [
+        return $this->redirectToRoute('chill_person_accompanying_course_edit', [
             'accompanying_period_id' => $period->getId()
         ]);
          
@@ -92,17 +92,16 @@ class AccompanyingCourseController extends Controller
     }
 
     /**
-     * Show page of Accompanying Course section
+     * Edit page of Accompanying Course section
      *
-     * the page show all blocks except one active edit block, managed by vuejs component
+     * the page edit all blocks managed by vuejs component
-     * that's why title of page is 'edit accompanying course'
      *
-     * @Route("/{_locale}/parcours/{accompanying_period_id}/show", name="chill_person_accompanying_course_show")
+     * @Route("/{_locale}/parcours/{accompanying_period_id}/edit", name="chill_person_accompanying_course_edit")
      * @ParamConverter("accompanyingCourse", options={"id": "accompanying_period_id"})
      */
-    public function showAction(AccompanyingPeriod $accompanyingCourse): Response
+    public function editAction(AccompanyingPeriod $accompanyingCourse): Response
     {
-        return $this->render('@ChillPerson/AccompanyingCourse/show.html.twig', [
+        return $this->render('@ChillPerson/AccompanyingCourse/edit.html.twig', [
             'accompanyingCourse' => $accompanyingCourse
         ]);
     }

src/Bundle/ChillPersonBundle/Menu/AccompanyingCourseMenuBuilder.php

@@ -43,7 +43,7 @@ class AccompanyingCourseMenuBuilder implements LocalMenuBuilderInterface
         ->setExtras(['order' => 10]);
         
         $menu->addChild($this->translator->trans('Edit Accompanying Course'), [
-            'route' => 'chill_person_accompanying_course_show',
+            'route' => 'chill_person_accompanying_course_edit',
             'routeParameters' => [
                 'accompanying_period_id' => $period->getId()
         ]])

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);
+*  Load all App component, for AccompanyingCourse edition page
-
+*/
-   const i18n = _createI18n(appMessages);
+if (root === 'app') {
-  
-   const app = createApp({
-      template: `<app></app>`,
-   })
-   .use(store)
-   .use(i18n)
-   .component('app', App)
-   .mount('#accompanying-course');
    
-});
+   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.id }}
-{{ accompanyingCourse.openingDate|format_date('short') }}
+    {{ accompanyingCourse.openingDate|format_date('short') }}
-{{ accompanyingCourse.closingDate|format_date('short') }}
+    {{ accompanyingCourse.closingDate|format_date('short') }}
-{{ accompanyingCourse.closingMotive|chill_entity_render_box }}
+    {{ accompanyingCourse.closingMotive|chill_entity_render_box }}
-{{ accompanyingCourse.remark|raw }}
+    {{ accompanyingCourse.remark|raw }}
-{{ accompanyingCourse.user }}
+    {{ accompanyingCourse.user }}
-usagers:
+    usagers:
-{% for p in accompanyingCourse.participations %}
+    {% 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') }}
+        {{ 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 %}
+    {% 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 %}