From bcb36ddc112476f16f1db559bd21bfbe0c2d48b1 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Tue, 31 Aug 2021 09:03:12 +0200
Subject: [PATCH] rdv: edit calendar range: fix display of new calendar ranges

---
 .../public/vuejs/MyCalendarRange/App.vue      | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index e28655ab4..5f6ed3c0d 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -34,11 +34,11 @@ export default {
       userId: window.userId,
       showMyCalendar: true,
       calendarEvents: {
-         userCalendar: [],
-         userCalendarRange: [],
+         userCalendar: null,
+         userCalendarRange: null,
          new: {
            events: [],
-           color: "red"
+           color: "#3788d8"
          }
       },
       calendarOptions: {
@@ -50,6 +50,8 @@ export default {
         selectable: true,
         select: this.onDateSelect,
         eventChange: this.onEventChange,
+        eventDrop: this.onEventDropOrResize,
+        eventResize: this.onEventDropOrResize,
         // eventClick: this.onEventClick,
         selectMirror: true,
         editable: true,
@@ -79,7 +81,7 @@ export default {
         );
         let calendarRangeEvents = {
               events: events,
-              color: 'orange',
+              color: '#79bafc',
               textColor: '#444444'
         };
         this.calendarEvents.userCalendarRange = calendarRangeEvents;
@@ -107,8 +109,8 @@ export default {
     },
     updateEventsSource() {
       this.calendarOptions.eventSources = [];
-      this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
       this.calendarOptions.eventSources.push(this.calendarEvents.new);
+      this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
       if (this.showMyCalendar) {
           this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
       }
@@ -122,17 +124,24 @@ export default {
     },
     onDateSelect(payload) {
       console.log(payload)
-      this.calendarEvents.new.events.push({ //TODO does not work
+      let events = this.calendarEvents.new.events;
+      events.push({
           start: payload.startStr,
-          end: payload.endStr,
+          end: payload.endStr
       });
+      this.calendarEvents.new = {
+        events: events,
+        color: "#3788d8"
+      };
       this.updateEventsSource();
       this.$store.dispatch('createRange', payload);
     },
     onEventChange(payload) {
       console.log(payload)
       this.$store.dispatch('updateRange', payload);
-      //TODO update the eventsSource with payload, or use the store for updating the eventsSource
+    },
+    onEventDropOrResize(payload) {
+      payload.event.setProp('color', '#3788d8');
     },
     // onEventClick(payload) {
     //   console.log(payload)