diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue index 48d07a74c..06dcec898 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue +++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue @@ -24,10 +24,13 @@ - +

{{ $t('copy_range_how_to')}}

+ @@ -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() { diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js index 2d7513327..8353a0a1f 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js +++ b/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." } } diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js index 319514fd1..63130e06f 100644 --- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store.js +++ b/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); + } } });