mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
rdv: plages de disponibilites: copy the next day + refresh after save
This commit is contained in:
nobohan
parent
e1ccc8aba5
commit
6bfc180951
@ -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() {
|
||||
|
||||
@ -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."
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user