392 lines
14 KiB
TypeScript
392 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import React from 'react';
|
|
import { toast } from 'sonner';
|
|
import zod from 'zod/v4';
|
|
|
|
import Calendar from '@/components/calendar';
|
|
import LabeledInput from '@/components/custom-ui/labeled-input';
|
|
import Logo from '@/components/misc/logo';
|
|
import { ToastInner } from '@/components/misc/toast-inner';
|
|
import { UserSearchInput } from '@/components/misc/user-search';
|
|
import TimePicker from '@/components/time-picker';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
|
|
import { PublicUserSchema } from '@/app/api/user/validation';
|
|
|
|
import {
|
|
useGetApiEventEventID,
|
|
usePatchApiEventEventID,
|
|
usePostApiEvent,
|
|
} from '@/generated/api/event/event';
|
|
import { useGetApiUserMe } from '@/generated/api/user/user';
|
|
|
|
import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog';
|
|
|
|
type User = zod.output<typeof PublicUserSchema>;
|
|
|
|
interface EventFormProps {
|
|
type: 'create' | 'edit';
|
|
eventId?: string;
|
|
}
|
|
|
|
const EventForm: React.FC<EventFormProps> = (props) => {
|
|
// Runtime validation
|
|
if (props.type === 'edit' && !props.eventId) {
|
|
throw new Error(
|
|
'Error [event-form]: eventId must be provided when type is "edit".',
|
|
);
|
|
}
|
|
|
|
const searchParams = useSearchParams();
|
|
const startFromUrl = searchParams.get('start');
|
|
const endFromUrl = searchParams.get('end');
|
|
|
|
const { mutate: createEvent, status, isSuccess, error } = usePostApiEvent();
|
|
const { data, isLoading, error: fetchError } = useGetApiUserMe();
|
|
const { data: eventData } = useGetApiEventEventID(props.eventId!, {
|
|
query: { enabled: props.type === 'edit' },
|
|
});
|
|
const patchEvent = usePatchApiEventEventID();
|
|
const router = useRouter();
|
|
|
|
// Extract event fields for form defaults
|
|
const event = eventData?.data?.event;
|
|
|
|
// State for date and time fields
|
|
const [startDate, setStartDate] = React.useState<Date | undefined>(undefined);
|
|
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<
|
|
User[]
|
|
>([]);
|
|
|
|
// State for form fields
|
|
const [title, setTitle] = React.useState('');
|
|
const [location, setLocation] = React.useState('');
|
|
const [description, setDescription] = React.useState('');
|
|
|
|
const [calendarOpen, setCalendarOpen] = React.useState(false);
|
|
|
|
// Update state when event data loads
|
|
React.useEffect(() => {
|
|
if (props.type === 'edit' && event) {
|
|
setTitle(event.title || '');
|
|
// Parse start_time and end_time
|
|
if (event.start_time) {
|
|
const start = new Date(event.start_time);
|
|
setStartDate(start);
|
|
setStartTime(start.toTimeString().slice(0, 5)); // "HH:mm"
|
|
}
|
|
if (event.end_time) {
|
|
const end = new Date(event.end_time);
|
|
setEndDate(end);
|
|
setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
|
|
}
|
|
setLocation(event.location || '');
|
|
setDescription(event.description || '');
|
|
setSelectedParticipants(event.participants?.map((u) => u.user) || []);
|
|
} else if (props.type === 'create' && startFromUrl && endFromUrl) {
|
|
// If creating a new event with URL params, set title and dates
|
|
setTitle('');
|
|
const start = new Date(startFromUrl);
|
|
setStartDate(start);
|
|
setStartTime(start.toTimeString().slice(0, 5)); // "HH:mm"
|
|
const end = new Date(endFromUrl);
|
|
setEndDate(end);
|
|
setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
|
|
}
|
|
}, [event, props.type, startFromUrl, endFromUrl]);
|
|
|
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.currentTarget);
|
|
|
|
function combine(date?: Date, time?: string) {
|
|
if (!date || !time) return undefined;
|
|
const [hours, minutes] = time.split(':');
|
|
const d = new Date(date);
|
|
d.setHours(Number(hours), Number(minutes), 0, 0);
|
|
return d;
|
|
}
|
|
|
|
const start = combine(startDate, startTime);
|
|
const end = combine(endDate, endTime);
|
|
|
|
//validate form data
|
|
if (!formData.get('eventName')) {
|
|
alert('Event name is required.');
|
|
return;
|
|
}
|
|
if (!start || !end) {
|
|
alert('Please provide both start and end date/time.');
|
|
return;
|
|
} else if (start >= end) {
|
|
alert('End time must be after start time.');
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
title: formData.get('eventName') as string,
|
|
description: formData.get('eventDescription') as string,
|
|
start_time: start.toISOString(),
|
|
end_time: end.toISOString(),
|
|
location: formData.get('eventLocation') as string,
|
|
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) {
|
|
await patchEvent.mutateAsync({
|
|
eventID: props.eventId,
|
|
data: {
|
|
title: data.title,
|
|
description: data.description,
|
|
start_time: data.start_time,
|
|
end_time: data.end_time,
|
|
location: data.location,
|
|
participants: data.participants,
|
|
},
|
|
});
|
|
console.log('Updating event');
|
|
} else {
|
|
console.log('Creating event');
|
|
createEvent({ data });
|
|
}
|
|
|
|
toast.custom((t) => (
|
|
<ToastInner
|
|
toastId={t}
|
|
title='Event saved'
|
|
description={event?.title}
|
|
onAction={() => router.push(`/events/${event?.id}`)}
|
|
variant='success'
|
|
buttonText='show'
|
|
/>
|
|
));
|
|
|
|
router.back();
|
|
}
|
|
|
|
// Calculate values for organiser, created, and updated
|
|
const organiserValue = isLoading
|
|
? 'Loading...'
|
|
: data?.data.user?.name || 'Unknown User';
|
|
|
|
// Use DB values for created_at/updated_at in edit mode
|
|
const createdAtValue =
|
|
props.type === 'edit' && event?.created_at
|
|
? event.created_at
|
|
: new Date().toISOString();
|
|
const updatedAtValue =
|
|
props.type === 'edit' && event?.updated_at
|
|
? event.updated_at
|
|
: new Date().toISOString();
|
|
|
|
// Format date for display
|
|
const createdAtDisplay = new Date(createdAtValue).toLocaleDateString();
|
|
const updatedAtDisplay = new Date(updatedAtValue).toLocaleDateString();
|
|
|
|
if (props.type === 'edit' && isLoading) return <div>Loading...</div>;
|
|
if (props.type === 'edit' && fetchError)
|
|
return <div>Error loading event.</div>;
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={calendarOpen} onOpenChange={setCalendarOpen}>
|
|
<form className='flex flex-col gap-5 w-full' onSubmit={handleSubmit}>
|
|
<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 max-sm:w-full'>
|
|
<LabeledInput
|
|
type='text'
|
|
label='Event Name'
|
|
placeholder={
|
|
props.type === 'create' ? 'New Event' : 'Event Name'
|
|
}
|
|
name='eventName'
|
|
variantSize='big'
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className='w-0 sm:w-[50px]'></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>
|
|
<TimePicker
|
|
dateLabel='start Time'
|
|
timeLabel=' '
|
|
date={startDate}
|
|
setDate={setStartDate}
|
|
time={startTime}
|
|
setTime={setStartTime}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<TimePicker
|
|
dateLabel='end Time'
|
|
timeLabel=' '
|
|
date={endDate}
|
|
setDate={setEndDate}
|
|
time={endTime}
|
|
setTime={setEndTime}
|
|
/>
|
|
</div>
|
|
<div className='w-54'>
|
|
<LabeledInput
|
|
type='text'
|
|
label='Location'
|
|
placeholder='where is the event?'
|
|
name='eventLocation'
|
|
value={location}
|
|
onChange={(e) => setLocation(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col gap-4'>
|
|
<div className='flex flex-row gap-2'>
|
|
<Label className='w-[70px]'>created:</Label>
|
|
<Label className='text-[var(--color-neutral-300)]'>
|
|
{createdAtDisplay}
|
|
</Label>
|
|
</div>
|
|
<div className='flex flex-row gap-2'>
|
|
<Label className='w-[70px]'>updated:</Label>
|
|
<p className='text-[var(--color-neutral-300)]'>
|
|
{updatedAtDisplay}
|
|
</p>
|
|
</div>
|
|
</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-4'>
|
|
<div className='h-full w-full'>
|
|
<div className='flex flex-row gap-2'>
|
|
<Label>Organiser:</Label>
|
|
<Label className='text-[var(--color-neutral-300)]'>
|
|
{organiserValue}
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
<div className='h-full w-full'>
|
|
<LabeledInput
|
|
type='text'
|
|
label='Event Description'
|
|
placeholder='What is the event about?'
|
|
name='eventDescription'
|
|
variantSize='textarea'
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
></LabeledInput>
|
|
</div>
|
|
</div>
|
|
<div className='h-full w-full'>
|
|
<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),
|
|
);
|
|
}}
|
|
/>
|
|
<DialogTrigger asChild>
|
|
<Button variant='primary'>Calendar</Button>
|
|
</DialogTrigger>
|
|
<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}
|
|
user={user}
|
|
status='PENDING'
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
|
|
<div className='w-[20%] grid max-sm:w-[40%]'>
|
|
<Button
|
|
type='button'
|
|
variant='secondary'
|
|
onClick={() => {
|
|
router.back();
|
|
console.log('user aborted - no change in database');
|
|
}}
|
|
>
|
|
cancel
|
|
</Button>
|
|
</div>
|
|
<div className='w-[20%] grid max-sm:w-[40%]'>
|
|
<Button
|
|
type='submit'
|
|
variant='primary'
|
|
disabled={status === 'pending'}
|
|
>
|
|
{status === 'pending' ? 'Saving...' : 'save event'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{isSuccess && <p>Event created!</p>}
|
|
{error && <p className='text-red-500'>Error: {error.message}</p>}
|
|
</div>
|
|
</form>
|
|
<DialogContent className='sm:max-w-[750px]'>
|
|
<DialogHeader>
|
|
<DialogTitle>Calendar</DialogTitle>
|
|
<DialogDescription>
|
|
Calendar for selected participants
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter className='max-w-[calc(100svw-70px)]'>
|
|
<Calendar
|
|
userId={selectedParticipants.map((u) => u.id)}
|
|
additionalEvents={[
|
|
{
|
|
id: 'temp-event',
|
|
title: title || 'New Event',
|
|
start: startDate ? new Date(startDate) : new Date(),
|
|
end: endDate ? new Date(endDate) : new Date(),
|
|
type: 'event',
|
|
userId: 'create-event',
|
|
colorOverride: '#ff9800',
|
|
},
|
|
]}
|
|
height='600px'
|
|
/>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EventForm;
|