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

@@ -11,9 +11,9 @@
 			</thead>
 			<tbody>
 				<tr
-					v-for="location in locations.filter(l => !l.deleted)"
+					v-for="location in schedule.locations.values()"
 					:key="location.id"
-					:class="{ removed: removed.has(location.id) }"
+					:class="{ removed: location.deleted }"
 				>
 					<template v-if='edit'>
 						<td>{{ location.id }}</td>
@@ -21,24 +21,24 @@
 							<input
 								type="text"
 								:value="location.name"
-								@input="setLocation({ ...location, name: ($event as any).target.value })"
+								@input="editLocation(location, { name: ($event as any).target.value })"
 							>
 						</td>
 						<td>
 							<input
 								type="text"
 								:value="location.description"
-								@input="setLocation({ ...location, description: ($event as any).target.value || undefined })"
+								@input="editLocation(location, { description: ($event as any).target.value })"
 							>
 						</td>
 						<td>
 							<button
-								:disabled="removed.has(location.id)"
+								:disabled="location.deleted"
 								type="button"
-								@click="delLocation(location.id)"
+								@click="editLocation(location, { deleted: true })"
 							>Remove</button>
 							<button
-								v-if="changes.some(c => c.id === location.id)"
+								v-if="schedule.isModifiedLocation(location.id)"
 								type="button"
 								@click="revertLocation(location.id)"
 							>Revert</button>
@@ -52,7 +52,7 @@
 				</tr>
 				<tr v-if='edit'>
 					<td>
-						{{ newLocationId }}
+						{{ schedule.nextClientId }}
 					</td>
 					<td>
 							<input
@@ -60,37 +60,27 @@
 								v-model="newLocationName"
 							>
 					</td>
-					<td colspan="2">
+					<td>
+						<input
+							type="text"
+							v-model="newLocationDescription"
+						>
+					</td>
+					<td colspan="1">
 						<button
 							type="button"
-							@click="newLocation(newLocationName); newLocationName = ''"
+							@click="newLocation()"
 						>Add Location</button>
 					</td>
 				</tr>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not save yet.
-			<button
-				type="button"
-				@click="saveLocations"
-			>Save Changes</button>
-		</p>
-		<details>
-			<summary>Debug</summary>
-			<ol>
-				<li v-for="change in changes">
-					{{ JSON.stringify(change) }}
-				</li>
-			</ol>
-		</details>
 	</figure>
 </template>
 
 <script lang="ts" setup>
-import type { ApiSchedule, ApiScheduleLocation } from '~/shared/types/api';
-import { toId } from '~/shared/utils/functions';
-import { applyUpdatesToArray } from '~/shared/utils/update';
+import { DateTime } from '~/shared/utils/luxon';
+import type { Id } from '~/shared/types/common';
 
 defineProps<{
 	edit?: boolean
@@ -98,81 +88,34 @@ defineProps<{
 
 const schedule = await useSchedule();
 
-const changes = ref<ApiScheduleLocation[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-
-function replaceChange(
-	change: ApiScheduleLocation,
-	changes: ApiScheduleLocation[],
-) {
-	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: ApiScheduleLocation[]) {
-	return changes.filter(change => change.id !== id);
-}
-
 const newLocationName = ref("");
-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 revertLocation(id: number) {
-	changes.value = revertChange(id, changes.value);
-}
-function newLocation(name: string) {
-	const change = {
-		id: newLocationId.value,
-		updatedAt: "",
-		name,
-	};
-	changes.value = replaceChange(change, changes.value);
-}
-async function saveLocations() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				locations: changes.value
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
+const newLocationDescription = ref("");
 
-const locations = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
+function editLocation(
+	location: ClientScheduleLocation,
+	edits: Parameters<ClientSchedule["editLocation"]>[1],
+) {
+	try {
+		schedule.value.editLocation(location, edits);
+	} catch (err: any) {
+		alert(err.message);
 	}
-	const data = [...schedule.value.locations ?? []];
-	applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
-	return data;
-});
+}
+function revertLocation(id: Id) {
+	schedule.value.restoreLocation(id);
+}
+function newLocation() {
+	const location = new ClientScheduleLocation(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		newLocationName.value,
+		newLocationDescription.value,
+	);
+	schedule.value.setLocation(location);
+	newLocationName.value = "";
+	newLocationDescription.value = "";
+}
 </script>
 
 <style scoped>