Add account based filtering of the schedule

Implement personal filtering of the schedule based on events marked as
being interested in and filtering based on assigned crew for events.

pages/edit.vue

@@ -1,6 +1,23 @@
 <template>
 	<main>
 		<h1>Edit</h1>
+		<label>
+			Crew Filter:
+			<select
+				v-model="crewFilter"
+			>
+				<option
+					:value="undefined"
+					:selected="crewFilter === undefined"
+				>&lt;All Crew&gt;</option>
+				<option
+					v-for="account in accounts?.filter(a => a.type === 'crew' || a.type === 'admin')"
+					:key="account.id"
+					:value="String(account.id)"
+					:selected="crewFilter === String(account.id)"
+				>{{ account.name }}</option>
+			</select>
+		</label>
 		<h2>Locations</h2>
 		<LocationsTable :edit="isAdmin" />
 		<h2>Schedule</h2>
@@ -21,7 +38,7 @@
 				>{{ location.name }}</option>
 			</select>
 		</label>
-		<ScheduleTable :edit="true" :location="locationFilter" />
+		<ScheduleTable :edit="true" :location="locationFilter" :eventSlotFilter :shiftSlotFilter />
 		<h2>Events</h2>
 		<EventsTable :edit="true" />
 		<h2>Roles</h2>
@@ -44,14 +61,14 @@
 				>{{ role.name }}</option>
 			</select>
 		</label>
-		<ShiftScheduleTable :edit="true" :role="roleFilter" />
+		<ShiftScheduleTable :edit="true" :role="roleFilter" :eventSlotFilter :shiftSlotFilter />
 		<h2>Shifts</h2>
 		<ShiftsTable :edit="true" :role="roleFilter" />
 	</main>
 </template>
 
 <script lang="ts" setup>
-import type { LocationQueryValue } from 'vue-router';
+import type { ShiftSlot, TimeSlot } from '~/shared/types/schedule';
 
 definePageMeta({
 	middleware: ["authenticated"],
@@ -59,16 +76,34 @@ definePageMeta({
 });
 
 const schedule = await useSchedule();
-
-function queryToString(item?: null | LocationQueryValue | LocationQueryValue[]) {
-	if (item === null)
-		return "";
-	if (item instanceof Array)
-		return queryToString(item[0])
-	return item;
-}
+const { data: accounts } = await useAccounts();
 
 const route = useRoute();
+const crewFilter = computed({
+	get: () => queryToString(route.query.crew),
+	set: (value: string | undefined) => navigateTo({
+		path: route.path,
+		query: {
+			...route.query,
+			crew: value,
+		},
+	}),
+});
+const eventSlotFilter = computed(() => {
+	if (crewFilter.value === undefined || !session.value) {
+		return () => true;
+	}
+	const cid = parseInt(crewFilter.value);
+	return (slot: TimeSlot) => slot.assigned?.some(id => id === cid) || false;
+});
+const shiftSlotFilter = computed(() => {
+	if (crewFilter.value === undefined || !session.value) {
+		return () => true;
+	}
+	const cid = parseInt(crewFilter.value);
+	return (slot: ShiftSlot) => slot.assigned?.some(id => id === cid) || false;
+});
+
 const locationFilter = computed({
 	get: () => queryToString(route.query.location),
 	set: (value: string | undefined) => navigateTo({