Merge pull request 'feat(event): display user calendars on event creation and edit pages' (#115)
Reviewed-on: #115 Reviewed-by: Maximilian Liebmann <lima@noreply.git.dominikstahl.dev>
This commit is contained in:
commit
a1568e455f
15 changed files with 677 additions and 342 deletions
|
|
@ -30,6 +30,7 @@
|
|||
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@hookform/resolvers": "^5.0.1",
|
||||
"@marko19907/string-to-color": "^1.0.0",
|
||||
"@prisma/client": "^6.9.0",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-collapsible": "^1.1.11",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export default function Home() {
|
|||
<div className='w-full sm:w-[90%]'>
|
||||
<Calendar
|
||||
userId={data?.data.user?.id}
|
||||
height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
|
||||
height='calc(100svh - 115px - (var(--spacing) * 2 * 5))'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
@ -57,6 +72,9 @@ export const GET = auth(async function GET(req, { params }) {
|
|||
gte: start,
|
||||
},
|
||||
},
|
||||
status: {
|
||||
not: 'DECLINED',
|
||||
},
|
||||
},
|
||||
orderBy: {
|
||||
meeting: {
|
||||
|
|
@ -64,6 +82,7 @@ export const GET = auth(async function GET(req, { params }) {
|
|||
},
|
||||
},
|
||||
select: {
|
||||
user_id: true,
|
||||
meeting: {
|
||||
select: {
|
||||
id: true,
|
||||
|
|
@ -136,6 +155,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 +173,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 +242,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 +250,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(
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import '@/components/react-big-calendar.css';
|
|||
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
|
||||
import CustomToolbar from '@/components/custom-toolbar';
|
||||
import React from 'react';
|
||||
import { useGetApiUserUserCalendar } from '@/generated/api/user/user';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { usePatchApiEventEventID } from '@/generated/api/event/event';
|
||||
import { useSession } from 'next-auth/react';
|
||||
|
|
@ -17,6 +16,7 @@ import { ErrorBoundary } from 'react-error-boundary';
|
|||
import { Button } from '@/components/ui/button';
|
||||
import { fromZodIssue } from 'zod-validation-error/v4';
|
||||
import type { $ZodIssue } from 'zod/v4/core';
|
||||
import { useGetApiCalendar } from '@/generated/api/calendar/calendar';
|
||||
|
||||
moment.updateLocale('en', {
|
||||
week: {
|
||||
|
|
@ -25,12 +25,28 @@ moment.updateLocale('en', {
|
|||
},
|
||||
});
|
||||
|
||||
function eventPropGetter(event: {
|
||||
id: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}) {
|
||||
return {
|
||||
style: event.colorOverride
|
||||
? { backgroundColor: event.colorOverride }
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
const DaDRBCalendar = withDragAndDrop<
|
||||
{
|
||||
id: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
},
|
||||
{
|
||||
id: string;
|
||||
|
|
@ -44,9 +60,21 @@ const localizer = momentLocalizer(moment);
|
|||
export default function Calendar({
|
||||
userId,
|
||||
height,
|
||||
additionalEvents = [],
|
||||
className,
|
||||
}: {
|
||||
userId?: string;
|
||||
userId?: string | string[];
|
||||
height: string;
|
||||
additionalEvents?: {
|
||||
id: string;
|
||||
title: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}[];
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<QueryErrorResetBoundary>
|
||||
|
|
@ -67,10 +95,26 @@ export default function Calendar({
|
|||
</div>
|
||||
)}
|
||||
>
|
||||
{userId ? (
|
||||
<CalendarWithUserEvents userId={userId} height={height} />
|
||||
{typeof userId === 'string' ? (
|
||||
<CalendarWithUserEvents
|
||||
userId={userId}
|
||||
height={height}
|
||||
additionalEvents={additionalEvents}
|
||||
className={className}
|
||||
/>
|
||||
) : Array.isArray(userId) && userId.length > 0 ? (
|
||||
<CalendarWithMultiUserEvents
|
||||
userIds={userId}
|
||||
height={height}
|
||||
additionalEvents={additionalEvents}
|
||||
className={className}
|
||||
/>
|
||||
) : (
|
||||
<CalendarWithoutUserEvents height={height} />
|
||||
<CalendarWithoutUserEvents
|
||||
height={height}
|
||||
additionalEvents={additionalEvents}
|
||||
className={className}
|
||||
/>
|
||||
)}
|
||||
</ErrorBoundary>
|
||||
)}
|
||||
|
|
@ -81,9 +125,21 @@ export default function Calendar({
|
|||
function CalendarWithUserEvents({
|
||||
userId,
|
||||
height,
|
||||
additionalEvents,
|
||||
className,
|
||||
}: {
|
||||
userId: string;
|
||||
height: string;
|
||||
additionalEvents?: {
|
||||
id: string;
|
||||
title: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}[];
|
||||
className?: string;
|
||||
}) {
|
||||
const sesstion = useSession();
|
||||
const [currentView, setCurrentView] = React.useState<
|
||||
|
|
@ -92,9 +148,9 @@ function CalendarWithUserEvents({
|
|||
const [currentDate, setCurrentDate] = React.useState<Date>(new Date());
|
||||
const router = useRouter();
|
||||
|
||||
const { data, refetch, error, isError } = useGetApiUserUserCalendar(
|
||||
userId,
|
||||
const { data, refetch, error, isError } = useGetApiCalendar(
|
||||
{
|
||||
userIds: [userId, userId + '_blocked'],
|
||||
start: moment(currentDate)
|
||||
.startOf(
|
||||
currentView === 'agenda'
|
||||
|
|
@ -137,6 +193,8 @@ function CalendarWithUserEvents({
|
|||
|
||||
return (
|
||||
<DaDRBCalendar
|
||||
className={className}
|
||||
eventPropGetter={eventPropGetter}
|
||||
localizer={localizer}
|
||||
culture='de-DE'
|
||||
defaultView='week'
|
||||
|
|
@ -152,15 +210,17 @@ function CalendarWithUserEvents({
|
|||
onNavigate={(date) => {
|
||||
setCurrentDate(date);
|
||||
}}
|
||||
events={
|
||||
data?.data.calendar.map((event) => ({
|
||||
events={[
|
||||
...(data?.data.calendar.map((event) => ({
|
||||
id: event.id,
|
||||
title: event.type === 'event' ? event.title : 'Blocker',
|
||||
start: new Date(event.start_time),
|
||||
end: new Date(event.end_time),
|
||||
type: event.type,
|
||||
})) ?? []
|
||||
}
|
||||
userId: event.users[0],
|
||||
})) ?? []),
|
||||
...(additionalEvents ?? []),
|
||||
]}
|
||||
onSelectEvent={(event) => {
|
||||
router.push(`/events/${event.id}`);
|
||||
}}
|
||||
|
|
@ -173,7 +233,7 @@ function CalendarWithUserEvents({
|
|||
resourceTitleAccessor={(event) => event.title}
|
||||
startAccessor={(event) => event.start}
|
||||
endAccessor={(event) => event.end}
|
||||
selectable={sesstion.data?.user?.id === userId}
|
||||
selectable={sesstion.data?.user?.id === userId && !additionalEvents}
|
||||
onEventDrop={(event) => {
|
||||
const { start, end, event: droppedEvent } = event;
|
||||
if (droppedEvent.type === 'blocked_private') return;
|
||||
|
|
@ -228,7 +288,116 @@ function CalendarWithUserEvents({
|
|||
);
|
||||
}
|
||||
|
||||
function CalendarWithoutUserEvents({ height }: { height: string }) {
|
||||
function CalendarWithMultiUserEvents({
|
||||
userIds,
|
||||
height,
|
||||
additionalEvents,
|
||||
className,
|
||||
}: {
|
||||
userIds: string[];
|
||||
height: string;
|
||||
additionalEvents?: {
|
||||
id: string;
|
||||
title: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}[];
|
||||
className?: string;
|
||||
}) {
|
||||
const [currentView, setCurrentView] = React.useState<
|
||||
'month' | 'week' | 'day' | 'agenda' | 'work_week'
|
||||
>('week');
|
||||
const [currentDate, setCurrentDate] = React.useState<Date>(new Date());
|
||||
|
||||
const { data, error, isError } = useGetApiCalendar(
|
||||
{
|
||||
userIds: userIds,
|
||||
start: moment(currentDate)
|
||||
.startOf(
|
||||
currentView === 'agenda'
|
||||
? 'month'
|
||||
: currentView === 'work_week'
|
||||
? 'week'
|
||||
: currentView,
|
||||
)
|
||||
.toISOString(),
|
||||
end: moment(currentDate)
|
||||
.endOf(
|
||||
currentView === 'agenda'
|
||||
? 'month'
|
||||
: currentView === 'work_week'
|
||||
? 'week'
|
||||
: currentView,
|
||||
)
|
||||
.toISOString(),
|
||||
},
|
||||
{
|
||||
query: {
|
||||
refetchOnWindowFocus: true,
|
||||
refetchOnReconnect: true,
|
||||
refetchOnMount: true,
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (isError) {
|
||||
throw error.response?.data || 'Failed to fetch calendar data';
|
||||
}
|
||||
|
||||
return (
|
||||
<DaDRBCalendar
|
||||
className={className}
|
||||
eventPropGetter={eventPropGetter}
|
||||
localizer={localizer}
|
||||
culture='de-DE'
|
||||
defaultView='week'
|
||||
components={{
|
||||
toolbar: CustomToolbar,
|
||||
}}
|
||||
style={{
|
||||
height: height,
|
||||
}}
|
||||
onView={setCurrentView}
|
||||
view={currentView}
|
||||
date={currentDate}
|
||||
onNavigate={(date) => {
|
||||
setCurrentDate(date);
|
||||
}}
|
||||
events={[
|
||||
...(data?.data.calendar.map((event) => ({
|
||||
id: event.id,
|
||||
title: event.type === 'event' ? event.title : 'Blocker',
|
||||
start: new Date(event.start_time),
|
||||
end: new Date(event.end_time),
|
||||
type: event.type,
|
||||
userId: event.users[0],
|
||||
})) ?? []),
|
||||
...(additionalEvents ?? []),
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarWithoutUserEvents({
|
||||
height,
|
||||
additionalEvents,
|
||||
className,
|
||||
}: {
|
||||
height: string;
|
||||
additionalEvents?: {
|
||||
id: string;
|
||||
title: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}[];
|
||||
className?: string;
|
||||
}) {
|
||||
const [currentView, setCurrentView] = React.useState<
|
||||
'month' | 'week' | 'day' | 'agenda' | 'work_week'
|
||||
>('week');
|
||||
|
|
@ -236,6 +405,8 @@ function CalendarWithoutUserEvents({ height }: { height: string }) {
|
|||
|
||||
return (
|
||||
<DaDRBCalendar
|
||||
className={className}
|
||||
eventPropGetter={eventPropGetter}
|
||||
localizer={localizer}
|
||||
culture='de-DE'
|
||||
defaultView='week'
|
||||
|
|
@ -251,6 +422,7 @@ function CalendarWithoutUserEvents({ height }: { height: string }) {
|
|||
onNavigate={(date) => {
|
||||
setCurrentDate(date);
|
||||
}}
|
||||
events={additionalEvents}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,11 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-toolbar .navigation-controls .handleWeek {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.custom-toolbar .navigation-controls button {
|
||||
padding: 8px 12px;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ import {
|
|||
const items = [
|
||||
{
|
||||
title: 'Calendar',
|
||||
url: '#',
|
||||
url: '/home',
|
||||
icon: CalendarDays,
|
||||
},
|
||||
{
|
||||
|
|
@ -52,7 +52,7 @@ const items = [
|
|||
},
|
||||
{
|
||||
title: 'Events',
|
||||
url: '#',
|
||||
url: '/events',
|
||||
icon: CalendarClock,
|
||||
},
|
||||
];
|
||||
|
|
@ -75,7 +75,7 @@ export function AppSidebar() {
|
|||
className='group-data-[collapsible=]:hidden group-data-[mobile=true]/mobile:hidden'
|
||||
></Logo>
|
||||
</SidebarHeader>
|
||||
<SidebarContent className='grid grid-rows-[auto_1fr_auto]'>
|
||||
<SidebarContent className='grid grid-rows-[auto_1fr_auto] overflow-hidden'>
|
||||
<Collapsible defaultOpen className='group/collapsible'>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel asChild>
|
||||
|
|
@ -114,7 +114,7 @@ export function AppSidebar() {
|
|||
<SidebarFooter>
|
||||
<SidebarMenuItem className='pl-[8px]'>
|
||||
<Link
|
||||
href='/event/new'
|
||||
href='/events/new'
|
||||
className='flex items-center gap-2 text-xl font-label'
|
||||
>
|
||||
<CalendarPlus className='size-8' />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
'use client';
|
||||
|
||||
import { Card } from '@/components/ui/card';
|
||||
import Logo from '@/components/misc/logo';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import Link from 'next/link';
|
||||
import zod from 'zod/v4';
|
||||
import { EventSchema } from '@/app/api/event/validation';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '../ui/select';
|
||||
import { usePatchApiEventEventIDParticipantUser } from '@/generated/api/event-participant/event-participant';
|
||||
|
||||
type EventListEntryProps = zod.output<typeof EventSchema>;
|
||||
|
||||
|
|
@ -13,7 +24,11 @@ export default function EventListEntry({
|
|||
start_time,
|
||||
end_time,
|
||||
location,
|
||||
participants,
|
||||
}: EventListEntryProps) {
|
||||
const session = useSession();
|
||||
const updateAttendance = usePatchApiEventEventIDParticipantUser();
|
||||
|
||||
const formatDate = (isoString?: string) => {
|
||||
if (!isoString) return '-';
|
||||
return new Date(isoString).toLocaleDateString();
|
||||
|
|
@ -60,6 +75,45 @@ export default function EventListEntry({
|
|||
<Label>{location}</Label>
|
||||
</div>
|
||||
)}
|
||||
{participants &&
|
||||
participants.some(
|
||||
(p) => p.user.id === session.data?.user?.id,
|
||||
) && (
|
||||
<div className='flex items-center justify-end'>
|
||||
<Select
|
||||
defaultValue={
|
||||
participants
|
||||
.find((p) => p.user.id === session.data?.user?.id)
|
||||
?.status.toUpperCase() || 'PENDING'
|
||||
}
|
||||
onValueChange={(value) => {
|
||||
updateAttendance.mutate({
|
||||
eventID: id,
|
||||
user: session.data?.user?.id || '',
|
||||
data: {
|
||||
status: value as
|
||||
| 'ACCEPTED'
|
||||
| 'TENTATIVE'
|
||||
| 'DECLINED'
|
||||
| 'PENDING',
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger id='language'>
|
||||
<SelectValue placeholder='Select status' />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value='ACCEPTED'>Attending</SelectItem>
|
||||
<SelectItem value='TENTATIVE'>Maybe Attending</SelectItem>
|
||||
<SelectItem value='DECLINED'>Not Attending</SelectItem>
|
||||
<SelectItem value='PENDING' disabled>
|
||||
Pending Response
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ type ParticipantListEntryProps = zod.output<typeof ParticipantSchema>;
|
|||
|
||||
export default function ParticipantListEntry({
|
||||
user,
|
||||
status,
|
||||
}: ParticipantListEntryProps) {
|
||||
const { resolvedTheme } = useTheme();
|
||||
const defaultImage =
|
||||
|
|
@ -21,6 +22,7 @@ export default function ParticipantListEntry({
|
|||
<div className='flex items-center gap-2 py-1 ml-5'>
|
||||
<Image src={finalImageSrc} alt='Avatar' width={30} height={30} />
|
||||
<span>{user.name}</span>
|
||||
<span className='text-sm text-gray-500'>{status}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,16 @@ import { useSearchParams } from 'next/navigation';
|
|||
|
||||
import zod from 'zod/v4';
|
||||
import { PublicUserSchema } from '@/app/api/user/validation';
|
||||
import Calendar from '@/components/calendar';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '../ui/dialog';
|
||||
|
||||
type User = zod.output<typeof PublicUserSchema>;
|
||||
|
||||
|
|
@ -68,6 +78,8 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
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) {
|
||||
|
|
@ -194,149 +206,183 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
return <div>Error loading event.</div>;
|
||||
|
||||
return (
|
||||
<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>
|
||||
<>
|
||||
<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='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 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'>
|
||||
<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),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<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 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>
|
||||
</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 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>
|
||||
<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>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
17
yarn.lock
17
yarn.lock
|
|
@ -1013,6 +1013,15 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@marko19907/string-to-color@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "@marko19907/string-to-color@npm:1.0.0"
|
||||
dependencies:
|
||||
esm-seedrandom: "npm:^3.0.5"
|
||||
checksum: 10c0/fd297937fb5a8a0c3372bc614f9a4e21842e3392ef54e0d323f0fe730ec5b5a441f921e63b3b151bd39ca64a120ddfe905d1a67ca62ed637ade69c96c55fe641
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@napi-rs/wasm-runtime@npm:^0.2.11":
|
||||
version: 0.2.11
|
||||
resolution: "@napi-rs/wasm-runtime@npm:0.2.11"
|
||||
|
|
@ -5717,6 +5726,13 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"esm-seedrandom@npm:^3.0.5":
|
||||
version: 3.0.5
|
||||
resolution: "esm-seedrandom@npm:3.0.5"
|
||||
checksum: 10c0/6fe5a33f31bce0e733814df884cdfc27812e4b04ce973f7cf008b7b8500ecab6706f54591841bd12dd3bdd9bbb153abf04fb8efd4934a5b0ab273bff114cdb3b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"espree@npm:^10.0.1, espree@npm:^10.4.0":
|
||||
version: 10.4.0
|
||||
resolution: "espree@npm:10.4.0"
|
||||
|
|
@ -7683,6 +7699,7 @@ __metadata:
|
|||
"@fortawesome/free-solid-svg-icons": "npm:^6.7.2"
|
||||
"@fortawesome/react-fontawesome": "npm:^0.2.2"
|
||||
"@hookform/resolvers": "npm:^5.0.1"
|
||||
"@marko19907/string-to-color": "npm:^1.0.0"
|
||||
"@prisma/client": "npm:^6.9.0"
|
||||
"@radix-ui/react-avatar": "npm:^1.1.10"
|
||||
"@radix-ui/react-collapsible": "npm:^1.1.11"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue