From 00efe207b24da394daae3bd830bea312eb46e623 Mon Sep 17 00:00:00 2001
From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com>
Date: Sat, 22 Feb 2025 17:39:22 +0100
Subject: [PATCH] Added appointment table

---
 apps/hub/app/(app)/admin/event/[id]/page.tsx  |   8 +-
 .../(app)/admin/event/_components/Form.tsx    | 104 +++++++++++++++---
 apps/hub/app/(app)/admin/event/action.ts      |  22 +++-
 apps/hub/app/_components/PaginatedTable.tsx   |  54 ++++++---
 .../app/_components/pagiantedTableActions.ts  |   2 +-
 .../migrations/20250222153846_/migration.sql  |  38 +++++++
 packages/database/prisma/schema/event.prisma  |   2 +-
 7 files changed, 192 insertions(+), 38 deletions(-)
 create mode 100644 packages/database/prisma/migrations/20250222153846_/migration.sql

diff --git a/apps/hub/app/(app)/admin/event/[id]/page.tsx b/apps/hub/app/(app)/admin/event/[id]/page.tsx
index 32984ffe..8583a4d5 100644
--- a/apps/hub/app/(app)/admin/event/[id]/page.tsx
+++ b/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} />;
 };
diff --git a/apps/hub/app/(app)/admin/event/_components/Form.tsx b/apps/hub/app/(app)/admin/event/_components/Form.tsx
index b8a9cf1f..57375138 100644
--- a/apps/hub/app/(app)/admin/event/_components/Form.tsx
+++ b/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>
diff --git a/apps/hub/app/(app)/admin/event/action.ts b/apps/hub/app/(app)/admin/event/action.ts
index 2dee246d..b9ac9ba3 100644
--- a/apps/hub/app/(app)/admin/event/action.ts
+++ b/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']
diff --git a/apps/hub/app/_components/PaginatedTable.tsx b/apps/hub/app/_components/PaginatedTable.tsx
index b4edf55a..5d1e6e12 100644
--- a/apps/hub/app/_components/PaginatedTable.tsx
+++ b/apps/hub/app/_components/PaginatedTable.tsx
@@ -1,9 +1,19 @@
 'use client';
-import { useEffect, useState, useCallback } from 'react';
+import {
+  useEffect,
+  useState,
+  useCallback,
+  Ref,
+  useImperativeHandle,
+} from 'react';
 import SortableTable, { Pagination, SortableTableProps } from './Table';
 import { PrismaClient } from '@repo/db';
 import { getData } from './pagiantedTableActions';
 
+export interface PaginatedTableRef {
+  refresh: () => void;
+}
+
 interface PaginatedTableProps<TData>
   extends Omit<SortableTableProps<TData>, 'data'> {
   prismaModel: keyof PrismaClient;
@@ -11,7 +21,8 @@ interface PaginatedTableProps<TData>
   rowsPerPage?: number;
   showEditButton?: boolean;
   searchFields?: string[];
-  include?: Record<string, boolean>[];
+  include?: Record<string, boolean>;
+  ref?: Ref<PaginatedTableRef>;
 }
 
 export function PaginatedTable<TData>({
@@ -21,6 +32,7 @@ export function PaginatedTable<TData>({
   searchFields = [],
   filter,
   include,
+  ref,
   ...restProps
 }: PaginatedTableProps<TData>) {
   const [data, setData] = useState<TData[]>([]);
@@ -29,6 +41,30 @@ export function PaginatedTable<TData>({
   const [searchTerm, setSearchTerm] = useState('');
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
 
+  const RefreshTableData = async () => {
+    getData(
+      prismaModel,
+      rowsPerPage,
+      page * rowsPerPage,
+      debouncedSearchTerm,
+      searchFields,
+      filter,
+      include
+    ).then((result) => {
+      if (result) {
+        setData(result.data);
+        setTotal(result.total);
+      }
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    refresh: () => {
+      console.log('refresh');
+      RefreshTableData();
+    },
+  }));
+
   const debounce = (func: Function, delay: number) => {
     let timer: NodeJS.Timeout;
     return (...args: any[]) => {
@@ -45,19 +81,7 @@ export function PaginatedTable<TData>({
   );
 
   useEffect(() => {
-    getData(
-      prismaModel,
-      rowsPerPage,
-      page * rowsPerPage,
-      debouncedSearchTerm,
-      searchFields,
-      filter
-    ).then((result) => {
-      if (result) {
-        setData(result.data);
-        setTotal(result.total);
-      }
-    });
+    RefreshTableData();
   }, [page, debouncedSearchTerm]);
 
   return (
diff --git a/apps/hub/app/_components/pagiantedTableActions.ts b/apps/hub/app/_components/pagiantedTableActions.ts
index 52940cbc..24f3e377 100644
--- a/apps/hub/app/_components/pagiantedTableActions.ts
+++ b/apps/hub/app/_components/pagiantedTableActions.ts
@@ -10,7 +10,7 @@ export async function getData(
   searchTerm: string,
   searchFields: string[],
   filter?: Record<string, any>,
-  include?: Record<string, boolean>[]
+  include?: Record<string, boolean>
 ) {
   if (!model || !prisma[model]) {
     return { data: [], total: 0 };
diff --git a/packages/database/prisma/migrations/20250222153846_/migration.sql b/packages/database/prisma/migrations/20250222153846_/migration.sql
new file mode 100644
index 00000000..ce546031
--- /dev/null
+++ b/packages/database/prisma/migrations/20250222153846_/migration.sql
@@ -0,0 +1,38 @@
+/*
+  Warnings:
+
+  - You are about to drop the `_EventAppointmentToUser` table. If the table is not empty, all the data it contains will be lost.
+  - Added the required column `presenterId` to the `EventAppointment` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "_EventAppointmentToUser" DROP CONSTRAINT "_EventAppointmentToUser_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_EventAppointmentToUser" DROP CONSTRAINT "_EventAppointmentToUser_B_fkey";
+
+-- AlterTable
+ALTER TABLE "EventAppointment" ADD COLUMN     "presenterId" TEXT NOT NULL;
+
+-- DropTable
+DROP TABLE "_EventAppointmentToUser";
+
+-- CreateTable
+CREATE TABLE "_EventAppointmentUser" (
+    "A" INTEGER NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_EventAppointmentUser_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE INDEX "_EventAppointmentUser_B_index" ON "_EventAppointmentUser"("B");
+
+-- AddForeignKey
+ALTER TABLE "EventAppointment" ADD CONSTRAINT "EventAppointment_presenterId_fkey" FOREIGN KEY ("presenterId") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_EventAppointmentUser" ADD CONSTRAINT "_EventAppointmentUser_A_fkey" FOREIGN KEY ("A") REFERENCES "EventAppointment"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_EventAppointmentUser" ADD CONSTRAINT "_EventAppointmentUser_B_fkey" FOREIGN KEY ("B") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/packages/database/prisma/schema/event.prisma b/packages/database/prisma/schema/event.prisma
index a8532f8f..a3953bd3 100644
--- a/packages/database/prisma/schema/event.prisma
+++ b/packages/database/prisma/schema/event.prisma
@@ -17,7 +17,7 @@ model EventAppointment {
     presenterId     String
     // relations:
     Users           User[]        @relation("EventAppointmentUser")
-    participants    Participant[]
+    Participants    Participant[]
     Event           Event         @relation(fields: [eventId], references: [id])
     Presenter       User          @relation(fields: [presenterId], references: [id])
 }