Refactor to use ClientSchedule on client

Use the ClientSchedule data structure for deserialising and tracking
edit state on the client instead of trying to directly deal with the
ApiSchedule type which is not build for ease of edits or rendering.

components/EventsTable.vue

@@ -1,8 +1,5 @@
 <template>
-	<div v-if="schedule.deleted">
-		Error: Unexpected deleted schedule.
-	</div>
-	<div v-else>
+	<div>
 		<table>
 			<thead>
 				<tr>
@@ -17,9 +14,9 @@
 			<tbody>
 				<template v-if="edit">
 					<tr
-						v-for="event in events.filter(e => !e.deleted)"
+						v-for="event in schedule.events.values()"
 						:key="event.id"
-						:class="{ removed: removed.has(event.id) }"
+						:class="{ removed: event.deleted }"
 					>
 						<td>{{ event.id }}</td>
 						<td>
@@ -47,22 +44,22 @@
 								@change="editEvent(event, { crew: !($event as any).target.value })"
 							>
 						</td>
-						<td>{{ event.slots.length ? event.slots.length : "" }}</td>
+						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
 						<td>
 							<button
 								type="button"
-								:disabled="!canEdit(event) || removed.has(event.id)"
-								@click="delEvent(event.id)"
+								:disabled="!canEdit(event) || event.deleted"
+								@click="editEvent(event, { deleted: true })"
 							>Delete</button>
 							<button
-								v-if="changes.some(c => c.id === event.id)"
+								v-if="schedule.isModifiedEvent(event.id)"
 								type="button"
 								@click="revertEvent(event.id)"
 							>Revert</button>
 						</td>
 					</tr>
 					<tr>
-						<td>{{ toId(newEventName) }}</td>
+						<td>{{ schedule.nextClientId }}</td>
 						<td>
 							<input
 								type="text"
@@ -98,40 +95,25 @@
 				</template>
 				<template v-else>
 					<tr
-						v-for="event in events.filter(e => !e.deleted)"
+						v-for="event in schedule.events.values()"
 						:key="event.id"
 					>
 						<td>{{ event.id }}</td>
 						<td>{{ event.name }}</td>
 						<td>{{ event.description }}</td>
 						<td>{{ event.crew ? "" : "Yes"}}</td>
-						<td>{{ event.slots.length ? event.slots.length : "" }}</td>
+						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
 					</tr>
 				</template>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not saved yet.
-			<button
-				type="button"
-				@click="saveEvents"
-			>Save Changes</button>
-		</p>
-		<details>
-			<summary>Debug</summary>
-			<ol>
-				<li v-for="change in changes">
-					{{ JSON.stringify(change) }}
-				</li>
-			</ol>
-		</details>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { ApiSchedule, ApiScheduleEvent } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import { DateTime } from '~/shared/utils/luxon';
 import { toId } from '~/shared/utils/functions';
-import { applyUpdatesToArray } from '~/shared/utils/update';
 
 defineProps<{
 	edit?: boolean,
@@ -140,64 +122,26 @@ defineProps<{
 const schedule = await useSchedule();
 const accountStore = useAccountStore();
 
-function canEdit(event: ApiScheduleEvent) {
-	return !event.deleted && (event.crew || accountStore.canEditPublic);
-}
-
-const changes = ref<ApiScheduleEvent[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-function replaceChange(
-	change: ApiScheduleEvent,
-	changes: ApiScheduleEvent[],
-) {
-	const index = changes.findIndex(item => (
-		item.deleted === change.deleted && item.id === change.id
-	));
-	const copy = [...changes];
-	if (index !== -1)
-		copy.splice(index, 1, change);
-	else
-		copy.push(change);
-	return copy;
-}
-function revertChange(id: number, changes: ApiScheduleEvent[]) {
-	return changes.filter(change => change.id !== id);
+function canEdit(event: ClientScheduleEvent) {
+	return event.crew || accountStore.canEditPublic;
 }
 
 const newEventName = ref("");
 const newEventDescription = ref("");
 const newEventPublic = ref(false);
 function editEvent(
-	event: Extract<ApiScheduleEvent, { deleted?: false }>,
-	edits: { name?: string, description?: string, crew?: boolean }
+	event: ClientScheduleEvent,
+	edits: Parameters<ClientSchedule["editEvent"]>[1],
 ) {
-	const copy = { ...event };
-	if (edits.name !== undefined) {
-		copy.name = edits.name;
-	}
-	if (edits.description !== undefined) {
-		copy.description = edits.description || undefined;
-	}
-	if (edits.crew !== undefined) {
-		copy.crew = edits.crew || undefined;
-	}
-	changes.value = replaceChange(copy, changes.value);
+	schedule.value.editEvent(event, edits);
 }
-function delEvent(id: number) {
-	const change = { id, updatedAt: "", deleted: true as const };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertEvent(id: number) {
-	changes.value = revertChange(id, changes.value);
+function revertEvent(id: Id) {
+	schedule.value.restoreEvent(id);
 }
 function eventExists(name: string) {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	name = toId(name);
 	return (
-		schedule.value.events?.some(e => !e.deleted && toId(e.name) === name)
-		|| changes.value.some(c => !c.deleted && c.name === name)
+		[...schedule.value.events.values()].some(e => !e.deleted && toId(e.name) === name)
 	);
 }
 function newEvent() {
@@ -205,48 +149,23 @@ 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 = {
-		id,
-		updatedAt: "",
-		name: newEventName.value,
-		description: newEventDescription.value || undefined,
-		crew: !newEventPublic.value || undefined,
-		slots: [],
-	};
-	changes.value = replaceChange(change, changes.value);
+	const event = new ClientScheduleEvent(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		newEventName.value,
+		!newEventPublic.value,
+		"",
+		false,
+		newEventDescription.value,
+		0,
+		new Map(),
+	);
+	schedule.value.setEvent(event);
 	newEventName.value = "";
 	newEventDescription.value = "";
 	newEventPublic.value = false;
 }
-async function saveEvents() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				events: changes.value,
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
-
-const events = computed(() => {
-	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>
 
 <style scoped>