feat: enhance event management with participant selection and user search functionality
This commit is contained in:
parent
1988fc20d1
commit
3eb5b4ff1e
5 changed files with 189 additions and 69 deletions
|
|
@ -9,8 +9,11 @@ import { Label } from '@/components/ui/label';
|
|||
import { useGetApiEventEventID } from '@/generated/api/event/event';
|
||||
import { useGetApiUserMe } from '@/generated/api/user/user';
|
||||
import { RedirectButton } from '@/components/buttons/redirect-button';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
|
||||
|
||||
export default function ShowEvent() {
|
||||
const session = useSession();
|
||||
const pathname = usePathname();
|
||||
|
||||
// Extract eventId from URL like /event/[eventId]
|
||||
|
|
@ -61,20 +64,17 @@ export default function ShowEvent() {
|
|||
|
||||
<CardContent>
|
||||
<div className='flex flex-col gap-5 w-full'>
|
||||
<div className='grid grid-row-start:auto gap-8'>
|
||||
<div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:flex-col max-sm:mb-6 max-sm:mt-10'>
|
||||
<div className='w-[100px]'>
|
||||
<div className='grid grid-row-start:auto gap-4 sm:gap-8'>
|
||||
<div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
|
||||
<div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
|
||||
<Logo colorType='monochrome' logoType='submark' width={50} />
|
||||
</div>
|
||||
<div className='items-center ml-auto mr-auto max-sm:mb-6'>
|
||||
<h1>{event.title || 'Untitled Event'}</h1>
|
||||
</div>
|
||||
<div className='w-0 sm:w-[100px]'>
|
||||
<RedirectButton
|
||||
redirectUrl={`/event/edit/${eventId}`}
|
||||
buttonText='edit'
|
||||
/>
|
||||
<div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full max-sm:flex max-sm:justify-center'>
|
||||
<h1 className='text-center'>
|
||||
{event.title || 'Untitled Event'}
|
||||
</h1>
|
||||
</div>
|
||||
<div className='w-0 sm:w-[100px]'></div>
|
||||
</div>
|
||||
<div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
|
||||
<div>
|
||||
|
|
@ -123,7 +123,7 @@ export default function ShowEvent() {
|
|||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
|
||||
<div className='h-full w-full grid grid-flow-row gap-8'>
|
||||
<div className='h-full w-full grid grid-flow-row gap-4 sm:gap-8'>
|
||||
<div className='h-full w-full'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='text-[var(--color-neutral-300)]'>
|
||||
|
|
@ -139,13 +139,32 @@ export default function ShowEvent() {
|
|||
<Label size='large'>{event.description || '-'}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<Label>Participants</Label>{' '}
|
||||
{/* TODO: add participants display */}
|
||||
<div className='h-full w-full mt-2'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Participants
|
||||
</Label>{' '}
|
||||
<div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2 sm:overflow-y-auto sm:mb-0'>
|
||||
{event.participants?.map((user) => (
|
||||
<ParticipantListEntry
|
||||
key={user.user.id}
|
||||
participant={user.user.name}
|
||||
></ParticipantListEntry>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'></div>
|
||||
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
|
||||
<div className='w-[20%] grid max-sm:w-full'>
|
||||
{session.data?.user?.id === event.organizer.id ? (
|
||||
<RedirectButton
|
||||
redirectUrl={`/event/edit/${eventId}`}
|
||||
buttonText='edit'
|
||||
className='w-full'
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import type { Metadata } from 'next';
|
|||
import './globals.css';
|
||||
import { QueryProvider } from '@/components/query-provider';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
import { SessionProvider } from 'next-auth/react';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'MeetUp',
|
||||
|
|
@ -51,14 +52,16 @@ export default function RootLayout({
|
|||
<link rel='manifest' href='/site.webmanifest' />
|
||||
</head>
|
||||
<body>
|
||||
<ThemeProvider
|
||||
attribute='class'
|
||||
defaultTheme='system'
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<QueryProvider>{children}</QueryProvider>
|
||||
</ThemeProvider>
|
||||
<SessionProvider>
|
||||
<ThemeProvider
|
||||
attribute='class'
|
||||
defaultTheme='system'
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<QueryProvider>{children}</QueryProvider>
|
||||
</ThemeProvider>
|
||||
</SessionProvider>
|
||||
<Toaster />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,15 @@ import Link from 'next/link';
|
|||
export function RedirectButton({
|
||||
redirectUrl,
|
||||
buttonText,
|
||||
className,
|
||||
}: {
|
||||
redirectUrl: string;
|
||||
buttonText: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<Link href={redirectUrl}>
|
||||
<Button>{buttonText}</Button>
|
||||
<Button className={className}>{buttonText}</Button>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,16 @@ import {
|
|||
useGetApiEventEventID,
|
||||
usePatchApiEventEventID,
|
||||
} from '@/generated/api/event/event';
|
||||
import ParticipantListEntry from '@/components/custom-ui/participantListEntry';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
import { ToastInner } from '@/components/misc/toast-inner';
|
||||
import { UserSearchInput } from '@/components/misc/user-search';
|
||||
import ParticipantListEntry from '../custom-ui/participant-list-entry';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface EventFormProps {
|
||||
type: 'create' | 'edit';
|
||||
|
|
@ -45,13 +51,11 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
const [startTime, setStartTime] = React.useState('');
|
||||
const [endDate, setEndDate] = React.useState<Date | undefined>(undefined);
|
||||
const [endTime, setEndTime] = React.useState('');
|
||||
|
||||
// State for participants
|
||||
const [selectedParticipants, setSelectedParticipants] = React.useState<{
|
||||
[name: string]: boolean;
|
||||
}>({
|
||||
'Max Muster': false,
|
||||
// Add more participants as needed
|
||||
});
|
||||
const [selectedParticipants, setSelectedParticipants] = React.useState<
|
||||
User[]
|
||||
>([]);
|
||||
|
||||
// State for form fields
|
||||
const [title, setTitle] = React.useState('');
|
||||
|
|
@ -75,6 +79,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
}
|
||||
setLocation(event.location || '');
|
||||
setDescription(event.description || '');
|
||||
setSelectedParticipants(
|
||||
event.participants?.map((u) => ({
|
||||
id: u.user.id,
|
||||
name: u.user.name,
|
||||
})) || [],
|
||||
);
|
||||
}
|
||||
}, [event, props.type]);
|
||||
|
||||
|
|
@ -115,6 +125,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
created_at: formData.get('createdAt') as string,
|
||||
updated_at: formData.get('updatedAt') as string,
|
||||
organiser: formData.get('organiser') as string,
|
||||
participants: selectedParticipants.map((u) => u.id),
|
||||
};
|
||||
|
||||
if (props.type === 'edit' && props.eventId) {
|
||||
|
|
@ -126,6 +137,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
start_time: data.start_time,
|
||||
end_time: data.end_time,
|
||||
location: data.location,
|
||||
participants: data.participants,
|
||||
},
|
||||
});
|
||||
console.log('Updating event');
|
||||
|
|
@ -173,12 +185,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
|
||||
return (
|
||||
<form className='flex flex-col gap-5 w-full' onSubmit={handleSubmit}>
|
||||
<div className='grid grid-row-start:auto gap-8'>
|
||||
<div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:flex-col max-sm:mb-6 max-sm:mt-10'>
|
||||
<div className='w-[50px]'>
|
||||
<div className='grid grid-row-start:auto gap-4 sm:gap-8 w-full'>
|
||||
<div className='h-full w-full mt-0 ml-2 mb-16 flex items-center max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
|
||||
<div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
|
||||
<Logo colorType='monochrome' logoType='submark' width={50} />
|
||||
</div>
|
||||
<div className='items-center ml-auto mr-auto max-sm:mb-6'>
|
||||
<div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full'>
|
||||
<LabeledInput
|
||||
type='text'
|
||||
label='Event Name'
|
||||
|
|
@ -260,17 +272,27 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<Label>Participants</Label> {/* TODO: add participants input */}
|
||||
<ParticipantListEntry
|
||||
participant='Max Muster'
|
||||
checked={selectedParticipants['Max Muster']}
|
||||
onCheck={(checked) =>
|
||||
setSelectedParticipants((prev) => ({
|
||||
...prev,
|
||||
['Max Muster']: checked,
|
||||
}))
|
||||
}
|
||||
></ParticipantListEntry>
|
||||
<Label>Participants</Label>
|
||||
<UserSearchInput
|
||||
selectedUsers={selectedParticipants}
|
||||
addUserAction={(user) => {
|
||||
setSelectedParticipants((current) =>
|
||||
current.find((u) => u.id === user.id)
|
||||
? current
|
||||
: [...current, user],
|
||||
);
|
||||
}}
|
||||
removeUserAction={(user) => {
|
||||
setSelectedParticipants((current) =>
|
||||
current.filter((u) => u.id !== user.id),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2 sm:overflow-y-auto sm:mb-0'>
|
||||
{selectedParticipants.map((user) => (
|
||||
<ParticipantListEntry key={user.id} participant={user.name} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -300,28 +322,6 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
{isSuccess && <p>Event created!</p>}
|
||||
{error && <p className='text-red-500'>Error: {error.message}</p>}
|
||||
</div>
|
||||
{/* Hidden inputs for formData */}
|
||||
<input
|
||||
type='hidden'
|
||||
name='startTime'
|
||||
value={
|
||||
startDate && startTime
|
||||
? `${startDate.toISOString().split('T')[0]}T${startTime}`
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<input
|
||||
type='hidden'
|
||||
name='endTime'
|
||||
value={
|
||||
endDate && endTime
|
||||
? `${endDate.toISOString().split('T')[0]}T${endTime}`
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<input type='hidden' name='organiser' value={organiserValue} />
|
||||
<input type='hidden' name='createdAt' value={createdAtValue} />
|
||||
<input type='hidden' name='updatedAt' value={updatedAtValue} />
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
96
src/components/misc/user-search.tsx
Normal file
96
src/components/misc/user-search.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from '@/components/ui/command';
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover';
|
||||
import { useGetApiSearchUser } from '@/generated/api/search/search';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export function UserSearchInput({
|
||||
addUserAction,
|
||||
removeUserAction,
|
||||
selectedUsers,
|
||||
}: {
|
||||
addUserAction: (user: User) => void;
|
||||
removeUserAction: (user: User) => void;
|
||||
selectedUsers: User[];
|
||||
}) {
|
||||
const [userSearch, setUserSearch] = React.useState('');
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const { data: searchUserData } = useGetApiSearchUser({ query: userSearch });
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant='outline_muted'
|
||||
role='combobox'
|
||||
aria-expanded={open}
|
||||
className='w-[200px] justify-between'
|
||||
>
|
||||
{'Select user...'}
|
||||
<ChevronsUpDownIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className='w-[200px] p-0'>
|
||||
<Command shouldFilter={false}>
|
||||
<CommandInput
|
||||
placeholder='Search user...'
|
||||
value={userSearch}
|
||||
onValueChange={setUserSearch}
|
||||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty>No users found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{searchUserData?.data.users?.map((user) => {
|
||||
const isSelected = selectedUsers.some((u) => u.id === user.id);
|
||||
|
||||
return (
|
||||
<CommandItem
|
||||
key={user.id}
|
||||
value={user.id}
|
||||
onSelect={() => {
|
||||
if (isSelected) {
|
||||
removeUserAction(user);
|
||||
} else {
|
||||
addUserAction(user);
|
||||
}
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
isSelected ? 'opacity-100' : 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
{user.name}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue