Merge pull request #80 from linked-planet/dev

timeTableUtil - fixed start and end slot detection

Author: marcus-wishes

library/src/components/timetable/timeTableUtils.ts

@@ -561,7 +561,7 @@ export function getStartAndEndSlot(
 		}
 	}
 	if (startSlot === -1) {
-		startSlot = 0
+		startSlot = slotsArray.length - 1
 	}
 
 	let endSlot = slotsArray.findIndex((slot) => slot.isAfter(item.endDate))

package-lock.json

@@ -117,13 +117,13 @@
 		"@atlaskit/code": "^15.6.6",
 		"@atlaskit/css-reset": "^6.11.2",
 		"@atlaskit/lozenge": "^11.12.2",
-		"@atlaskit/pagination": "^14.9.5",
+		"@atlaskit/pagination": "^14.10.0",
 		"@atlaskit/side-navigation": "^3.6.3",
 		"@atlaskit/table-tree": "^10.0.6",
 		"@atlaskit/tag": "^12.6.6",
 		"@atlaskit/tag-group": "^10.6.1",
 		"@atlaskit/textarea": "^5.6.4",
-		"@atlaskit/textfield": "^6.5.5",
+		"@atlaskit/textfield": "^6.6.0",
 		"@atlaskit/theme": "^14.0.1",
 		"@babel/generator": "^7.26.2",
 		"@babel/parser": "^7.26.2",
@@ -159,7 +159,7 @@
 		"tailwindcss": "^3.4.15",
 		"typescript": "^5.7.2",
 		"typescript-plugin-css-modules": "^5.1.0",
-		"vite": "^6.0.0",
+		"vite": "^6.0.1",
 		"vite-plugin-dts": "^4.3.0",
 		"vitest": "^2.1.6"
 	},

package.json

@@ -9717,7 +9717,7 @@ export default function UtilsShowCase(props: ShowcaseProps) {
 	)
 }
 
-import React, { useState } from "react"
+import { useState } from "react"
 import { AppLayout, Checkbox, PageLayout } from "@linked-planet/ui-kit-ts"
 
 import "@atlaskit/css-reset" // sets base styles of AK
@@ -9735,7 +9735,7 @@ export default function AppLayoutExample() {
 	const [mainFixedHeight, setMainFixedHeight] = useState(true)
 
 	return (
-		<AppLayout.Container>
+		<AppLayout.Container useBanner>
 			<AppLayout.Banner
 				sticky={bannerSticky}
 				className="flex justify-between gap-4 border-2 border-solid px-4 py-2"

showcase/public/showcase-sources.txt

@@ -44,7 +44,7 @@ const exampleEntries: TimeTableTypes.TimeTableEntry<
 		},
 		items: [],
 	},
-	{
+	/*{
 		group: {
 			id: "group-1",
 			title: "Group 1",
@@ -343,7 +343,7 @@ const exampleEntries: TimeTableTypes.TimeTableEntry<
 				title: "Item 7-1",
 			},
 		],
-	},
+	},*/
 ]
 
 function createTestItems(
@@ -419,8 +419,8 @@ function createMoreTestGroups(
 	return newGroups
 }
 
-const startDateInitial = dayjs().startOf("day").add(-1, "day").add(8, "hours")
-const endDateInitial = dayjs().startOf("day").add(5, "days").add(23, "hours")
+const startDateInitial = dayjs().startOf("day").add(-1, "day")
+const endDateInitial = dayjs().startOf("day").add(6, "days")
 
 function TestCustomHeaderRowTimeSlot<
 	G extends TimeTableTypes.TimeTableGroup,
@@ -435,10 +435,13 @@ function TestCustomHeaderRowTimeSlot<
 	entries,
 	tableCellRef,
 }: TimeTableTypes.CustomHeaderRowTimeSlotProps<G, I>) {
-	const groupItems = entries[1].items
+	const groupItems = entries[0].items
+	if (!groupItems.length) {
+		return null
+	}
 
 	const groupItemsOfCell: I[] = []
-	const startAndEndInSlow: {
+	const startAndEndInSlot: {
 		status: "in" | "before" | "after"
 		startSlot: number
 		endSlot: number
@@ -454,12 +457,15 @@ function TestCustomHeaderRowTimeSlot<
 		)
 		if (slotsArray[startAndEnd.startSlot] === timeSlot) {
 			groupItemsOfCell.push(item)
-			startAndEndInSlow.push(startAndEnd)
+			startAndEndInSlot.push(startAndEnd)
 		}
 	}
+	if (!groupItemsOfCell.length) {
+		return null
+	}
 
 	const leftAndWidths = groupItemsOfCell.map((it, i) => {
-		const startAndEnd = startAndEndInSlow[i]
+		const startAndEnd = startAndEndInSlot[i]
 		if (startAndEnd.status === "before" || startAndEnd.status === "after") {
 			return null
 		}
@@ -474,6 +480,10 @@ function TestCustomHeaderRowTimeSlot<
 		)
 	})
 
+	if (entries[0].items.length) {
+		console.log("LEFT", entries[0].items, leftAndWidths, startAndEndInSlot)
+	}
+
 	const cellWidth = tableCellRef.current?.offsetWidth ?? 70
 
 	const ret = leftAndWidths.map((it, i) =>
@@ -506,7 +516,7 @@ function CustomHeaderRowHeader<
 }: TimeTableTypes.CustomHeaderRowHeaderProps<G, I>) {
 	return (
 		<div className="bg-surface-pressed">
-			{entries[1].group.title} has {entries.length} entries
+			{entries[0].group.title} has {entries.length} entries
 		</div>
 	)
 }
@@ -647,6 +657,7 @@ function Example() {
 	)
 
 	useEffect(() => {
+		/*requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
@@ -658,8 +669,7 @@ function Example() {
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()
-		requestMoreEntriesCB()
-		requestMoreEntriesCB()
+		requestMoreEntriesCB()*/
 		/*requestMoreEntriesCB()
 		requestMoreEntriesCB()
 		requestMoreEntriesCB()