display of calendar form

src/Bundle/ChillCalendarBundle/Controller/CalendarController.php

@@ -168,7 +168,7 @@ class CalendarController extends AbstractController
 
             $params = $this->buildParamsToUrl($user, $accompanyingPeriod);
 
-            return $this->redirectToRoute('chill_calendar_calendar_list', $params);
+            return $this->redirectToRoute('chill_calendar_calendar_list_by_period', $params);
         }
 
         if ($form->isSubmitted() && !$form->isValid()) {
@@ -403,7 +403,7 @@ class CalendarController extends AbstractController
         }
 
         if (null !== $accompanyingPeriod) {
-            $params['accompanying_period_id'] = $accompanyingPeriod->getId();
+            $params['id'] = $accompanyingPeriod->getId();
         }
 
         return $params;

src/Bundle/ChillCalendarBundle/Entity/Calendar.php

@@ -486,7 +486,10 @@ class Calendar implements TrackCreationInterface, TrackUpdateInterface
         }
 
         $this->calendarRange = $calendarRange;
-        $this->calendarRange->setCalendar($this);
+
+        if ($this->calendarRange instanceof CalendarRange) {
+            $this->calendarRange->setCalendar($this);
+        }
 
         return $this;
     }

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

@@ -1,17 +1,20 @@
 <template>
 
   <teleport to="#mainUser">
-    <div class="row">
+
-      <div class="col-md-4">
+    <h2 class="chill-red">Utilisateur principal</h2>
-        <label>Utilisateur principal</label>
+    <div>
-      </div>
+      <div>
-      <div class="col-md-8 align-content-end">
+        <div v-if="null !== this.$store.getters.getMainUser">
+          <calendar-active :user="this.$store.getters.getMainUser" ></calendar-active>
+        </div>
         <pick-entity
           :multiple="false"
           :types="['user']"
           :uniqid="'main_user_calendar'"
           :picked="null !== this.$store.getters.getMainUser ? [this.$store.getters.getMainUser] : []"
           :removableIfSet="false"
+          :displayPicked="false"
           @addNewEntity="setMainUser"
         ></pick-entity>
       </div>
@@ -20,27 +23,40 @@
 
   <concerned-groups></concerned-groups>
 
+  <teleport to="#schedule">
+    <div class="row mb-3" v-if="activity.startDate !== null">
+      <label class="col-form-label col-sm-4">Date</label>
+      <div class="col-sm-8">
+        {{ $d(activity.startDate, 'long') }} - {{ $d(activity.endDate, 'hoursOnly') }}
+        <span v-if="activity.calendarRange === null">(Pas de plage de disponibilité sélectionnée)</span>
+        <span v-else>(Une plage de disponibilité sélectionnée)</span>
+      </div>
+    </div>
+  </teleport>
+
   <location></location>
 
+
+
     <teleport to="#fullCalendar">
-      <div>
+      <div class="calendar-actives">
         <template class="" v-for="u in getActiveUsers" :key="u.id">
           <calendar-active :user="u" ></calendar-active>
         </template>
       </div>
-      <div class="row justify-content-between">
+      <div class="display-options row justify-content-between">
-        <div class="col-sm-4 col-xs-12">
+        <div class="col-sm col-xs-12">
           <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:05:00">5 minutes</option>
-              <option value="00:10:00">10</option>
+              <option value="00:10:00">10 minutes</option>
-              <option value="00:15:00">15</option>
+              <option value="00:15:00">15 minutes</option>
-              <option value="00:30:00">30</option>
+              <option value="00:30:00">30 minutes</option>
             </select>
           </div>
         </div>
-        <div class="col-sm-4 col-xs-12">
+        <div class="col-sm col-xs-12">
           <div class="float-end">
             <div class="input-group mb-3">
               <div class="input-group-text">
@@ -210,3 +226,14 @@ export default {
 }
 </script>
 
