added select form

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

@@ -1,28 +1,47 @@
 'use client';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { EventOptionalDefaultsSchema } from '@repo/db/zod';
+import {
+  EventOptionalDefaults,
+  EventOptionalDefaultsSchema,
+  ParticipantOptionalDefaultsSchema,
+} from '@repo/db/zod';
 import { set, useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { BosUse, Country, Event, prisma } from '@repo/db';
-import { FileText, LocateIcon, PlaneIcon, UserIcon } from 'lucide-react';
+import { BADGES, Event } from '@repo/db';
+import { Bot, FileText, UserIcon } from 'lucide-react';
 import { Input } from '../../../../_components/ui/Input';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { deleteEvent, upsertEvent } from '../action';
 import { Button } from '../../../../_components/ui/Button';
 import { redirect } from 'next/navigation';
 import { Switch } from '../../../../_components/ui/Switch';
 import { PaginatedTable } from '../../../../_components/PaginatedTable';
+import { Select } from '../../../../_components/ui/Select';
 
 export const Form = ({ event }: { event?: Event }) => {
-  const form = useForm<z.infer<typeof EventOptionalDefaultsSchema>>({
+  const form = useForm({
     resolver: zodResolver(EventOptionalDefaultsSchema),
     defaultValues: event,
   });
+  const participantForm = useForm({
+    resolver: zodResolver(ParticipantOptionalDefaultsSchema),
+  });
+
   const [loading, setLoading] = useState(false);
   const [deleteLoading, setDeleteLoading] = useState(false);
-  console.log(form.formState.errors);
+  const addParticipantModal = useRef<HTMLDialogElement>(null);
   return (
     <>
+      <dialog ref={addParticipantModal} className="modal">
+        <div className="modal-box">
+          <h3 className="font-bold text-lg">Teilnehmer</h3>
+          <div className="modal-action">
+            <form method="dialog">
+              {/* if there is a button in form, it will close the modal */}
+              <button className="btn">Close</button>
+            </form>
+          </div>
+        </div>
+      </dialog>
       <form
         onSubmit={form.handleSubmit(async (values) => {
           setLoading(true);
@@ -44,14 +63,74 @@ export const Form = ({ event }: { event?: Event }) => {
               name="description"
               className="input-sm"
             />
+            <Input
+              form={form}
+              label="Maximale Teilnehmer (Nur für live Events)"
+              className="input-sm"
+              {...form.register('maxParticipants', {
+                valueAsNumber: true,
+              })}
+            />
             <Switch form={form} name="hidden" label="Versteckt" />
           </div>
         </div>
         <div className="card bg-base-200 shadow-xl col-span-2  max-xl:col-span-6">
           <div className="card-body">
             <h2 className="card-title">
-              <UserIcon className="w-5 h-5" /> Teilnehmer
+              <Bot className="w-5 h-5" /> Automation
             </h2>
+            <Input
+              form={form}
+              name="starterMoodleCourseId"
+              label="Moodle Anmelde Kurs ID"
+              className="input-sm"
+            />
+            <Input
+              name="finisherMoodleCourseId"
+              form={form}
+              label="Moodle Abschluss Kurs ID"
+              className="input-sm"
+            />
+            <Select
+              isMulti
+              form={form}
+              name="finishedBadges"
+              label="Badges bei Abschluss"
+              options={Object.entries(BADGES).map(([key, value]) => ({
+                label: value,
+                value: key,
+              }))}
+            />
+            <Select
+              isMulti
+              form={form}
+              name="requiredBadges"
+              label="Benötigte Badges"
+              options={Object.entries(BADGES).map(([key, value]) => ({
+                label: value,
+                value: key,
+              }))}
+            />
+            <Switch
+              form={form}
+              name="hasPresenceEvents"
+              label="Hat Live Event"
+            />
+          </div>
+        </div>
+        <div className="card bg-base-200 shadow-xl col-span-2  max-xl:col-span-6">
+          <div className="card-body">
+            <div className="flex justify-between">
+              <h2 className="card-title">
+                <UserIcon className="w-5 h-5" /> Teilnehmer
+              </h2>
+              <button
+                className="btn btn-primary btn-outline"
+                onClick={() => addParticipantModal.current?.showModal()}
+              >
+                Teilnehmer hinzufügen
+              </button>
+            </div>
 
             <PaginatedTable
               prismaModel={'participant'}

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

@@ -1,6 +1,6 @@
 'use server';
 
-import { prisma, Prisma, Event } from '@repo/db';
+import { prisma, Prisma, Event, Participant } from '@repo/db';
 
 export const upsertEvent = async (
   event: Prisma.EventCreateInput,
@@ -18,3 +18,20 @@ export const upsertEvent = async (
 export const deleteEvent = async (id: Event['id']) => {
   await prisma.event.delete({ where: { id: id } });
 };
+
+export const upsertParticipant = async (
+  participant: Prisma.ParticipantCreateInput,
+  id?: Participant['id']
+) => {
+  const newParticipant = id
+    ? await prisma.participant.update({
+        where: { id: id },
+        data: participant,
+      })
+    : await prisma.participant.create({ data: participant });
+  return newParticipant;
+};
+
+export const deleteParticipant = async (id: Participant['id']) => {
+  await prisma.participant.delete({ where: { id: id } });
+};