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

@@ -1,8 +1,5 @@
 <template>
-	<div v-if="schedule.deleted">
-		Error: Unexpected deleted schedule.
-	</div>
-	<div v-else>
+	<div>
 		<table>
 			<thead>
 				<tr>
@@ -15,9 +12,9 @@
 			<tbody>
 				<template v-if="edit">
 					<tr
-						v-for="role in roles.filter(r => !r.deleted)"
+						v-for="role in schedule.roles.values()"
 						:key="role.id"
-						:class="{ removed: removed.has(role.id) }"
+						:class="{ removed: role.deleted }"
 					>
 						<td>{{ role.id }}</td>
 						<td>
@@ -37,18 +34,18 @@
 						<td>
 							<button
 								type="button"
-								:disabled="removed.has(role.id)"
-								@click="delRole(role.id)"
+								:disabled="role.deleted"
+								@click="editRole(role, { deleted: true })"
 							>Delete</button>
 							<button
-								v-if="changes.some(c => c.id === role.id)"
+								v-if="schedule.isModifiedRole(role.id)"
 								type="button"
 								@click="revertRole(role.id)"
 							>Revert</button>
 						</td>
 					</tr>
 					<tr>
-						<td>{{ newRoleId }}</td>
+						<td>{{ schedule.nextClientId }}</td>
 						<td>
 							<input
 								type="text"
@@ -76,7 +73,7 @@
 				</template>
 				<template v-else>
 					<tr
-						v-for="role in roles.filter(r => !r.deleted)"
+						v-for="role in schedule.roles.values()"
 						:key="role.id"
 					>
 						<td>{{ role.id }}</td>
@@ -86,28 +83,13 @@
 				</template>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not saved yet.
-			<button
-				type="button"
-				@click="saveRoles"
-			>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, ApiScheduleRole } from '~/shared/types/api';
-import { applyUpdatesToArray } from '~/shared/utils/update';
+import { DateTime } from '~/shared/utils/luxon';
 import { toId } from '~/shared/utils/functions';
+import type { Id } from '~/shared/types/common';
 
 defineProps<{
 	edit?: boolean,
@@ -115,66 +97,30 @@ defineProps<{
 
 const schedule = await useSchedule();
 
-const changes = ref<ApiScheduleRole[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-function replaceChange(
-	change: ApiScheduleRole,
-	changes: ApiScheduleRole[],
-) {
-	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: ApiScheduleRole[]) {
-	return changes.filter(change => change.id !== id);
-}
-
 const newRoleName = ref("");
-const newRoleId = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	return Math.max(
-		1,
-		...schedule.value.roles?.map(r => r.id) ?? [],
-		...changes.value.map(c => c.id)
-	) + 1;
-});
 const newRoleDescription = ref("");
+
 function editRole(
-	role: Extract<ApiScheduleRole, { deleted?: false }>,
-	edits: { name?: string, description?: string }
+	role: ClientScheduleRole,
+	edits: { deleted?: boolean, name?: string, description?: string }
 ) {
-	const copy = { ...role };
-	if (edits.name !== undefined) {
-		copy.name = edits.name;
+	const copy = role.clone();
+	if (edits.deleted !== undefined) copy.deleted = edits.deleted;
+	if (edits.name !== undefined) copy.name = edits.name;
+	if (edits.description !== undefined) copy.description = edits.description;
+	try {
+		schedule.value.setRole(copy);
+	} catch (err: any) {
+		alert(err.message);
 	}
-	if (edits.description !== undefined) {
-		copy.description = edits.description || undefined;
-	}
-	changes.value = replaceChange(copy, changes.value);
 }
-function delRole(id: number) {
-	const change = { id, updatedAt: "", deleted: true as const };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertRole(id: number) {
-	changes.value = revertChange(id, changes.value);
+function revertRole(id: Id) {
+	schedule.value.restoreRole(id);
 }
 function roleExists(name: string) {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	name = toId(name);
 	return (
-		schedule.value.roles?.some(r => !r.deleted && toId(r.name) === name)
-		|| changes.value.some(c => !c.deleted && c.name === name)
+		[...schedule.value.roles.values()].some(r => !r.deleted && toId(r.name) === name)
 	);
 }
 function newRole() {
@@ -182,45 +128,18 @@ function newRole() {
 		alert(`Role ${newRoleName.value} already exists`);
 		return;
 	}
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const change = {
-		id: newRoleId.value,
-		updatedAt: "",
-		name: newRoleName.value,
-		description: newRoleDescription.value || undefined,
-		slots: [],
-	};
-	changes.value = replaceChange(change, changes.value);
+	const role = new ClientScheduleRole(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		newRoleName.value,
+		newRoleDescription.value,
+	);
+	schedule.value.setRole(role);
 	newRoleName.value = "";
 	newRoleDescription.value = "";
 }
-async function saveRoles() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				roles: changes.value
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
 
-const roles = computed(() => {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	const data = [...schedule.value.roles ?? []];
-	applyUpdatesToArray(changes.value.filter(change => !change.deleted), data);
-	return data;
-});
 </script>
 
 <style scoped>