continuel event modal

apps/hub/app/(app)/events/_components/modalBtn.tsx

@@ -9,11 +9,13 @@ import { Event, EventAppointment, Participant, User } from "@repo/db";
 import { cn } from "../../../../helper/cn";
 import { addParticipant, inscribeToMoodleCourse } from "../actions";
 import { useSession } from "next-auth/react";
+import { Cross } from "lucide-react";
 
 interface ModalBtnProps {
 	title: string;
 	event: Event;
 	dates: EventAppointment[];
+	selectedAppointments: EventAppointment[];
 	participant?: Participant;
 	user: User;
 	modalId: string;
@@ -24,6 +26,7 @@ const ModalBtn = ({
 	dates,
 	modalId,
 	participant,
+	selectedAppointments,
 	event,
 	user,
 }: ModalBtnProps) => {
@@ -43,6 +46,11 @@ const ModalBtn = ({
 		};
 	}, [modalId]);
 
+	const canSelectDate =
+		event.hasPresenceEvents &&
+		!participant?.attended &&
+		(selectedAppointments.length === 0 || participant?.appointmentCancelled);
+
 	const openModal = () => {
 		const modal = document.getElementById(modalId) as HTMLDialogElement;
 		document.body.classList.add("modal-open");
@@ -71,35 +79,47 @@ const ModalBtn = ({
 					<h3 className="font-bold text-lg">{title}</h3>
 					{event.hasPresenceEvents && (
 						<div>
-							<div className="flex items-center gap-2 justify-center">
-								<CalendarIcon />
-								<select className="select w-full max-w-xs" defaultValue={0}>
-									<option disabled>Bitte wähle einen Termin aus</option>
-									{dates.map((date, index) => (
-										<option key={index}>
-											{date.appointmentDate.toLocaleString()}
-										</option>
-									))}
-								</select>
-							</div>
-							<p className="mt-3 text-center">
-								Bitte finde dich an diesem Termin in unserem Discord ein.
-							</p>
+							{canSelectDate && (
+								<div className="flex items-center gap-2 justify-center">
+									<CalendarIcon />
+									{!!dates.length && (
+										<select className="select w-full max-w-xs" defaultValue={0}>
+											<option disabled>Bitte wähle einen Termin aus</option>
+											{dates.map((date, index) => (
+												<option key={index}>
+													{date.appointmentDate.toLocaleString()}
+												</option>
+											))}
+										</select>
+									)}
+									{!dates.length && (
+										<p className="text-center text-info">
+											Keine Termine verfügbar
+										</p>
+									)}
+								</div>
+							)}
+							{!!dates.length && (
+								<p className="mt-3 text-center">
+									Bitte finde dich an diesem Termin in unserem Discord ein.
+								</p>
+							)}
 						</div>
 					)}
 					{event.finisherMoodleCourseId && (
 						<MoodleCourseIndicator
+							participant={participant}
 							user={user}
 							moodleCourseId={event.finisherMoodleCourseId}
 							completed={participant?.finisherMoodleCurseCompleted}
-							eventId={event.id}
+							event={event}
 						/>
 					)}
 					<div className="modal-action flex justify-between">
 						<button className="btn" onClick={closeModal}>
 							Abbrechen
 						</button>
-						{event.hasPresenceEvents && (
+						{!!(event.hasPresenceEvents && dates.length) && (
 							<button className="btn btn-info btn-outline btn-wide">
 								<EnterIcon /> Anmelden
 							</button>
@@ -119,13 +139,15 @@ export default ModalBtn;
 const MoodleCourseIndicator = ({
 	completed,
 	moodleCourseId,
-	eventId,
+	event,
+	participant,
 	user,
 }: {
+	user: User;
+	participant?: Participant;
 	completed?: boolean;
 	moodleCourseId: string;
-	eventId: number;
-	user: User;
+	event: Event;
 }) => {
 	const courseUrl = `${process.env.NEXT_PUBLIC_MOODLE_URL}/course/view.php?id=${moodleCourseId}`;
 	if (completed)
@@ -135,13 +157,20 @@ const MoodleCourseIndicator = ({
 				Moodle Kurs abgeschlossen
 			</p>
 		);
+	if (!participant || (event.hasPresenceEvents && !participant?.attended))
+		return (
+			<p className="py-4 flex items-center gap-2 justify-center">
+				<Cross className="text-error" />
+				Teilnahme an Event erforderlich
+			</p>
+		);
 	return (
 		<p className="py-4 flex items-center gap-2 justify-center">
 			Moodle-Kurs Benötigt
 			<button
 				className="btn btn-xs btn-info ml-2"
 				onClick={async () => {
-					await addParticipant(eventId, user.id);
+					await addParticipant(event.id, user.id);
 
 					if (user.moodleId) {
 						await inscribeToMoodleCourse(moodleCourseId, user.moodleId);