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,30 +126,51 @@ 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">
+						<button className="btn btn-sm btn-circle btn-ghost absolute right-3 top-3">✕</button>
+					</form>
+					<h3 className="font-bold text-lg text-left">{title}</h3>
+					<div className="grid grid-cols-6 gap-4 mt-4">
+						<div className="col-span-4">
+							<div className="text-left text-balance">
+								<MDEditor.Markdown
+									source={event.description}
+									className="whitespace-pre-wrap"
+									style={{
+										backgroundColor: "transparent",
+									}}
+								/>
+							</div>
+						</div>
 						{event.hasPresenceEvents && (
-						<div>
+							<div className="flex col-span-2 justify-end">
 								{canSelectDate && (
-								<div className="flex items-center gap-2 justify-center">
+									<div className="flex flex-col items-center justify-center gap-2">
-									<CalendarIcon />
 										{!!dates.length && (
+											<>
+												<p className="text-center text-info">Melde dich zu einem Termin an</p>
 												<Select
 													form={selectAppointmentForm}
 													options={dates.map((date) => ({
-												label: `${new Date(
+														label: `${new Date(date.appointmentDate).toLocaleString("de-DE", {
-													date.appointmentDate,
+															year: "numeric",
-												).toLocaleString()} - (${(date as any).Participants.length}/${event.maxParticipants})`,
+															month: "2-digit",
+															day: "2-digit",
+															hour: "2-digit",
+															minute: "2-digit",
+														})} - (${(date as any).Participants.length}/${event.maxParticipants})`,
 														value: date.id,
 													}))}
 													name="eventAppointmentId"
 													label={""}
-											className="min-w-[200px]"
+													placeholder="Wähle einen Termin"
+													className="min-w-[250px]"
 												/>
+											</>
 										)}
-									{}
 										{!dates.length && (
-										<p className="text-center text-info">Keine Termine verfügbar</p>
+											<p className="text-center text-error">Aktuell sind keine Termine verfügbar</p>
 										)}
 									</div>
 								)}
@@ -173,47 +194,45 @@ const ModalBtn = ({
 										</p>
 									)}
 								{selectedAppointment && !participant?.appointmentCancelled && (
-								<>
+									<div className="flex flex-col items-center justify-center gap-2">
-									<div className="flex items-center gap-2 justify-center">
+										<span>Dein ausgewählter Termin (Deutsche Zeit)</span>
-										<p>Dein Ausgewähler Termin</p>
+										<div>
-
-										<p>{new Date(selectedAppointment.appointmentDate).toLocaleString()}</p>
 											<button
-											onClick={async () => {
+												popoverTarget="rdp-popover"
-												await upsertParticipant({
+												className="input input-border  min-w-[250px]"
-													eventId: event.id,
+												style={{ anchorName: "--rdp" } as React.CSSProperties}
-													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
+												{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>
-
-									<p className="mt-3 text-center">
-										Bitte finde dich an diesem Termin in unserem Discord ein.
-									</p>
-								</>
 								)}
 							</div>
 						)}
 						{event.finisherMoodleCourseId && (
+							<div className="flex col-span-2 justify-end">
 								<MoodleCourseIndicator
 									participant={participant}
 									user={user}
@@ -221,11 +240,18 @@ const ModalBtn = ({
 									completed={participant?.finisherMoodleCurseCompleted || false}
 									event={event}
 								/>
+							</div>
 						)}
-					<div className="modal-action flex justify-between">
+					</div>
-						<button className="btn" onClick={closeModal}>
+
-							Abbrechen
+					<div className="flex justify-between items-end mt-5">
-						</button>
+						<div>
+							<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(
@@ -252,6 +278,35 @@ const ModalBtn = ({
 									<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>
 					</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>
 	);
 };