🔨 Properly calculate all visible preview time slots

thunderbird · May 31, 2024 · ac4b47d · ac4b47d
1 parent 5991e5b
commit ac4b47d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -107,6 +107,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')