feat(event): display user calendars on event creation and edit pages
This commit is contained in:
parent
2e31d935a6
commit
6231d6cd45
12 changed files with 615 additions and 337 deletions
|
@ -70,169 +70,167 @@ export default function ShowEvent() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='flex flex-col items-center justify-center h-screen'>
|
||||
<Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
|
||||
<CardHeader className='p-0 m-0 gap-0' />
|
||||
<Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] mx-auto'>
|
||||
<CardHeader className='p-0 m-0 gap-0' />
|
||||
|
||||
<CardContent>
|
||||
<div className='flex flex-col gap-5 w-full'>
|
||||
<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 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>
|
||||
<CardContent>
|
||||
<div className='flex flex-col gap-5 w-full'>
|
||||
<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='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
|
||||
<div>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
start Time
|
||||
</Label>
|
||||
<Label size='large'>
|
||||
{event.start_time
|
||||
? `${formatDate(event.start_time)} ${formatTime(event.start_time)}`
|
||||
: '-'}
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
end Time
|
||||
</Label>
|
||||
<Label size='large'>
|
||||
{event.end_time
|
||||
? `${formatDate(event.end_time)} ${formatTime(event.end_time)}`
|
||||
: '-'}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='w-54'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Location
|
||||
</Label>
|
||||
<Label size='large'>{event.location || '-'}</Label>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px] text-[var(--color-neutral-300)]'>
|
||||
created:
|
||||
</Label>
|
||||
<Label>
|
||||
{event.created_at ? formatDate(event.created_at) : '-'}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px] text-[var(--color-neutral-300)]'>
|
||||
updated:
|
||||
</Label>
|
||||
<Label>
|
||||
{event.updated_at ? formatDate(event.updated_at) : '-'}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
<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='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 sm:gap-8'>
|
||||
<div className='h-full w-full'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='text-[var(--color-neutral-300)]'>
|
||||
Organiser:
|
||||
</Label>
|
||||
<Label size='large'>{organiserName}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Description
|
||||
</Label>
|
||||
<Label size='large'>{event.description || '-'}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<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} {...user} />
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
start Time
|
||||
</Label>
|
||||
<Label size='large'>
|
||||
{event.start_time
|
||||
? `${formatDate(event.start_time)} ${formatTime(event.start_time)}`
|
||||
: '-'}
|
||||
</Label>
|
||||
</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 ? (
|
||||
<Dialog
|
||||
open={deleteDialogOpen}
|
||||
onOpenChange={setDeleteDialogOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant='destructive' className='w-full'>
|
||||
delete
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Event</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete the event “
|
||||
{event.title}”? This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant='secondary'
|
||||
onClick={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant='muted'
|
||||
onClick={() => {
|
||||
deleteEvent.mutate(
|
||||
{ eventID: event.id },
|
||||
{
|
||||
onSuccess: () => {
|
||||
router.push('/home');
|
||||
toast.custom((t) => (
|
||||
<ToastInner
|
||||
toastId={t}
|
||||
title='Event deleted'
|
||||
description={event?.title}
|
||||
variant='success'
|
||||
/>
|
||||
));
|
||||
},
|
||||
},
|
||||
);
|
||||
setDeleteDialogOpen(false);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : null}
|
||||
<div>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
end Time
|
||||
</Label>
|
||||
<Label size='large'>
|
||||
{event.end_time
|
||||
? `${formatDate(event.end_time)} ${formatTime(event.end_time)}`
|
||||
: '-'}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='w-54'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Location
|
||||
</Label>
|
||||
<Label size='large'>{event.location || '-'}</Label>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px] text-[var(--color-neutral-300)]'>
|
||||
created:
|
||||
</Label>
|
||||
<Label>
|
||||
{event.created_at ? formatDate(event.created_at) : '-'}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='w-[20%] grid max-sm:w-full'>
|
||||
{session.data?.user?.id === event.organizer.id ? (
|
||||
<RedirectButton
|
||||
redirectUrl={`/events/edit/${eventID}`}
|
||||
buttonText='edit'
|
||||
className='w-full'
|
||||
/>
|
||||
) : null}
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px] text-[var(--color-neutral-300)]'>
|
||||
updated:
|
||||
</Label>
|
||||
<Label>
|
||||
{event.updated_at ? formatDate(event.updated_at) : '-'}
|
||||
</Label>
|
||||
</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 sm:gap-8'>
|
||||
<div className='h-full w-full'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='text-[var(--color-neutral-300)]'>
|
||||
Organiser:
|
||||
</Label>
|
||||
<Label size='large'>{organiserName}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Description
|
||||
</Label>
|
||||
<Label size='large'>{event.description || '-'}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<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} {...user} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</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 ? (
|
||||
<Dialog
|
||||
open={deleteDialogOpen}
|
||||
onOpenChange={setDeleteDialogOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant='destructive' className='w-full'>
|
||||
delete
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Event</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete the event “
|
||||
{event.title}”? This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant='secondary'
|
||||
onClick={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant='muted'
|
||||
onClick={() => {
|
||||
deleteEvent.mutate(
|
||||
{ eventID: event.id },
|
||||
{
|
||||
onSuccess: () => {
|
||||
router.push('/home');
|
||||
toast.custom((t) => (
|
||||
<ToastInner
|
||||
toastId={t}
|
||||
title='Event deleted'
|
||||
description={event?.title}
|
||||
variant='success'
|
||||
/>
|
||||
));
|
||||
},
|
||||
},
|
||||
);
|
||||
setDeleteDialogOpen(false);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : null}
|
||||
</div>
|
||||
<div className='w-[20%] grid max-sm:w-full'>
|
||||
{session.data?.user?.id === event.organizer.id ? (
|
||||
<RedirectButton
|
||||
redirectUrl={`/events/edit/${eventID}`}
|
||||
buttonText='edit'
|
||||
className='w-full'
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -9,16 +9,14 @@ export default async function Page({
|
|||
}) {
|
||||
const eventID = (await params).eventID;
|
||||
return (
|
||||
<div className='flex flex-col items-center justify-center h-screen'>
|
||||
<Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
|
||||
<CardHeader className='p-0 m-0 gap-0' />
|
||||
<Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] mx-auto'>
|
||||
<CardHeader className='p-0 m-0 gap-0' />
|
||||
|
||||
<CardContent>
|
||||
<Suspense>
|
||||
<EventForm type='edit' eventId={eventID} />
|
||||
</Suspense>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<CardContent>
|
||||
<Suspense>
|
||||
<EventForm type='edit' eventId={eventID} />
|
||||
</Suspense>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -15,7 +15,7 @@ import {
|
|||
} from '@/app/api/validation';
|
||||
import { z } from 'zod/v4';
|
||||
|
||||
export const GET = auth(async function GET(req, { params }) {
|
||||
export const GET = auth(async function GET(req) {
|
||||
const authCheck = userAuthenticated(req);
|
||||
if (!authCheck.continue)
|
||||
return returnZodTypeCheckedResponse(
|
||||
|
@ -24,7 +24,22 @@ export const GET = auth(async function GET(req, { params }) {
|
|||
authCheck.metadata,
|
||||
);
|
||||
|
||||
const dataRaw = Object.fromEntries(new URL(req.url).searchParams);
|
||||
const dataRaw: Record<string, string | string[]> = {};
|
||||
for (const [key, value] of req.nextUrl.searchParams.entries()) {
|
||||
if (key.endsWith('[]')) {
|
||||
const cleanKey = key.slice(0, -2);
|
||||
if (!dataRaw[cleanKey]) {
|
||||
dataRaw[cleanKey] = [];
|
||||
}
|
||||
if (Array.isArray(dataRaw[cleanKey])) {
|
||||
(dataRaw[cleanKey] as string[]).push(value);
|
||||
} else {
|
||||
dataRaw[cleanKey] = [dataRaw[cleanKey] as string, value];
|
||||
}
|
||||
} else {
|
||||
dataRaw[key] = value;
|
||||
}
|
||||
}
|
||||
const data = await userCalendarQuerySchema.safeParseAsync(dataRaw);
|
||||
if (!data.success)
|
||||
return returnZodTypeCheckedResponse(
|
||||
|
@ -36,15 +51,15 @@ export const GET = auth(async function GET(req, { params }) {
|
|||
},
|
||||
{ status: 400 },
|
||||
);
|
||||
const { end, start } = data.data;
|
||||
const { end, start, userIds } = data.data;
|
||||
|
||||
const requestUserId = authCheck.user.id;
|
||||
|
||||
const requestedUserId = (await params).user;
|
||||
|
||||
const requestedUser = await prisma.user.findFirst({
|
||||
const requestedUser = await prisma.user.findMany({
|
||||
where: {
|
||||
id: requestedUserId,
|
||||
id: {
|
||||
in: userIds,
|
||||
},
|
||||
},
|
||||
select: {
|
||||
meetingParts: {
|
||||
|
@ -64,6 +79,7 @@ export const GET = auth(async function GET(req, { params }) {
|
|||
},
|
||||
},
|
||||
select: {
|
||||
user_id: true,
|
||||
meeting: {
|
||||
select: {
|
||||
id: true,
|
||||
|
@ -136,6 +152,7 @@ export const GET = auth(async function GET(req, { params }) {
|
|||
start_time: 'asc',
|
||||
},
|
||||
select: {
|
||||
user_id: true,
|
||||
id: true,
|
||||
reason: true,
|
||||
start_time: true,
|
||||
|
@ -153,46 +170,64 @@ export const GET = auth(async function GET(req, { params }) {
|
|||
if (!requestedUser)
|
||||
return returnZodTypeCheckedResponse(
|
||||
ErrorResponseSchema,
|
||||
{ success: false, message: 'User not found' },
|
||||
{ success: false, message: 'User/s not found' },
|
||||
{ status: 404 },
|
||||
);
|
||||
|
||||
const calendar: z.input<typeof UserCalendarSchema> = [];
|
||||
|
||||
for (const event of requestedUser.meetingParts) {
|
||||
for (const event of requestedUser.map((r) => r.meetingParts).flat()) {
|
||||
if (
|
||||
event.meeting.participants.some((p) => p.user.id === requestUserId) ||
|
||||
event.meeting.organizer_id === requestUserId
|
||||
) {
|
||||
calendar.push({ ...event.meeting, type: 'event' });
|
||||
calendar.push({
|
||||
...event.meeting,
|
||||
type: 'event',
|
||||
users: event.meeting.participants
|
||||
.map((p) => p.user.id)
|
||||
.filter((id) => userIds.includes(id)),
|
||||
});
|
||||
} else {
|
||||
calendar.push({
|
||||
id: event.meeting.id,
|
||||
start_time: event.meeting.start_time,
|
||||
end_time: event.meeting.end_time,
|
||||
type: 'blocked_private',
|
||||
users: event.meeting.participants
|
||||
.map((p) => p.user.id)
|
||||
.filter((id) => userIds.includes(id)),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (const event of requestedUser.meetingsOrg) {
|
||||
for (const event of requestedUser.map((r) => r.meetingsOrg).flat()) {
|
||||
if (
|
||||
event.participants.some((p) => p.user.id === requestUserId) ||
|
||||
event.organizer_id === requestUserId
|
||||
) {
|
||||
calendar.push({ ...event, type: 'event' });
|
||||
calendar.push({
|
||||
...event,
|
||||
type: 'event',
|
||||
users: event.participants
|
||||
.map((p) => p.user.id)
|
||||
.filter((id) => userIds.includes(id)),
|
||||
});
|
||||
} else {
|
||||
calendar.push({
|
||||
id: event.id,
|
||||
start_time: event.start_time,
|
||||
end_time: event.end_time,
|
||||
type: 'blocked_private',
|
||||
users: event.participants
|
||||
.map((p) => p.user.id)
|
||||
.filter((id) => userIds.includes(id)),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
for (const slot of requestedUser.blockedSlots) {
|
||||
if (requestUserId === requestedUserId) {
|
||||
for (const slot of requestedUser.map((r) => r.blockedSlots).flat()) {
|
||||
if (requestUserId === userIds[0] && userIds.length === 1) {
|
||||
calendar.push({
|
||||
start_time: slot.start_time,
|
||||
end_time: slot.end_time,
|
||||
|
@ -204,6 +239,7 @@ export const GET = auth(async function GET(req, { params }) {
|
|||
created_at: slot.created_at,
|
||||
updated_at: slot.updated_at,
|
||||
type: 'blocked_owned',
|
||||
users: [requestUserId],
|
||||
});
|
||||
} else {
|
||||
calendar.push({
|
||||
|
@ -211,6 +247,7 @@ export const GET = auth(async function GET(req, { params }) {
|
|||
end_time: slot.end_time,
|
||||
id: slot.id,
|
||||
type: 'blocked_private',
|
||||
users: [slot.user_id],
|
||||
});
|
||||
}
|
||||
}
|
|
@ -7,17 +7,12 @@ import {
|
|||
userNotFoundResponse,
|
||||
} from '@/lib/defaultApiResponses';
|
||||
import { OpenAPIRegistry } from '@asteasolutions/zod-to-openapi';
|
||||
import zod from 'zod/v4';
|
||||
import { UserIdParamSchema } from '@/app/api/validation';
|
||||
|
||||
export default function registerSwaggerPaths(registry: OpenAPIRegistry) {
|
||||
registry.registerPath({
|
||||
method: 'get',
|
||||
path: '/api/user/{user}/calendar',
|
||||
path: '/api/calendar',
|
||||
request: {
|
||||
params: zod.object({
|
||||
user: UserIdParamSchema,
|
||||
}),
|
||||
query: userCalendarQuerySchema,
|
||||
},
|
||||
responses: {
|
||||
|
@ -32,6 +27,6 @@ export default function registerSwaggerPaths(registry: OpenAPIRegistry) {
|
|||
...notAuthenticatedResponse,
|
||||
...userNotFoundResponse,
|
||||
},
|
||||
tags: ['User'],
|
||||
tags: ['Calendar'],
|
||||
});
|
||||
}
|
|
@ -14,6 +14,8 @@ export const BlockedSlotSchema = zod
|
|||
end_time: eventEndTimeSchema,
|
||||
type: zod.literal('blocked_private'),
|
||||
id: zod.string(),
|
||||
users: zod.string().array(),
|
||||
user_id: zod.string().optional(),
|
||||
})
|
||||
.openapi('BlockedSlotSchema', {
|
||||
description: 'Blocked time slot in the user calendar',
|
||||
|
@ -31,17 +33,21 @@ export const OwnedBlockedSlotSchema = zod
|
|||
created_at: zod.date().nullish(),
|
||||
updated_at: zod.date().nullish(),
|
||||
type: zod.literal('blocked_owned'),
|
||||
users: zod.string().array(),
|
||||
user_id: zod.string().optional(),
|
||||
})
|
||||
.openapi('OwnedBlockedSlotSchema', {
|
||||
description: 'Blocked slot owned by the user',
|
||||
});
|
||||
|
||||
export const VisibleSlotSchema = EventSchema.omit({
|
||||
organizer: true,
|
||||
participants: true,
|
||||
organizer: true,
|
||||
})
|
||||
.extend({
|
||||
type: zod.literal('event'),
|
||||
users: zod.string().array(),
|
||||
user_id: zod.string().optional(),
|
||||
})
|
||||
.openapi('VisibleSlotSchema', {
|
||||
description: 'Visible time slot in the user calendar',
|
||||
|
@ -86,6 +92,7 @@ export const userCalendarQuerySchema = zod
|
|||
);
|
||||
return endOfWeek;
|
||||
}),
|
||||
userIds: zod.string().array(),
|
||||
})
|
||||
.openapi('UserCalendarQuerySchema', {
|
||||
description: 'Query parameters for filtering the user calendar',
|
|
@ -19,7 +19,7 @@ export const GET = auth(async function GET(req) {
|
|||
authCheck.metadata,
|
||||
);
|
||||
|
||||
const dataRaw = Object.fromEntries(new URL(req.url).searchParams);
|
||||
const dataRaw = Object.fromEntries(req.nextUrl.searchParams);
|
||||
const data = await searchUserSchema.safeParseAsync(dataRaw);
|
||||
if (!data.success)
|
||||
return returnZodTypeCheckedResponse(
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue