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

@@ -20,27 +20,25 @@
 						<td>
 							<input
 								type="text"
-								:value="role.name"
-								@input="editRole(role, { name: ($event as any).target.value })"
+								v-model="role.name"
 							>
 						</td>
 						<td>
 							<input
 								type="text"
-								:value="role.description"
-								@input="editRole(role, { description: ($event as any).target.value })"
+								v-model="role.description"
 							>
 						</td>
 						<td>
 							<button
 								type="button"
 								:disabled="role.deleted"
-								@click="editRole(role, { deleted: true })"
+								@click="role.deleted = true"
 							>Delete</button>
 							<button
-								v-if="schedule.isModifiedRole(role.id)"
+								v-if="role.isModified()"
 								type="button"
-								@click="revertRole(role.id)"
+								@click="schedule.roles.discardId(role.id)"
 							>Revert</button>
 						</td>
 					</tr>
@@ -87,36 +85,19 @@
 </template>
 
 <script lang="ts" setup>
-import { DateTime } from '~/shared/utils/luxon';
+import { Info } from '~/shared/utils/luxon';
 import { toId } from '~/shared/utils/functions';
-import type { Id } from '~/shared/types/common';
 
 defineProps<{
 	edit?: boolean,
 }>();
 
 const schedule = await useSchedule();
+const accountStore = useAccountStore();
 
 const newRoleName = ref("");
 const newRoleDescription = ref("");
 
-function editRole(
-	role: ClientScheduleRole,
-	edits: { deleted?: boolean, name?: string, description?: string }
-) {
-	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);
-	}
-}
-function revertRole(id: Id) {
-	schedule.value.restoreRole(id);
-}
 function roleExists(name: string) {
 	name = toId(name);
 	return (
@@ -128,14 +109,15 @@ function newRole() {
 		alert(`Role ${newRoleName.value} already exists`);
 		return;
 	}
-	const role = new ClientScheduleRole(
+	const zone = Info.normalizeZone(accountStore.activeTimezone);
+	const locale = accountStore.activeLocale;
+	const role = ClientScheduleRole.create(
 		schedule.value.nextClientId--,
-		DateTime.now(),
-		false,
 		newRoleName.value,
 		newRoleDescription.value,
+		{ zone, locale },
 	);
-	schedule.value.setRole(role);
+	schedule.value.roles.add(role);
 	newRoleName.value = "";
 	newRoleDescription.value = "";
 }