rdv: twig layout + teleport calendar controls

src/Bundle/ChillCalendarBundle/Form/CalendarType.php

@@ -48,13 +48,13 @@ class CalendarType extends AbstractType
             ->add('comment', CommentType::class, [
                 'required' => false
             ])
-            ->add('cancelReason', EntityType::class, [
+            // ->add('cancelReason', EntityType::class, [
-                'required' => false,
+            //     'required' => false,
-                'class' => CancelReason::class,
+            //     'class' => CancelReason::class,
-                'choice_label' => function (CancelReason $entity) {
+            //     'choice_label' => function (CancelReason $entity) {
-                    return $entity->getCanceledBy();
+            //         return $entity->getCanceledBy();
-                },
+            //     },
-            ])
+            // ])
             ->add('sendSMS', ChoiceType::class, [
                 'required' => false,
                 'choices' => [

src/Bundle/ChillCalendarBundle/Resources/public/chill/index.js

@@ -0,0 +1 @@
+require('./scss/calendar.scss');

src/Bundle/ChillCalendarBundle/Resources/public/chill/scss/calendar.scss

@@ -0,0 +1,10 @@
+div#calendarControls {
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+div#fullCalendar{
+
+}

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue

@@ -1,18 +1,21 @@
 <template>
   <concerned-groups></concerned-groups>
-  <calendar-user-selector 
+  <teleport to="#calendarControls">
-    v-bind:users="users"
+    <calendar-user-selector 
-    v-bind:calendarEvents="calendarEvents" 
+      v-bind:users="users"
-    v-bind:updateEventsSource="updateEventsSource"
+      v-bind:calendarEvents="calendarEvents" 
-    v-bind:showMyCalendar="showMyCalendar"
+      v-bind:updateEventsSource="updateEventsSource"
-    v-bind:toggleMyCalendar="toggleMyCalendar" >
+      v-bind:showMyCalendar="showMyCalendar"
-  </calendar-user-selector>
+      v-bind:toggleMyCalendar="toggleMyCalendar" >
-  <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
+    </calendar-user-selector>
-  <FullCalendar ref="fullCalendar" :options="calendarOptions">
+  </teleport>
-    <template v-slot:eventContent='arg'>
+  <teleport to="#fullCalendar">
-      <b>{{ arg.timeText }}</b>
+    <FullCalendar ref="fullCalendar" :options="calendarOptions">
-    </template>
+      <template v-slot:eventContent='arg'>
-  </FullCalendar>
+        <b>{{ arg.timeText }}</b>
+      </template>
+    </FullCalendar>
+  </teleport>
 </template>
 
 <script>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue

@@ -1,6 +1,6 @@
 <template>
-  <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
+  <div class="calendar__controls">
-  <div>
+     <h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
     <VueMultiselect
         name="field"
         id="calendarUserSelector"
@@ -196,3 +196,12 @@ export default {
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 
+<style lang="scss" scoped>
+  div.calendar__controls {
+    background-color: 'black';
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+</style>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/i18n.js

@@ -2,7 +2,7 @@ const calendarUserSelectorMessages = {
     fr: {
       choose_your_calendar_user: "Afficher les plages de disponibilités",
       select_user: "Sélectionnez des calendriers",
-      show_my_calendar: "Affichez mon calendrier"
+      show_my_calendar: "Afficher mon calendrier"
     }
  };
  

src/Bundle/ChillCalendarBundle/Resources/views/Calendar/edit.html.twig

@@ -40,10 +40,6 @@
 
 .. location
 
-{%- if form.cancelReason is defined -%}
-    {{ form_row(form.cancelReason) }}
-{% endif %}
-
 {%- if form.comment is defined -%}
     {{ form_row(form.comment) }}
 {% endif %}
@@ -52,8 +48,7 @@
     {{ form_row(form.sendSMS) }}
 {% endif %}
 
-
+<div id="fullCalendar"></div>
-..calendarRange
 
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">

src/Bundle/ChillCalendarBundle/Resources/views/Calendar/editAccompanyingCourse.html.twig

@@ -36,3 +36,7 @@
     {{ parent() }}
     {{ encore_entry_link_tags('vue_calendar') }}
 {% endblock %}
+
+{% block block_post_menu %}
+    <div id="calendarControls"></div>
+{% endblock %}

src/Bundle/ChillCalendarBundle/Resources/views/Calendar/new.html.twig

@@ -1,4 +1,4 @@
-<h1>{{ "Calendar item creation"|trans ~ ' :' }}</h1>
+<h1>{{ "Calendar item creation"|trans }}</h1>
 
 {{ form_start(form) }}
 {{ form_errors(form) }}
@@ -34,16 +34,8 @@
     {{ form_row(form.endDate) }}
 {% endif %}
 
-{%- if form.calendarRange is defined -%}
-    {{ form_row(form.calendarRange) }}
-{% endif %}
-
 .. location
 
-{%- if form.cancelReason is defined -%}
-    {{ form_row(form.cancelReason) }}
-{% endif %}
-
 {%- if form.comment is defined -%}
     {{ form_row(form.comment) }}
 {% endif %}
@@ -52,10 +44,7 @@
     {{ form_row(form.sendSMS) }}
 {% endif %}
 
-
+<div id="fullCalendar"></div>
-..calendarRange
-
-
 
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">

src/Bundle/ChillCalendarBundle/Resources/views/Calendar/newAccompanyingCourse.html.twig

@@ -34,4 +34,6 @@
     <link rel="stylesheet" href="{{ asset('build/vue_calendar.css') }}"/>
 {% endblock %}
 
-
+{% block block_post_menu %}
+    <div id="calendarControls"></div>
+{% endblock %}

src/Bundle/ChillCalendarBundle/chill.webpack.config.js

@@ -1,6 +1,6 @@
 // this file loads all assets from the Chill calendar bundle
 module.exports = function(encore, entries) {
-    //entries.push(__dirname + '/Resources/public/index.js');
+    entries.push(__dirname + '/Resources/public/chill/index.js');
     
     encore.addAliases({
         ChillCalendarAssets: __dirname + '/Resources/public'

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

@@ -17,6 +17,10 @@
         'layout': '@ChillPerson/menu.html.twig',
         'args' : { 'accompanyingCourse': accompanyingCourse }
     }) }}
+    
+    {% block block_post_menu %}
+    {% endblock %}
+
 {% endblock %}
 
 {% block css %}