Allow updating events

components/calendar/ViewEventModal.tsx

@@ -94,8 +94,9 @@ export default function ViewEventModal(
             Delete
           </button>
           <a
-            href={`/calendar/events/${calendarEvent.id}`}
+            href={`/calendar/${calendarEvent.id}`}
             class='px-5 py-2 bg-slate-600 hover:bg-slate-500 text-white cursor-pointer rounded-md'
+            target='_blank'
           >
             Edit
           </a>

fresh.gen.ts

@@ -24,6 +24,7 @@ import * as $api_news_import_feeds from './routes/api/news/import-feeds.tsx';
 import * as $api_news_mark_read from './routes/api/news/mark-read.tsx';
 import * as $api_news_refresh_articles from './routes/api/news/refresh-articles.tsx';
 import * as $calendar from './routes/calendar.tsx';
+import * as $calendar_calendarEventId_ from './routes/calendar/[calendarEventId].tsx';
 import * as $calendars from './routes/calendars.tsx';
 import * as $contacts from './routes/contacts.tsx';
 import * as $contacts_contactId_ from './routes/contacts/[contactId].tsx';
@@ -48,6 +49,7 @@ import * as $signup from './routes/signup.tsx';
 import * as $Settings from './islands/Settings.tsx';
 import * as $calendar_CalendarWrapper from './islands/calendar/CalendarWrapper.tsx';
 import * as $calendar_Calendars from './islands/calendar/Calendars.tsx';
+import * as $calendar_ViewCalendarEvent from './islands/calendar/ViewCalendarEvent.tsx';
 import * as $contacts_Contacts from './islands/contacts/Contacts.tsx';
 import * as $contacts_ViewContact from './islands/contacts/ViewContact.tsx';
 import * as $dashboard_Links from './islands/dashboard/Links.tsx';
@@ -80,6 +82,7 @@ const manifest = {
     './routes/api/news/mark-read.tsx': $api_news_mark_read,
     './routes/api/news/refresh-articles.tsx': $api_news_refresh_articles,
     './routes/calendar.tsx': $calendar,
+    './routes/calendar/[calendarEventId].tsx': $calendar_calendarEventId_,
     './routes/calendars.tsx': $calendars,
     './routes/contacts.tsx': $contacts,
     './routes/contacts/[contactId].tsx': $contacts_contactId_,
@@ -106,6 +109,7 @@ const manifest = {
     './islands/Settings.tsx': $Settings,
     './islands/calendar/CalendarWrapper.tsx': $calendar_CalendarWrapper,
     './islands/calendar/Calendars.tsx': $calendar_Calendars,
+    './islands/calendar/ViewCalendarEvent.tsx': $calendar_ViewCalendarEvent,
     './islands/contacts/Contacts.tsx': $contacts_Contacts,
     './islands/contacts/ViewContact.tsx': $contacts_ViewContact,
     './islands/dashboard/Links.tsx': $dashboard_Links,

islands/calendar/ViewCalendarEvent.tsx

@@ -0,0 +1,207 @@
+import { useSignal } from '@preact/signals';
+
+import { Calendar, CalendarEvent } from '/lib/types.ts';
+import { capitalizeWord, convertObjectToFormData } from '/lib/utils.ts';
+import { FormField, generateFieldHtml } from '/lib/form-utils.tsx';
+import {
+  RequestBody as DeleteRequestBody,
+  ResponseBody as DeleteResponseBody,
+} from '/routes/api/calendar/delete-event.tsx';
+
+interface ViewCalendarEventProps {
+  initialCalendarEvent: CalendarEvent;
+  calendars: Calendar[];
+  formData: Record<string, any>;
+  error?: string;
+  notice?: string;
+}
+
+export function formFields(calendarEvent: CalendarEvent, calendars: Calendar[]) {
+  const fields: FormField[] = [
+    {
+      name: 'title',
+      label: 'Title',
+      type: 'text',
+      placeholder: 'Dentis',
+      value: calendarEvent.title,
+      required: true,
+    },
+    {
+      name: 'calendar_id',
+      label: 'Calendar',
+      type: 'select',
+      value: calendarEvent.calendar_id,
+      options: calendars.map((calendar) => ({ label: calendar.name, value: calendar.id })),
+      required: true,
+    },
+    {
+      name: 'start_date',
+      label: 'Start date',
+      type: 'datetime-local',
+      value: new Date(calendarEvent.start_date).toISOString().substring(0, 16),
+      required: true,
+    },
+    {
+      name: 'end_date',
+      label: 'End date',
+      type: 'datetime-local',
+      value: new Date(calendarEvent.end_date).toISOString().substring(0, 16),
+      required: true,
+    },
+    {
+      name: 'is_all_day',
+      label: 'All-day?',
+      type: 'checkbox',
+      placeholder: 'YYYYMMDD',
+      value: 'true',
+      required: false,
+      checked: calendarEvent.is_all_day,
+    },
+    {
+      name: 'status',
+      label: 'Status',
+      type: 'select',
+      value: calendarEvent.status,
+      options: (['scheduled', 'pending', 'canceled'] as CalendarEvent['status'][]).map((status) => ({
+        label: capitalizeWord(status),
+        value: status,
+      })),
+      required: true,
+    },
+    {
+      name: 'description',
+      label: 'Description',
+      type: 'textarea',
+      placeholder: 'Just a regular check-up.',
+      value: calendarEvent.extra.description,
+      required: false,
+    },
+    {
+      name: 'url',
+      label: 'URL',
+      type: 'url',
+      placeholder: 'https://example.com',
+      value: calendarEvent.extra.url,
+      required: false,
+    },
+    {
+      name: 'location',
+      label: 'Location',
+      type: 'text',
+      placeholder: 'Birmingham, UK',
+      value: calendarEvent.extra.location,
+      required: false,
+    },
+    // TODO: More fields, transparency, attendees, recurrence
+  ];
+
+  return fields;
+}
+
+export default function viewCalendarEvent(
+  { initialCalendarEvent, calendars, formData: formDataObject, error, notice }: ViewCalendarEventProps,
+) {
+  const isDeleting = useSignal<boolean>(false);
+  const calendarEvent = useSignal<CalendarEvent>(initialCalendarEvent);
+
+  const formData = convertObjectToFormData(formDataObject);
+
+  async function onClickDeleteEvent() {
+    if (confirm('Are you sure you want to delete this event?')) {
+      if (isDeleting.value) {
+        return;
+      }
+
+      isDeleting.value = true;
+
+      try {
+        const requestBody: DeleteRequestBody = {
+          calendarIds: calendars.map((calendar) => calendar.id),
+          calendarView: 'day',
+          calendarStartDate: new Date().toISOString().substring(0, 10),
+          calendarEventId: calendarEvent.value.id,
+          calendarId: calendarEvent.value.calendar_id,
+        };
+        const response = await fetch(`/api/calendar/delete-event`, {
+          method: 'POST',
+          body: JSON.stringify(requestBody),
+        });
+        const result = await response.json() as DeleteResponseBody;
+
+        if (!result.success) {
+          throw new Error('Failed to delete event!');
+        }
+
+        window.location.href = '/calendar';
+      } catch (error) {
+        console.error(error);
+      }
+
+      isDeleting.value = false;
+    }
+  }
+
+  return (
+    <>
+      <section class='flex flex-row items-center justify-between mb-4'>
+        <a href='/calendar' class='mr-2'>View calendar</a>
+        <section class='flex items-center'>
+          <button
+            class='inline-block justify-center gap-x-1.5 rounded-md bg-red-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-600 ml-2'
+            type='button'
+            title='Delete event'
+            onClick={() => onClickDeleteEvent()}
+          >
+            <img
+              src='/images/delete.svg'
+              alt='Delete event'
+              class={`white ${isDeleting.value ? 'animate-spin' : ''}`}
+              width={20}
+              height={20}
+            />
+          </button>
+        </section>
+      </section>
+
+      <section class='mx-auto max-w-7xl my-8'>
+        {error
+          ? (
+            <section class='notification-error'>
+              <h3>Failed to update!</h3>
+              <p>{error}</p>
+            </section>
+          )
+          : null}
+        {notice
+          ? (
+            <section class='notification-success'>
+              <h3>Success!</h3>
+              <p>{notice}</p>
+            </section>
+          )
+          : null}
+
+        <form method='POST' class='mb-12'>
+          {formFields(calendarEvent.peek(), calendars).map((field) => generateFieldHtml(field, formData))}
+
+          <section class='flex justify-end mt-8 mb-4'>
+            <button class='button' type='submit'>Update event</button>
+          </section>
+        </form>
+
+        <span
+          class={`flex justify-end items-center text-sm mt-1 mx-2 text-slate-100`}
+        >
+          {isDeleting.value
+            ? (
+              <>
+                <img src='/images/loading.svg' class='white mr-2' width={18} height={18} />Deleting...
+              </>
+            )
+            : null}
+          {!isDeleting.value ? <>&nbsp;</> : null}
+        </span>
+      </section>
+    </>
+  );
+}

lib/data/calendar.ts

@@ -46,12 +46,11 @@ export async function getCalendarEvents(
   }
 }
 
-export async function getCalendarEvent(id: string, calendarId: string, userId: string): Promise<CalendarEvent> {
+export async function getCalendarEvent(id: string, userId: string): Promise<CalendarEvent> {
   const calendarEvents = await db.query<CalendarEvent>(
-    sql`SELECT * FROM "bewcloud_calendar_events" WHERE "id" = $1 AND "calendar_id" = $2 AND "user_id" = $3 LIMIT 1`,
+    sql`SELECT * FROM "bewcloud_calendar_events" WHERE "id" = $1 AND "user_id" = $2 LIMIT 1`,
     [
       id,
-      calendarId,
       userId,
     ],
   );
@@ -221,6 +220,56 @@ export async function createCalendarEvent(
   return newCalendar;
 }
 
+export async function updateCalendarEvent(calendarEvent: CalendarEvent, oldCalendarId?: string) {
+  const revision = crypto.randomUUID();
+
+  const user = await getUserById(calendarEvent.user_id);
+
+  if (!user) {
+    throw new Error('User not found');
+  }
+
+  const calendar = await getCalendar(calendarEvent.calendar_id, user.id);
+
+  if (!calendar) {
+    throw new Error('Calendar not found');
+  }
+
+  const oldCalendar = oldCalendarId ? await getCalendar(oldCalendarId, user.id) : null;
+
+  await db.query(
+    sql`UPDATE "bewcloud_calendar_events" SET
+        "revision" = $3,
+        "calendar_id" = $4,
+        "title" = $5,
+        "start_date" = $6,
+        "end_date" = $7,
+        "is_all_day" = $8,
+        "status" = $9,
+        "extra" = $10,
+        "updated_at" = now()
+      WHERE "id" = $1 AND "revision" = $2`,
+    [
+      calendarEvent.id,
+      calendarEvent.revision,
+      revision,
+      calendarEvent.calendar_id,
+      calendarEvent.title,
+      calendarEvent.start_date,
+      calendarEvent.end_date,
+      calendarEvent.is_all_day,
+      calendarEvent.status,
+      JSON.stringify(calendarEvent.extra),
+    ],
+  );
+
+  await updateCalendarRevision(calendar);
+
+  if (oldCalendar) {
+    await updateCalendarRevision(oldCalendar);
+  }
+}
+
 export async function deleteCalendarEvent(id: string, calendarId: string, userId: string) {
   const calendar = await getCalendar(calendarId, userId);
 

lib/form-utils.tsx

@@ -11,6 +11,7 @@ export interface FormField {
     | 'tel'
     | 'url'
     | 'date'
+    | 'datetime-local'
     | 'number'
     | 'range'
     | 'select'

routes/api/calendar/delete-event.tsx

@@ -42,11 +42,10 @@ export const handler: Handlers<Data, FreshContextState> = {
 
     const calendarEvent = await getCalendarEvent(
       requestBody.calendarEventId,
-      requestBody.calendarId,
       context.state.user.id,
     );
 
-    if (!calendarEvent) {
+    if (!calendarEvent || requestBody.calendarId !== calendarEvent.calendar_id) {
       return new Response('Not Found', { status: 404 });
     }
 

routes/calendar/[calendarEventId].tsx

@@ -0,0 +1,120 @@
+import { Handlers, PageProps } from 'fresh/server.ts';
+
+import { Calendar, CalendarEvent, FreshContextState } from '/lib/types.ts';
+import { convertFormDataToObject } from '/lib/utils.ts';
+import { getCalendarEvent, getCalendars, updateCalendarEvent } from '/lib/data/calendar.ts';
+import { getFormDataField } from '/lib/form-utils.tsx';
+import ViewCalendarEvent, { formFields } from '/islands/calendar/ViewCalendarEvent.tsx';
+
+interface Data {
+  calendarEvent: CalendarEvent;
+  calendars: Calendar[];
+  error?: string;
+  notice?: string;
+  formData: Record<string, any>;
+}
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async GET(request, context) {
+    if (!context.state.user) {
+      return new Response('Redirect', { status: 303, headers: { 'Location': `/login` } });
+    }
+
+    const { calendarEventId } = context.params;
+
+    const calendarEvent = await getCalendarEvent(calendarEventId, context.state.user.id);
+
+    if (!calendarEvent) {
+      return new Response('Not found', { status: 404 });
+    }
+
+    const calendars = await getCalendars(context.state.user.id);
+
+    return await context.render({ calendarEvent, calendars, formData: {} });
+  },
+  async POST(request, context) {
+    if (!context.state.user) {
+      return new Response('Redirect', { status: 303, headers: { 'Location': `/login` } });
+    }
+
+    const { calendarEventId } = context.params;
+
+    const calendarEvent = await getCalendarEvent(calendarEventId, context.state.user.id);
+
+    if (!calendarEvent) {
+      return new Response('Not found', { status: 404 });
+    }
+
+    const calendars = await getCalendars(context.state.user.id);
+
+    const formData = await request.formData();
+
+    calendarEvent.title = getFormDataField(formData, 'title');
+    calendarEvent.start_date = new Date(getFormDataField(formData, 'start_date'));
+    calendarEvent.end_date = new Date(getFormDataField(formData, 'end_date'));
+    calendarEvent.is_all_day = getFormDataField(formData, 'is_all_day') === 'true';
+    calendarEvent.status = getFormDataField(formData, 'status') as CalendarEvent['status'];
+
+    calendarEvent.extra.description = getFormDataField(formData, 'description') || undefined;
+    calendarEvent.extra.url = getFormDataField(formData, 'url') || undefined;
+    calendarEvent.extra.location = getFormDataField(formData, 'location') || undefined;
+
+    const newCalendarId = getFormDataField(formData, 'calendar_id');
+    let oldCalendarId: string | undefined;
+
+    if (newCalendarId !== calendarEvent.calendar_id) {
+      oldCalendarId = calendarEvent.calendar_id;
+    }
+
+    calendarEvent.calendar_id = newCalendarId;
+
+    // TODO: More fields, transparency, attendees, recurrence
+
+    try {
+      if (!calendarEvent.title) {
+        throw new Error(`Title is required.`);
+      }
+
+      formFields(calendarEvent, calendars).forEach((field) => {
+        if (field.required) {
+          const value = formData.get(field.name);
+
+          if (!value) {
+            throw new Error(`${field.label} is required`);
+          }
+        }
+      });
+
+      await updateCalendarEvent(calendarEvent, oldCalendarId);
+
+      return await context.render({
+        calendarEvent,
+        calendars,
+        notice: 'Event updated successfully!',
+        formData: convertFormDataToObject(formData),
+      });
+    } catch (error) {
+      console.error(error);
+      return await context.render({
+        calendarEvent,
+        calendars,
+        error: error.toString(),
+        formData: convertFormDataToObject(formData),
+      });
+    }
+  },
+};
+
+export default function ContactsPage({ data }: PageProps<Data, FreshContextState>) {
+  return (
+    <main>
+      <ViewCalendarEvent
+        initialCalendarEvent={data.calendarEvent}
+        calendars={data.calendars}
+        formData={data.formData}
+        error={data.error}
+        notice={data.notice}
+      />
+    </main>
+  );
+}

routes/dav/calendars/[calendarId]/[calendarEventId].ics.tsx

@@ -83,7 +83,7 @@ export const handler: Handler<Data, FreshContextState> = async (request, context
   }
 
   try {
-    calendarEvent = await getCalendarEvent(calendarEventId, calendarId, context.state.user.id);
+    calendarEvent = await getCalendarEvent(calendarEventId, context.state.user.id);
   } catch (error) {
     console.error(error);
   }