From 31252461c93306cc0a71c95bfcab7eb1ab845fd9 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Tue, 25 May 2021 19:05:51 +0200 Subject: [PATCH] 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) --- .../AccompanyingCourseController.php | 13 ++--- .../Menu/AccompanyingCourseMenuBuilder.php | 2 +- .../public/vuejs/AccompanyingCourse/index.js | 55 ++++++++++++++----- .../{show.html.twig => edit.html.twig} | 5 +- .../AccompanyingCourse/history.html.twig | 22 ++++---- .../views/AccompanyingCourse/index.html.twig | 3 + .../views/AccompanyingCourse/layout.html.twig | 6 ++ 7 files changed, 70 insertions(+), 36 deletions(-) rename src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/{show.html.twig => edit.html.twig} (86%) diff --git a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php b/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php index 6786cb05f..e5b0cdda7 100644 --- a/src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php +++ b/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 - * that's why title of page is 'edit accompanying course' + * the page edit all blocks managed by vuejs component * - * @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 ]); } diff --git a/src/Bundle/ChillPersonBundle/Menu/AccompanyingCourseMenuBuilder.php b/src/Bundle/ChillPersonBundle/Menu/AccompanyingCourseMenuBuilder.php index e9ce20b53..49543c42d 100644 --- a/src/Bundle/ChillPersonBundle/Menu/AccompanyingCourseMenuBuilder.php +++ b/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() ]]) diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js index 66b6d6683..2a7f19d61 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js +++ b/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: ``, - }) - .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: ``, + }) + .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: ``, + }) + .use(store) + .use(i18n) + .component('banner', Banner) + .mount('#accompanying-course'); + + }); + +} diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/edit.html.twig similarity index 86% rename from src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig rename to src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/edit.html.twig index 23ffb5864..6aa978149 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/edit.html.twig @@ -10,13 +10,10 @@
{# <== insert accompanyingCourse vue component #} {% endblock %} -{% block css %} - {{ encore_entry_link_tags('accompanying_course') }} -{% endblock %} - {% block js %} {{ encore_entry_script_tags('accompanying_course') }} {% endblock %} diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig index 8d6ee2a30..9ef00e360 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig @@ -9,18 +9,20 @@

{{ block('title') }}

-{{ 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 }} | {{ p.person.fullnamecanonical }} | {{ 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 }} | {{ p.person.fullnamecanonical }} | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
+    {% endfor %}
{{ dump() }} + {# ==> insert accompanyingCourse vue component #} +
{% endblock %} diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig index 937fb2e0a..f2595c65b 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig @@ -156,4 +156,7 @@

{{ 'Last events on accompanying course'|trans }}

+ + {# ==> insert accompanyingCourse vue component #} +
{% endblock %} diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig index 82def471c..0bab5d893 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig +++ b/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 %} + + {{ encore_entry_script_tags('accompanying_course') }} {% endblock %}