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/ShiftsTable.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="shift in shifts"
+						v-for="shift in shifts?.filter(s => !s.deleted)"
 						:key="shift.id"
 						:class="{ removed: removed.has(shift.id) }"
 					>
@@ -28,14 +31,14 @@
 						</td>
 						<td>
 							<select
-								:value="shift.role"
-								@change="editShift(shift, { role: ($event as any).target.value })"
+								:value="shift.roleId"
+								@change="editShift(shift, { roleId: ($event as any).target.value })"
 							>
 								<option
-									v-for="role in schedule.roles"
+									v-for="role in schedule.roles?.filter(r => !r.deleted)"
 									:key="role.id"
 									:value="role.id"
-									:selected="shift.role === role.id"
+									:selected="shift.roleId === role.id"
 								>{{ role.name }}</option>
 							</select>
 						</td>
@@ -54,14 +57,14 @@
 								@click="delShift(shift.id)"
 							>Delete</button>
 							<button
-								v-if="changes.some(c => c.data.id === shift.id)"
+								v-if="changes.some(c => c.id === shift.id)"
 								type="button"
 								@click="revertShift(shift.id)"
 							>Revert</button>
 						</td>
 					</tr>
 					<tr>
-						<td>{{ toId(newShiftName) }}</td>
+						<td>{{ newShiftId }}</td>
 						<td>
 							<input
 								type="text"
@@ -71,7 +74,7 @@
 						<td>
 							<select v-model="newShiftRole">
 								<option
-									v-for="role in schedule.roles"
+									v-for="role in schedule.roles?.filter(r => !r.deleted)"
 									:key="role.id"
 									:value="role.id"
 									:selected="role.id === newShiftRole"
@@ -100,12 +103,12 @@
 				</template>
 				<template v-else>
 					<tr
-						v-for="shift in shifts"
+						v-for="shift in shifts?.filter(s => !s.deleted)"
 						:key="shift.id"
 					>
 						<td>{{ shift.id }}</td>
 						<td>{{ shift.name }}</td>
-						<td>{{ shift.role }}</td>
+						<td>{{ shift.roleId }}</td>
 						<td>{{ shift.slots.length ? shift.slots.length : "" }}</td>
 						<td>{{ shift.description }}</td>
 					</tr>
@@ -131,25 +134,25 @@
 </template>
 
 <script lang="ts" setup>
-import type { ChangeRecord, Shift } from '~/shared/types/schedule';
-import { applyChangeArray } from '~/shared/utils/changes';
+import type { ApiSchedule, ApiScheduleShift } from '~/shared/types/api';
 import { toId } from '~/shared/utils/functions';
+import { applyUpdatesToArray } from '~/shared/utils/update';
 
 const props = defineProps<{
 	edit?: boolean,
-	role?: string,
+	roleId?: number,
 }>();
 
 const schedule = await useSchedule();
 
-const changes = ref<ChangeRecord<Shift>[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.op === "del").map(c => c.data.id)));
+const changes = ref<ApiScheduleShift[]>([]);
+const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
 function replaceChange(
-	change: ChangeRecord<Shift>,
-	changes: ChangeRecord<Shift>[],
+	change: ApiScheduleShift,
+	changes: ApiScheduleShift[],
 ) {
 	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)
@@ -158,19 +161,29 @@ function replaceChange(
 		copy.push(change);
 	return copy;
 }
