Fix overlapping hold events and auto confirm setting (#1338)

* 🔨 Fix the auto-confirm settings to align with db

* 🔨 Prevent overlapping events in the week calendar

Author: devmount

frontend/src/views/AvailabilityView/components/AvailabilitySettings/index.vue

@@ -30,10 +30,12 @@ const isBookable = computed({
   }
 })
 
-const requiresBookingConfirmation = computed({
-  get: () => currentState.value.booking_confirmation,
+// The database stores a boolean, if booking requests should have manual confirmation. However, since we offer 
+// an "automatic confirmation" toggle in the UI, we need to negate the value from the database here.
+const autoConfirmBookings = computed({
+  get: () => !currentState.value.booking_confirmation,
   set: (value) => {
-    availabilityStore.$patch({ currentState: { booking_confirmation: value } })
+    availabilityStore.$patch({ currentState: { booking_confirmation: !value } })
   }
 })
 
@@ -116,10 +118,10 @@ export default {
 
       <!-- Automatically confirm booking checkbox -->
       <checkbox-input
-        :name="t('label.automaticallyConfirmBookingsIfTimeIsAvailable')"
+        name="availability-automatically-confirm"
         :label="t('label.automaticallyConfirmBookingsIfTimeIsAvailable')"
         data-testid="availability-automatically-confirm-checkbox"
-        v-model="requiresBookingConfirmation"
+        v-model="autoConfirmBookings"
         :disabled="!currentState.active"
       />
     </div>
@@ -275,4 +277,4 @@ h3 {
     gap: 1.5rem;
   }
 }
-</style>
+</style>

frontend/src/views/DashboardView/components/WeekCalendar.vue

@@ -251,32 +251,6 @@ const timeSlotsForGrid = computed(() => {
   return slots;
 });
 
-/**
- * Generates an array of remote events that fall within the active week with grid positioning info
- * Note we are still fetching monthly events to reduce the roundtrips
- */
-const filteredRemoteEventsForGrid = computed(() => {
-  const slots = timeSlotsForGrid.value;
-  if (!slots.length) return [];
-
-  const { start, end } = props.activeDateRange;
-  const remoteEventsWithinActiveWeek = props.events.filter((remoteEvent) => dj(remoteEvent.start).isBetween(start, end))
-
-  return remoteEventsWithinActiveWeek.map(remoteEvent => {
-    const eventStart = dj(remoteEvent.start);
-    const eventEnd = dj(remoteEvent.end);
-
-    const gridPosition = calculateEventGridPosition(eventStart, eventEnd, slots);
-
-    if (gridPosition) {
-      return {
-        ...remoteEvent,
-        ...gridPosition,
-      };
-    }
-  }).filter(Boolean)
-});
-
 /**
  * Generates an array of pending appointments that fall within the active week with grid positioning info
  */
@@ -312,6 +286,37 @@ const filteredPendingAppointmentsForGrid = computed(() => {
   }).filter(Boolean)
 });
 
+/**
+ * Generates an array of remote events that fall within the active week with grid positioning info
+ * Note we are still fetching monthly events to reduce the roundtrips
+ */
+const filteredRemoteEventsForGrid = computed(() => {
+  const slots = timeSlotsForGrid.value;
+  if (!slots.length) return [];
+
+  const { start, end } = props.activeDateRange;
+  const remoteEventsWithinActiveWeek = props.events.filter((remoteEvent) => dj(remoteEvent.start).isBetween(start, end))
+
+  return remoteEventsWithinActiveWeek.map(remoteEvent => {
+    const eventStart = dj(remoteEvent.start);
+    const eventEnd = dj(remoteEvent.end);
+
+    const gridPosition = calculateEventGridPosition(eventStart, eventEnd, slots);
+    const hasPendingPlaceholder = filteredPendingAppointmentsForGrid.value.find(
+      (a) => a.title === remoteEvent.title && eventStart.isSame(a.start)
+    );
+
+    // Only show remote event, if we have a valid grid position and if we don't already have calculated
+    // a placeholder for a pending (HOLD) event
+    if (gridPosition && !hasPendingPlaceholder) {
+      return {
+        ...remoteEvent,
+        ...gridPosition,
+      };
+    }
+  }).filter(Boolean);
+});
+
 /**
  * Generates an array of selectable time slots that fall within the active week with grid positioning info
  */