continuel event modal

2025-02-28 08:44:47 +01:00
parent 0708e8a4c3
commit 488c50e2e0
5 changed files with 124 additions and 67 deletions
--- a/apps/hub/app/(app)/_components/Header.tsx
+++ b/apps/hub/app/(app)/_components/Header.tsx
@@ -2,43 +2,42 @@ import { PlaneIcon, Workflow } from "lucide-react";
 import { useSession } from "next-auth/react";

 interface HeaderProps {
-  isChecked: boolean;
-  handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	isChecked: boolean;
+	handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }

 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">
-        Hallo,{" "}
-        {session.status === "authenticated"
-          ? session.data?.user.firstname
-          : "<username>"}
-        {"!"}
-      </h1>
-      <div>
-        <div className="tooltip" data-tip="Disponent / Pilot">
-          <label className="toggle text-base-content">
-            <input
-              type="checkbox"
-              checked={isChecked}
-              onChange={handleCheckboxChange}
-            />
-            <Workflow
-              className="w-4 h-4"
-              viewBox="0 0 24 24"
-              aria-label="enabled"
-            />
-            <PlaneIcon
-              className="w-4 h-4"
-              viewBox="0 0 24 24"
-              aria-label="disabled"
-            />
-          </label>
-        </div>
-      </div>
-    </header>
-  );
+	const session = useSession();
+	return (
+		<header className="flex justify-between items-center p-4">
+			<h1 className="text-2xl font-bold">
+				Hallo,{" "}
+				{session.status === "authenticated"
+					? session.data?.user.firstname
+					: "<username>"}
+				{"!"}
+			</h1>
+			<div>
+				<div className="tooltip" data-tip="Disponent / Pilot">
+					<label className="toggle text-base-content">
+						<input
+							type="checkbox"
+							checked={isChecked}
+							onChange={handleCheckboxChange}
+						/>
+						<Workflow
+							className="w-4 h-4"
+							viewBox="0 0 24 24"
+							aria-label="enabled"
+						/>
+						<PlaneIcon
+							className="w-4 h-4"
+							viewBox="0 0 24 24"
+							aria-label="disabled"
+						/>
+					</label>
+				</div>
+			</div>
+		</header>
+	);
 };
--- a/apps/hub/app/(app)/events/_components/item.tsx
+++ b/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}
--- a/apps/hub/app/(app)/events/_components/modalBtn.tsx
+++ b/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);
--- a/apps/hub/app/(app)/events/page.tsx
+++ b/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>
 	);
--- a/packages/database/prisma/schema/event.prisma
+++ b/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[]