Merge pull request #103 from linked-planet/dev

time table - fixed start slot detection

Author: marcus-wishes

library/src/components/timetable/timeTableUtils.test.ts

@@ -942,3 +942,100 @@ describe("bugfix test for left and width calculation", () => {
 		expect(leftAndWidth.width).toBe(1)
 	})
 })
+
+describe("bugfix test for left and width calculation when item starts after end of day time", () => {
+	it("should calculate left and width correctly for weeks view", () => {
+		const item: TimeSlotBooking = {
+			key: "1",
+			title: "Test",
+			startDate: dayjs()
+				.startOf("week")
+				.add(1, "days")
+				.subtract(1, "minute"),
+			endDate: dayjs().startOf("week").add(2, "days"),
+		}
+
+		const timeSteps = 60
+
+		const props = calculateTimeSlotPropertiesForView(
+			dayjs().startOf("week").add(6, "hours"),
+			dayjs().startOf("week").add(1, "week").add(22, "hours"),
+			timeSteps,
+			"days",
+			false,
+		)
+
+		// get slots
+		const result = getStartAndEndSlot(
+			item,
+			props.slotsArray,
+			props.timeFrameDay,
+			props.viewType,
+		)
+
+		expect(result.status).toBe("in")
+		expect(result.startSlot).toBe(1) // should be 1 because past 22:00 when the time frame of day ends
+		expect(result.endSlot).toBe(2)
+
+		// calculate left and width
+		const leftAndWidth = getLeftAndWidth(
+			item,
+			result.startSlot,
+			result.endSlot,
+			props.slotsArray,
+			props.timeFrameDay,
+			props.viewType,
+			timeSteps,
+		)
+
+		expect(leftAndWidth.left).toBe(0)
+		expect(leftAndWidth.width).toBe(1)
+	})
+})
+
+describe("bugfix test for left and width calculation when item starts before start of day time", () => {
+	it("should calculate left and width correctly for weeks view", () => {
+		const item: TimeSlotBooking = {
+			key: "1",
+			title: "Test",
+			startDate: dayjs().startOf("week").add(1, "days").add(1, "hour"),
+			endDate: dayjs().startOf("week").add(2, "days"),
+		}
+
+		const timeSteps = 60
+
+		const props = calculateTimeSlotPropertiesForView(
+			dayjs().startOf("week").add(6, "hours"),
+			dayjs().startOf("week").add(1, "week").add(22, "hours"),
+			timeSteps,
+			"days",
+			false,
+		)
+
+		// get slots
+		const result = getStartAndEndSlot(
+			item,
+			props.slotsArray,
+			props.timeFrameDay,
+			props.viewType,
+		)
+
+		expect(result.status).toBe("in")
+		expect(result.startSlot).toBe(1) // should be 1 because past 22:00 when the time frame of day ends
+		expect(result.endSlot).toBe(2)
+
+		// calculate left and width
+		const leftAndWidth = getLeftAndWidth(
+			item,
+			result.startSlot,
+			result.endSlot,
+			props.slotsArray,
+			props.timeFrameDay,
+			props.viewType,
+			timeSteps,
+		)
+
+		expect(leftAndWidth.left).toBe(0)
+		expect(leftAndWidth.width).toBe(1)
+	})
+})

library/src/components/timetable/timeTableUtils.ts

@@ -577,13 +577,23 @@ export function getStartAndEndSlot(
 	if (startSlot > 0) {
 		// if the item starts in the middle of a slot, we need to go back one slot to get the start slot
 		// but only if the time slot before is on the same day, else it means that the booking starts before the time frame range of the day
-		startSlot--
 		if (viewType === "hours") {
 			// if the previous timeslot is on a different day, we know item starts before the first time slot of a day
 			if (
-				slotsArray[startSlot].day() !== slotsArray[startSlot + 1].day()
+				slotsArray[startSlot - 1].day() === slotsArray[startSlot].day()
 			) {
-				startSlot++
+				startSlot--
+			}
+		} else {
+			let startSlotEnd = slotsArray[startSlot - 1]
+				.startOf(viewType)
+				.add(timeFrameDay.endHour, "hours")
+				.add(timeFrameDay.endMinute, "minutes")
+			if (timeFrameDay.endHour === 0 && timeFrameDay.endMinute === 0) {
+				startSlotEnd = startSlotEnd.add(1, viewType)
+			}
+			if (item.startDate.isBefore(startSlotEnd)) {
+				startSlot--
 			}
 		}
 	}

showcase/public/showcase-sources.txt

@@ -7893,7 +7893,7 @@ const exampleEntries: TimeTableTypes.TimeTableEntry<
 			},
 		],
 	},
-	/*{
+	{
 		group: {
 			id: "group-1",
 			title: "Group 1",
@@ -8222,7 +8222,7 @@ const exampleEntries: TimeTableTypes.TimeTableEntry<
 				title: "Item 7-1",
 			},
 		],
-	},*/
+	},
 ]
 
 function createTestItems(