Saving Changes

<script lang="ts">
  import { Scheduler, type EventInput, type Mutation } from '@sv5ui/scheduler';

  let events = $state<EventInput[]>([/* ... */]);

  // Runs after the change is already on screen. Throw or reject to undo it.
  async function onMutate(mutation: Mutation) {
    const response = await fetch('/api/events', { method: 'POST', body: JSON.stringify(mutation) });
    if (!response.ok) throw new Error(await response.text());
  }
</script>

<Scheduler bind:events {onMutate} onError={(mutation, error) => toast.error(String(error))} />

interface Mutation<T> {
  id: string;                        // 'm1', 'm2', ... unique per scheduler
  kind: 'create' | 'move' | 'resize' | 'update' | 'delete';
  eventId: string;
  before: SchedulerEvent<T> | null;  // null on create
  after: SchedulerEvent<T> | null;   // null on delete
}

// What produces each kind
// create   drag over empty slots, Enter on a slot, a drop from dragSource, createPanel's create()
// move     drag an event to another slot, day or the all-day row
// resize   drag an event's edge
// update   eventPanel's update(changes)
// delete   Delete key, the popover's delete button, eventPanel's remove()

async function onMutate(mutation: Mutation) {
  const response = await fetch('/api/events', { method: 'POST', body: JSON.stringify(mutation) });
  // Any throw or rejection rolls the event back to `before`, with an animation,
  // and calls onError with what was thrown. Later saves queued for the same
  // event are dropped, since they were built on a state that no longer exists.
  if (response.status === 409) throw new Error('Someone else changed this event');
  if (!response.ok) throw new Error(`Save failed: ${response.status}`);
}

function onError(mutation: Mutation, error: unknown) {
  toast.error(`Could not save ${mutation.after?.title ?? mutation.before?.title}`, {
    description: error instanceof Error ? error.message : String(error)
  });
}

// Return the event as the server stored it and the scheduler compares it with
// what it sent. Same event: confirmed. Different: onConflict decides.
async function onMutate(mutation: Mutation): Promise<MutationResult> {
  const response = await fetch('/api/events', { method: 'POST', body: JSON.stringify(mutation) });
  return response.json();   // { id, title, start, end, ... } as EventInput
}

// Compared: id, start, end, title, allDay, calendarId, color, background, editable, resourceId,
// and recurrence field by field. Not compared: data. A server that only touches data is treated as agreeing.

<Scheduler
  bind:events
  {onMutate}
  onConflict={(mutation, server) => {
    // 'keep-server': the calendar takes the server's version, with the same
    //   animation as a rollback, and announces that the event changed elsewhere.
    // 'keep-local': the user's version stands; the server is expected to accept it.
    return server.editable === false ? 'keep-server' : 'keep-local';
  }}
/>

<!-- Without onConflict the server wins -->

// A created event carries a temporary id, 'event-<time>-<n>'. Return the stored
// event with the id your database assigned and the scheduler adopts it: the
// temporary event is removed, the stored one takes its place, and no conflict
// is raised for the id alone.
async function onMutate(mutation: Mutation): Promise<MutationResult> {
  if (mutation.kind === 'create') {
    const saved = await api.create(mutation.after!);   // { id: 'evt_8f3a', ... }
    return saved;
  }
  await api.update(mutation.eventId, mutation.after);
}

// One limit: if the user moves the new event again before the server answers,
// that second save still carries the temporary id. Lock the event until it has
// a real id if your API cannot accept the temporary one.

// Saves to different events run in parallel. Saves to the same event run in
// order, each waiting for the previous one, so a fast second drag never
// overtakes the first. If a save fails, the ones queued behind it for that
// event are dropped.

// This is what makes an optimistic version check safe:
async function onMutate(mutation: Mutation) {
  const version = mutation.before?.data?.version ?? 0;
  const saved = await api.update(mutation.eventId, { ...mutation.after, version });
  return saved;   // carries version + 1 in data; not compared, but written back
}

// A refetch that replaces the array while a save is in flight does not undo the
// save. When the server confirms, the confirmed state is written back into the
// store, and from there into your array.
async function reload() {
  events = await (await fetch('/api/events')).json();
}

// A complete handler against a REST API that stores UTC
async function onMutate(mutation: Mutation<Meeting>): Promise<MutationResult<Meeting>> {
  const { kind, eventId, after } = mutation;
  const body = after && {
    title: after.title,
    start: after.start.toAbsoluteString(),   // '2026-09-16T02:00:00.000Z'
    end: after.end.toAbsoluteString(),
    allDay: after.allDay ?? false,
    calendarId: after.calendarId,
    data: after.data
  };

  switch (kind) {
    case 'create': {
      const response = await fetch('/api/events', { method: 'POST', body: JSON.stringify(body) });
      return response.json();                                 // adopts the server id
    }
    case 'delete':
      await fetch(`/api/events/${eventId}`, { method: 'DELETE' });
      return;
    default: {                                                // move, resize, update
      const response = await fetch(`/api/events/${eventId}`, { method: 'PATCH', body: JSON.stringify(body) });
      return response.json();                                 // compared for conflicts
    }
  }
}

<script lang="ts">
  import { useLocalStorage } from 'sv5ui';
  import { Scheduler, type EventInput } from '@sv5ui/scheduler';

  // Without onMutate every change commits at once. The bound array is the
  // record, so persisting it is enough. After a change its dates are
  // ZonedDateTime values, which JSON would flatten into fields, so write them
  // as strings; the scheduler reads the '...[Asia/Ho_Chi_Minh]' form back.
  const stored = useLocalStorage<EventInput[]>('calendar', [], {
    stringify: (events) =>
      JSON.stringify(events.map((e) => ({ ...e, start: String(e.start), end: String(e.end) })))
  });
</script>

<Scheduler bind:events={stored.current} />