create event by selecting a calendar range

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

@@ -152,6 +152,20 @@ export default {
       this.$store.dispatch('updateEvent', payload);
     },
     onEventClick(payload) {
+      console.log('onEventClick', payload);
+
+      console.log('extendedProps', payload.event.extendedProps);
+      console.log('isRange', payload.event.extendedProps.is === 'range');
+
+      if (payload.event.extendedProps.is !== 'range') {
+        // do nothing when clicking on remote
+        return;
+      }
+
+      this.$store.dispatch('associateCalendarToRange', {range: payload.event});
+
+
+      /*
       this.previousSelectedEvent = this.selectedEvent;
       this.previousSelectedEventColor = payload.event.extendedProps.sourceColor;
       this.selectedEvent = payload.event;
@@ -160,6 +174,7 @@ export default {
       payload.event.setProp('borderColor', '#3788d8');
       payload.event.setProp('title', 'Choisir cette plage');
       payload.event.setProp('textColor', '#ffffff');
+       */
     },
     onEventMouseEnter(payload) {
       payload.event.setProp('borderColor', '#444444');

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

@@ -8,6 +8,7 @@ import {
   fetchCalendarRangeForUser,
   fetchCalendarRemoteForUser,
 } from './../api';
+import {datetimeToISO} from 'ChillMainAssets/chill/js/date';
 
 export default {
     setCurrentDatesView({ commit, dispatch }, {start, end}) {
@@ -106,19 +107,20 @@ export default {
         //mainUserInput.value = payload.users.logged.id;
         commit('setEvents', payload);
     },
-    updateEvent({ commit, dispatch }, payload) {
-        console.log('### action updateEvent', payload);
+    associateCalendarToRange({ commit, dispatch }, {range}) {
+        console.log('### action associateCAlendarToRange', range);
         let startDateInput = document.getElementById("chill_activitybundle_activity_startDate");
-        startDateInput.value = payload.event.start.toISOString();
+        startDateInput.value = datetimeToISO(range.start);
         let endDateInput = document.getElementById("chill_activitybundle_activity_endDate");
-        endDateInput.value = payload.event.end.toISOString();
+        endDateInput.value = datetimeToISO(range.end);
         let calendarRangeInput = document.getElementById("chill_activitybundle_activity_calendarRange");
-        calendarRangeInput.value = Number(payload.event.extendedProps.calendarRangeId);
+        calendarRangeInput.value = Number(range.extendedProps.calendarRangeId);
 
         //dispatch('setMainUser', payload.event.source);
         //let mainUserInput = document.getElementById("chill_activitybundle_activity_mainUser");
         //mainUserInput.value = Number(payload.event.source.id);
-        commit('setEvents', payload);
+        commit('associateCalendarToRange', {range});
+        return Promise.resolve();
     },
     setMainUser({ commit }, mainUser) {
         console.log('rawMainuser', toRaw(mainUser));

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

@@ -26,11 +26,33 @@ export default {
    * Compute the event sources to show on the FullCalendar
    *
    * @param state
-   * @returns {*[]}
+   * @param getters
+   * @returns {[]}
    */
-  getEventSources(state) {
+  getEventSources(state, getters) {
     let sources = [];
 
+    // current calendar
+    if (state.activity.startDate !== null && state.activity.endDate !== null) {
+      const s = {
+        id: 'current',
+        backgroundColor: '#3788d8',
+        borderColor: '#3788d8',
+        textColor: '#ffffff',
+        events: [
+          {
+            title: "Rendez-vous",
+            start: state.activity.startDate,
+            end: state.activity.endDate,
+            allDay: false,
+          }
+        ],
+        editable: state.activity.calendarRange === null,
+      };
+
+      sources.push(s);
+    }
+
     for (const [userId, kinds] of state.currentView.users.entries()) {
       if (!state.usersData.has(userId)) {
         console.log('try to get events on a user which not exists', userId);
@@ -40,9 +62,11 @@ 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,
+          events: userData.calendarRanges.filter(r => state.activity.calendarRange === null || r.calendarRangeId !== state.activity.calendarRange.calendarRangeId),
           color: userData.mainColor,
           backgroundColor: 'white',
           textColor: 'black',

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

@@ -27,6 +27,24 @@ export default {
       }
     );
   },
+  associateCalendarToRange(state, {range}) {
+    console.log('userId', range.extendedProps.userId);
+
+    const r = state.usersData.get(range.extendedProps.userId).calendarRanges
+      .find(r => r.calendarRangeId === range.extendedProps.calendarRangeId);
+
+    if (typeof r === 'undefined') {
+      throw Error('Could not find managed calendar range');
+    }
+
+    console.log('range found', r);
+
+    state.activity.startDate = range.start;
+    state.activity.endDate = range.end;
+    state.activity.calendarRange = r;
+
+    console.log('activity', state.activity);
+  },
 
   // ConcernedGroups
   addPersonsInvolved(state, payload) {

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

@@ -43,6 +43,8 @@ const calendarRangeToFullCalendarEvent = (entity) => {
     end: entity.endDate.datetime8601,
     allDay: false,
     userId: entity.user.id,
+    calendarRangeId: entity.id,
+    is: 'range',
   };
 }
 
@@ -53,6 +55,7 @@ const remoteToFullCalendarEvent = (entity) => {
     start: entity.startDate.datetime8601,
     end: entity.endDate.datetime8601,
     allDay: false,
+    is: 'remote',
   };
 }