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/LocationsTable.vue

@@ -11,7 +11,7 @@
 			</thead>
 			<tbody>
 				<tr
-					v-for="location in locations"
+					v-for="location in locations.filter(l => !l.deleted)"
 					:key="location.id"
 					:class="{ removed: removed.has(location.id) }"
 				>
@@ -38,7 +38,7 @@
 								@click="delLocation(location.id)"
 							>Remove</button>
 							<button
-								v-if="changes.some(c => c.data.id === location.id)"
+								v-if="changes.some(c => c.id === location.id)"
 								type="button"
 								@click="revertLocation(location.id)"
 							>Revert</button>
@@ -52,7 +52,7 @@
 				</tr>
 				<tr v-if='edit'>
 					<td>
-						{{ toId(newLocationName) }}
+						{{ newLocationId }}
 					</td>
 					<td>
 							<input
@@ -88,9 +88,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { ChangeRecord, ScheduleLocation } from '~/shared/types/schedule';
-import { applyChangeArray } from '~/shared/utils/changes';
+import type { ApiSchedule, ApiScheduleLocation } from '~/shared/types/api';
 import { toId } from '~/shared/utils/functions';
+import { applyUpdatesToArray } from '~/shared/utils/update';
 
 defineProps<{
 	edit?: boolean
@@ -98,15 +98,15 @@ defineProps<{
 
 const schedule = await useSchedule();
 
-const changes = ref<ChangeRecord<ScheduleLocation>[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.op === "del").map(c => c.data.id)));
+const changes = ref<ApiScheduleLocation[]>([]);
+const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
 
 function replaceChange(
-	change: ChangeRecord<ScheduleLocation>,
-	changes: ChangeRecord<ScheduleLocation>[],
+	change: ApiScheduleLocation,
+	changes: ApiScheduleLocation[],
 ) {
 	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)
@@ -115,29 +115,36 @@ function replaceChange(
 		copy.push(change);
 	return copy;
 }
-function revertChange(id: string, changes: ChangeRecord<ScheduleLocation>[]) {
-	return changes.filter(change => change.data.id !== id);
+function revertChange(id: number, changes: ApiScheduleLocation[]) {
+	return changes.filter(change => change.id !== id);
 }
 
 const newLocationName = ref("");
-function setLocation(location: ScheduleLocation) {
-	const change = { op: "set" as const, data: location };
+const newLocationId = computed(() => {
+	if (schedule.value.deleted) {
+		throw new Error("Unexpected deleted schedule");
+	}
+	return Math.max(
+		1,
+		...schedule.value.locations?.map(l => l.id) ?? [],
+		...changes.value.map(c => c.id)
+	) + 1;
+});
+function setLocation(location: ApiScheduleLocation) {
+	changes.value = replaceChange(location, changes.value);
+}
+function delLocation(id: number) {
+	const change = { id, updatedAt: "", deleted: true as const };
 	changes.value = replaceChange(change, changes.value);
 }
-function delLocation(id: string) {
-	const change = { op: "del" as const, data: { id } };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertLocation(id: string) {
+function revertLocation(id: number) {
 	changes.value = revertChange(id, changes.value);
 }
 function newLocation(name: string) {
 	const change = {
-		op: "set" as const,
-		data: {
-			id: toId(name),
-			name,
-		},
+		id: newLocationId.value,
+		updatedAt: "",
+		name,
 	};
 	changes.value = replaceChange(change, changes.value);
 }
@@ -145,7 +152,11 @@ async function saveLocations() {
 	try {
 		await $fetch("/api/schedule", {
 			method: "PATCH",
-			body: { locations: changes.value },
+			body: {
+				id: 111,
+				updatedAt: "",
+				locations: changes.value
+			} satisfies ApiSchedule,
 		});
 		changes.value = [];
 	} catch (err: any) {
@@ -155,8 +166,11 @@ async function saveLocations() {
 }
 
 const locations = computed(() => {
-	const data = [...schedule.value.locations];
-	applyChangeArray(changes.value.filter(change => change.op === "set"), data);
+	if (schedule.value.deleted) {
+		throw new Error("Unexpected deleted schedule");
+	}
+	const data = [...schedule.value.locations ?? []];
+	applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
 	return data;
 });
 </script>