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({

pages/schedule.vue

@@ -12,10 +12,38 @@
 			Check out your <NuxtLink to="/account/settings">Account Setting</NuxtLink> to set up notifications for changes to schedule.
 		</p>
 		<h2>Schedule</h2>
-		<Timetable :schedule />
+		<label v-if="session">
+			Filter:
+			<select
+				v-model="filter"
+			>
+				<option
+					:value="undefined"
+					:selected="filter === undefined"
+				>&lt;All events&gt;</option>
+				<option
+					value="my-schedule"
+					:selected='filter === "my-schedule"'
+				>My Schedule</option>
+				<option
+					v-if="isCrew"
+					value="assigned"
+					:selected='filter === "assigned"'
+				>Assigned to Me</option>
+				<optgroup v-if="isCrew && accounts" label="Crew">
+					<option
+						v-for="account in accounts.filter(a => a.type === 'crew' || a.type === 'admin')"
+						:key="account.id"
+						:value="`crew-${account.id}`"
+						:selected="filter === `crew-${account.id}`"
+					>{{ account.name }}</option>
+				</optgroup>
+			</select>
+		</label>
+		<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
 		<EventsEdit />
 		<h2>Events</h2>
-		<EventCard v-for="event in schedule.events" :event/>
+		<EventCard v-for="event in schedule.events.filter(e => e.slots.some(eventSlotFilter))" :event/>
 		<h2>Locations</h2>
 		<ul>
 			<li v-for="location in schedule.locations" :key="location.id">
@@ -27,6 +55,65 @@
 </template>
 
 <script setup lang="ts">
+import type { ShiftSlot, TimeSlot } from '~/shared/types/schedule';
+
 const { data: session } = await useAccountSession();
+const { data: accounts } = await useAccounts();
 const schedule = await useSchedule();
+const isCrew = computed(() => (
+	session.value?.account?.type === "crew"
+	|| session.value?.account?.type === "admin"
+));
+
+const route = useRoute();
+const filter = computed({
+	get: () => queryToString(route.query.filter),
+	set: (value: string | undefined) => navigateTo({
+		path: route.path,
+		query: {
+			...route.query,
+			filter: value,
+		},
+	}),
+});
+
+const eventSlotFilter = computed(() => {
+	if (filter.value === undefined || !session.value) {
+		return () => true;
+	}
+	const aid = session.value?.account?.id;
+	if (filter.value === "my-schedule") {
+		const ids = new Set(session.value?.account?.interestedIds);
+		for (const event of schedule.value.events) {
+			if (ids.has(event.id)) {
+				for (const slot of event.slots) {
+					ids.add(slot.id);
+				}
+			}
+		}
+		return (slot: TimeSlot) => ids.has(slot.id) || slot.assigned?.some(id => id === aid) || false;
+	}
+	if (filter.value === "assigned") {
+		return (slot: TimeSlot) => slot.assigned?.some(id => id === aid) || false;
+	}
+	if (filter.value.startsWith("crew-")) {
+		const cid = parseInt(filter.value.slice(5));
+		return (slot: TimeSlot) => slot.assigned?.some(id => id === cid) || false;
+	}
+	return () => false;
+});
+const shiftSlotFilter = computed(() => {
+	if (filter.value === undefined || !session.value) {
+		return () => true;
+	}
+	if (filter.value === "my-schedule" || filter.value === "assigned") {
+		const aid = session.value?.account?.id;
+		return (slot: ShiftSlot) => slot.assigned?.some(id => id === aid) || false;
+	}
+	if (filter.value.startsWith("crew-")) {
+		const cid = parseInt(filter.value.slice(5));
+		return (slot: ShiftSlot) => slot.assigned?.some(id => id === cid) || false;
+	}
+	return () => false;
+});
 </script>