From 0c61edd0d614648a0195536fad24485b3b39f52e Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Tue, 17 May 2022 15:49:50 +0200
Subject: [PATCH] everything changed to use store for faster re-render of
 calendar

---
 .../public/vuejs/MyCalendarRange/App.vue      | 270 +++---------------
 .../public/vuejs/MyCalendarRange/store.js     | 227 +++++++++------
 2 files changed, 180 insertions(+), 317 deletions(-)

diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
index 2f21078bf..96fb1667c 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
@@ -11,7 +11,7 @@
       <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
     </div>
 
-    <FullCalendar ref="fullCalendar" :options="calendarOptions">
+    <FullCalendar ref="fullCalendar" :options="{...calendarOptions, eventSources: [this.rangeSource, this.appointmentSource]}">
       <template v-slot:eventContent='arg' >
         <span class='calendarRangeItems'>
           <b v-if="arg.event.extendedProps.myCalendar" style="text-decoration: underline" >{{ arg.timeText }}</b>
@@ -94,8 +94,8 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
-import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
-import { mapState } from 'vuex';
+import { fetchCalendarRangesByUser, postCalendarRange } from '../_api/api';
+import { mapGetters, mapActions, mapState } from 'vuex';
 import { vShow } from 'vue';
 
 export default {
@@ -119,14 +119,6 @@ export default {
       userId: window.userId,
       showMyCalendar: true,
       myCalendarClickedEvent: null,
-      calendarEvents: {
-        userCalendar: null,
-        userCalendarRange: null,
-        new: {
-          events: [],
-          color: "#3788d8"
-        }
-      },
       lastNewDate: null,
       disableCopyDayButton: true,
       calendarOptions: {
@@ -147,74 +139,22 @@ export default {
         slotMinTime: "08:00:00",
         slotMaxTime: "19:00:00",
         contentHeight: 500,
-        customButtons: {
-          prev: {
-            click: () => {
-              let calendarApi = this.$refs.fullCalendar.getApi();
-              calendarApi.prev();
-              this.fetchData();
-            }
-          },
-          next: {
-            click: () => {
-              let calendarApi = this.$refs.fullCalendar.getApi();
-              calendarApi.next();
-              this.fetchData();
-            }
-          },
-          day: {
-            text: this.$t('day'),
-            click: () => {
-              let calendarApi = this.$refs.fullCalendar.getApi();
-              calendarApi.changeView('timeGridDay');
-              this.fetchData();
-            }
-          },
-          week: {
-            text: this.$t('week'),
-            click: () => {
-              let calendarApi = this.$refs.fullCalendar.getApi();
-              calendarApi.changeView('timeGridWeek');
-              this.fetchData();
-            }
-          },
-          month: {
-            text: this.$t('month'),
-            click: () => {
-              let calendarApi = this.$refs.fullCalendar.getApi();
-              calendarApi.changeView('dayGridMonth');
-              this.fetchData();
-            }
-          },
-          today: {
-            text: this.$t('today'),
-            click: () => {
-              let calendarApi = this.$refs.fullCalendar.getApi();
-              calendarApi.changeView('timeGridDay', new Date());
-              this.fetchData();
-            }
-          },
-        },
         headerToolbar: {
-          left: 'prev next today',
+          left: 'prev,next today',
           center: 'title',
-          right: 'month,week,day'
+          right: 'dayGridMonth timeGridWeek timeGridDay'
         },
       },
     }
   },
   computed: {
     ...mapState({
-      currentCalendarRanges: state => state.currentCalendarRanges,
-      newCalendarRanges: state => state.newCalendarRanges,
-      updateCalendarRanges: state => state.updateCalendarRanges,
-      deleteCalendarRanges: state => state.deleteCalendarRanges,
-      dirty: state => state.newCalendarRanges.length > 0 || state.updateCalendarRanges.length > 0 || state.deleteCalendarRanges.length > 0
+      rangesToCopy: state => state.rangesToCopy
     }),
+    ...mapGetters(['rangeSource', 'appointmentSource']),
     showMyCalendarWidget: {
       set(value) {
         this.toggleMyCalendar(value);
-        this.updateEventsSource();
       },
       get() {
         return this.showMyCalendar;
@@ -222,9 +162,13 @@ export default {
     }
   },
   methods: {
-    init() {
-      this.fetchData();
-    },
+    ...mapActions([
+      'fetchRanges',
+      'fetchAppointments',
+      'postRange',
+      'patchRange',
+      'deleteRange'
+    ]),
     openModal() {
       this.modal.showModal = true;
     },
@@ -237,73 +181,6 @@ export default {
     myCalendarEventDeleteLink() {
       return `/fr/calendar/calendar/${this.myCalendarClickedEvent.id}/delete?user_id=${ this.userId }`
     },
-    resetCalendar() {
-      this.fetchData();
-      this.calendarEvents.new = {
-        events: [],
-        color: "#3788d8"
-      };
-      this.updateEventsSource();
-    },
-    fetchData() {
-      this.flag.loading = true;
-      const startDate = this.$refs.fullCalendar.getApi().view.currentStart.toISOString()
-      const endDate = this.$refs.fullCalendar.getApi().view.currentEnd.toISOString()
-
-      fetchCalendarRangesByUser(this.userId, startDate, endDate).then(calendarRanges => new Promise((resolve, reject) => {
-        let events = calendarRanges.results.map(i =>
-          ({
-            start: i.startDate.datetime,
-            end: i.endDate.datetime,
-            calendarRangeId: i.id,
-            toDelete: false
-          })
-        );
-        let calendarRangeEvents = {
-          events: events,
-          borderColor: "#3788d8",
-          backgroundColor: '#ffffff',
-          textColor: '#444444',
-        };
-        this.calendarEvents.userCalendarRange = calendarRangeEvents;
-
-        fetchCalendar(this.userId).then(calendar => new Promise((resolve, reject) => {
-          let events = calendar.results.map(i =>
-            ({
-              myCalendar: true,
-              calendarId: i.id,
-              start: i.startDate.datetime,
-              end: i.endDate.datetime,
-              user: i.user,
-              mainUser: i.mainUser,
-              persons: i.persons,
-              professionals: i.professionals,
-              comment: i.comment
-            })
-          );
-          let calendarEventsCurrentUser = {
-              events: events,
-              color: 'darkblue',
-              id: 1000,
-              editable: false
-          };
-          this.calendarEvents.userCalendar = calendarEventsCurrentUser;
-          this.updateEventsSource();
-          this.flag.loading = false;
-          resolve();
-        }));
-
-      resolve();
-      }));
-    },
-    updateEventsSource() {
-      this.calendarOptions.eventSources = [];
-      this.calendarOptions.eventSources.push(this.calendarEvents.new);
-      this.calendarOptions.eventSources.push(this.calendarEvents.userCalendarRange);
-      if (this.showMyCalendar) {
-          this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
-      }
-    },
     toggleMyCalendar(value) {
       this.showMyCalendar = value;
     },
@@ -324,20 +201,19 @@ export default {
       return newDate;
     },
     onDateSelect(payload) {
-      postCalendarRange({
-        user: {
-            type: 'user',
-            id: window.userId,
-        },
-        startDate: {
-            datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
-        },
-        endDate: {
-            datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
-        },
-      }).then((_r) => {
-        this.resetCalendar();
-      })
+      const newRange = {
+            user: {
+              type: 'user',
+              id: window.userId,
+            },
+            startDate: {
+                datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+            },
+            endDate: {
+                datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+            },
+      }
+      this.postRange(newRange);
     },
     onEventClick(payload) {
       if (payload.event.extendedProps.myCalendar) {
@@ -356,36 +232,22 @@ export default {
     },
     onClickDelete(payload) {
       if (payload.extendedProps.hasOwnProperty("calendarRangeId")) {
-        deleteCalendarRange(payload.extendedProps.calendarRangeId).then(() => {
-          this.resetCalendar();
-        })
+        this.deleteRange(payload.extendedProps.calendarRangeId)
       }
     },
     onEventDropOrResize(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());
+      const changedEvent = payload.event;
+      this.patchRange(changedEvent);
     },
-    // isSameDay(date1, date2) {
-    //   return date1.getFullYear() === date2.getFullYear() &&
-    //       date1.getMonth() === date2.getMonth() &&
-    //       date1.getDate() === date2.getDate();
-    // },
-    // isFriday(date) {
-    //   return date.getDay() === 5
-    // },
     copyDay() {
-      const dateToFetch = new Date(this.copyFrom).toISOString();
-      fetchCalendarRangesByUser(this.userId, dateToFetch)
-        .then((ranges) => {
-          ranges.results.forEach((range) => {
-            postCalendarRange({
+      const payload = {
+        userId: this.userId,
+        dateToCopy: new Date(this.copyFrom).toISOString()
+      }
+      this.fetchRanges(payload).then(
+        r => {
+          r.forEach((range) => {
+            this.postRange({
               user: {
                   type: 'user',
                   id: range.user.id,
@@ -397,55 +259,9 @@ export default {
                   datetime: this.replaceDate(range.endDate.datetime, this.copyTo),
               },
             })
-            .then((_r) => this.resetCalendar());
           })
-        })
-
-
-      // if (this.calendarEvents.new.events.length > 0) {
-      //   // Create the copied events
-      //   let increment = !this.calendarOptions.weekends && this.isFriday(this.lastNewDate) ? 24*60*60*1000*3 : 24*60*60*1000;
-      //   let events = this.calendarEvents.new.events.filter(
-      //     i => this.isSameDay(new Date(i.start), this.lastNewDate)).map(
-      //       i => {
-      //         let startDate = new Date(new Date(i.start).getTime() + increment);
-      //         let endDate = new Date(new Date(i.end).getTime() + increment);
-      //         return ({
-      //           start: startDate.toISOString(),
-      //           end: endDate.toISOString()
-      //         })
-      //       }
-      //   );
-      //   let copiedEvents = {
-      //     events: events,
-      //     color: "#3788d8"
-      //   };
-      //   // console.log(copiedEvents);
-
-      //   // Add to the calendar
-      //   let newEvents = this.calendarEvents.new.events;
-      //   newEvents.push(...copiedEvents.events);
-      //   this.calendarEvents.new = {
-      //     events: newEvents,
-      //     color: "#3788d8"
-      //   };
-      //   this.updateEventsSource();
-
-      //   // Set the last new date
-      //   this.lastNewDate = new Date(copiedEvents.events[copiedEvents.events.length - 1].start);
-
-      //   // Dispatch in store for saving
-      //   for (let i = 0; i < copiedEvents.events.length; i++) {
-      //     let eventObj = {
-      //       start: new Date(copiedEvents.events[i].start),
-      //       end: new Date(copiedEvents.events[i].end)
-      //     }
-      //     this.$store.dispatch('createRange', eventObj);
-      //   }
-
-      // } else {
-      //   console.log('no new events to copy-paste!')
-      // }
+        }
+      )
     },
     renderEventDate() {
       let start = this.myCalendarClickedEvent.start;
@@ -456,7 +272,11 @@ export default {
     }
   },
   mounted() {
-    this.init();
+    this.fetchRanges()
+
+    if (this.showMyCalendar) {
+      this.fetchAppointments(this.userId)
+    }
   }
 }
 </script>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
index c4fd7b4c4..046a09ef3 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js
@@ -1,109 +1,152 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
+// import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
 
 const debug = process.env.NODE_ENV !== 'production';
 
 const store = createStore({
    strict: debug,
    state: {
-      // newCalendarRanges: [],
-      // updateCalendarRanges: [],
-      // deleteCalendarRanges: [],
-      // currentCalendarRanges: [],
+      ranges: [],
+      appointments: [],
+      rangesToCopy: []
+   },
+   getters: {
+      rangeSource (state) {
+         return {
+            events: state.ranges,
+            borderColor: "#3788d8",
+            backgroundColor: '#ffffff',
+            textColor: '#444444',
+         }
+      },
+      appointmentSource (state) {
+         return {
+            events: state.appointments,
+            color: "darkblue",
+            id: 1000,
+            editable: false
+         }
+      }
    },
    mutations: {
-      // setCurrentCalendarRanges(state, payload) {
-      //    state.currentCalendarRanges = payload
-      // },
-      // updateRange(state, payload) {
-      //    state.updateCalendarRanges.push({
-      //       id: payload.event.extendedProps.calendarRangeId,
-      //       start: payload.event.start,
-      //       end: payload.event.end
-      //    });
-      // },
-      // addRange(state, payload) {
-      //    state.newCalendarRanges.push({
-      //       start: payload.start,
-      //       end: payload.end
-      //    });
-      // },
-      // deleteRange(state, payload) {
-      //    state.deleteCalendarRanges.push({
-      //       id: payload.extendedProps.calendarRangeId,
-      //       start: payload.start,
-      //       end: payload.end
-      //    });
-      // },
-      // clearNewCalendarRanges(state) {
-      //    state.newCalendarRanges = [];
-      // },
-      // clearUpdateCalendarRanges(state) {
-      //    state.updateCalendarRanges = [];
-      // },
-      // clearDeleteCalendarRanges(state) {
-      //    state.deleteCalendarRanges = [];
-      // },
-      // removeNewCalendarRanges(state, payload) {
-      //    let filteredCollection = state.newCalendarRanges.filter(
-      //       (e) => e.start.toString() !== payload.start.toString() && e.end.toString() !== payload.end.toString()
-      //    )
-      //    state.newCalendarRanges = filteredCollection;
-      // },
-      // removeFromDeleteRange(state, payload) {
-      //    let filteredCollection = state.deleteCalendarRanges.filter(
-      //       (e) => e.start.toString() !== payload.start.toString() && e.end.toString() !== payload.end.toString()
-      //    )
-      //    state.deleteCalendarRanges = filteredCollection;
-      // },
-      // addCalendarRange(state, payload) {
-      //    state.currentCalendarRanges.push(payload);
-      // }
+      setRanges(state, payload) {
+         state.ranges = payload;
+      },
+      setRangesToCopy(state, payload) {
+         state.rangesToCopy = payload
+      },
+      addRange(state, payload) {
+         state.ranges = [...state.ranges, payload];
+      },
+      removeRange(state, payload) {
+         const filteredCollection = state.ranges.filter(
+            (r) => r.calendarRangeId !== payload
+         )
+         state.ranges = filteredCollection;
+      },
+      setAppointments(state, payload) {
+         state.appointments = payload;
+      }
    },
    actions: {
-      // setCurrentCalendarRanges({ commit }) {
-      //    // console.log('userId', window.userId);
-      //    fetchCalendarRangesByUser(window.userId)
-      //       .then((ranges) => {
-      //          // 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);
-      // },
-      // updateRange({ commit }, payload) {
-      //    // console.log('### action updateRange', payload);
-      //    commit('updateRange', payload);
-      // },
-      // deleteRange({ commit }, payload) {
-      //    // console.log('### action deleteRange', payload);
-      //    commit('deleteRange', payload);
-      // },
-      // clearNewCalendarRanges({ commit }, payload) {
-      //    commit('clearNewCalendarRanges', payload);
-      // },
-      // clearUpdateCalendarRanges({ commit }, payload) {
-      //    commit('clearUpdateCalendarRanges', payload);
-      // },
-      // clearDeleteCalendarRanges({ commit }, payload) {
-      //    commit('clearDeleteCalendarRanges', payload);
-      // },
-      // removeNewCalendarRanges({ commit }, payload) {
-      //    commit('removeNewCalendarRanges', payload);
-      // },
-      // removeFromDeleteRange({ commit }, payload) {
-      //    commit('removeFromDeleteRange', payload);
-      // },
+      fetchRanges({commit}, payload = null) {
+         const url = payload ? `/api/1.0/calendar/calendar-range-available.json?user=${payload.userId}&start=${payload.dateToCopy}` :
+               `/api/1.0/calendar/calendar-range-available.json?user=${window.userId}`
+         return makeFetch('GET', url)
+            .then((response) => {
+               if (payload) {
+                  return response.results;
+                  // commit('setRangesToCopy', response.results);
+               } else {
+                  const ranges = response.results.map(range => (
+                     {
+                        start: range.startDate.datetime,
+                        end: range.endDate.datetime,
+                        calendarRangeId: range.id,
+                        toDelete: false
+                     }
+                  ));
+                  commit('setRanges', ranges)
+               }
+            })
+            .catch((error) => {
+               console.log(error);
+            })
+      },
+      postRange({commit}, payload) {
+         const url = `/api/1.0/calendar/calendar-range.json?`;
+         makeFetch('POST', url, payload)
+         .then((response) => {
+            const newRange =
+               {
+                  start: response.startDate.datetime,
+                  end: response.endDate.datetime,
+                  calendarRangeId: response.id,
+                  toDelete: false
+               }
+            commit('addRange', newRange)
+         })
+         .catch((error) => {
+            console.log(error);
+         })
+      },
+      deleteRange({commit}, payload) {
+         const url = `/api/1.0/calendar/calendar-range/${payload}.json`;
+         makeFetch('DELETE', url)
+         .then((response) => {
+            if (response == 200) {
+               commit('removeRange', payload);
+            }
+         })
+         .catch((error) => {
+            console.log(error);
+         })
+      },
+      patchRange({commit}, payload) {
+         const url = `/api/1.0/calendar/calendar-range/${payload.extendedProps.calendarRangeId}.json`;
+         const body = {
+            startDate: {
+                  datetime: `${payload.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+            },
+            endDate: {
+                  datetime: `${payload.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+            },
+         }
+         makeFetch('PATCH', url, body)
+         .then((response) => {
+            console.log('response', response);
+         })
+         .catch((error) => {
+            console.log(error);
+         })
+      },
+      fetchAppointments({commit}, payload) {
+         const url = `/api/1.0/calendar/calendar.json?main_user=${payload}&item_per_page=1000`
+         makeFetch('GET', url)
+         .then((response) => {
+            const appointments = response.results.map(a => (
+               {
+                  myCalendar: true,
+                  calendarId: a.id,
+                  start: a.startDate.datetime,
+                  end: a.endDate.datetime,
+                  user: a.user,
+                  mainUser: a.mainUser,
+                  persons: a.persons,
+                  professionals: a.professionals,
+                  comment: a.comment
+               })
+            );
+            commit('setAppointments', appointments)
+         })
+         .catch((error) => {
+            console.log(error);
+         })
+      },
    }
 });
 
-// store.dispatch('setCurrentCalendarRanges');
-
 
 export default store;