rdv: add my calendar + checkbox

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

@@ -3,7 +3,9 @@
   <calendar-user-selector 
     v-bind:users="users"
     v-bind:calendarEvents="calendarEvents" 
-    v-bind:updateEventsSource="updateEventsSource">
+    v-bind:updateEventsSource="updateEventsSource"
+    v-bind:showMyCalendar="showMyCalendar"
+    v-bind:toggleMyCalendar="toggleMyCalendar" >
   </calendar-user-selector>
   <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
   <FullCalendar ref="fullCalendar" :options="calendarOptions">
@@ -51,15 +53,16 @@ export default {
       calendarEvents: {
          loaded: [],
          selected: [],
-         user: [], //TODO load user calendar events
+         user: [],
          current: currentEvent
       },
+      showMyCalendar: true,
       calendarOptions: {
         locale: frLocale,
         plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
         initialView: 'timeGridWeek',
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
-        eventSources: window.startDate !== undefined ? [currentEvent] : [],
+        eventSource: [],
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
@@ -79,19 +82,21 @@ export default {
   methods: {
     init() {
       console.log(window.startDate)
-      // let calendar = this.$refs.fullCalendar.getApi()
-      // console.log(calendar)
-      this.calendarEvents.selected.push(this.calendarEvents.user);
-      this.calendarOptions.eventSources = this.calendarEvents.selected;
-      console.log(this.calendarOptions.eventSources)
-
+      this.updateEventsSource()
+    },
+    toggleMyCalendar(value) {
+      this.showMyCalendar = value;
     },
     updateEventsSource() {
+      this.calendarOptions.eventSources = [];
+      this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
+      console.log(this.calendarOptions.eventSources)
       if (window.startDate !== undefined) {
-         this.calendarEvents.selected.push(currentEvent);
+         this.calendarOptions.eventSources.push(currentEvent);
+      }
+      if (this.showMyCalendar) {
+          this.calendarOptions.eventSources.push(this.calendarEvents.user);
       }
-      this.calendarEvents.selected.push(this.calendarEvents.user);
-      this.calendarOptions.eventSources = this.calendarEvents.selected;
       console.log(this.calendarOptions.eventSources)
     },
     onDateSelect(payload) {

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

@@ -19,6 +19,10 @@
         :options="options">
     </VueMultiselect>
   </div>
+  <div>
+    <input type="checkbox" id="myCalendar" v-model="showMyCalendarWidget" />
+    <label for="checkbox">{{ $t('show_my_calendar') }}</label>
+  </div>
 </template>
 <script>
 
@@ -44,7 +48,7 @@ const COLORS = [ /* from https://colorbrewer2.org/#type=qualitative&scheme=Set3&
 export default {
   name: 'CalendarUserSelector',
   components: { VueMultiselect },
-  props: ['users', 'updateEventsSource', 'calendarEvents'],
+  props: ['users', 'updateEventsSource', 'calendarEvents', 'showMyCalendar', 'toggleMyCalendar'],
   data() {
     return {
       errorMsg: [],
@@ -52,6 +56,17 @@ export default {
       options: []
     }
   },
+  computed: {
+      showMyCalendarWidget: {
+         set(value) {
+            this.toggleMyCalendar(value);
+            this.updateEventsSource();
+         },
+         get() {
+            return this.showMyCalendar;
+         }
+      }
+   },
   methods: {
     init() {
       this.fetchData()
@@ -106,7 +121,6 @@ export default {
             
             fetchCalendar(currentUser.id).then(calendar => new Promise((resolve, reject) => {
               let results = calendar.results;
-              console.log(results)
               let events = results.map(i => 
                 ({
                   start: i.startDate.datetime,
@@ -118,7 +132,6 @@ export default {
                   color: 'darkblue',
                   id: 1000
               };
-              console.log(calendarEventsCurrentUser);
               this.calendarEvents.user = calendarEventsCurrentUser;
 
               this.selectUsers(currentUser);

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

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