more changes to save modified, deleted new plages immediately

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

@@ -186,6 +186,7 @@ export default {
   },
   computed: {
     ...mapState({
+      currentCalendarRanges: state => state.currentCalendarRanges,
       newCalendarRanges: state => state.newCalendarRanges,
       updateCalendarRanges: state => state.updateCalendarRanges,
       deleteCalendarRanges: state => state.deleteCalendarRanges,
@@ -204,6 +205,7 @@ export default {
   methods: {
     init() {
       this.fetchData();
+      console.log('calendar', this.$refs.fullCalendar.getApi().view.getCurrentData())
     },
     openModal() {
       this.modal.showModal = true;
@@ -228,7 +230,6 @@ export default {
     fetchData() {
       this.flag.loading = true;
       fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
-        // console.log('calendar ranges', calendarRanges.results)
         let events = calendarRanges.results.map(i =>
           ({
             start: i.startDate.datetime,
@@ -281,7 +282,6 @@ export default {
       if (this.showMyCalendar) {
           this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
       }
-      console.log('eventSources', this.calendarOptions.eventSources);
     },
     toggleMyCalendar(value) {
       this.showMyCalendar = value;
@@ -290,7 +290,6 @@ export default {
       this.calendarOptions.weekends = !this.calendarOptions.weekends;
     },
     onDateSelect(payload) {
-      // console.log('payload', payload);
       let events = this.calendarEvents.new.events;
       // events.push({
       //     start: payload.startStr,
@@ -305,7 +304,6 @@ export default {
       this.disableCopyDayButton = false;
       this.lastNewDate = new Date(payload.startStr);
       this.updateEventsSource();
-      // this.$store.dispatch('createRange', payload);
       postCalendarRange({
         user: {
             type: 'user',
@@ -317,17 +315,24 @@ export default {
         endDate: {
             datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
         },
-      }).then(() => {
-        this.init();
+      }).then((_r) => {
+        this.resetCalendar();
       })
     },
-    onEventChange(payload) {
-    },
     onEventDropOrResize(payload) {
       payload.event.setProp('borderColor', '#3788d8');
       payload.event.setProp('backgroundColor', '#fffadf');
       payload.event.setProp('textColor', '#444444');
-      this.$store.dispatch('updateRange', payload);
+
+      patchCalendarRange(payload.event.extendedProps.calendarRangeId,
+        {
+        startDate: {
+            datetime: `${payload.event.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+        },
+        endDate: {
+            datetime: `${payload.event.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+        },
+      }).then((_r) => this.resetCalendar());
     },
     onEventClick(payload) {
       if (payload.event.extendedProps.myCalendar) {
@@ -341,7 +346,6 @@ export default {
           professionals: payload.event.extendedProps.professionals,
           comment: payload.event.extendedProps.comment
         };
-        // console.log(this.myCalendarClickedEvent)
         this.openModal();
       }
     },
@@ -393,7 +397,7 @@ export default {
     onClickDelete(payload) {
       if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
         deleteCalendarRange(payload.extendedProps.calendarRangeId).then(() => {
-          this.init();
+          this.resetCalendar();
         })
         // if (payload.extendedProps.toDelete) {
         //   payload.setExtendedProp('toDelete', false)
@@ -406,7 +410,7 @@ export default {
         // }
       } else {
         let newEvents = this.calendarEvents.new.events;
-        let filterEvents = newEvents.filter((e) => 
+        let filterEvents = newEvents.filter((e) =>
           e.start !== payload.startStr && e.end !== payload.endStr
         );
         this.calendarEvents.new = {

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js

@@ -10,11 +10,11 @@ const store = createStore({
       newCalendarRanges: [],
       updateCalendarRanges: [],
       deleteCalendarRanges: [],
-      userRanges: [],
+      currentCalendarRanges: [],
    },
    mutations: {
-      setUserRanges(state, payload) {
-         state.userRanges = payload
+      setCurrentCalendarRanges(state, payload) {
+         state.currentCalendarRanges = payload
       },
       updateRange(state, payload) {
          state.updateCalendarRanges.push({
@@ -57,19 +57,22 @@ const store = createStore({
          )
          state.deleteCalendarRanges = filteredCollection;
       },
-      addUserRange(state, payload) {
-         state.userRanges.push(payload);
+      addCalendarRange(state, payload) {
+         state.currentCalendarRanges.push(payload);
       }
    },
    actions: {
-      setUserRanges({ commit }) {
-         console.log('userId', window.userId);
+      setCurrentCalendarRanges({ commit }) {
+         // console.log('userId', window.userId);
          fetchCalendarRangesByUser(window.userId)
             .then((ranges) => {
-               console.log('ranges', ranges.results);
-               commit('setUserRanges', ranges.results);
+               // console.log('ranges', ranges.results);
+               commit('setCurrentCalendarRanges', ranges.results);
             })
       },
+      addCalendarRange({ commit }, payload) {
+         commit('addCalendarRange', payload)
+      },
       createRange({ commit }, payload) {
          // console.log('### action createRange', payload);
          commit('addRange', payload);
@@ -97,10 +100,10 @@ const store = createStore({
       removeFromDeleteRange({ commit }, payload) {
          commit('removeFromDeleteRange', payload);
       },
-  }
+   }
 });
 
-store.dispatch('setUserRanges');
+store.dispatch('setCurrentCalendarRanges');
 
 
 export default store;