Added appointment table

apps/hub/app/(app)/admin/event/[id]/page.tsx

@@ -16,7 +16,11 @@ export default async ({ params }: { params: Promise<{ id: string }> }) => {
       publicId: true,
     },
   });
-  console.log(users);
+  const appointments = await prisma.eventAppointment.findMany({
+    where: {
+      eventId: parseInt(id),
+    },
+  });
   if (!event) return <div>Event not found</div>;
-  return <Form event={event} users={users} />;
+  return <Form event={event} users={users} appointments={appointments} />;
 };

apps/hub/app/(app)/admin/event/_components/Form.tsx

@@ -1,26 +1,32 @@
 'use client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
+  EventAppointmentOptionalDefaults,
   EventAppointmentOptionalDefaultsSchema,
   EventOptionalDefaults,
   EventOptionalDefaultsSchema,
   ParticipantOptionalDefaultsSchema,
 } from '@repo/db/zod';
 import { set, useForm } from 'react-hook-form';
-import { BADGES, Event, User } from '@repo/db';
+import { BADGES, Event, EventAppointment, User } from '@repo/db';
 import { Bot, Calendar, FileText, UserIcon } from 'lucide-react';
 import { Input } from '../../../../_components/ui/Input';
 import { useRef, useState } from 'react';
-import { deleteEvent, upsertEvent } from '../action';
+import { deleteEvent, upsertAppointment, upsertEvent } from '../action';
 import { Button } from '../../../../_components/ui/Button';
-import { redirect } from 'next/navigation';
+import { redirect, useRouter } from 'next/navigation';
 import { Switch } from '../../../../_components/ui/Switch';
-import { PaginatedTable } from '../../../../_components/PaginatedTable';
+import {
+  PaginatedTable,
+  PaginatedTableRef,
+} from '../../../../_components/PaginatedTable';
 import { Select } from '../../../../_components/ui/Select';
+import { useSession } from 'next-auth/react';
 
 export const Form = ({
   event,
   users,
+  appointments = [],
 }: {
   event?: Event;
   users: {
@@ -29,15 +35,21 @@ export const Form = ({
     lastname: string;
     publicId: string;
   }[];
+  appointments?: EventAppointment[];
 }) => {
+  const { data: session } = useSession();
   const form = useForm({
     resolver: zodResolver(EventOptionalDefaultsSchema),
     defaultValues: event,
   });
-  const appointmentForm = useForm({
+  const appointmentForm = useForm<EventAppointmentOptionalDefaults>({
     resolver: zodResolver(EventAppointmentOptionalDefaultsSchema),
+    defaultValues: {
+      eventId: event?.id,
+      presenterId: session?.user?.id,
+    },
   });
-  console.log(appointmentForm.formState.errors);
+  const appointmentsTableRef = useRef<PaginatedTableRef>(null);
   const [loading, setLoading] = useState(false);
   const [deleteLoading, setDeleteLoading] = useState(false);
   const addParticipantModal = useRef<HTMLDialogElement>(null);
@@ -51,20 +63,26 @@ export const Form = ({
               ✕
             </button>
           </form>
-          <h3 className="font-bold text-lg">Teilnehmer hinzufügen</h3>
+          <h3 className="font-bold text-lg">Termin hinzufügen</h3>
           <form
             onSubmit={appointmentForm.handleSubmit(async (values) => {
-              console.log(values);
+              if (!event) return;
+              const createdAppointment = await upsertAppointment({
+                appointmentDate: values.appointmentDate,
+                eventId: event?.id,
+                presenterId: values.presenterId,
+              });
+              console.log(createdAppointment);
+              addParticipantModal.current?.close();
+              appointmentsTableRef.current?.refresh();
             })}
+            className="flex flex-col"
           >
-            <Select
+            <Input
               form={appointmentForm}
-              name="userId"
-              label="Teilnehmer"
-              options={users.map((user) => ({
-                label: `${user.firstname} ${user.lastname} (${user.publicId})`,
-                value: user.id,
-              }))}
+              label="Datum"
+              name="appointmentDate"
+              type="date"
             />
             <div className="modal-action">
               <Button type="submit" className="btn btn-primary">
@@ -165,16 +183,66 @@ export const Form = ({
             </div>
 
             <PaginatedTable
+              ref={appointmentsTableRef}
               prismaModel={'eventAppointment'}
               filter={{
                 eventId: event?.id,
               }}
-              include={[
+              include={{
+                Presenter: true,
+                Participants: true,
+              }}
+              columns={[
                 {
-                  user: true,
+                  header: 'Datum',
+                  accessorKey: 'appointmentDate',
+                  accessorFn: (date) =>
+                    new Date(date.appointmentDate).toLocaleDateString(),
+                },
+                {
+                  header: 'Presenter',
+                  accessorKey: 'presenter',
+                  cell: ({ row }) => (
+                    <div className="flex items-center">
+                      <span className="ml-2">
+                        {(row.original as any).Presenter.firstname}{' '}
+                        {(row.original as any).Presenter.lastname}
+                      </span>
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Teilnehmer',
+                  accessorKey: 'Participants',
+                  cell: ({ row }) => (
+                    <div className="flex items-center">
+                      <UserIcon className="w-5 h-5" />
+                      <span className="ml-2">
+                        {row.original.Participants.length}
+                      </span>
+                    </div>
+                  ),
+                },
+                {
+                  header: 'Aktionen',
+                  cell: ({ row }) => {
+                    return (
+                      <div className="flex gap-2">
+                        <button
+                          onSubmit={() => false}
+                          type="button"
+                          onClick={() => {
+                            console.log(row.original);
+                          }}
+                          className="btn btn-sm btn-outline"
+                        >
+                          Bearbeiten
+                        </button>
+                      </div>
+                    );
+                  },
                 },
               ]}
-              columns={[]}
             />
           </div>
         </div>

apps/hub/app/(app)/admin/event/action.ts

@@ -1,6 +1,6 @@
 'use server';
 
-import { prisma, Prisma, Event, Participant } from '@repo/db';
+import { prisma, Prisma, Event, Participant, EventAppointment } from '@repo/db';
 
 export const upsertEvent = async (
   event: Prisma.EventCreateInput,
@@ -19,6 +19,26 @@ export const deleteEvent = async (id: Event['id']) => {
   await prisma.event.delete({ where: { id: id } });
 };
 
+export const upsertAppointment = async (
+  eventAppointment: Prisma.XOR<
+    Prisma.EventAppointmentCreateInput,
+    Prisma.EventAppointmentUncheckedCreateInput
+  >,
+  id?: EventAppointment['id']
+) => {
+  const newEventAppointment = id
+    ? await prisma.eventAppointment.update({
+        where: { id: id },
+        data: eventAppointment,
+      })
+    : await prisma.eventAppointment.create({ data: eventAppointment });
+  return newEventAppointment;
+};
+
+export const deleteAppoinement = async (id: Event['id']) => {
+  await prisma.eventAppointment.delete({ where: { id: id } });
+};
+
 export const upsertParticipant = async (
   participant: Prisma.ParticipantCreateInput,
   id?: Participant['id']