Refactor API types and sync logic

Rename and refactor the types passed over the API to be based on an
entity that's either living or a tombstone.  A living entity has a
deleted property that's either undefined or false, while a tombstone
has a deleted property set to true.  All entities have a numeric id
and an updatedAt timestamp.

To sync entities, an array of replacements are passed around. Living
entities are replaced with tombstones when they're deleted. And
tombstones are replaced with living entities when restored.

components/EventsTable.vue

@@ -1,5 +1,8 @@
 <template>
-	<div>
+	<div v-if="schedule.deleted">
+		Error: Unexpected deleted schedule.
+	</div>
+	<div v-else>
 		<table>
 			<thead>
 				<tr>
@@ -14,7 +17,7 @@
 			<tbody>
 				<template v-if="edit">
 					<tr
-						v-for="event in events"
+						v-for="event in events.filter(e => !e.deleted)"
 						:key="event.id"
 						:class="{ removed: removed.has(event.id) }"
 					>
@@ -52,7 +55,7 @@
 								@click="delEvent(event.id)"
 							>Delete</button>
 							<button
-								v-if="changes.some(c => c.data.id === event.id)"
+								v-if="changes.some(c => c.id === event.id)"
 								type="button"
 								@click="revertEvent(event.id)"
 							>Revert</button>
@@ -95,7 +98,7 @@
 				</template>
 				<template v-else>
 					<tr
-						v-for="event in events"
+						v-for="event in events.filter(e => !e.deleted)"
 						:key="event.id"
 					>
 						<td>{{ event.id }}</td>
@@ -126,9 +129,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { ChangeRecord, ScheduleEvent } from '~/shared/types/schedule';
-import { applyChangeArray } from '~/shared/utils/changes';
+import type { ApiSchedule, ApiScheduleEvent } from '~/shared/types/api';
 import { toId } from '~/shared/utils/functions';
+import { applyUpdatesToArray } from '~/shared/utils/update';
 
 defineProps<{
 	edit?: boolean,
@@ -137,18 +140,18 @@ defineProps<{
 const schedule = await useSchedule();
 const accountStore = useAccountStore();
 
-function canEdit(event: ScheduleEvent) {
-	return event.crew || accountStore.canEditPublic;
+function canEdit(event: ApiScheduleEvent) {
+	return !event.deleted && (event.crew || accountStore.canEditPublic);
 }
 
-const changes = ref<ChangeRecord<ScheduleEvent>[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.op === "del").map(c => c.data.id)));
+const changes = ref<ApiScheduleEvent[]>([]);
+const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
 function replaceChange(
-	change: ChangeRecord<ScheduleEvent>,
-	changes: ChangeRecord<ScheduleEvent>[],
+	change: ApiScheduleEvent,
+	changes: ApiScheduleEvent[],
 ) {
 	const index = changes.findIndex(item => (
-		item.op === change.op && item.data.id === change.data.id
+		item.deleted === change.deleted && item.id === change.id
 	));
 	const copy = [...changes];
 	if (index !== -1)
@@ -157,15 +160,15 @@ function replaceChange(
 		copy.push(change);
 	return copy;
 }
-function revertChange(id: string, changes: ChangeRecord<ScheduleEvent>[]) {
-	return changes.filter(change => change.data.id !== id);
+function revertChange(id: number, changes: ApiScheduleEvent[]) {
+	return changes.filter(change => change.id !== id);
 }
 
 const newEventName = ref("");
 const newEventDescription = ref("");
 const newEventPublic = ref(false);
 function editEvent(
-	event: ScheduleEvent,
+	event: Extract<ApiScheduleEvent, { deleted?: false }>,
 	edits: { name?: string, description?: string, crew?: boolean }
 ) {
 	const copy = { ...event };
@@ -178,21 +181,23 @@ function editEvent(
 	if (edits.crew !== undefined) {
 		copy.crew = edits.crew || undefined;
 	}
-	const change = { op: "set" as const, data: copy };
+	changes.value = replaceChange(copy, changes.value);
+}
+function delEvent(id: number) {
+	const change = { id, updatedAt: "", deleted: true as const };
 	changes.value = replaceChange(change, changes.value);
 }
-function delEvent(id: string) {
-	const change = { op: "del" as const, data: { id } };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertEvent(id: string) {
+function revertEvent(id: number) {
 	changes.value = revertChange(id, changes.value);
 }
 function eventExists(name: string) {
-	const id = toId(name);
+	if (schedule.value.deleted) {
+		throw new Error("Unexpected deleted schedule");
+	}
+	name = toId(name);
 	return (
-		schedule.value.events.some(e => e.id === id)
-		|| changes.value.some(c => c.data.id === id)
+		schedule.value.events?.some(e => !e.deleted && toId(e.name) === name)
+		|| changes.value.some(c => !c.deleted && c.name === name)
 	);
 }
 function newEvent() {
@@ -200,15 +205,17 @@ function newEvent() {
 		alert(`Event ${newEventName.value} already exists`);
 		return;
 	}
+	if (schedule.value.deleted) {
+		throw new Error("Unexpected deleted schedule");
+	}
+	const id = Math.max(1, ...schedule.value.events?.map(e => e.id) ?? []) + 1;
 	const change = {
-		op: "set" as const,
-		data: {
-			id: toId(newEventName.value),
-			name: newEventName.value,
-			description: newEventDescription.value || undefined,
-			crew: !newEventPublic.value || undefined,
-			slots: [],
-		},
+		id,
+		updatedAt: "",
+		name: newEventName.value,
+		description: newEventDescription.value || undefined,
+		crew: !newEventPublic.value || undefined,
+		slots: [],
 	};
 	changes.value = replaceChange(change, changes.value);
 	newEventName.value = "";
@@ -219,7 +226,11 @@ async function saveEvents() {
 	try {
 		await $fetch("/api/schedule", {
 			method: "PATCH",
-			body: { events: changes.value },
+			body: {
+				id: 111,
+				updatedAt: "",
+				events: changes.value,
+			} satisfies ApiSchedule,
 		});
 		changes.value = [];
 	} catch (err: any) {
@@ -229,8 +240,11 @@ async function saveEvents() {
 }
 
 const events = computed(() => {
-	const data = [...schedule.value.events];
-	applyChangeArray(changes.value.filter(change => change.op === "set"), data);
+	if (schedule.value.deleted) {
+		throw new Error("Unexpected deleted schedule");
+	}
+	const data = [...schedule.value.events ?? []];
+	applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
 	return data;
 });
 </script>