feat(event): setting user status
This commit is contained in:
parent
6231d6cd45
commit
79c526d4b1
6 changed files with 77 additions and 23 deletions
|
@ -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>
|
||||
|
|
|
@ -17,10 +17,6 @@ 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';
|
||||
//import {
|
||||
// generateColor,
|
||||
// generateSecondaryColor,
|
||||
//} from '@marko19907/string-to-color';
|
||||
|
||||
moment.updateLocale('en', {
|
||||
week: {
|
||||
|
@ -29,21 +25,18 @@ moment.updateLocale('en', {
|
|||
},
|
||||
});
|
||||
|
||||
function eventPropGetter() {
|
||||
// event: {
|
||||
// id: string;
|
||||
// start: Date;
|
||||
// end: Date;
|
||||
// type: UserCalendarSchemaItem['type'];
|
||||
// userId?: string;
|
||||
// }
|
||||
function eventPropGetter(event: {
|
||||
id: string;
|
||||
start: Date;
|
||||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}) {
|
||||
return {
|
||||
// style: {
|
||||
// backgroundColor: generateColor(event.userId || 'defaultColor', {
|
||||
// saturation: 0.7,
|
||||
// lightness: 0.5,
|
||||
// }),
|
||||
// },
|
||||
style: event.colorOverride
|
||||
? { backgroundColor: event.colorOverride }
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -79,6 +72,7 @@ export default function Calendar({
|
|||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}[];
|
||||
className?: string;
|
||||
}) {
|
||||
|
@ -143,6 +137,7 @@ function CalendarWithUserEvents({
|
|||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}[];
|
||||
className?: string;
|
||||
}) {
|
||||
|
@ -238,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;
|
||||
|
@ -308,6 +303,7 @@ function CalendarWithMultiUserEvents({
|
|||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}[];
|
||||
className?: string;
|
||||
}) {
|
||||
|
@ -398,6 +394,7 @@ function CalendarWithoutUserEvents({
|
|||
end: Date;
|
||||
type: UserCalendarSchemaItem['type'];
|
||||
userId?: string;
|
||||
colorOverride?: string;
|
||||
}[];
|
||||
className?: string;
|
||||
}) {
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
];
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -374,6 +374,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
end: endDate ? new Date(endDate) : new Date(),
|
||||
type: 'event',
|
||||
userId: 'create-event',
|
||||
colorOverride: '#ff9800',
|
||||
},
|
||||
]}
|
||||
height='600px'
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue