From 6a6b1760f5e86967bf1ac1ce0f56c5be652f1b4b Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 20 Aug 2021 14:56:18 +0200
Subject: [PATCH] rdv: style properly the events when clicking

---
 .../Resources/public/vuejs/Calendar/App.vue   | 60 ++++++++++++-------
 .../CalendarUserSelector.vue                  |  3 +-
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
index 8c762a645..317bfa232 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue
@@ -21,23 +21,14 @@
 <script>
 import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
 import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
-import '@fullcalendar/core/vdom' // solves problem with Vite
+import '@fullcalendar/core/vdom'; // solves problem with Vite
 import frLocale from '@fullcalendar/core/locales/fr';
-import FullCalendar from '@fullcalendar/vue3'
-import dayGridPlugin from '@fullcalendar/daygrid'
-import interactionPlugin from '@fullcalendar/interaction'
-import timeGridPlugin from '@fullcalendar/timegrid'
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import timeGridPlugin from '@fullcalendar/timegrid';
 import listPlugin from '@fullcalendar/list';
 
-const currentEvent = {
-   events: [{
-      title: 'my_event',
-      start: window.startDate,
-      end: window.endDate
-   }],
-   id: window.mainUser
-};
-
 export default {
   name: "App",
   components: {
@@ -57,9 +48,19 @@ export default {
          loaded: [],
          selected: [],
          user: [],
-         current: currentEvent
+         current: {
+            events: [{
+                title: 'my_event',
+                start: window.startDate,
+                end: window.endDate
+            }],
+            id: window.mainUser
+          }
       },
-      showMyCalendar: true,
+      selectedEvent: null,
+      previousSelectedEvent: null,
+      previousSelectedEventColor: null,
+      showMyCalendar: false,
       calendarOptions: {
         locale: frLocale,
         plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
@@ -84,8 +85,8 @@ export default {
   },
   methods: {
     init() {
-      console.log(window.startDate)
-      this.updateEventsSource()
+      console.log(window.startDate);
+      this.updateEventsSource();
     },
     toggleMyCalendar(value) {
       this.showMyCalendar = value;
@@ -93,14 +94,22 @@ export default {
     updateEventsSource() {
       this.calendarOptions.eventSources = [];
       this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
-      console.log(this.calendarOptions.eventSources)
       if (window.startDate !== undefined) {
-         this.calendarOptions.eventSources.push(currentEvent);
+         this.calendarOptions.eventSources.push(this.calendarEvents.current);
       }
       if (this.showMyCalendar) {
           this.calendarOptions.eventSources.push(this.calendarEvents.user);
       }
-      console.log(this.calendarOptions.eventSources)
+      console.log(this.calendarOptions.eventSources);
+    },
+    unSelectPreviousEvent(event) {
+      if (event) {
+        if (typeof event.setProp === 'function') {
+          event.setProp('backgroundColor', this.previousSelectedEventColor);
+          event.setProp('borderColor', this.previousSelectedEventColor);
+          event.setProp('textColor','#444444');
+        }
+      }
     },
     onDateSelect(payload) {
       Object.assign(payload, {users: this.users});
@@ -111,9 +120,14 @@ export default {
       this.$store.dispatch('updateEvent', payload);
     },
     onEventClick(payload) {
-      payload.event.setProp('backgroundColor','#3788d8');
+      this.previousSelectedEvent = this.selectedEvent;
+      this.previousSelectedEventColor = payload.event.extendedProps.sourceColor;
+      this.selectedEvent = payload.event;
+      this.unSelectPreviousEvent(this.previousSelectedEvent);
+      payload.event.setProp('backgroundColor','#df4949');
+      payload.event.setProp('borderColor','#df4949');
+      payload.event.setProp('title', 'Choisir cette plage');
       payload.event.setProp('textColor','#ffffff');
-      //this.$store.dispatch('updateEvent', payload);
     },
     onEventMouseEnter(payload) {
       payload.event.setProp('borderColor','#444444');
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 e97fe9ba4..2ed0c166e 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -95,7 +95,8 @@ export default {
               ({
                 start: i.startDate.datetime,
                 end: i.endDate.datetime,
-                calendarRangeId: i.id
+                calendarRangeId: i.id,
+                sourceColor: u.color
                 //display: 'background' // can be an option for the disponibility 
               })
             );