allow to select a date on a calendar

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

@@ -141,12 +141,19 @@ export default {
       }
     },
     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);
+      console.log('onDateSelect', payload);
+
+      // show an alert if changing mainUser
+      if (this.$store.getters.getMainUser !== null
+        && this.$store.state.me.id !== this.$store.getters.getMainUser.id) {
+        if (!window.confirm(this.$t('will_change_main_user_for_me'))) {
+          return;
+        } else {
+          this.$store.commit('showUserOnCalendar', {user: this.$store.state.me, remotes: true, ranges: true})
+        }
+      }
+
+      this.$store.dispatch('setEventTimes', {start: payload.start, end: payload.end});
     },
     onEventChange(payload) {
       this.$store.dispatch('updateEvent', payload);
@@ -158,8 +165,8 @@ export default {
       }
 
       // show an alert if changing mainUser
-      if (this.$store.state.activity.mainUser !== null
-        && payload.event.extendedProps.userId !== this.$store.state.activity.mainUser.id) {
+      if (this.$store.getters.getMainUser !== null
+        && payload.event.extendedProps.userId !== this.$store.getMainUser.id) {
         if (!window.confirm(this.$t('this_calendar_range_will_change_main_user'))) {
           return;
         }

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/i18n.js

@@ -14,7 +14,7 @@ const appMessages = {
       bloc_users: "T(M)S",
     },
     this_calendar_range_will_change_main_user: "Cette plage de disponibilité n'est pas celle de l'utilisateur principal. Si vous continuez, l'utilisateur principal sera adapté. Êtes-vous sur·e ?",
-
+    will_change_main_user_for_me: "Vous ne pouvez pas écrire dans le calendrier d'un autre utilisateur. Voulez-vous être l'utilisateur principal de ce rendez-vous ?",
   }
 }
 

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

@@ -10,6 +10,17 @@ import {
 } from './../api';
 import {datetimeToISO} from 'ChillMainAssets/chill/js/date';
 
+/**
+ * This will store a unique key for each value, and prevent to launch the same
+ * request multiple times, when fetching user calendars.
+ *
+ * Actually, each time a user is added or removed, the methods "dateSet" is executed and this
+ * sparkle a request by user to get the calendar data. When the calendar data is fetched, it is
+ * immediatly added to the calendar which, in turn , launch the event dateSet and re-launch fetch
+ * queries which has not yet ended. Storing the queries already executed prevent this loop.
+ *
+ * @type {Set<String>}
+ */
 const fetchings = new Set();
 
 export default {
@@ -108,15 +119,33 @@ export default {
     },
 
     // Calendar
-    createEvent({ commit }, payload) {
-        console.log('### action createEvent', payload);
+  /**
+   * set event startDate and endDate.
+   *
+   * if the mainUser is different from "me", it will replace the mainUser
+   *
+   * @param commit
+   * @param state
+   * @param getters
+   * @param start
+   * @param end
+   */
+    setEventTimes({ commit, state, getters }, {start, end}) {
+      console.log('### action createEvent', {start, end});
       let startDateInput = document.getElementById("chill_activitybundle_activity_startDate");
-        startDateInput.value = payload.startStr;
+      startDateInput.value = datetimeToISO(start);
       let endDateInput = document.getElementById("chill_activitybundle_activity_endDate");
-        endDateInput.value = payload.endStr;
-        //let mainUserInput = document.getElementById("chill_activitybundle_activity_mainUser");
-        //mainUserInput.value = payload.users.logged.id;
-        commit('setEvents', payload);
+      endDateInput.value = datetimeToISO(end);
+      let calendarRangeInput = document.getElementById("chill_activitybundle_activity_calendarRange");
+      calendarRangeInput.value = "";
+
+    if (getters.getMainUser !== null && getters.getMainUser.id !== state.me.id) {
+        let mainUserInput = document.getElementById("chill_activitybundle_activity_mainUser");
+        mainUserInput.value = state.me.id;
+        commit('setMainUser', state.me);
+      }
+
+      commit('setEventTimes', {start, end});
     },
     associateCalendarToRange({ state, commit, dispatch }, {range}) {
         console.log('### action associateCAlendarToRange', range);

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

@@ -27,6 +27,26 @@ export default {
       }
     );
   },
+  /**
+   * Set the event start and end to the given start and end,
+   * and remove eventually the calendar range.
+   *
+   * @param state
+   * @param Date start
+   * @param Date end
+   */
+  setEventTimes(state, {start, end}) {
+    state.activity.startDate = start;
+    state.activity.endDate = end;
+    state.activity.calendarRange = null;
+  },
+  /**
+   * Set the event's start and end from the calendar range data,
+   * and associate event to calendar range.
+   *
+   * @param state
+   * @param range
+   */
   associateCalendarToRange(state, {range}) {
     console.log('userId', range.extendedProps.userId);