PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

continuel event modal

Browse Source
This commit is contained in:
PxlLoewe
2025-02-28 08:44:47 +01:00
parent 0708e8a4c3
commit 488c50e2e0
5 changed files with 124 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
apps/hub/app/(app)/_components/Header.tsx
View File

@@ -2,43 +2,42 @@ import { PlaneIcon, Workflow } from "lucide-react";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
interface HeaderProps { interface HeaderProps {
isChecked: boolean; isChecked: boolean;
handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void; handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
} }
export const Header = ({ isChecked, handleCheckboxChange }: HeaderProps) => { export const Header = ({ isChecked, handleCheckboxChange }: HeaderProps) => {
const session = useSession(); const session = useSession();
console.log(session); return (
return ( <header className="flex justify-between items-center p-4">
<header className="flex justify-between items-center p-4"> <h1 className="text-2xl font-bold">
<h1 className="text-2xl font-bold"> Hallo,{" "}
Hallo,{" "} {session.status === "authenticated"
{session.status === "authenticated" ? session.data?.user.firstname
? session.data?.user.firstname : "<username>"}
: "<username>"} {"!"}
{"!"} </h1>
</h1> <div>
<div> <div className="tooltip" data-tip="Disponent / Pilot">
<div className="tooltip" data-tip="Disponent / Pilot"> <label className="toggle text-base-content">
<label className="toggle text-base-content"> <input
<input type="checkbox"
type="checkbox" checked={isChecked}
checked={isChecked} onChange={handleCheckboxChange}
onChange={handleCheckboxChange} />
/> <Workflow
<Workflow className="w-4 h-4"
className="w-4 h-4" viewBox="0 0 24 24"
viewBox="0 0 24 24" aria-label="enabled"
aria-label="enabled" />
/> <PlaneIcon
<PlaneIcon className="w-4 h-4"
className="w-4 h-4" viewBox="0 0 24 24"
viewBox="0 0 24 24" aria-label="disabled"
aria-label="disabled" />
/> </label>
</label> </div>
</div> </div>
</div> </header>
</header> );
);
}; };

15
apps/hub/app/(app)/events/_components/item.tsx
View File

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

69
apps/hub/app/(app)/events/_components/modalBtn.tsx
View File

@@ -9,11 +9,13 @@ import { Event, EventAppointment, Participant, User } from "@repo/db";
import { cn } from "../../../../helper/cn"; import { cn } from "../../../../helper/cn";
import { addParticipant, inscribeToMoodleCourse } from "../actions"; import { addParticipant, inscribeToMoodleCourse } from "../actions";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import { Cross } from "lucide-react";
interface ModalBtnProps { interface ModalBtnProps {
title: string; title: string;
event: Event; event: Event;
dates: EventAppointment[]; dates: EventAppointment[];
selectedAppointments: EventAppointment[];
participant?: Participant; participant?: Participant;
user: User; user: User;
modalId: string; modalId: string;
@@ -24,6 +26,7 @@ const ModalBtn = ({
dates, dates,
modalId, modalId,
participant, participant,
selectedAppointments,
event, event,
user, user,
}: ModalBtnProps) => { }: ModalBtnProps) => {
@@ -43,6 +46,11 @@ const ModalBtn = ({
}; };
}, [modalId]); }, [modalId]);
const canSelectDate =
event.hasPresenceEvents &&
!participant?.attended &&
(selectedAppointments.length === 0 || participant?.appointmentCancelled);
const openModal = () => { const openModal = () => {
const modal = document.getElementById(modalId) as HTMLDialogElement; const modal = document.getElementById(modalId) as HTMLDialogElement;
document.body.classList.add("modal-open"); document.body.classList.add("modal-open");
@@ -71,35 +79,47 @@ const ModalBtn = ({
<h3 className="font-bold text-lg">{title}</h3> <h3 className="font-bold text-lg">{title}</h3>
{event.hasPresenceEvents && ( {event.hasPresenceEvents && (
<div> <div>
<div className="flex items-center gap-2 justify-center"> {canSelectDate && (
<CalendarIcon /> <div className="flex items-center gap-2 justify-center">
<select className="select w-full max-w-xs" defaultValue={0}> <CalendarIcon />
<option disabled>Bitte wähle einen Termin aus</option> {!!dates.length && (
{dates.map((date, index) => ( <select className="select w-full max-w-xs" defaultValue={0}>
<option key={index}> <option disabled>Bitte wähle einen Termin aus</option>
{date.appointmentDate.toLocaleString()} {dates.map((date, index) => (
</option> <option key={index}>
))} {date.appointmentDate.toLocaleString()}
</select> </option>
</div> ))}
<p className="mt-3 text-center"> </select>
Bitte finde dich an diesem Termin in unserem Discord ein. )}
</p> {!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> </div>
)} )}
{event.finisherMoodleCourseId && ( {event.finisherMoodleCourseId && (
<MoodleCourseIndicator <MoodleCourseIndicator
participant={participant}
user={user} user={user}
moodleCourseId={event.finisherMoodleCourseId} moodleCourseId={event.finisherMoodleCourseId}
completed={participant?.finisherMoodleCurseCompleted} completed={participant?.finisherMoodleCurseCompleted}
eventId={event.id} event={event}
/> />
)} )}
<div className="modal-action flex justify-between"> <div className="modal-action flex justify-between">
<button className="btn" onClick={closeModal}> <button className="btn" onClick={closeModal}>
Abbrechen Abbrechen
</button> </button>
{event.hasPresenceEvents && ( {!!(event.hasPresenceEvents && dates.length) && (
<button className="btn btn-info btn-outline btn-wide"> <button className="btn btn-info btn-outline btn-wide">
<EnterIcon /> Anmelden <EnterIcon /> Anmelden
</button> </button>
@@ -119,13 +139,15 @@ export default ModalBtn;
const MoodleCourseIndicator = ({ const MoodleCourseIndicator = ({
completed, completed,
moodleCourseId, moodleCourseId,
eventId, event,
participant,
user, user,
}: { }: {
user: User;
participant?: Participant;
completed?: boolean; completed?: boolean;
moodleCourseId: string; moodleCourseId: string;
eventId: number; event: Event;
user: User;
}) => { }) => {
const courseUrl = `${process.env.NEXT_PUBLIC_MOODLE_URL}/course/view.php?id=${moodleCourseId}`; const courseUrl = `${process.env.NEXT_PUBLIC_MOODLE_URL}/course/view.php?id=${moodleCourseId}`;
if (completed) if (completed)
@@ -135,13 +157,20 @@ const MoodleCourseIndicator = ({
Moodle Kurs abgeschlossen Moodle Kurs abgeschlossen
</p> </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 ( return (
<p className="py-4 flex items-center gap-2 justify-center"> <p className="py-4 flex items-center gap-2 justify-center">
Moodle-Kurs Benötigt Moodle-Kurs Benötigt
<button <button
className="btn btn-xs btn-info ml-2" className="btn btn-xs btn-info ml-2"
onClick={async () => { onClick={async () => {
await addParticipant(eventId, user.id); await addParticipant(event.id, user.id);
if (user.moodleId) { if (user.moodleId) {
await inscribeToMoodleCourse(moodleCourseId, user.moodleId); await inscribeToMoodleCourse(moodleCourseId, user.moodleId);

35
apps/hub/app/(app)/events/page.tsx
View File

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

1
packages/database/prisma/schema/event.prisma
View File

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