rdv: plages de disponibilites: copy the next day + refresh after save

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

@@ -24,10 +24,13 @@
       <input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
       <label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
     </div>
-    <button class="btn btn-action"
+    <div>
+    <button class="btn btn-action" 
       @click.prevent="copyDay">
       {{ $t('copy_range_to_next_day')}}
     </button>
+    <p>{{ $t('copy_range_how_to')}}</p>
+    </div>
   </div>
 </template>
 
@@ -38,7 +41,7 @@ import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
-import { fetchCalendar, fetchCalendarRangesByUser } from '../_api/api';
+import { deleteCalendarRange, fetchCalendar, fetchCalendarRangesByUser, patchCalendarRange, postCalendarRange } from '../_api/api';
 
 export default {
   name: "App",
@@ -77,7 +80,8 @@ export default {
           center: 'title',
           right: 'dayGridMonth,timeGridWeek,timeGridDay'
         },
-      }
+      },
+      
     }
   },
   computed: {
@@ -89,11 +93,19 @@ export default {
       get() {
         return this.showMyCalendar;
       }
-    }
-   },
+    },
+  },
   methods: {
     init() {
-      this.fetchData()
+      this.fetchData();
+    },
+    resetCalendar() {
+      this.fetchData();
+      this.calendarEvents.new = {
+        events: [],
+        color: "#3788d8"
+      };
+      this.updateEventsSource();
     },
     fetchData() {
       fetchCalendarRangesByUser(this.userId).then(calendarRanges => new Promise((resolve, reject) => {
@@ -157,6 +169,7 @@ export default {
         events: events,
         color: "#3788d8"
       };
+      this.lastNewDate = new Date(payload.startStr);
       this.updateEventsSource();
       this.$store.dispatch('createRange', payload);
     },
@@ -166,50 +179,107 @@ export default {
       payload.event.setProp('color', '#3788d8');
       this.$store.dispatch('updateRange', payload);
     },
-    onClickSave(payload) {
-      this.$store.dispatch('saveRanges', payload);
+    onClickSave(payload) { 
+      if (this.$store.state.newCalendarRanges.length > 0){
+        this.$store.state.newCalendarRanges.map(cr => {
+            postCalendarRange({
+              user: {
+                  type: 'user',
+                  id: window.userId,
+              },
+              startDate: {
+                  datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+              },
+              endDate: {
+                  datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+              },
+            }).then((_r) => this.resetCalendar());
+        });
+        this.$store.dispatch('clearNewCalendarRanges', payload);
+      }
+      if (this.$store.state.updateCalendarRanges.length > 0){
+        this.$store.state.updateCalendarRanges.map(cr => {
+            patchCalendarRange(cr.id,
+              {
+              startDate: {
+                  datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
+              },
+              endDate: {
+                  datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
+              },
+            }).then((_r) => this.resetCalendar());
+        })
+        this.$store.dispatch('clearUpdateCalendarRanges', payload);
+      }
+      if (this.$store.state.deleteCalendarRanges.length > 0){
+        this.$store.state.deleteCalendarRanges.map(cr => {
+            deleteCalendarRange(cr.id).then((_r) => this.resetCalendar());;
+        })
+        this.$store.dispatch('deleteUpdateCalendarRanges', payload);
+      }
+
     },
     onDelete(payload) {
       payload.setProp('color', '#dddddd');
       this.$store.dispatch('deleteRange', payload);
     },
-    copyDay(payload) {
-      console.log(payload);
-      // TODO get current day, or get current new events
+    isSameDay(date1, date2) {
+      return date1.getFullYear() === date2.getFullYear() &&
+          date1.getMonth() === date2.getMonth() &&
+          date1.getDate() === date2.getDate();
+    },
+    isFriday(date) {
+      return date.getDay() === 5
+    },
+    // disableCopyDayButton() { //TODO does not update!
+    //   return this.calendarEvents.new.events.length === 0
+    // },
+    copyDay(_payload) {
       console.log(this.calendarEvents.new);
-      if (this.calendarEvents.new.events) {
-        // TODO copy all events of the **LAST** day and create a array of events for the next day
-        // TODO if showWeekends, copy on the next day always, else, skip weekends
-        let events = this.calendarEvents.new.events.map(i => {
-          let startDate = new Date(new Date(i.start).getTime() + 24*60*60*1000);
-          let endDate = new Date(new Date(i.end).getTime() + 24*60*60*1000);
-          return ({
-            start: startDate.toISOString(),
-            end: endDate.toISOString()
-          })
-        }
-         
+      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)
-        //TODO in a loop : this.$store.dispatch('createRange', payload);
-        
+        console.log(copiedEvents);
+ 
+        // Add to the calendar
         let newEvents = this.calendarEvents.new.events;
         newEvents.push(...copiedEvents.events);
         this.calendarEvents.new = {
           events: newEvents,
           color: "#3788d8"
         };
-
-        console.log(this.calendarEvents.new.events)
         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!')
       }
-
     }
   },
   mounted() {

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

@@ -4,7 +4,8 @@ const appMessages = {
       show_my_calendar: "Afficher mon calendrier",
       show_weekends: "Afficher les week-ends",
       copy_range_to_next_day: "Copier les plages du jour au jour suivant",
-      copy_range_to_next_week: "Copier les plages de la semaine à la semaine suivante"
+      copy_range_to_next_week: "Copier les plages de la semaine à la semaine suivante",
+      copy_range_how_to: "Créez les plages de disponibilités durant une journée et copiez-les facilement au jour suivant avec ce bouton. Si les week-ends sont cachés, le jour suivant un vendredi sera le lundi."
    }
 }
 

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

@@ -55,48 +55,15 @@ const store = createStore({
          console.log('### action deleteRange', payload);
          commit('deleteRange', payload);
       },
-      saveRanges({ commit }, payload) {
-         console.log('### action saveRange', payload);
-         console.log(this.state)
-         if (this.state.newCalendarRanges.length > 0){
-            this.state.newCalendarRanges.map(cr => {
-               postCalendarRange({
-                  user: {
-                     type: 'user',
-                     id: window.userId,
-                  },
-                  startDate: {
-                     datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
-                  },
-                  endDate: {
-                     datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
-                  },
-               });
-            })
-            commit('clearNewCalendarRanges');
-         }
-         if (this.state.updateCalendarRanges.length > 0){
-            this.state.updateCalendarRanges.map(cr => {
-               patchCalendarRange(cr.id,
-                  {
-                  startDate: {
-                     datetime: `${cr.start.toISOString().split('.')[0]}+0000`, //should be like "2021-08-20T15:00:00+0200",
-                  },
-                  endDate: {
-                     datetime: `${cr.end.toISOString().split('.')[0]}+0000`, // TODO check if OK with time zone
-                  },
-               });
-            })
-            commit('clearUpdateCalendarRanges');
-         }
-         if (this.state.deleteCalendarRanges.length > 0){
-            this.state.deleteCalendarRanges.map(cr => {
-               deleteCalendarRange(cr.id);
-            })
-            commit('deleteUpdateCalendarRanges');
-         }
+      clearNewCalendarRanges({ commit }, payload) {
+         commit('clearNewCalendarRanges', payload);
       },
-
+      clearUpdateCalendarRanges({ commit }, payload) {
+         commit('clearUpdateCalendarRanges', payload);
+      },
+      deleteUpdateCalendarRanges({ commit }, payload) {
+         commit('deleteUpdateCalendarRanges', payload);
+      }
   }
 });