@meith/plugin-calendar 0.29.1 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/plugin-calendar",
-  "version": "0.29.1",
+  "version": "0.30.1",
   "description": "A shared calendar: events the community can see, linked to the threads that discuss them.",
   "license": "MIT",
   "repository": {
@@ -20,7 +20,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/plugin-kit": "^0.29.1"
+    "@meith/plugin-kit": "^0.30.1"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/access.ts

@@ -20,10 +20,9 @@ export function mayAdd(input: {
   return input.organisers.includes(input.userId) ? 'allowed' : 'not-an-organiser'
 }
 
-export function mayDelete(input: {
+export function mayManage(input: {
   readonly userId: number | null
   readonly createdByUserId: number | null
-  readonly config: CalendarConfig
   readonly organisers: readonly number[]
 }): boolean {
   if (input.userId === null) return false

package/src/definition.tsx

@@ -3,8 +3,10 @@ import { definePlugin } from '@meith/plugin-kit'
 import {
   handleAddOrganiser,
   handleCreateEvent,
+  handleDeleteEvent,
   handleEventIcs,
   handleRemoveOrganiser,
+  handleUpdateEvent,
 } from './handlers'
 import en from './messages/en.json'
 import { CALENDAR_MIGRATIONS } from './schema'
@@ -18,7 +20,7 @@ export const calendarPlugin = definePlugin({
   key: 'calendar',
   name: en['calendar.definition.name'],
   nameKey: 'calendar.definition.name',
-  version: '0.29.1',
+  version: '0.30.1',
   description: en['calendar.definition.description'],
   descriptionKey: 'calendar.definition.description',
   apiVersion: '0',
@@ -74,6 +76,20 @@ export const calendarPlugin = definePlugin({
       rateLimit: ADD_RATE_LIMIT,
       handler: handleCreateEvent,
     },
+    {
+      path: 'events/update',
+      method: 'POST',
+      access: 'member',
+      rateLimit: ADD_RATE_LIMIT,
+      handler: handleUpdateEvent,
+    },
+    {
+      path: 'events/delete',
+      method: 'POST',
+      access: 'member',
+      rateLimit: ADD_RATE_LIMIT,
+      handler: handleDeleteEvent,
+    },
     {
       path: 'events/ics',
       method: 'GET',

package/src/handlers.ts

@@ -1,9 +1,17 @@
 import type { PluginRequest, PluginResponse, PluginRuntimeContext } from '@meith/plugin-kit'
 
-import { mayAdd, resolveCalendarConfig } from './access'
-import { readDraft } from './events'
+import { mayAdd, mayManage, resolveCalendarConfig } from './access'
+import { type CalendarEvent, readDraft } from './events'
 import { ICS_CONTENT_TYPE, toIcs } from './ics'
-import { addOrganiser, createEvent, eventById, organiserIds, removeOrganiser } from './store'
+import {
+  addOrganiser,
+  createEvent,
+  deleteEvent,
+  eventById,
+  organiserIds,
+  removeOrganiser,
+  updateEvent,
+} from './store'
 
 export const CALENDAR_PATH = '/plugins/calendar'
 
@@ -38,6 +46,56 @@ export async function handleCreateEvent(
   return seeCalendar()
 }
 
+async function manageableEvent(
+  request: PluginRequest,
+  context: PluginRuntimeContext,
+): Promise<{ event: CalendarEvent } | { refusal: PluginResponse }> {
+  const id = request.form?.id?.trim() ?? ''
+  if (!/^\d+$/.test(id)) return { refusal: refused(400, 'id-required') }
+
+  const event = await eventById(context.data, id)
+  if (event === null) return { refusal: refused(404, 'no-such-event') }
+
+  const allowed = mayManage({
+    userId: request.viewer.userId,
+    createdByUserId: event.createdByUserId,
+    organisers: await organiserIds(context.data),
+  })
+  if (!allowed) return { refusal: refused(403, 'not-yours') }
+
+  return { event }
+}
+
+export async function handleUpdateEvent(
+  request: PluginRequest,
+  context: PluginRuntimeContext,
+): Promise<PluginResponse> {
+  const form = request.form
+  if (form === null) return refused(400, 'form-required')
+
+  const found = await manageableEvent(request, context)
+  if ('refusal' in found) return found.refusal
+
+  const { draft, problems } = readDraft(form)
+  if (draft === null) return refused(400, problems.join(','))
+
+  await updateEvent(context.data, found.event.id, draft)
+  return seeCalendar()
+}
+
+export async function handleDeleteEvent(
+  request: PluginRequest,
+  context: PluginRuntimeContext,
+): Promise<PluginResponse> {
+  if (request.form === null) return refused(400, 'form-required')
+
+  const found = await manageableEvent(request, context)
+  if ('refusal' in found) return found.refusal
+
+  await deleteEvent(context.data, found.event.id)
+  return seeCalendar()
+}
+
 export async function handleEventIcs(
   request: PluginRequest,
   context: PluginRuntimeContext,

package/src/messages/en.json

@@ -8,14 +8,19 @@
   "calendar.definition.name": "Calendar",
   "calendar.error.notAnOrganiser": "Only an organiser may add an event to this calendar.",
   "calendar.event.add": "Add event",
+  "calendar.event.cancel": "Cancel",
+  "calendar.event.delete": "Delete",
   "calendar.event.discuss": "Discussion",
   "calendar.event.download": "Add to your calendar",
+  "calendar.event.edit": "Edit",
+  "calendar.event.editTitle": "Edit event",
   "calendar.event.link": "Link",
   "calendar.event.linkFallback": "Open link",
   "calendar.event.linkHint": "An https:// address people should open — a video call, a ticket page.",
   "calendar.event.linkText": "Link text",
   "calendar.event.linkTextHint": "What the link should say — “Join online”, “Get tickets”.",
   "calendar.event.location": "Location",
+  "calendar.event.save": "Save changes",
   "calendar.event.starts": "Starts",
   "calendar.event.thread": "Thread link or id",
   "calendar.event.title": "Title",

package/src/store.ts

@@ -53,6 +53,25 @@ export async function createEvent(
   )
 }
 
+export async function updateEvent(data: PluginData, id: string, draft: EventDraft): Promise<void> {
+  await data.query(
+    `update plugin_calendar_event
+        set title = $2, starts_at = $3, ends_at = $4, location = $5, thread_id = $6,
+            link_url = $7, link_label = $8
+      where id = $1`,
+    [
+      id,
+      draft.title,
+      draft.startsAt,
+      draft.endsAt,
+      draft.location,
+      draft.threadId,
+      draft.linkUrl,
+      draft.linkLabel,
+    ],
+  )
+}
+
 export async function upcomingEvents(
   data: PluginData,
   limit: number,

package/src/ui/page.tsx

@@ -6,7 +6,7 @@ import {
   pluginTabClass,
 } from '@meith/plugin-kit'
 
-import { mayAdd, resolveCalendarConfig } from '../access'
+import { mayAdd, mayManage, resolveCalendarConfig } from '../access'
 import {
   type CalendarEvent,
   dayParts,
@@ -16,7 +16,7 @@ import {
   relativeHint,
 } from '../events'
 import en from '../messages/en.json'
-import { organiserIds, pastEvents, upcomingEvents } from '../store'
+import { eventById, organiserIds, pastEvents, upcomingEvents } from '../store'
 import { EventLink } from './event-link'
 
 export const UPCOMING_LIMIT = 50
@@ -45,11 +45,13 @@ function EventRow({
   locale,
   now,
   context,
+  manageable,
 }: {
   event: CalendarEvent
   locale: string
   now: Date
   context: PluginPageContext
+  manageable: boolean
 }) {
   const href = eventHref(event)
 
@@ -67,7 +69,7 @@ function EventRow({
           {event.location !== '' && <span> · {event.location}</span>}
         </p>
 
-        <p className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
           <span className="text-muted-foreground">{relativeHint(event.startsAt, now, locale)}</span>
           {href !== null && (
             <a className="underline underline-offset-2" href={href}>
@@ -80,7 +82,23 @@ function EventRow({
           >
             {translated(context, 'calendar.event.download')}
           </a>
-        </p>
+          {manageable && (
+            <>
+              <a
+                className="underline underline-offset-2"
+                href={`/plugins/calendar?edit=${event.id}`}
+              >
+                {translated(context, 'calendar.event.edit')}
+              </a>
+              <form method="post" action="/api/plugins/calendar/events/delete">
+                <input type="hidden" name="id" value={event.id} />
+                <button type="submit" className="underline underline-offset-2">
+                  {translated(context, 'calendar.event.delete')}
+                </button>
+              </form>
+            </>
+          )}
+        </div>
 
         <EventLink event={event} label={translated(context, 'calendar.event.linkFallback')} />
       </div>
@@ -93,11 +111,13 @@ function Agenda({
   locale,
   now,
   context,
+  organisers,
 }: {
   events: readonly CalendarEvent[]
   locale: string
   now: Date
   context: PluginPageContext
+  organisers: readonly number[]
 }) {
   return (
     <div className="flex flex-col gap-6">
@@ -108,7 +128,18 @@ function Agenda({
           </h2>
           <ul className="divide-border divide-y">
             {month.events.map((event) => (
-              <EventRow key={event.id} event={event} locale={locale} now={now} context={context} />
+              <EventRow
+                key={event.id}
+                event={event}
+                locale={locale}
+                now={now}
+                context={context}
+                manageable={mayManage({
+                  userId: context.viewer.userId,
+                  createdByUserId: event.createdByUserId,
+                  organisers,
+                })}
+              />
             ))}
           </ul>
         </section>
@@ -117,31 +148,76 @@ function Agenda({
   )
 }
 
-function AddForm({ context }: { context: PluginPageContext }) {
+function toDateTimeInput(date: Date | null): string {
+  return date === null ? '' : date.toISOString().slice(0, 16)
+}
+
+function EventForm({
+  context,
+  event,
+}: {
+  context: PluginPageContext
+  event: CalendarEvent | null
+}) {
+  const action =
+    event === null ? '/api/plugins/calendar/events' : '/api/plugins/calendar/events/update'
+  const heading = translated(
+    context,
+    event === null ? 'calendar.event.add' : 'calendar.event.editTitle',
+  )
+  const submit = translated(context, event === null ? 'calendar.event.add' : 'calendar.event.save')
+
   return (
-    <form method="post" action="/api/plugins/calendar/events" className={PLUGIN_CARD}>
-      <h2 className="font-semibold">{translated(context, 'calendar.event.add')}</h2>
+    <form method="post" action={action} className={PLUGIN_CARD}>
+      <h2 className="font-semibold">{heading}</h2>
+      {event !== null && <input type="hidden" name="id" value={event.id} />}
 
       <div className="grid gap-3 sm:grid-cols-2">
         <label className="flex flex-col gap-1 text-sm sm:col-span-2">
           {translated(context, 'calendar.event.title')}
-          <input name="title" required maxLength={120} className="rounded border p-1.5" />
+          <input
+            name="title"
+            required
+            maxLength={120}
+            defaultValue={event?.title ?? ''}
+            className="rounded border p-1.5"
+          />
         </label>
         <label className="flex flex-col gap-1 text-sm">
           {translated(context, 'calendar.event.starts')}
-          <input name="starts_at" type="datetime-local" required className="rounded border p-1.5" />
+          <input
+            name="starts_at"
+            type="datetime-local"
+            required
+            defaultValue={toDateTimeInput(event?.startsAt ?? null)}
+            className="rounded border p-1.5"
+          />
         </label>
         <label className="flex flex-col gap-1 text-sm">
           {translated(context, 'calendar.event.until')}
-          <input name="ends_at" type="datetime-local" className="rounded border p-1.5" />
+          <input
+            name="ends_at"
+            type="datetime-local"
+            defaultValue={toDateTimeInput(event?.endsAt ?? null)}
+            className="rounded border p-1.5"
+          />
         </label>
         <label className="flex flex-col gap-1 text-sm">
           {translated(context, 'calendar.event.location')}
-          <input name="location" maxLength={120} className="rounded border p-1.5" />
+          <input
+            name="location"
+            maxLength={120}
+            defaultValue={event?.location ?? ''}
+            className="rounded border p-1.5"
+          />
         </label>
         <label className="flex flex-col gap-1 text-sm">
           {translated(context, 'calendar.event.thread')}
-          <input name="thread" className="rounded border p-1.5" />
+          <input
+            name="thread"
+            defaultValue={event?.threadId == null ? '' : String(event.threadId)}
+            className="rounded border p-1.5"
+          />
         </label>
         <label className="flex flex-col gap-1 text-sm">
           {translated(context, 'calendar.event.link')}
@@ -150,6 +226,7 @@ function AddForm({ context }: { context: PluginPageContext }) {
             type="url"
             maxLength={500}
             placeholder="https://"
+            defaultValue={event?.linkUrl ?? ''}
             className="rounded border p-1.5"
           />
           <span className="text-muted-foreground text-xs">
@@ -158,16 +235,28 @@ function AddForm({ context }: { context: PluginPageContext }) {
         </label>
         <label className="flex flex-col gap-1 text-sm">
           {translated(context, 'calendar.event.linkText')}
-          <input name="link_text" maxLength={40} className="rounded border p-1.5" />
+          <input
+            name="link_text"
+            maxLength={40}
+            defaultValue={event?.linkLabel ?? ''}
+            className="rounded border p-1.5"
+          />
           <span className="text-muted-foreground text-xs">
             {translated(context, 'calendar.event.linkTextHint')}
           </span>
         </label>
       </div>
 
-      <button type="submit" className="bg-muted self-start rounded border px-3 py-1.5 text-sm">
-        {translated(context, 'calendar.event.add')}
-      </button>
+      <div className="flex items-center gap-3">
+        <button type="submit" className="bg-muted rounded border px-3 py-1.5 text-sm">
+          {submit}
+        </button>
+        {event !== null && (
+          <a className="text-sm underline underline-offset-2" href="/plugins/calendar">
+            {translated(context, 'calendar.event.cancel')}
+          </a>
+        )}
+      </div>
     </form>
   )
 }
@@ -187,6 +276,22 @@ export async function CalendarPage(context: PluginPageContext) {
 
   const verdict = mayAdd({ userId: context.viewer.userId, config, organisers })
 
+  const editId = context.query.edit?.trim() ?? ''
+  let editing: CalendarEvent | null = null
+  if (/^\d+$/.test(editId)) {
+    const found = await eventById(context.data, editId).catch(() => null)
+    if (
+      found !== null &&
+      mayManage({
+        userId: context.viewer.userId,
+        createdByUserId: found.createdByUserId,
+        organisers,
+      })
+    ) {
+      editing = found
+    }
+  }
+
   return (
     <div className="flex flex-col gap-6">
       <nav aria-label={translated(context, 'calendar.page.views')}>
@@ -217,12 +322,24 @@ export async function CalendarPage(context: PluginPageContext) {
           {translated(context, showingPast ? 'calendar.page.emptyPast' : 'calendar.page.empty')}
         </p>
       ) : (
-        <Agenda events={events} locale={context.locale} now={now} context={context} />
+        <Agenda
+          events={events}
+          locale={context.locale}
+          now={now}
+          context={context}
+          organisers={organisers}
+        />
       )}
 
-      {!showingPast && verdict === 'allowed' && <AddForm context={context} />}
-      {!showingPast && verdict === 'not-an-organiser' && (
-        <p className={PLUGIN_NOTE}>{translated(context, 'calendar.error.notAnOrganiser')}</p>
+      {editing !== null ? (
+        <EventForm context={context} event={editing} />
+      ) : (
+        <>
+          {!showingPast && verdict === 'allowed' && <EventForm context={context} event={null} />}
+          {!showingPast && verdict === 'not-an-organiser' && (
+            <p className={PLUGIN_NOTE}>{translated(context, 'calendar.error.notAnOrganiser')}</p>
+          )}
+        </>
       )}
     </div>
   )