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/ShiftsTable.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="shift in shifts?.filter(s => !s.deleted)"
+						v-for="shift in schedule.shifts.values()"
 						:key="shift.id"
-						:class="{ removed: removed.has(shift.id) }"
+						:class="{ removed: shift.deleted }"
 					>
 						<td>{{ shift.id }}</td>
 						<td>
@@ -31,18 +28,19 @@
 						</td>
 						<td>
 							<select
-								:value="shift.roleId"
-								@change="editShift(shift, { roleId: ($event as any).target.value })"
+								:value="shift.role.id"
+								@change="editShift(shift, { role: schedule.roles.get(parseInt(($event as any).target.value, 10)) })"
 							>
 								<option
-									v-for="role in schedule.roles?.filter(r => !r.deleted)"
+									v-for="role in schedule.roles.values()"
 									:key="role.id"
 									:value="role.id"
-									:selected="shift.roleId === role.id"
+									:disabled="shift.deleted"
+									:selected="shift.role.id === role.id"
 								>{{ role.name }}</option>
 							</select>
 						</td>
-						<td>{{ shift.slots.length ? shift.slots.length : "" }}</td>
+						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
 						<td>
 							<input
 								type="text"
@@ -53,18 +51,18 @@
 						<td>
 							<button
 								type="button"
-								:disabled="removed.has(shift.id)"
-								@click="delShift(shift.id)"
+								:disabled="shift.deleted"
+								@click="editShift(shift, { deleted: true })"
 							>Delete</button>
 							<button
-								v-if="changes.some(c => c.id === shift.id)"
+								v-if="schedule.isModifiedShift(shift.id)"
 								type="button"
 								@click="revertShift(shift.id)"
 							>Revert</button>
 						</td>
 					</tr>
 					<tr>
-						<td>{{ newShiftId }}</td>
+						<td>{{ schedule.nextClientId }}</td>
 						<td>
 							<input
 								type="text"
@@ -72,12 +70,13 @@
 							>
 						</td>
 						<td>
-							<select v-model="newShiftRole">
+							<select v-model="newShiftRoleId">
 								<option
-									v-for="role in schedule.roles?.filter(r => !r.deleted)"
+									v-for="role in schedule.roles.values()"
 									:key="role.id"
 									:value="role.id"
-									:selected="role.id === newShiftRole"
+									:disabled="role.deleted"
+									:selected="role.id === newShiftRoleId"
 								>{{ role.name }}</option>
 							</select>
 						</td>
@@ -103,40 +102,26 @@
 				</template>
 				<template v-else>
 					<tr
-						v-for="shift in shifts?.filter(s => !s.deleted)"
+						v-for="shift in schedule.shifts.values()"
 						:key="shift.id"
 					>
 						<td>{{ shift.id }}</td>
 						<td>{{ shift.name }}</td>
-						<td>{{ shift.roleId }}</td>
-						<td>{{ shift.slots.length ? shift.slots.length : "" }}</td>
+						<td>{{ shift.role.id }}</td>
+						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
 						<td>{{ shift.description }}</td>
 					</tr>
 				</template>
 			</tbody>
 		</table>
-		<p v-if="changes.length">
-			Changes are not saved yet.
-			<button
-				type="button"
-				@click="saveShifts"
-			>Save Changes</button>
-		</p>
-		<details>
-			<summary>Debug</summary>
-			<ol>
-				<li v-for="change in changes">
-					<pre><code>{{ JSON.stringify(change, undefined, 2) }}</code></pre>
-				</li>
-			</ol>
-		</details>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import { DateTime } from 'luxon';
 import type { ApiSchedule, ApiScheduleShift } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
 import { toId } from '~/shared/utils/functions';
-import { applyUpdatesToArray } from '~/shared/utils/update';
 
 const props = defineProps<{
 	edit?: boolean,
@@ -145,73 +130,25 @@ const props = defineProps<{
 
 const schedule = await useSchedule();
 
-const changes = ref<ApiScheduleShift[]>([]);
-const removed = computed(() => new Set(changes.value.filter(c => c.deleted).map(c => c.id)));
-function replaceChange(
-	change: ApiScheduleShift,
-	changes: ApiScheduleShift[],
-) {
-	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: ApiScheduleShift[]) {
-	return changes.filter(change => change.id !== id);
-}
-
 const newShiftName = ref("");
-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);
+const newShiftRoleId = ref(props.roleId);
 watch(() => props.roleId, () => {
-	newShiftRole.value = props.roleId;
+	newShiftRoleId.value = props.roleId;
 });
 const newShiftDescription = ref("");
 function editShift(
-	shift: Extract<ApiScheduleShift, { deleted?: false }>,
-	edits: { name?: string, description?: string, roleId?: number }
+	shift: ClientScheduleShift,
+	edits: Parameters<ClientSchedule["editShift"]>[1],
 ) {
-	const copy = { ...shift };
-	if (edits.name !== undefined) {
-		copy.name = edits.name;
-	}
-	if (edits.description !== undefined) {
-		copy.description = edits.description || undefined;
-	}
-	if (edits.roleId !== undefined) {
-		copy.roleId = edits.roleId;
-	}
-	changes.value = replaceChange(copy, changes.value);
+	schedule.value.editShift(shift, edits);
 }
-function delShift(id: number) {
-	const change = { id, updatedAt: "", deleted: true as const };
-	changes.value = replaceChange(change, changes.value);
-}
-function revertShift(id: number) {
-	changes.value = revertChange(id, changes.value);
+function revertShift(id: Id) {
+	schedule.value.restoreShift(id);
 }
 function shiftExists(name: string) {
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
 	name = toId(name);
 	return (
-		schedule.value.shifts?.some(s => !s.deleted && toId(s.name) === name)
-		|| changes.value.some(c => !c.deleted && c.name === name)
+		[...schedule.value.shifts.values()].some(s => !s.deleted && toId(s.name) === name)
 	);
 }
 function newShift() {
@@ -219,50 +156,24 @@ function newShift() {
 		alert(`Shift ${newShiftName.value} already exists`);
 		return;
 	}
-	if (schedule.value.deleted) {
-		throw new Error("Unexpected deleted schedule");
-	}
-	if (!newShiftRole.value) {
+	const role = schedule.value.roles.get(newShiftRoleId.value!);
+	if (!role) {
 		alert(`Invalid role`);
 		return;
 	}
-	const change = {
-		id: newShiftId.value,
-		updatedAt: "",
-		name: newShiftName.value,
-		roleId: newShiftRole.value,
-		description: newShiftDescription.value || undefined,
-		slots: [],
-	};
-	changes.value = replaceChange(change, changes.value);
+	const shift = new ClientScheduleShift(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		role,
+		newShiftName.value,
+		newShiftDescription.value,
+		new Map(),
+	);
+	schedule.value.setShift(shift);
 	newShiftName.value = "";
 	newShiftDescription.value = "";
 }
-async function saveShifts() {
-	try {
-		await $fetch("/api/schedule", {
-			method: "PATCH",
-			body: {
-				id: 111,
-				updatedAt: "",
-				shifts: changes.value
-			} satisfies ApiSchedule,
-		});
-		changes.value = [];
-	} catch (err: any) {
-		console.error(err);
-		alert(err?.data?.message ?? err.message);
-	}
-}
-
-const shifts = computed(() => {
-	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>
 
 <style scoped>