Open event details in a modal
This commit is contained in:
Bruno Bernardino
@@ -26,9 +26,19 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
|
||||
const isImportExportOptionsDropdownOpen = useSignal<boolean>(false);
|
||||
const calendarEvents = useSignal<CalendarEvent[]>(initialCalendarEvents);
|
||||
const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
|
||||
const openEvent = useSignal<CalendarEvent | null>(null);
|
||||
|
||||
const dateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long' });
|
||||
const hourFormat = new Intl.DateTimeFormat('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit' });
|
||||
const eventDateFormat = new Intl.DateTimeFormat('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
const allDayEventDateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
const today = new Date().toISOString().substring(0, 10);
|
||||
|
||||
function onClickAddEvent() {
|
||||
@@ -111,6 +121,8 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
|
||||
// }
|
||||
|
||||
isDeleting.value = false;
|
||||
|
||||
openEvent.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -501,6 +513,22 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
|
||||
</section>
|
||||
|
||||
<section class='mx-auto max-w-7xl my-8'>
|
||||
{view === 'day'
|
||||
? (
|
||||
<section>
|
||||
TODO: Build day view
|
||||
</section>
|
||||
)
|
||||
: null}
|
||||
{view === 'week'
|
||||
? (
|
||||
<section>
|
||||
TODO: Build week view
|
||||
</section>
|
||||
)
|
||||
: null}
|
||||
{view === 'month'
|
||||
? (
|
||||
<section>
|
||||
<section class='shadow-md lg:flex lg:flex-auto lg:flex-col rounded-md'>
|
||||
<section class='grid grid-cols-7 gap-px border-b border-slate-500 bg-slate-700 text-center text-xs font-semibold text-white lg:flex-none rounded-t-md'>
|
||||
@@ -579,11 +607,12 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
|
||||
{[...dayEvents].slice(0, 2).map((dayEvent) => (
|
||||
<li class='mb-1'>
|
||||
<a
|
||||
href='#'
|
||||
href='javascript:void(0);'
|
||||
class={`flex px-2 py-0 rounded-md hover:no-underline hover:opacity-60 ${
|
||||
visibleCalendars.find((calendar) => calendar.id === dayEvent.calendar_id)
|
||||
?.color || 'bg-gray-700'
|
||||
}`}
|
||||
onClick={() => openEvent.value = dayEvent}
|
||||
>
|
||||
<time
|
||||
datetime={new Date(dayEvent.start_date).toISOString()}
|
||||
@@ -601,8 +630,9 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
|
||||
? (
|
||||
<li class='mb-1'>
|
||||
<a
|
||||
href='#'
|
||||
class='flex bg-purple-600 px-2 py-0 rounded-md hover:no-underline hover:bg-purple-500'
|
||||
href={`/calendar/view=day&startDate=${shortIsoDate}`}
|
||||
class='flex bg-gray-700 px-2 py-0 rounded-md hover:no-underline hover:opacity-60'
|
||||
target='_blank'
|
||||
>
|
||||
<p class='flex-auto truncate font-medium text-white'>
|
||||
...{dayEvents.length - 2} more event{dayEvents.length - 2 === 1 ? '' : 's'}
|
||||
@@ -622,6 +652,8 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
)
|
||||
: null}
|
||||
|
||||
<span
|
||||
class={`flex justify-end items-center text-sm mt-1 mx-2 text-slate-100`}
|
||||
@@ -656,6 +688,60 @@ export default function MainCalendar({ initialCalendars, initialCalendarEvents,
|
||||
<code class='bg-slate-600 mx-2 px-2 py-1 rounded-md'>{baseUrl}/dav/principals/</code>{' '}
|
||||
<code class='bg-slate-600 mx-2 px-2 py-1 rounded-md'>{baseUrl}/dav/calendars/</code>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class={`fixed ${openEvent.value ? 'block' : 'hidden'} z-40 w-screen h-screen inset-0 bg-gray-900 bg-opacity-60`}
|
||||
>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class={`fixed ${
|
||||
openEvent.value ? 'block' : 'hidden'
|
||||
} z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 bg-slate-600 text-white rounded-md px-8 py-6 space-y-5 drop-shadow-lg`}
|
||||
>
|
||||
<h1 class='text-2xl font-semibold'>{openEvent.value?.title || ''}</h1>
|
||||
<header class='py-5 border-t border-b border-slate-500 font-semibold flex justify-between'>
|
||||
<span>
|
||||
{openEvent.value?.start_date ? allDayEventDateFormat.format(new Date(openEvent.value.start_date)) : ''}
|
||||
</span>
|
||||
{openEvent.value?.is_all_day ? <span>All-day</span> : (
|
||||
<span>
|
||||
{openEvent.value?.start_date ? hourFormat.format(new Date(openEvent.value.start_date)) : ''} -{' '}
|
||||
{openEvent.value?.end_date ? hourFormat.format(new Date(openEvent.value.end_date)) : ''}
|
||||
</span>
|
||||
)}
|
||||
</header>
|
||||
{openEvent.value?.extra.description
|
||||
? (
|
||||
<section class='py-5 border-b border-slate-500'>
|
||||
<p>{openEvent.value.extra.description}</p>
|
||||
</section>
|
||||
)
|
||||
: null}
|
||||
<section class='py-5 border-b border-slate-500'>
|
||||
<p>TODO: location, calendar, recurrence, reminders</p>
|
||||
</section>
|
||||
<footer class='flex justify-between'>
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-red-600 text-white cursor-pointer rounded-md'
|
||||
onClick={() => onClickDeleteEvent(openEvent.value?.id || '')}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<a
|
||||
href={`/calendar/events/${openEvent.value?.id}`}
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
<button
|
||||
class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
|
||||
onClick={() => openEvent.value = null}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
10
lib/types.ts
10
lib/types.ts
@@ -147,7 +147,6 @@ export interface Calendar {
|
||||
created_at: Date;
|
||||
}
|
||||
|
||||
// NOTE: I don't really invite people to events in my private calendars, so I don't think I'll need that complexity
|
||||
// TODO: Finish (more fields)
|
||||
export interface CalendarEvent {
|
||||
id: string;
|
||||
@@ -162,8 +161,17 @@ export interface CalendarEvent {
|
||||
extra: {
|
||||
description?: string;
|
||||
location?: string;
|
||||
attendees?: CalendarEventAttendee[];
|
||||
visibility: 'default' | 'public' | 'private';
|
||||
is_recurring?: boolean;
|
||||
recurring_rrule?: string;
|
||||
};
|
||||
updated_at: Date;
|
||||
created_at: Date;
|
||||
}
|
||||
|
||||
export interface CalendarEventAttendee {
|
||||
email: string;
|
||||
status: 'accepted' | 'rejected' | 'invited';
|
||||
name?: string;
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@ async function getCalendarEvents(userId: string, calendarIds: string[]): Promise
|
||||
{
|
||||
id: 'event-2',
|
||||
user_id: userId,
|
||||
calendar_id: 'personal-1',
|
||||
calendar_id: 'family-1',
|
||||
revision: 'fake-rev',
|
||||
title: 'Dermatologist',
|
||||
start_date: new Date('2024-03-17T16:30:00.000Z'),
|
||||
@@ -83,6 +83,22 @@ async function getCalendarEvents(userId: string, calendarIds: string[]): Promise
|
||||
updated_at: new Date(),
|
||||
created_at: new Date(),
|
||||
},
|
||||
{
|
||||
id: 'event-4',
|
||||
user_id: userId,
|
||||
calendar_id: 'personal-1',
|
||||
revision: 'fake-rev',
|
||||
title: 'Schedule server updates',
|
||||
start_date: new Date('2024-03-18T09:00:00.000Z'),
|
||||
end_date: new Date('2024-03-18T21:00:00.000Z'),
|
||||
is_all_day: true,
|
||||
status: 'scheduled',
|
||||
extra: {
|
||||
visibility: 'default',
|
||||
},
|
||||
updated_at: new Date(),
|
||||
created_at: new Date(),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -101,7 +117,7 @@ export const handler: Handlers<Data, FreshContextState> = {
|
||||
|
||||
const searchParams = new URL(request.url).searchParams;
|
||||
|
||||
const view = (searchParams.get('view') as Data['view']) || 'week';
|
||||
const view = (searchParams.get('view') as Data['view']) || 'month';
|
||||
const startDate = searchParams.get('startDate') || new Date().toISOString().substring(0, 10);
|
||||
|
||||
const userCalendars = await getCalendars(context.state.user.id);
|
||||
|
||||
Reference in New Issue
Block a user