refactor to use store for storing events

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

@@ -1,16 +1,5 @@
 <template>
   <concerned-groups></concerned-groups>
-  <location></location>
-  <teleport to="#calendarControls">
-    <calendar-user-selector
-      v-bind:users="users"
-      v-bind:calendarEvents="calendarEvents"
-      v-bind:updateEventsSource="updateEventsSource"
-      v-bind:showMyCalendar="showMyCalendar"
-      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'>
@@ -19,9 +8,11 @@
       </template>
     </FullCalendar>
   </teleport>
+  <location></location>
 </template>
 
 <script>
+//import {mapGetters} from 'vuex';
 import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
 import Location from 'ChillActivityAssets/vuejs/Activity/components/Location.vue';
 import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
@@ -44,6 +35,7 @@ export default {
   data() {
     return {
       errorMsg: [],
+      /*
       users: {
         loaded: [],
         selected: [],
@@ -62,23 +54,31 @@ export default {
             id: window.mainUser,
             color: '#bbbbbb'
           }
-      },
+      },*/
       selectedEvent: null,
       previousSelectedEvent: null,
       previousSelectedEventColor: null,
       showMyCalendar: false,
-      calendarOptions: {
+    }
+  },
+  computed: {
+    events() {
+      return this.$store.getters.getEventSources;
+    },
+    calendarOptions() {
+      return {
         locale: frLocale,
-        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
+        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
         initialView: 'timeGridWeek',
-        initialDate: window.startDate !== undefined ? window.startDate : new Date(),
-        eventSource: [],
+        initialDate: this.$store.getters.initialDate,
+        eventSources: this.events,
         selectable: true,
+        datesSet: this.onDatesSet,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
         eventClick: this.onEventClick,
-      //   eventMouseEnter: this.onEventMouseEnter,
-      //   eventMouseLeave: this.onEventMouseLeave,
+        //   eventMouseEnter: this.onEventMouseEnter,
+        //   eventMouseLeave: this.onEventMouseLeave,
         selectMirror: true,
         editable: true,
         weekends: false,
@@ -86,37 +86,46 @@ export default {
           left: 'prev,next today',
           center: 'title',
           right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,listWeek,listDay'
-        },
-      }
-    }
+        }
+      };
+    },
   },
   methods: {
     init() {
-      this.updateEventsSource();
+      //this.updateEventsSource();
     },
     toggleMyCalendar(value) {
       this.showMyCalendar = value;
     },
-    toggleWeekends: function() {
+    toggleWeekends: function () {
       this.calendarOptions.weekends = !this.calendarOptions.weekends;
     },
     updateEventsSource() {
-      this.calendarOptions.eventSources = [];
-      this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
-      if (window.startDate !== undefined) {
-         this.calendarOptions.eventSources.push(this.calendarEvents.current);
-      }
-      if (this.showMyCalendar) {
-          this.calendarOptions.eventSources.push(this.calendarEvents.user);
-      }
+      /*
+    this.calendarOptions.eventSources = [];
+    this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
+    if (window.startDate !== undefined) {
+       this.calendarOptions.eventSources.push(this.calendarEvents.current);
+    }
+    if (this.showMyCalendar) {
+        this.calendarOptions.eventSources.push(this.calendarEvents.user);
+    }
+
+    console.log('eventSources', this.calendarOptions.eventSoruces);
+
+       */
+    },
+    onDatesSet(event) {
+      console.log('onDatesSet', event);
+      this.$store.dispatch('setCurrentDatesView', {start: event.start, end: event.end});
     },
     unSelectPreviousEvent(event) {
       if (event) {
         if (typeof event.setProp === 'function') {
           event.setProp('backgroundColor', this.previousSelectedEventColor);
           event.setProp('borderColor', this.previousSelectedEventColor);
-          event.setProp('textColor','#444444');
-          event.setProp('title','');
+          event.setProp('textColor', '#444444');
+          event.setProp('title', '');
         }
       }
     },
@@ -136,20 +145,20 @@ export default {
       this.previousSelectedEventColor = payload.event.extendedProps.sourceColor;
       this.selectedEvent = payload.event;
       this.unSelectPreviousEvent(this.previousSelectedEvent);
-      payload.event.setProp('backgroundColor','#3788d8');
-      payload.event.setProp('borderColor','#3788d8');
+      payload.event.setProp('backgroundColor', '#3788d8');
+      payload.event.setProp('borderColor', '#3788d8');
       payload.event.setProp('title', 'Choisir cette plage');
-      payload.event.setProp('textColor','#ffffff');
+      payload.event.setProp('textColor', '#ffffff');
     },
     onEventMouseEnter(payload) {
-      payload.event.setProp('borderColor','#444444');
+      payload.event.setProp('borderColor', '#444444');
     },
     onEventMouseLeave(payload) {
-      payload.event.setProp('borderColor','#ffffff');
+      payload.event.setProp('borderColor', '#ffffff');
     }
   },
   mounted() {
-    this.init();
+    //this.init();
   }
 }
 </script>