Redesigned Event Anmeldung
This commit is contained in:
nocnico
@@ -1,18 +1,20 @@
|
||||
"use client";
|
||||
import { use, useEffect } from "react";
|
||||
import { CheckCircledIcon, CalendarIcon, EnterIcon } from "@radix-ui/react-icons";
|
||||
import { useEffect } from "react";
|
||||
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">
|
||||
<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
|
||||
form={selectAppointmentForm}
|
||||
options={dates.map((date) => ({
|
||||
label: `${new Date(
|
||||
date.appointmentDate,
|
||||
).toLocaleString()} - (${(date as any).Participants.length}/${event.maxParticipants})`,
|
||||
value: date.id,
|
||||
}))}
|
||||
name="eventAppointmentId"
|
||||
label={""}
|
||||
className="min-w-[200px]"
|
||||
/>
|
||||
)}
|
||||
{}
|
||||
{!dates.length && (
|
||||
<p className="text-center text-info">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>
|
||||
)}
|
||||
{!!selectedDate &&
|
||||
!!event.maxParticipants &&
|
||||
!!ownPlaceInParticipantList &&
|
||||
!!(ownPlaceInParticipantList > event.maxParticipants) && (
|
||||
<p
|
||||
role="alert"
|
||||
className="py-4 my-5 flex items-center gap-2 justify-center border alert alert-error alert-outline"
|
||||
>
|
||||
<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})
|
||||
<div className="modal-box w-11/12 max-w-5xl overflow-hidden">
|
||||
<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 className="flex col-span-2 justify-end">
|
||||
{canSelectDate && (
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
{!!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(date.appointmentDate).toLocaleString("de-DE", {
|
||||
year: "numeric",
|
||||
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={""}
|
||||
placeholder="Wähle einen Termin"
|
||||
className="min-w-[250px]"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!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 && (
|
||||
<>
|
||||
<div className="flex items-center gap-2 justify-center">
|
||||
<p>Dein Ausgewähler Termin</p>
|
||||
|
||||
<p>{new Date(selectedAppointment.appointmentDate).toLocaleString()}</p>
|
||||
<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-sm"
|
||||
{!!selectedDate &&
|
||||
!!event.maxParticipants &&
|
||||
!!ownPlaceInParticipantList &&
|
||||
!!(ownPlaceInParticipantList > event.maxParticipants) && (
|
||||
<p
|
||||
role="alert"
|
||||
className="py-4 my-5 flex items-center gap-2 justify-center border alert alert-error alert-outline"
|
||||
>
|
||||
absagen
|
||||
</button>
|
||||
<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})
|
||||
</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">
|
||||
Bitte finde dich an diesem Termin in unserem Discord ein.
|
||||
</p>
|
||||
</>
|
||||
<div className="flex justify-between items-end mt-5">
|
||||
<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(
|
||||
"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">
|
||||
Moodle-Kurs Benötigt
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user