-function revertChange(id: string, changes: ChangeRecord<Shift>[]) {
-	return changes.filter(change => change.data.id !== id);
+function revertChange(id: number, changes: ApiScheduleShift[]) {
+	return changes.filter(change => change.id !== id);
 }
 
 const newShiftName = ref("");
-const newShiftRole = ref(props.role);
-watch(() => props.role, () => {
-	newShiftRole.value = props.role;
+const newShiftId = computed(() => {
+	if (schedule.value.deleted) {
+		throw new Error("Unexpected deleted schedule");
+	}
+	return Math.max(
+		1,
+		...schedule.value.shifts?.map(r => r.id) ?? [],
+		...changes.value.map(c => c.id)
+	) + 1;
+});
+const newShiftRole = ref(props.roleId);
+watch(() => props.roleId, () => {
+	newShiftRole.value = props.roleId;
 });
 const newShiftDescription = ref("");
 function editShift(
-	shift: Shift,
-	edits: { name?: string, description?: string, role?: string }
+	shift: Extract<ApiScheduleShift, { deleted?: false }>,
+	edits: { name?: string, description?: string, roleId?: number }
 ) {
 	const copy = { ...shift };
 	if (edits.name !== undefined) {
@@ -179,24 +192,26 @@ function editShift(
 	if (edits.description !== undefined) {
 		copy.description = edits.description || undefined;
 	}
-	if (edits.role !== undefined) {
-		copy.role = edits.role;
+	if (edits.roleId !== undefined) {
+		copy.roleId = edits.roleId;
 	}
-	const change = { op: "set" as const, data: copy };
+	changes.value = replaceChange(copy, changes.value);
+}
+function delShift(id: number) {
+	const change = { id, updatedAt: "", deleted: true as const };
 	changes.value = replaceChange(change, changes.value);
 }
-function delShift(id: string) {
-	const change = { op: "del" as const, data: { id } };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertShift(id: string) {
+function revertShift(id: number) {
 	changes.value = revertChange(id, changes.value);
 }
 function shiftExists(name: string) {
-	const id = toId(name);
+	if (schedule.value.deleted) {
+		throw new Error("Unexpected deleted schedule");
+	}
+	name = toId(name);
 	return (
-		schedule.value.rota?.some(e => e.id === id)
-		|| changes.value.some(c => c.data.id === id)
+		schedule.value.shifts?.some(s => !s.deleted && toId(s.name) === name)
+		|| changes.value.some(c => !c.deleted && c.name === name)
 	);
 }
 function newShift() {
@@ -204,19 +219,20 @@ function newShift() {
 		alert(`Shift ${newShiftName.value} already exists`);
 		return;
 	}
+	if (schedule.value.deleted) {
+		throw new Error("Unexpected deleted schedule");
+	}
 	if (!newShiftRole.value) {
 		alert(`Invalid role`);
 		return;
 	}
 	const change = {
-		op: "set" as const,
-		data: {
-			id: toId(newShiftName.value),
-			name: newShiftName.value,
-			role: newShiftRole.value,
-			description: newShiftDescription.value || undefined,
-			slots: [],
-		},
+		id: newShiftId.value,
+		updatedAt: "",
+		name: newShiftName.value,
+		roleId: newShiftRole.value,
+		description: newShiftDescription.value || undefined,
+		slots: [],
 	};
 	changes.value = replaceChange(change, changes.value);
 	newShiftName.value = "";
@@ -226,7 +242,11 @@ async function saveShifts() {
 	try {
 		await $fetch("/api/schedule", {
 			method: "PATCH",
-			body: { rota: changes.value },
+			body: {
+				id: 111,
+				updatedAt: "",
+				shifts: changes.value
+			} satisfies ApiSchedule,
 		});
 		changes.value = [];
 	} catch (err: any) {
@@ -236,8 +256,11 @@ async function saveShifts() {
 }
 
 const shifts = computed(() => {
-	const data = [...schedule.value.rota ?? []].filter(shift => !props.role || shift.role === props.role);
-	applyChangeArray(changes.value.filter(change => change.op === "set"), data);
+	if (schedule.value.deleted) {
+		throw new Error("Unexpected deleted schedule");
+	}
+	const data = [...schedule.value.shifts ?? []].filter(shift => !shift.deleted && (!props.roleId || shift.roleId === props.roleId));
+	applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
 	return data;
 });
 </script>