+<style>
+.calendar-actives {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.display-options {
+  margin-top: 1rem;
+}
+</style>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue

@@ -1,13 +1,13 @@
 <template>
-  <div :style="style" style="display: inline-block;">
+  <div :style="style" class="calendar-active">
     <span class="badge-user">{{ user.text }}</span>
       <span class="form-check-inline form-switch">
         <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="rangeShow">
-        <label class="form-check-label" for="flexSwitchCheckDefault">Disponibilité</label>
+        &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Disponibilités"><i class="fa fa-calendar-check-o"></i></label>
       </span>
       <span class="form-check-inline form-switch">
         <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="remoteShow">
-        <label class="form-check-label" for="flexSwitchCheckDefault">Agenda</label>
+        &nbsp;<label class="form-check-label" for="flexSwitchCheckDefault" title="Agenda"><i class="fa fa-calendar"></i></label>
       </span>
   </div>
 </template>
@@ -45,6 +45,16 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
+.calendar-active {
+  margin: 0 0.25rem 0.25rem 0;
+  padding: 0.5rem;
+
+  border-radius: 0.5rem;
+
+  & > .badge-user {
+    margin-right: 0.5rem;
+  }
+}
 </style>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js

@@ -62,8 +62,6 @@ export default {
       const userData = state.usersData.get(userId);
 
       if (kinds.ranges && userData.calendarRanges.length > 0) {
-        console.log('first range', userData.calendarRanges[0]);
-        console.log('state activity', state.activity);
         const s = {
           id: `ranges_${userId}`,
           events: userData.calendarRanges.filter(r => state.activity.calendarRange === null || r.calendarRangeId !== state.activity.calendarRange.calendarRangeId),
@@ -92,7 +90,6 @@ export default {
     return sources;
   },
   getInitialDate(state) {
-    console.log('initialDate', state.activity.startDate);
     return state.activity.startDate;
   },
   /**

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/index.js

@@ -47,8 +47,6 @@ const store = createStore({
     actions,
 });
 
-console.log('calendar event', store.state.activity);
-
 whoami().then(me => {
     store.commit('setWhoAmiI', me);
 });
@@ -61,4 +59,6 @@ for (let u of store.state.activity.users) {
   store.commit('showUserOnCalendar', {ranges: false, remotes: false, user: u});
 }
 
+console.log('store', store);
+
 export default store;

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js

@@ -53,7 +53,7 @@ const createUserData = (user, colorIndex) => {
 const calendarRangeToFullCalendarEvent = (entity) => {
   return {
     id: `range_${entity.id}`,
-    title: "",
+    title: "(" + entity.user.text + ")",
     start: entity.startDate.datetime8601,
     end: entity.endDate.datetime8601,
     allDay: false,

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

@@ -24,12 +24,15 @@
 
 <div id="add-persons"></div>
 
+<h2 class="chill-red">{{ 'Calendar data'|trans }}</h2>
+
+<div id="schedule"></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 -%}
     {{ form_row(form.startDate) }}
@@ -77,7 +80,7 @@
   </li>
   <li>
     <button class="btn btn-create" type="submit">
-      {{ 'Update'|trans }}
+      {{ 'Save'|trans }}
     </button>
   </li>
 </ul>

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

@@ -15,10 +15,6 @@
 {% block js %}
     {{ parent() }}
     <script type="text/javascript">
-        window.addEventListener('DOMContentLoaded', function (e) {
-            chill.displayAlertWhenLeavingModifiedForm('form[name="{{ form.vars.form.vars.name }}"]',
-            '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
-        });
         window.entity = {{ entity_json|json_encode|raw }};
         window.startDate = {{ entity.startDate|date('Y-m-d H:i:s')|json_encode|raw }};
         window.endDate = {{ entity.endDate|date('Y-m-d H:i:s')|json_encode|raw }};

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

@@ -17,10 +17,6 @@
     {{ parent() }}
     {{ encore_entry_script_tags('mod_pickentity_type') }}
     <script type="text/javascript">
-        window.addEventListener('DOMContentLoaded', function (e) {
-            chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]',
-            '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
-        });
         window.entity = {{ entity_json|json_encode|raw }};
     </script>
     {{ encore_entry_script_tags('vue_calendar') }}

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul :class="listClasses" v-if="picked.length">
+    <ul :class="listClasses" v-if="picked.length && displayPicked">
         <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
             <span class="chill_denomination">{{ p.text }}</span>
         </li>
@@ -44,6 +44,11 @@ export default {
         removableIfSet: {
             type: Boolean,
             default: true,
+        },
+        displayPicked: {
+          // display picked entities.
+          type: Boolean,
+          default: true,
         }
     },
     emits: ['addNewEntity', 'removeEntity'],

src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.js

@@ -17,6 +17,11 @@ export default {
       hour: "numeric",
       minute: "numeric",
       hour12: false
+    },
+    hoursOnly: {
+      hour: "numeric",
+      minute: "numeric",
+      hour12: false,
     }
   }
 };