From e30cef65446170b323b7f07dd404321801eab7e3 Mon Sep 17 00:00:00 2001
From: Andreas <mail@devmount.de>
Date: Fri, 31 May 2024 16:46:23 +0200
Subject: [PATCH] Fix schedule event previews (#441)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔨 Properly calculate all visible preview time slots

* 🔨 Don't clear calendar events on saving schedule
---
 frontend/src/components/ScheduleCreation.vue | 14 ++++++++------
 frontend/src/views/ScheduleView.vue          |  3 ++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
index 7a3aa0311..1d01309ea 100644
--- a/frontend/src/components/ScheduleCreation.vue
+++ b/frontend/src/components/ScheduleCreation.vue
@@ -479,13 +479,15 @@ const scheduledRangeMinutes = computed(() => {
   return end.diff(start, 'minutes');
 });
 
-// generate time slots from current schedule configuration
-const getSlots = () => {
+// generate time slots from current schedule configuration for the displayed month
+const getSlotPreviews = () => {
   const slots = [];
+  // Add 1 week to the end of month here to display slots in displayed next month days too
   const end = scheduleInput.value.end_date
-    ? dj.min(dj(scheduleInput.value.end_date), dj(props.activeDate).endOf('month'))
-    : dj(props.activeDate).endOf('month');
-  let pointerDate = dj.max(dj(scheduleInput.value.start_date), dj(props.activeDate).startOf('month'));
+    ? dj.min(dj(scheduleInput.value.end_date), dj(props.activeDate).endOf('month').add(1, 'week'))
+    : dj(props.activeDate).endOf('month').add(1, 'week');
+  // Substract one week from the start to display slots in displayed previous month days too
+  let pointerDate = dj.max(dj(scheduleInput.value.start_date), dj(props.activeDate).startOf('month').subtract(1, 'week'));
   while (pointerDate <= end) {
     if (scheduleInput.value.weekdays?.includes(pointerDate.isoWeekday())) {
       slots.push({
@@ -508,7 +510,7 @@ const getScheduleAppointment = () => ({
   location_url: scheduleInput.value.location_url,
   details: scheduleInput.value.details,
   status: 2,
-  slots: getSlots(),
+  slots: getSlotPreviews(),
   type: 'schedule',
 });
 
diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue
index 335d021ce..28c7f5ae2 100644
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -87,7 +87,6 @@ const schedules = ref([]);
 const firstSchedule = computed(() => (schedules.value?.length > 0 ? schedules.value[0] : null));
 const schedulesReady = ref(false);
 const getFirstSchedule = async () => {
-  calendarEvents.value = [];
   // trailing slash to prevent fast api redirect which doesn't work great on our container setup
   const { data } = await call('schedule/').get().json();
   schedules.value = data.value;
@@ -107,6 +106,8 @@ const onDateChange = (dateObj) => {
   const start = dj(dateObj.start);
   const end = dj(dateObj.end);
 
+  activeDate.value = start.add(end.diff(start, 'minutes')/2, 'minutes');
+
   // remote data is retrieved per month, so a data request happens as soon as the user navigates to a different month
   if (
     dj(activeDateRange.value.end).format('YYYYMM') !== dj(end).format('YYYYMM')