Redesigned Event Anmeldung

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

@@ -1,18 +1,20 @@
 "use client";
-import { use, useEffect } from "react";
+import { useEffect } from "react";
-import { CheckCircledIcon, CalendarIcon, EnterIcon } from "@radix-ui/react-icons";
+import { CheckCircledIcon, EnterIcon, DrawingPinFilledIcon } from "@radix-ui/react-icons";
 import { Event, EventAppointment, Participant, User } from "@repo/db";
 import { cn } from "@repo/shared-components";
 import { inscribeToMoodleCourse, upsertParticipant } from "../actions";
-import { Check, Clock10Icon, EyeIcon, TriangleAlert } from "lucide-react";
+import { Check, Clock10Icon, ExternalLink, EyeIcon, TriangleAlert } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { ParticipantOptionalDefaults, ParticipantOptionalDefaultsSchema } from "@repo/db/zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Select } from "../../../_components/ui/Select";
-import toast from "react-hot-toast";
 import { useRouter } from "next/navigation";
 import { handleParticipantEnrolled } from "../../../../helper/events";
 import { eventCompleted } from "@repo/shared-components";
+import MDEditor from "@uiw/react-md-editor";
+import { DayPicker } from "react-day-picker";
+import toast from "react-hot-toast";
 
 interface ModalBtnProps {
 	title: string;
@@ -57,13 +59,11 @@ const ModalBtn = ({
 
 	const openModal = () => {
 		const modal = document.getElementById(modalId) as HTMLDialogElement;
-		document.body.classList.add("modal-open");
 		modal?.showModal();
 	};
 
 	const closeModal = () => {
 		const modal = document.getElementById(modalId) as HTMLDialogElement;
-		document.body.classList.remove("modal-open");
 		modal?.close();
 	};
 	const selectAppointmentForm = useForm<ParticipantOptionalDefaults>({
@@ -126,132 +126,187 @@ const ModalBtn = ({
 				)}
 			</button>
 			<dialog id={modalId} className="modal">
-				<div className="modal-box">
+				<div className="modal-box w-11/12 max-w-5xl overflow-hidden">
-					<h3 className="font-bold text-lg">{title}</h3>
+					<form method="dialog">
-					{event.hasPresenceEvents && (
+						<button className="btn btn-sm btn-circle btn-ghost absolute right-3 top-3">✕</button>
-						<div>
+					</form>
-							{canSelectDate && (
+					<h3 className="font-bold text-lg text-left">{title}</h3>
-								<div className="flex items-center gap-2 justify-center">
+					<div className="grid grid-cols-6 gap-4 mt-4">
-									<CalendarIcon />
+						<div className="col-span-4">
-									{!!dates.length && (
+							<div className="text-left text-balance">
-										<Select
+								<MDEditor.Markdown
-											form={selectAppointmentForm}
+									source={event.description}
-											options={dates.map((date) => ({
+									className="whitespace-pre-wrap"
-												label: `${new Date(
+									style={{
-													date.appointmentDate,
+										backgroundColor: "transparent",
-												).toLocaleString()} - (${(date as any).Participants.length}/${event.maxParticipants})`,
+									}}
-												value: date.id,
+								/>
-											}))}
+							</div>
-											name="eventAppointmentId"
+						</div>
-											label={""}
+						{event.hasPresenceEvents && (
-											className="min-w-[200px]"
+							<div className="flex col-span-2 justify-end">
-										/>
+								{canSelectDate && (
-									)}
+									<div className="flex flex-col items-center justify-center gap-2">
-									{}
+										{!!dates.length && (
-									{!dates.length && (
+											<>
-										<p className="text-center text-info">Keine Termine verfügbar</p>
+												<p className="text-center text-info">Melde dich zu einem Termin an</p>
-									)}
+												<Select
-								</div>
+													form={selectAppointmentForm}
-							)}
+													options={dates.map((date) => ({
-							{!canSelectDate && participant?.attended && (
+														label: `${new Date(date.appointmentDate).toLocaleString("de-DE", {
-								<p className="py-4 flex items-center gap-2 justify-center">
+															year: "numeric",
-									<CheckCircledIcon className="text-success" />
+															month: "2-digit",
-									Du hast an dem Presenztermin teilgenommen
+															day: "2-digit",
-								</p>
+															hour: "2-digit",
-							)}
+															minute: "2-digit",
-							{!!selectedDate &&
+														})} - (${(date as any).Participants.length}/${event.maxParticipants})`,
-								!!event.maxParticipants &&
+														value: date.id,
-								!!ownPlaceInParticipantList &&
+													}))}
-								!!(ownPlaceInParticipantList > event.maxParticipants) && (
+													name="eventAppointmentId"
-									<p
+													label={""}
-										role="alert"
+													placeholder="Wähle einen Termin"
-										className="py-4 my-5 flex items-center gap-2 justify-center border alert alert-error alert-outline"
+													className="min-w-[250px]"
-									>
+												/>
-										<TriangleAlert className="h-6 w-6 shrink-0 stroke-current" fill="none" />
+											</>
-										Dieser Termin ist ausgebucht, wahrscheinlich wirst du nicht teilnehmen können.
+										)}
-										(Listenplatz: {ownPlaceInParticipantList} , max. {event.maxParticipants})
+										{!dates.length && (
+											<p className="text-center text-error">Aktuell sind keine Termine verfügbar</p>
+										)}
+									</div>
+								)}
+								{!canSelectDate && participant?.attended && (
+									<p className="py-4 flex items-center gap-2 justify-center">
+										<CheckCircledIcon className="text-success" />
+										Du hast an dem Presenztermin teilgenommen
 									</p>
 								)}
-							{selectedAppointment && !participant?.appointmentCancelled && (
+								{!!selectedDate &&
-								<>
+									!!event.maxParticipants &&
-									<div className="flex items-center gap-2 justify-center">
+									!!ownPlaceInParticipantList &&
-										<p>Dein Ausgewähler Termin</p>
+									!!(ownPlaceInParticipantList > event.maxParticipants) && (
-
+										<p
-										<p>{new Date(selectedAppointment.appointmentDate).toLocaleString()}</p>
+											role="alert"
-										<button
+											className="py-4 my-5 flex items-center gap-2 justify-center border alert alert-error alert-outline"
-											onClick={async () => {
-												await upsertParticipant({
-													eventId: event.id,
-													userId: participant!.userId,
-													appointmentCancelled: true,
-													statusLog: [
-														...(participant?.statusLog as any),
-														{
-															data: {
-																appointmentId: selectedAppointment.id,
-																appointmentDate: selectedAppointment.appointmentDate,
-															},
-															user: `${user?.firstname} ${user?.lastname} - ${user?.publicId}`,
-															event: "Termin abgesagt",
-															timestamp: new Date(),
-														},
-													],
-												});
-												toast.success("Termin abgesagt");
-												router.refresh();
-											}}
-											className="btn btn-error btn-outline btn-sm"
 										>
-											absagen
+											<TriangleAlert className="h-6 w-6 shrink-0 stroke-current" fill="none" />
-										</button>
+											Dieser Termin ist ausgebucht, wahrscheinlich wirst du nicht teilnehmen können.
+											(Listenplatz: {ownPlaceInParticipantList} , max. {event.maxParticipants})
+										</p>
+									)}
+								{selectedAppointment && !participant?.appointmentCancelled && (
+									<div className="flex flex-col items-center justify-center gap-2">
+										<span>Dein ausgewählter Termin (Deutsche Zeit)</span>
+										<div>
+											<button
+												popoverTarget="rdp-popover"
+												className="input input-border  min-w-[250px]"
+												style={{ anchorName: "--rdp" } as React.CSSProperties}
+											>
+												{selectedAppointment.appointmentDate
+													? new Date(selectedAppointment.appointmentDate).toLocaleString("de-DE", {
+															year: "numeric",
+															month: "2-digit",
+															day: "2-digit",
+															hour: "2-digit",
+															minute: "2-digit",
+														})
+													: "Keinen Termin ausgewählt"}
+											</button>
+											<div
+												popover="auto"
+												id="rdp-popover"
+												className="dropdown"
+												style={{ positionAnchor: "--rdp" } as React.CSSProperties}
+											>
+												<DayPicker
+													className="react-day-picker"
+													mode="single"
+													selected={selectedAppointment.appointmentDate}
+													disabled
+												/>
+											</div>
+										</div>
+										<span>Bitte erscheine pünktlich im Discord.</span>
 									</div>
+								)}
+							</div>
+						)}
+						{event.finisherMoodleCourseId && (
+							<div className="flex col-span-2 justify-end">
+								<MoodleCourseIndicator
+									participant={participant}
+									user={user}
+									moodleCourseId={event.finisherMoodleCourseId}
+									completed={participant?.finisherMoodleCurseCompleted || false}
+									event={event}
+								/>
+							</div>
+						)}
+					</div>
 
-									<p className="mt-3 text-center">
+					<div className="flex justify-between items-end mt-5">
-										Bitte finde dich an diesem Termin in unserem Discord ein.
+						<div>
-									</p>
+							<p className="text-gray-600 text-left flex items-center gap-2">
-								</>
+								<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen: </b>
+								{!event.requiredBadges.length && "Keine"}
+							</p>
+						</div>
+						<div className="modal-action">
+							{!!canSelectDate && (
+								<button
+									className={cn(
+										"btn btn-info btn-outline btn-wide",
+										event.type === "COURSE" && "btn-secondary",
+									)}
+									onClick={async () => {
+										const data = selectAppointmentForm.getValues();
+										if (!data.eventAppointmentId) return;
+
+										const participant = await upsertParticipant({
+											...data,
+											enscriptionDate: new Date(),
+											statusLog: data.statusLog?.filter((log) => log !== null),
+											appointmentCancelled: false,
+										});
+										await handleParticipantEnrolled(participant.id.toString());
+
+										router.refresh();
+										closeModal();
+									}}
+									disabled={!selectAppointmentForm.watch("eventAppointmentId")}
+								>
+									<EnterIcon /> Anmelden
+								</button>
+							)}
+							{selectedAppointment && !participant?.appointmentCancelled && (
+								<button
+									onClick={async () => {
+										await upsertParticipant({
+											eventId: event.id,
+											userId: participant!.userId,
+											appointmentCancelled: true,
+											statusLog: [
+												...(participant?.statusLog as any),
+												{
+													data: {
+														appointmentId: selectedAppointment.id,
+														appointmentDate: selectedAppointment.appointmentDate,
+													},
+													user: `${user?.firstname} ${user?.lastname} - ${user?.publicId}`,
+													event: "Termin abgesagt",
+													timestamp: new Date(),
+												},
+											],
+										});
+										toast.success("Termin abgesagt");
+										router.refresh();
+									}}
+									className="btn btn-error btn-outline btn-wide"
+								>
+									Termin Absagen
+								</button>
 							)}
 						</div>
-					)}
-					{event.finisherMoodleCourseId && (
-						<MoodleCourseIndicator
-							participant={participant}
-							user={user}
-							moodleCourseId={event.finisherMoodleCourseId}
-							completed={participant?.finisherMoodleCurseCompleted || false}
-							event={event}
-						/>
-					)}
-					<div className="modal-action flex justify-between">
-						<button className="btn" onClick={closeModal}>
-							Abbrechen
-						</button>
-						{!!canSelectDate && (
-							<button
-								className={cn(
-									"btn btn-info btn-outline btn-wide",
-									event.type === "COURSE" && "btn-secondary",
-								)}
-								onClick={async () => {
-									const data = selectAppointmentForm.getValues();
-									if (!data.eventAppointmentId) return;
-
-									const participant = await upsertParticipant({
-										...data,
-										enscriptionDate: new Date(),
-										statusLog: data.statusLog?.filter((log) => log !== null),
-										appointmentCancelled: false,
-									});
-									await handleParticipantEnrolled(participant.id.toString());
-
-									router.refresh();
-									closeModal();
-								}}
-								disabled={!selectAppointmentForm.watch("eventAppointmentId")}
-							>
-								<EnterIcon /> Anmelden
-							</button>
-						)}
 					</div>
 				</div>
 				<button className="modal-backdrop" onClick={closeModal}>
@@ -293,10 +348,10 @@ const MoodleCourseIndicator = ({
 			</p>
 		);
 	return (
-		<p className="py-4 flex items-center gap-2 justify-center">
+		<div className="flex flex-col items-center justify-center gap-2">
-			Moodle-Kurs Benötigt
+			<p>Moodle-Kurs Benötigt</p>
 			<button
-				className="btn btn-xs btn-info ml-2"
+				className="btn btn-sm btn-outline btn-info ml-2"
 				onClick={async () => {
 					try {
 						await upsertParticipant({
@@ -314,8 +369,9 @@ const MoodleCourseIndicator = ({
 					}
 				}}
 			>
+				<ExternalLink size={16} />
 				Zum Moodle Kurs
 			</button>
-		</p>
+		</div>
 	);
 };