From b40c25595a67e15627d4625bbec9178fb9b72900 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 18 Aug 2021 10:16:32 +0200
Subject: [PATCH] rdv: fullcalendar: select and unselect user calendars

---
 .../Resources/public/vuejs/Calendar/App.vue   | 58 +++++++------------
 .../CalendarUserSelector.vue                  | 34 +++++------
 2 files changed, 35 insertions(+), 57 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index dec188e43..504315e99 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -22,6 +22,15 @@ import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import timeGridPlugin from '@fullcalendar/timegrid'
 
+const currentEvent = {
+   events: [{
+      title: 'my_event',
+      start: window.startDate,
+      end: window.endDate
+   }],
+   id: -1
+};
+
 export default {
   name: "App",
   components: {
@@ -38,39 +47,20 @@ export default {
       },
       calendarEvents: {
          loaded: [],
-         selected: []
+         selected: [],
+         userEvents: [], //TODO load user calendar events
+         current: currentEvent
       },
       calendarOptions: {
         plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
         initialView: 'timeGridWeek',
-        initialEvents: window.startDate !== undefined ?
-          [
-            {
-              id: 1,
-              start: window.startDate,
-              end: window.endDate
-            }
-          ] : [],
         initialDate: window.startDate !== undefined ? window.startDate : new Date(),
-      //   eventSources: [{events: [
-      //        {
-      //          title: 'Event1',
-      //          start: '2021-08-04T12:30:00'
-      //        },
-      //        {
-      //          title: 'Event2',
-      //          start: '2021-08-05T12:30:00'
-      //        }
-      //      ],
-      //      color: 'yellow',   // an option!
-      //      textColor: 'black' // an option!
-      //     }],//this work at initialisation, initialize with initialEvents content?
+        eventSources: window.startDate !== undefined ? [currentEvent] : [],
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
         selectMirror: true,
         editable: true,
-        lazyFetching: false, // To fetch at maximum
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
@@ -82,25 +72,17 @@ export default {
   methods: {
     init() {
       console.log(window.startDate)
-      let calendar = this.$refs.fullCalendar.getApi()
-      //calendar.next()
-      console.log(calendar)
+      // let calendar = this.$refs.fullCalendar.getApi()
+      // console.log(calendar)
     },
     updateEventsSource() {
       console.log('updateEventsSource')
- 
-      console.log(this.calendarEvents.loaded);
-      this.calendarEvents.selected = this.calendarEvents.loaded; //TODO filter loaded events on selected users
-     
-      // this works!!!
+      console.log(this.calendarEvents.selected)
+
       this.calendarOptions.eventSources = this.calendarEvents.selected;
-
-      // let calendar = this.$refs.fullCalendar.getApi();
-      // console.log(calendar);
-      // console.log(calendar.getEventSources())
-      // calendar.addEventSource(this.calendarEvents.selected);
-
-      // console.log(calendar.getEventSources())
+      if (window.startDate !== undefined) {
+         this.calendarEvents.selected.push(currentEvent);
+      }
     },
     onDateSelect(payload) {
       this.$store.dispatch('createEvent', payload);
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
index 40fc4e2cd..fbb5201c3 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -13,7 +13,8 @@
         :close-on-select="false"
         :allow-empty="true"
         :model-value="value"
-        @update:model-value="selectUsers"
+        @select="selectUsers"
+        @remove="unSelectUsers"
         :options="options">
     </VueMultiselect>
   </div>
@@ -64,10 +65,10 @@ export default {
                 end: i.endDate.datetime
               })
             );
-            console.log(arr);
             calendarEvents.push({
               events: arr,
-              color: u.color
+              color: u.color,
+              id: u.id
             })
           })
 
@@ -78,21 +79,6 @@ export default {
           console.log(calendarEvents)
           this.calendarEvents.loaded = calendarEvents;
 
-          // // TO TEST
-          // this.calendarEvents.loaded = [{events: [
-          //    {
-          //      title: 'Event1',
-          //      start: '2021-08-04T12:30:00'
-          //    },
-          //    {
-          //      title: 'Event2',
-          //      start: '2021-08-05T12:30:00'
-          //    }
-          //  ],
-          //  color: 'yellow',   // an option!
-          //  textColor: 'black' // an option!
-          // }];
-
           resolve()
       }))
       .catch((error) => {
@@ -102,8 +88,18 @@ export default {
     transName(value) {
       return `${value.username}`;
     },
+    selectEvents() {
+      let selectedUsersId = this.users.selected.map(a => a.id);
+      this.calendarEvents.selected = this.calendarEvents.loaded.filter(a => selectedUsersId.includes(a.id));
+    },
     selectUsers(value) {
-      this.users.selected = value;
+      this.users.selected.push(value);
+      this.selectEvents();
+      this.updateEventsSource();
+    },
+    unSelectUsers(value) {
+      this.users.selected = this.users.selected.filter(a => a.id != value.id);
+      this.selectEvents();
       this.updateEventsSource();
     }
   },