CreateEventForm

apps/backend/src/event/entity/event.entity.ts

@@ -1,5 +1,5 @@
 import { Color, Priority, Status } from '@prisma/client';
-import { IsDate, IsEnum, IsNotEmpty, IsString, IsUUID } from 'class-validator';
+import { IsDate, IsDateString, IsEnum, IsNotEmpty, IsString, IsUUID } from 'class-validator';
 
 export class Event {
   @IsString()
@@ -14,7 +14,7 @@ export class Event {
   @IsString()
   description: string;
 
-  @IsDate()
+  @IsDateString()
   date: Date;
 
   @IsString()

apps/frontend/package.json

@@ -12,18 +12,27 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/next-js": "^2.2.0",
+    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/system": "^2.6.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@tanstack/react-query": "^5.51.15",
     "@tanstack/react-query-devtools": "^5.51.23",
     "axios": "^1.7.2",
+    "chakra-ui": "^0.3.9",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "framer-motion": "^11.3.30",
     "lucide-react": "^0.372.0",
     "next": "14.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.52.2",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.25.1",
+    "react-tag-input": "^6.10.3",
+    "react-tag-input-component": "^2.0.2",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },

apps/frontend/src/api/hooks/eventMutationHooks.ts

@@ -10,3 +10,17 @@ export const useCreateEventMutation = () => {
     mutationFn: async (event: CreateEvent) => (await axios.post(`${API_HOST}/events`, event)).data,
   });
 };
+
+export const useUpdateEventMutation = (eventId: string) => {
+  return useMutation<EventModel, Error, CreateEvent>({
+    mutationFn: async (event: CreateEvent) => (await axios.patch(`${API_HOST}/events/${eventId}`, event)).data,
+  });
+};
+
+export const useDeleteEventMutation = (onSuccess: () => void, onError: (e: Error) => void) => {
+  return useMutation<EventModel, Error, string>({
+    mutationFn: async (eventId: string) => (await axios.delete(`${API_HOST}/events/${eventId}`)).data,
+    onSuccess,
+    onError,
+  });
+};

apps/frontend/src/api/hooks/eventQueryHooks.ts

@@ -4,10 +4,18 @@ import axios from 'axios';
 
 import { EventDetails } from '@/app/events/types/eventDetails';
 import { API_HOST } from '@/util/environment';
+import { EventModel } from '@/api/model/event.model';
 
 export const useFetchEventDetailsQuery = (eventId: string) => {
   return useQuery<EventDetails>({
     queryKey: ['fetchEventDetails', eventId],
     queryFn: async () => (await axios.get<EventDetails>(`${API_HOST}/events/${eventId}`)).data,
   });
 };
+
+export const useFetchEventListQuery = () => {
+  return useQuery<EventModel[]>({
+    queryKey: ['fetchEventList'],
+    queryFn: async () => (await axios.get<EventModel[]>(`${API_HOST}/events`)).data,
+  });
+};

apps/frontend/src/api/model/event.model.ts

