continuel event modal

apps/hub/app/(app)/_components/Header.tsx

@@ -8,7 +8,6 @@ interface HeaderProps {
 
 export const Header = ({ isChecked, handleCheckboxChange }: HeaderProps) => {
 	const session = useSession();
-  console.log(session);
 	return (
 		<header className="flex justify-between items-center p-4">
 			<h1 className="text-2xl font-bold">

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

@@ -7,12 +7,14 @@ import MDEditor from "@uiw/react-md-editor";
 export const KursItem = ({
 	user,
 	event,
+	selectedAppointments,
 }: {
 	user: User;
 	event: Event & {
 		appointments: EventAppointment[];
 		participants: Participant[];
 	};
+	selectedAppointments: EventAppointment[];
 }) => {
 	return (
 		<div className="col-span-full">
@@ -42,14 +44,7 @@ export const KursItem = ({
 						<div>
 							<p className="text-gray-600 text-left flex items-center gap-2">
 								<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen: </b>
-								{(!event.starterMoodleCourseId ||
-									!event.requiredBadges.length) &&
-									"Keine"}
-								{event.starterMoodleCourseId && (
-									<a className="link link-info" href="">
-										Moodle Kurs {event.starterMoodleCourseId}
-									</a>
-								)}
+								{!event.requiredBadges.length && "Keine"}
 							</p>
 							{!!event.requiredBadges.length && (
 								<div className="flex ml-6">
@@ -65,6 +60,7 @@ export const KursItem = ({
 							)}
 						</div>
 						<ModalBtn
+							selectedAppointments={selectedAppointments}
 							user={user}
 							event={event}
 							title={event.name}
@@ -80,10 +76,12 @@ export const KursItem = ({
 
 export const ObligatedEvent = ({
 	event,
+	selectedAppointments,
 	user,
 }: {
 	event: Event;
 	user: User;
+	selectedAppointments: EventAppointment[];
 }) => {
 	{
 		/* STATISCH, DA FÜR ALLE NEUEN MITGLIEDER MANDATORY, WIRD AUSGEBLENDET WENN ABSOLVIERT */
@@ -114,6 +112,7 @@ export const ObligatedEvent = ({
 							<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen:</b> Keine
 						</p>
 						<ModalBtn
+							selectedAppointments={selectedAppointments}
 							user={user}
 							event={event}
 							title={event.name}

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,8 +79,10 @@ const ModalBtn = ({
 					<h3 className="font-bold text-lg">{title}</h3>
 					{event.hasPresenceEvents && (
 						<div>
+							{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) => (
@@ -81,25 +91,35 @@ const ModalBtn = ({
 												</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);

apps/hub/app/(app)/events/page.tsx

@@ -16,7 +16,13 @@ export default async () => {
 
 	const events = await prisma.event.findMany({
 		include: {
-			appointments: true,
+			appointments: {
+				where: {
+					appointmentDate: {
+						gte: new Date(),
+					},
+				},
+			},
 			participants: {
 				where: {
 					userId: user.id,
@@ -24,6 +30,15 @@ export default async () => {
 			},
 		},
 	});
+	const userAppointments = await prisma.eventAppointment.findMany({
+		where: {
+			Participants: {
+				some: {
+					userId: user.id,
+				},
+			},
+		},
+	});
 
 	return (
 		<div className="grid grid-cols-6 gap-4">
@@ -35,9 +50,23 @@ export default async () => {
 
 			{events.map((event) => {
 				if (event.type === "OBLIGATED_COURSE")
-					return <ObligatedEvent user={user} event={event} key={event.id} />;
+					return (
+						<ObligatedEvent
+							selectedAppointments={userAppointments}
+							user={user}
+							event={event}
+							key={event.id}
+						/>
+					);
 				if (event.type === "COURSE")
-					return <KursItem user={user} event={event} key={event.id} />;
+					return (
+						<KursItem
+							selectedAppointments={userAppointments}
+							user={user}
+							event={event}
+							key={event.id}
+						/>
+					);
 			})}
 		</div>
 	);

packages/database/prisma/schema/event.prisma

@@ -21,6 +21,7 @@ model Participant {
     userId                       String            @map(name: "user_id")
     finisherMoodleCurseCompleted Boolean           @default(false)
     attended                     Boolean           @default(false)
+    appointmentCancelled         Boolean           @default(false)
     finished                     Boolean           @default(false)
     eventAppointmentId           Int?
     statusLog                    Json[]