rdv: various UI improvements to the calendar

src/Bundle/ChillCalendarBundle/Controller/CalendarController.php

@@ -87,7 +87,8 @@ class CalendarController extends AbstractController
             // $view = 'ChillCalendarBundle:Calendar:listByUser.html.twig';
         } elseif ($accompanyingPeriod instanceof AccompanyingPeriod) {
             $calendarItems = $em->getRepository(Calendar::class)->findBy(
-                ['accompanyingPeriod' => $accompanyingPeriod]
+                ['accompanyingPeriod' => $accompanyingPeriod],
+                ['startDate' => 'DESC']
             );
 
             $view = 'ChillCalendarBundle:Calendar:listByAccompanyingCourse.html.twig';

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

@@ -6,13 +6,15 @@
       v-bind:calendarEvents="calendarEvents" 
       v-bind:updateEventsSource="updateEventsSource"
       v-bind:showMyCalendar="showMyCalendar"
-      v-bind:toggleMyCalendar="toggleMyCalendar" >
+      v-bind:toggleMyCalendar="toggleMyCalendar"
+      v-bind:toggleWeekends="toggleWeekends" >
     </calendar-user-selector>
   </teleport>
   <teleport to="#fullCalendar">
     <FullCalendar ref="fullCalendar" :options="calendarOptions">
       <template v-slot:eventContent='arg'>
         <b>{{ arg.timeText }}</b>
+        <i>&nbsp;{{ arg.event.title }}</i>
       </template>
     </FullCalendar>
   </teleport>
@@ -27,7 +29,7 @@ import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
-import listPlugin from '@fullcalendar/list';
+// import listPlugin from '@fullcalendar/list';
 
 export default {
   name: "App",
@@ -50,11 +52,12 @@ export default {
          user: [],
          current: {
             events: [{
-                title: 'my_event',
+                title: 'plage prévue',
                 start: window.startDate,
                 end: window.endDate
             }],
-            id: window.mainUser
+            id: window.mainUser,
+            color: '#bbbbbb'
           }
       },
       selectedEvent: null,
@@ -63,7 +66,7 @@ export default {
       showMyCalendar: false,
       calendarOptions: {
         locale: frLocale,
-        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
+        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
         initialView: 'timeGridWeek',
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
         eventSource: [],
@@ -75,6 +78,7 @@ export default {
       //   eventMouseLeave: this.onEventMouseLeave,
         selectMirror: true,
         editable: true,
+        weekends: false,
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
@@ -85,12 +89,14 @@ export default {
   },
   methods: {
     init() {
-      console.log(window.startDate);
       this.updateEventsSource();
     },
     toggleMyCalendar(value) {
       this.showMyCalendar = value;
     },
+    toggleWeekends: function() {
+      this.calendarOptions.weekends = !this.calendarOptions.weekends;
+    },
     updateEventsSource() {
       this.calendarOptions.eventSources = [];
       this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
@@ -100,7 +106,6 @@ export default {
       if (this.showMyCalendar) {
           this.calendarOptions.eventSources.push(this.calendarEvents.user);
       }
-      console.log(this.calendarOptions.eventSources);
     },
     unSelectPreviousEvent(event) {
       if (event) {
@@ -108,15 +113,19 @@ export default {
           event.setProp('backgroundColor', this.previousSelectedEventColor);
           event.setProp('borderColor', this.previousSelectedEventColor);
           event.setProp('textColor','#444444');
+          event.setProp('title','');
         }
       }
     },
     onDateSelect(payload) {
+      console.log(payload)
+      this.unSelectPreviousEvent(this.selectedEvent);
       Object.assign(payload, {users: this.users});
+      Object.assign(payload, {title: 'Choisir cette plage'}); //TODO does not display
+      //payload.event.setProp('title', 'Choisir cette plage');
       this.$store.dispatch('createEvent', payload);
     },
     onEventChange(payload) {
-      console.log(this.calendarOptions.eventSources)
       this.$store.dispatch('updateEvent', payload);
     },
     onEventClick(payload) {
@@ -124,8 +133,8 @@ export default {
       this.previousSelectedEventColor = payload.event.extendedProps.sourceColor;
       this.selectedEvent = payload.event;
       this.unSelectPreviousEvent(this.previousSelectedEvent);
-      payload.event.setProp('backgroundColor','#df4949');
-      payload.event.setProp('borderColor','#df4949');
+      payload.event.setProp('backgroundColor','#3788d8');
+      payload.event.setProp('borderColor','#3788d8');
       payload.event.setProp('title', 'Choisir cette plage');
       payload.event.setProp('textColor','#ffffff');
     },

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

@@ -23,6 +23,11 @@
     <input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
     <label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
   </div>
+  <div class="form-check">
+    <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
+    <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
+  </div>
+  
 </template>
 <script>
 
@@ -48,7 +53,7 @@ const COLORS = [ /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&
 export default {
   name: 'CalendarUserSelector',
   components: { VueMultiselect },
-  props: ['users', 'updateEventsSource', 'calendarEvents', 'showMyCalendar', 'toggleMyCalendar'],
+  props: ['users', 'updateEventsSource', 'calendarEvents', 'showMyCalendar', 'toggleMyCalendar', 'toggleWeekends'],
   data() {
     return {
       errorMsg: [],
@@ -104,6 +109,7 @@ export default {
               events: arr,
               color: u.color,
               textColor: '#444444',
+              editable: false,
               id: u.id
             })
           })
@@ -111,9 +117,6 @@ export default {
           this.users.loaded = users;
           this.options = users;
           
-          console.log(users)
-          console.log(calendarEvents)
-          
           this.calendarEvents.loaded = calendarEvents;
           whoami().then(me => new Promise((resolve, reject) => {
             this.users.logged = me;
@@ -131,7 +134,8 @@ export default {
               let calendarEventsCurrentUser = {
                   events: events,
                   color: 'darkblue',
-                  id: 1000
+                  id: 1000,
+                  editable: false
               };
               this.calendarEvents.user = calendarEventsCurrentUser;
 

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

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

src/Bundle/ChillCalendarBundle/translations/messages.fr.yml

@@ -19,6 +19,7 @@ Send s m s: Envoi d'un SMS ?
 Cancel reason: Motif d'annulation
 Add a new calendar: Ajouter un nouveau rendez-vous
 "Success : calendar item updated!": "Rendez-vous mis à jour"
+"Success : calendar item created!": "Rendez-vous créé"
 The calendar item has been successfully removed.: Le rendez-vous a été supprimé
 From the day: Du
 to the day: au