From 4c3b66b2b5101a5b7a1ed301253e9f1252bf6468 Mon Sep 17 00:00:00 2001
From: sianida26 <chesakeselekkebo@gmail.com>
Date: Tue, 25 Jun 2024 02:52:40 +0700
Subject: [PATCH] Added render cell on timeline

---
 .../src/components/Timetable/DayColumn.tsx    | 137 +++++++++++-------
 .../src/components/Timetable/Timetable.tsx    |  10 +-
 2 files changed, 90 insertions(+), 57 deletions(-)

diff --git a/apps/frontend/src/components/Timetable/DayColumn.tsx b/apps/frontend/src/components/Timetable/DayColumn.tsx
index f6e2d28..5108584 100644
--- a/apps/frontend/src/components/Timetable/DayColumn.tsx
+++ b/apps/frontend/src/components/Timetable/DayColumn.tsx
@@ -11,9 +11,16 @@ type Props = {
 	startTime: dayjs.Dayjs;
 	endTime: dayjs.Dayjs;
 	events: Event[];
+	renderCell?: (events: Event[]) => JSX.Element;
 };
 
-export default function DayColumn({ day, startTime, endTime, events }: Props) {
+export default function DayColumn({
+	day,
+	startTime,
+	endTime,
+	events,
+	renderCell,
+}: Props) {
 	const isToday = day.isSame(dayjs(), "day");
 
 	return (
@@ -32,62 +39,84 @@ export default function DayColumn({ day, startTime, endTime, events }: Props) {
 				const currentDateTime = day.hour(startTime.hour() + i);
 
 				return (
-					<button
-						key={i}
-						className="border-t h-20 hover:bg-gray-100 flex pr-1.5 gap-1 relative"
-					>
-						{/* <div className="absolute top-1 right-1 text-sm text-gray-500 rounded-full size-6 bg-gray-100 flex items-center justify-center">
-							5
-						</div> */}
-						{events
-							.filter((event) => {
-								// return event.start.isSame(
-								// 	startTime.add(i, "h"),
-								// 	"hour"
-								// );
+					// Base Cell
+					<div key={i} className="border-t h-20">
+						{renderCell ? (
+							<div className="w-full h-full relative">
+								{renderCell(
+									events.filter((event) => {
+										// return event.start.isSame(
+										// 	startTime.add(i, "h"),
+										// 	"hour"
+										// );
 
-								return (
-									currentDateTime.isSame(
-										event.start,
-										"hour"
-									) ||
-									(currentDateTime.isAfter(event.start) &&
-										currentDateTime.isBefore(event.end))
-								);
-							})
-							.map((event, i) =>
-								currentDateTime.isSame(event.start, "hour") ? (
-									<div
-										key={i}
-										className="bg-primary-100 rounded-sm text-sm text-left pl-1 text-primary-800 font-medium w-full z-10 relative"
-										style={{
-											minHeight: "min-content",
+										return (
+											currentDateTime.isSame(
+												event.start,
+												"hour"
+											) ||
+											(currentDateTime.isAfter(
+												event.start
+											) &&
+												currentDateTime.isBefore(
+													event.end
+												))
+										);
+									})
+								)}
+							</div>
+						) : (
+							<div className="flex pr-1.5 w-full gap-1 relative hover:bg-gray-100 h-full">
+								{events
+									.filter((event) => {
+										return (
+											currentDateTime.isSame(
+												event.start,
+												"hour"
+											) ||
+											(currentDateTime.isAfter(
+												event.start
+											) &&
+												currentDateTime.isBefore(
+													event.end
+												))
+										);
+									})
+									.map((event, i) =>
+										currentDateTime.isSame(
+											event.start,
+											"hour"
+										) ? (
+											<div
+												key={i}
+												className="bg-primary-100 rounded-sm text-sm text-left pl-1 text-primary-800 font-medium w-full z-10 relative"
+												style={{
+													minHeight: "min-content",
 
-											// The height is calculated from the duration of the event in minutes, converted to a percentage of an hour,
-											// plus an additional number of pixels equivalent to the number of hours in the event duration
-											height: `calc(${
-												(event.end.diff(
-													event.start,
-													"minute"
-												) *
-													100) /
-												60
-											}% + ${event.end.diff(event.start, "hour")}px)`,
+													// The height is calculated from the duration of the event in minutes, converted to a percentage of an hour,
+													// plus an additional number of pixels equivalent to the number of hours in the event duration
+													height: `calc(${
+														(event.end.diff(
+															event.start,
+															"minute"
+														) *
+															100) /
+														60
+													}% + ${event.end.diff(event.start, "hour")}px)`,
 
-											// The top position is calculated from the start minute of the event, converted to a percentage of an hour
-											top: `${(event.start.minute() * 100) / 60}%`,
-										}}
-									>
-										{event.title}
-									</div>
-								) : (
-									<div className="w-full"></div>
-								)
-							)}
-						{/* {Math.random() < 0.1 && (
-							<div className="bg-purple-200/80 rounded-md w-full h-full"></div>
-						)} */}
-					</button>
+													// The top position is calculated from the start minute of the event, converted to a percentage of an hour
+													top: `${(event.start.minute() * 100) / 60}%`,
+												}}
+											>
+												{event.title}
+											</div>
+										) : (
+											<div className="w-full"></div>
+										)
+									)}
+							</div>
+						)}
+					</div>
 				);
 			})}
 		</div>
diff --git a/apps/frontend/src/components/Timetable/Timetable.tsx b/apps/frontend/src/components/Timetable/Timetable.tsx
index 7e563e4..80388f7 100644
--- a/apps/frontend/src/components/Timetable/Timetable.tsx
+++ b/apps/frontend/src/components/Timetable/Timetable.tsx
@@ -13,14 +13,17 @@ dayjs.extend(isoWeek);
 dayjs.extend(customParseFormat);
 
 type Props = {
+	startTime?: dayjs.Dayjs;
+	endTime?: dayjs.Dayjs;
 	events: Event[];
+	renderCell?: (events: Event[]) => JSX.Element;
 };
 
-export default function Timetable({ events }: Props) {
+export default function Timetable({ events, ...props }: Props) {
 	const [currentDate, setCurrentDate] = useState(dayjs());
 
-	const startTime = dayjs("08:00", "HH:mm");
-	const endTime = dayjs("18:00", "HH:mm");
+	const startTime = props.startTime ?? dayjs("08:00", "HH:mm");
+	const endTime = props.endTime ?? dayjs("18:00", "HH:mm");
 
 	const weekDays = useMemo(() => {
 		const startOfWeek = currentDate.startOf("isoWeek");
@@ -90,6 +93,7 @@ export default function Timetable({ events }: Props) {
 						events={eventPerDay[i]}
 						startTime={startTime}
 						endTime={endTime}
+						renderCell={props.renderCell}
 					/>
 				))}
 			</div>