@@ -8,9 +8,9 @@ export enum Priority {
 }
 
 export enum Status {
-  CREATED,
-  SUBMITTED,
-  APPROVED,
+  CREATED = 'CREATTED',
+  SUBMITTED = 'SUBMITTED',
+  APPROVED = 'APPROVED',
 }
 
 export enum Color {

apps/frontend/src/app/events/new/page.tsx

@@ -1,28 +1,51 @@
+'use client';
+import {
+  Button,
+  Checkbox,
+  Flex,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Text,
+  Textarea,
+  useToast,
+  VStack,
+} from '@chakra-ui/react';
 import { redirect } from 'next/navigation';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import ReactTags from 'react-tag-input/types/components/ReactTags';
+import { TagsInput } from 'react-tag-input-component';
 
 import { useCreateEventMutation } from '@/api/hooks/eventMutationHooks';
 import { Color, EventModel, Status } from '@/api/model/event.model';
 import { CreateEvent, CreateEventForm } from '@/app/events/types/createEvent';
-import Button from '@/components/button';
-import Input from '@/components/input';
 import { styles } from '@/components/newEventStyles';
+import { FRONTEND_HOST } from '@/util/environment';
 
 export default function newEvent() {
-  /*const { mutate: createEvent } = useCreateEventMutation();
+  const { mutate: createEvent } = useCreateEventMutation();
   const publishEvent = (formData: CreateEvent) => {
     createEvent(formData, {
       onSuccess: (event: EventModel) => {
-        redirect(`http://localhost:3000/events/${event.id}`);
+        redirect(`${FRONTEND_HOST}/events/${event.id}`);
+      },
+      onError: (e: Error) => {
+        throw e;
       },
     });
   };
 
   const form = useForm<CreateEventForm>({
     defaultValues: {
       tags: [],
+      organizerIds: [],
       date: new Date(),
       color: Color.RED,
+      link: '',
     },
     mode: 'all',
   });
@@ -36,20 +59,41 @@ export default function newEvent() {
     formState: { errors, isValid, isSubmitted },
   } = form;
 
-  const onSubmit = handleSubmit((data: CreateEventForm) => {
+  const onPublish = handleSubmit((data: CreateEventForm) => {
     const formData: CreateEvent = {
       name: data.name,
       description: data.description,
-      date: data.date,
+      date: new Date(data.date).toISOString(),
       location: data.location,
-      tags: data.tags,
+      tags: tags,
       color: data.color,
       link: data.link,
       ownerId: 'bearni03',
+      organizerIds: data.organizerIds,
       status: Status.SUBMITTED,
     };
+    console.log(formData);
     publishEvent(formData);
-  });*/
+  });
+
+  const onSaveDraft = handleSubmit((data: CreateEventForm) => {
+    const formData: CreateEvent = {
+      name: data.name,
+      description: data.description,
+      date: new Date(data.date).toISOString(),
+      location: data.location,
+      tags: tags,
+      color: data.color,
+      link: data.link,
+      ownerId: 'bearni03',
+      organizerIds: organizerIds,
+      status: Status.CREATED,
+    };
+    publishEvent(formData);
+  });
+
+  const [tags, setTags] = useState<string[]>([]);
+  const [organizerIds, setOrganizerIds] = useState<string[]>([]);
 
   return (
     <div>
@@ -60,41 +104,99 @@ export default function newEvent() {
         <div style={styles.AlignStyle}>
           <div style={styles.StickerStyle}>
             Név:
-            <Input id='name' placeholder='Gólyakocsma...' />
+            <FormControl isInvalid={Boolean(errors.name)} isRequired>
+              <Input
+                type='text'
+                style={styles.InputStyle}
+                {...register('name', {
+                  required: { value: true, message: 'Név megadása kötelező!' },
+                  maxLength: { value: 100, message: 'Név túl hosszú!' },
+                })}
+                placeholder='Gólyakocsma...'
+              />
+              {errors.name && <FormErrorMessage>{errors.name.message}</FormErrorMessage>}
+            </FormControl>
           </div>
+
           <div style={styles.StickerStyle} className='p-3'>
             Szín:
+            <FormControl>
+              <Input type='color' className='align-middle' {...register('color', {})} />
+              {errors.color && <FormErrorMessage>{errors.color.message}</FormErrorMessage>}
+            </FormControl>
           </div>
         </div>
         <div style={styles.AlignStyle}>
           <div style={styles.StickerStyle}>
             Helyszín:
-            <Input id='place' placeholder='SCH FNT...' />
+            <FormControl>
+              <Input
+                type='text'
+                style={styles.InputStyle}
+                {...register('location', {
+                  required: { value: true, message: 'Helyszín megadása kötelező!' },
+                  maxLength: { value: 30, message: 'Helyszínleírás túl hosszú!' },
+                })}
+                placeholder='SCH FNT...'
+              />
+              {errors.location && <FormErrorMessage>{errors.location.message}</FormErrorMessage>}
+            </FormControl>
           </div>
           <div style={styles.StickerStyle}>
             Tagek:
-            <Input id='tags' placeholder='#gólyák, ...' />
+            <TagsInput value={tags} onChange={setTags} name='tags' placeHolder='Enter tags' />
           </div>
         </div>
         <div style={styles.AlignStyle}>
           <div style={styles.StickerStyle}>
             Időpont:
-            <Input id='time' placeholder='éééé.hh.nn. óó:pp' />
+            <FormControl>
+              <Input
+                type='datetime-local'
+                style={styles.InputStyle}
+                {...register('date', {
+                  //required: { value: true, message: 'Időpont megadása kötelező!' },
+                })}
+              />
+              {errors.date && <FormErrorMessage>{errors.date.message}</FormErrorMessage>}
+            </FormControl>
           </div>
           <div style={styles.StickerStyle}>
             Szervezők:
-            <Input id='organizers' placeholder='Kir Dev, ...' />
+            <TagsInput value={organizerIds} onChange={setOrganizerIds} name='organizerIds' placeHolder='bearni03' />
           </div>
         </div>
         <div className='rounded-2xl border-2 border-dark-green ml-10 mt-6 w-11/12 text-xl bg-light-green p-2 pl-3 h-64'>
           Leírás:
           <div className='mt-1 h-48 mr-1'>
-            <input id='description' placeholder='...' className='h-48' style={styles.InputStyle} />
+            <FormControl isInvalid={Boolean(errors.description)} isRequired>
+              <Input
+                type='text'
+                style={styles.InputStyle}
+                className='h-48'
+                {...register('description', { required: 'Leírás megadása kötelező!' })}
+                placeholder='...'
+              />
+            </FormControl>
           </div>
         </div>
         <div className='flex justify-between ml-10 mt-7 w-11/12'>
-          <Button type='button' label='Piszkozat mentése' />
-          <Button type='button' label='Létrehozás' />
+          <Button
+            className='rounded-2xl border-4 border-dark-green text-xl bg-light-green p-2 w-60 text-center'
+            onClick={() => {
+              onSaveDraft();
+            }}
+          >
+            Piszkozat mentése
+          </Button>
+          <Button
+            className='rounded-2xl border-4 border-dark-green text-xl bg-light-green p-2 w-60 text-center'
+            onClick={() => {
+              onPublish();
+            }}
+          >
+            Létrehozás
+          </Button>
         </div>
       </div>
     </div>

apps/frontend/src/app/events/types/createEvent.ts

@@ -1,13 +1,12 @@
 import { Color, Status } from '@/api/model/event.model';
-import { PublicUser } from '@/app/users/types/PublicUser';
 
 export interface CreateEvent {
   name: string;
   description: string;
-  date: Date;
+  date: string;
   location: string;
   tags: string[];
-  //organizerIds: string[];
+  organizerIds: string[];
   color: Color;
   status: Status;
   ownerId: string;
@@ -20,7 +19,7 @@ export type CreateEventForm = {
   date: Date;
   location: string;
   tags: string[];
-  //organizers: PublicUser[];
+  organizerIds: string[];
   color: Color;
   //status: Status;
   link?: string;