Refactor ClientSchedule to mutable types

Use a single mutable location, event, slot, etc, for each unique
resource that keeps track of the local editable client copy and
the server copy of the data contained in it.

This makes it much simpler to update these data structures as I can take
advantage of the v-model bindings in Vue.js and work with the system
instead of against it.

components/TableScheduleShifts.vue

@@ -22,21 +22,19 @@
 						<td>
 							<input
 								type="text"
-								:value="shift.name"
-								@input="editShift(shift, { name: ($event as any).target.value })"
+								v-model="shift.name"
 							>
 						</td>
 						<td>
 							<select
-								:value="shift.role.id"
-								@change="editShift(shift, { role: schedule.roles.get(parseInt(($event as any).target.value, 10)) })"
+								v-model="shift.roleId"
 							>
 								<option
 									v-for="role in schedule.roles.values()"
 									:key="role.id"
 									:value="role.id"
 									:disabled="shift.deleted"
-									:selected="shift.role.id === role.id"
+									:selected="shift.roleId === role.id"
 								>{{ role.name }}</option>
 							</select>
 						</td>
@@ -44,20 +42,19 @@
 						<td>
 							<input
 								type="text"
-								:value="shift.description"
-								@input="editShift(shift, { description: ($event as any).target.value })"
+								v-model="shift.description"
 							>
 						</td>
 						<td>
 							<button
 								type="button"
 								:disabled="shift.deleted"
-								@click="editShift(shift, { deleted: true })"
+								@click="shift.deleted = true"
 							>Delete</button>
 							<button
-								v-if="schedule.isModifiedShift(shift.id)"
+								v-if="shift.isModified()"
 								type="button"
-								@click="revertShift(shift.id)"
+								@click="schedule.shifts.discardId(shift.id)"
 							>Revert</button>
 						</td>
 					</tr>
@@ -107,7 +104,7 @@
 					>
 						<td>{{ shift.id }}</td>
 						<td>{{ shift.name }}</td>
-						<td>{{ shift.role.id }}</td>
+						<td>{{ shift.roleId }}</td>
 						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
 						<td>{{ shift.description }}</td>
 					</tr>
@@ -118,8 +115,7 @@
 </template>
 
 <script lang="ts" setup>
-import { DateTime } from '~/shared/utils/luxon';
-import type { Id } from '~/shared/types/common';
+import { Info } from '~/shared/utils/luxon';
 import { toId } from '~/shared/utils/functions';
 
 const props = defineProps<{
@@ -128,6 +124,7 @@ const props = defineProps<{
 }>();
 
 const schedule = await useSchedule();
+const accountStore = useAccountStore();
 
 const newShiftName = ref("");
 const newShiftRoleId = ref(props.roleId);
@@ -135,15 +132,6 @@ watch(() => props.roleId, () => {
 	newShiftRoleId.value = props.roleId;
 });
 const newShiftDescription = ref("");
-function editShift(
-	shift: ClientScheduleShift,
-	edits: Parameters<ClientSchedule["editShift"]>[1],
-) {
-	schedule.value.editShift(shift, edits);
-}
-function revertShift(id: Id) {
-	schedule.value.restoreShift(id);
-}
 function shiftExists(name: string) {
 	name = toId(name);
 	return (
@@ -155,21 +143,22 @@ function newShift() {
 		alert(`Shift ${newShiftName.value} already exists`);
 		return;
 	}
-	const role = schedule.value.roles.get(newShiftRoleId.value!);
-	if (!role) {
+	if (newShiftRoleId.value === undefined) {
 		alert(`Invalid role`);
 		return;
 	}
-	const shift = new ClientScheduleShift(
+	const zone = Info.normalizeZone(accountStore.activeTimezone);
+	const locale = accountStore.activeLocale;
+	const shift = ClientScheduleShift.create(
+		schedule.value,
 		schedule.value.nextClientId--,
-		DateTime.now(),
-		false,
-		role,
+		newShiftRoleId.value,
 		newShiftName.value,
 		newShiftDescription.value,
-		new Map(),
+		new Set(),
+		{ zone, locale },
 	);
-	schedule.value.setShift(shift);
+	schedule.value.shifts.add(shift);
 	newShiftName.value = "";
 	newShiftDescription.value = "";
 }