some layout for calendar app

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

@@ -1,37 +1,56 @@
 <template>
-  <div class="row">
-    <div class="col-md-4">
-      <label>Utilisateur principal</label>
+
+  <teleport to="#mainUser">
+    <div class="row">
+      <div class="col-md-4">
+        <label>Utilisateur principal</label>
+      </div>
+      <div class="col-md-8 align-content-end">
+        <pick-entity
+          :multiple="false"
+          :types="['user']"
+          :uniqid="'main_user_calendar'"
+          :picked="null !== this.$store.getters.getMainUser ? [this.$store.getters.getMainUser] : []"
+          :removableIfSet="false"
+          @addNewEntity="setMainUser"
+        ></pick-entity>
+      </div>
     </div>
-    <div class="col-md-8 align-content-end">
-      <pick-entity
-        :multiple="false"
-        :types="['user']"
-        :uniqid="'main_user_calendar'"
-        :picked="null !== this.$store.getters.getMainUser ? [this.$store.getters.getMainUser] : []"
-        :removableIfSet="false"
-        @addNewEntity="setMainUser"
-      ></pick-entity>
-    </div>
-  </div>
-  <div class="row">
-    <select v-model="this.slotDuration">
-      <option value="00:05:00">5</option>
-      <option value="00:10:00">10</option>
-      <option value="00:15:00">15</option>
-      <option value="00:30:00">30</option>
-    </select>
-  </div>
-  <div>
-    <input type="checkbox" v-model="this.hideWeekEnds" /><label>Masquer les week-ends</label>
-  </div>
+  </teleport>
+
   <concerned-groups></concerned-groups>
-    <div>
-      <template v-for="u in getActiveUsers" :key="u.id">
-        <calendar-active :user="u" ></calendar-active>
-      </template>
-    </div>
+
+  <location></location>
+
     <teleport to="#fullCalendar">
+      <div class="row">
+        <template v-for="u in getActiveUsers" :key="u.id">
+          <div class="col-md-4">
+            <calendar-active :user="u" ></calendar-active>
+          </div>
+        </template>
+      </div>
+      <div class="row">
+        <div class="col-md-6">
+          <div class="input-group mb-3">
+            <label class="input-group-text" for="slotDuration">Durée des créneaux</label>
+            <select v-model="this.slotDuration" id="slotDuration" class="form-select">
+              <option value="00:05:00">5</option>
+              <option value="00:10:00">10</option>
+              <option value="00:15:00">15</option>
+              <option value="00:30:00">30</option>
+            </select>
+          </div>
+        </div>
+        <div class="col-md-6 self-end-m">
+          <div class="input-group mb-3">
+            <div class="input-group-text">
+              <input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="this.hideWeekEnds" />
+              <label for="showHideWE" class="form-check-label">Masquer les week-ends</label>
+            </div>
+          </div>
+        </div>
+      </div>
       <FullCalendar ref="fullCalendar" :options="calendarOptions">
         <template v-slot:eventContent='arg'>
           <b>{{ arg.timeText }}</b>
@@ -39,7 +58,6 @@
         </template>
       </FullCalendar>
     </teleport>
-  <location></location>
 </template>
 
 <script>

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

@@ -3,6 +3,9 @@
 {{ form_start(form) }}
 {{ form_errors(form) }}
 
+<div id="calendar"></div> {# <=== vue component #}
+
+<div id="mainUser"></div> {# <=== vue component: mainUser #}
 
 <h2 class="chill-red">{{ 'Concerned groups'|trans }}</h2>
 
@@ -21,6 +24,11 @@
 
 <div id="add-persons"></div>
 
+{%- if form.location is defined -%}
+    {{ form_row(form.location) }}
+    <div id="location"></div>
+{% endif %}
+
 <h2 class="chill-red">{{ 'Calendar data'|trans }}</h2>
 
 {%- if form.startDate is defined -%}
@@ -35,10 +43,7 @@
     {{ form_row(form.calendarRange) }}
 {% endif %}
 
-{%- if form.location is defined -%}
-    {{ form_row(form.location) }}
-    <div id="location"></div>
-{% endif %}
+<div id="fullCalendar"></div>
 
 {%- if form.comment is defined -%}
     {{ form_row(form.comment) }}
@@ -56,7 +61,6 @@
     <div id="calendarControls"></div>
 {% endif %}
 
-<div id="fullCalendar"></div>
 
 <ul class="record_actions sticky-form-buttons">
   <li class="cancel">
@@ -65,7 +69,7 @@
       {%- if context == 'user' -%}
       href="{{ chill_return_path_or('chill_calendar_calendar_list', { 'user_id': user.id } )}}"
       {%- elseif context == 'accompanyingCourse' -%}
-      href="{{ chill_return_path_or('chill_calendar_calendar_list', { 'accompanying_period_id': accompanyingCourse.id } )}}"
+      href="{{ chill_return_path_or('chill_calendar_calendar_list_by_period', { 'id': accompanyingCourse.id } )}}"
       {%- endif -%}
       >
       {{ 'Cancel'|trans|chill_return_path_label }}

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

@@ -7,7 +7,6 @@
 {% block content %}
 <div class="calendar-edit">
 
-    <div id="calendar"></div> {# <=== vue component #}
     {% include 'ChillCalendarBundle:Calendar:edit.html.twig' with {'context': 'accompanyingCourse'} %}
 
 </div>