change ranges to 15min instead of 30 + save new range immediately

This commit is contained in:
Julie Lenaerts 2022-05-06 15:54:35 +02:00
parent 901b496030
commit f3444b6a58

View File

@ -114,7 +114,7 @@
</template> </template>
</modal> </modal>
</teleport> </teleport>
</template> </template>
<script> <script>
@ -148,12 +148,12 @@ export default {
showMyCalendar: true, showMyCalendar: true,
myCalendarClickedEvent: null, myCalendarClickedEvent: null,
calendarEvents: { calendarEvents: {
userCalendar: null, userCalendar: null,
userCalendarRange: null, userCalendarRange: null,
new: { new: {
events: [], events: [],
color: "#3788d8" color: "#3788d8"
} }
}, },
lastNewDate: null, lastNewDate: null,
disableCopyDayButton: true, disableCopyDayButton: true,
@ -172,13 +172,16 @@ export default {
selectMirror: false, selectMirror: false,
editable: true, editable: true,
weekends: false, weekends: false,
slotDuration: '00:15:00',
slotMinutes: 15,
slotMinTime: "08:00:00",
slotMaxTime: "18:00:00",
headerToolbar: { headerToolbar: {
left: 'prev,next today', left: 'prev,next today',
center: 'title', center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay' right: 'dayGridMonth,timeGridWeek,timeGridDay'
}, },
}, },
} }
}, },
computed: { computed: {
@ -277,7 +280,7 @@ export default {
if (this.showMyCalendar) { if (this.showMyCalendar) {
this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar); this.calendarOptions.eventSources.push(this.calendarEvents.userCalendar);
} }
console.log(this.calendarOptions.eventSources); // console.log(this.calendarOptions.eventSources);
}, },
toggleMyCalendar(value) { toggleMyCalendar(value) {
this.showMyCalendar = value; this.showMyCalendar = value;
@ -286,6 +289,7 @@ export default {
this.calendarOptions.weekends = !this.calendarOptions.weekends; this.calendarOptions.weekends = !this.calendarOptions.weekends;
}, },
onDateSelect(payload) { onDateSelect(payload) {
// console.log('payload', payload);
let events = this.calendarEvents.new.events; let events = this.calendarEvents.new.events;
events.push({ events.push({
start: payload.startStr, start: payload.startStr,
@ -294,13 +298,25 @@ export default {
this.calendarEvents.new = { this.calendarEvents.new = {
events: events, events: events,
borderColor: "#3788d8", borderColor: "#3788d8",
backgroundColor: '#fffadf ', backgroundColor: '#fffadf',
textColor: '#444444', textColor: '#444444',
}; };
this.disableCopyDayButton = false; this.disableCopyDayButton = false;
this.lastNewDate = new Date(payload.startStr); this.lastNewDate = new Date(payload.startStr);
this.updateEventsSource(); this.updateEventsSource();
this.$store.dispatch('createRange', payload); this.$store.dispatch('createRange', 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
},
})
}, },
onEventChange(payload) { onEventChange(payload) {
}, },
@ -322,7 +338,7 @@ export default {
professionals: payload.event.extendedProps.professionals, professionals: payload.event.extendedProps.professionals,
comment: payload.event.extendedProps.comment comment: payload.event.extendedProps.comment
}; };
console.log(this.myCalendarClickedEvent) // console.log(this.myCalendarClickedEvent)
this.openModal(); this.openModal();
} }
}, },
@ -407,7 +423,7 @@ export default {
return date.getDay() === 5 return date.getDay() === 5
}, },
copyDay(_payload) { copyDay(_payload) {
console.log(this.calendarEvents.new); // console.log(this.calendarEvents.new);
if (this.calendarEvents.new.events.length > 0) { if (this.calendarEvents.new.events.length > 0) {
// Create the copied events // Create the copied events
let increment = !this.calendarOptions.weekends && this.isFriday(this.lastNewDate) ? 24*60*60*1000*3 : 24*60*60*1000; let increment = !this.calendarOptions.weekends && this.isFriday(this.lastNewDate) ? 24*60*60*1000*3 : 24*60*60*1000;
@ -426,7 +442,7 @@ export default {
events: events, events: events,
color: "#3788d8" color: "#3788d8"
}; };
console.log(copiedEvents); // console.log(copiedEvents);
// Add to the calendar // Add to the calendar
let newEvents = this.calendarEvents.new.events; let newEvents = this.calendarEvents.new.events;