allow to select a date on a calendar

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);
-        let startDateInput = document.getElementById("chill_activitybundle_activity_startDate");
-        startDateInput.value = payload.startStr;
-        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);
+  /**
+   * 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 = datetimeToISO(start);
+      let endDateInput = document.getElementById("chill_activitybundle_activity_endDate");
+      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);