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.

components/ScheduleTable.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Timetable :schedule="schedulePreview" />
+		<Timetable :schedule="schedulePreview" :eventSlotFilter :shiftSlotFilter />
 		<table>
 			<thead>
 				<tr>
@@ -220,13 +220,15 @@
 
 <script lang="ts" setup>
 import { DateTime, Duration } from 'luxon';
-import type { ChangeRecord, Schedule, ScheduleEvent, ScheduleLocation, TimeSlot } from '~/shared/types/schedule';
+import type { ChangeRecord, Schedule, ScheduleEvent, ScheduleLocation, ShiftSlot, TimeSlot } from '~/shared/types/schedule';
 import { applyChangeArray } from '~/shared/utils/changes';
 import { enumerate, pairs, toId } from '~/shared/utils/functions';
 
 const props = defineProps<{
 	edit?: boolean,
 	location?: string,
+	eventSlotFilter?: (slot: TimeSlot) => boolean,
+	shiftSlotFilter?: (slot: ShiftSlot) => boolean,
 }>();
 
 interface EventSlot {
@@ -625,6 +627,8 @@ const eventSlots = computed(() => {
 	const data: (EventSlot | Gap)[] = [];
 	for (const event of schedule.value.events) {
 		for (const slot of event.slots) {
+			if (props.eventSlotFilter && !props.eventSlotFilter(slot))
+				continue;
 			for (const location of slot.locations) {
 				if (props.location !== undefined && location !== props.location)
 					continue;

components/ShiftScheduleTable.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Timetable :schedule="schedulePreview" />
+		<Timetable :schedule="schedulePreview" :eventSlotFilter :shiftSlotFilter />
 		<table>
 			<thead>
 				<tr>
@@ -218,13 +218,15 @@
 
 <script lang="ts" setup>
 import { DateTime, Duration } from 'luxon';
-import type { ChangeRecord, Schedule, Shift, Role, ShiftSlot as ShiftTimeSlot} from '~/shared/types/schedule';
+import type { ChangeRecord, Schedule, Shift, Role, ShiftSlot as ShiftTimeSlot, TimeSlot} from '~/shared/types/schedule';
 import { applyChangeArray } from '~/shared/utils/changes';
 import { enumerate, pairs, toId } from '~/shared/utils/functions';
 
 const props = defineProps<{
 	edit?: boolean,
 	role?: string,
+	eventSlotFilter?: (slot: TimeSlot) => boolean,
+	shiftSlotFilter?: (slot: ShiftTimeSlot) => boolean,
 }>();
 
 interface ShiftSlot {
@@ -608,6 +610,8 @@ const shiftSlots = computed(() => {
 		if (props.role !== undefined && shift.role !== props.role)
 			continue;
 		for (const slot of shift.slots) {
+			if (props.shiftSlotFilter && !props.shiftSlotFilter(slot))
+				continue;
 			data.push({
 				type: "slot",
 				id: slot.id,

components/Timetable.vue

@@ -56,36 +56,40 @@
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for="location in schedule.locations" :key="location.id">
-					<th>{{ location.name }}</th>
-					<td
-						v-for="row, index in locationRows.get(location.id)"
-						:key="index"
-						:colSpan="row.span"
-						:class='{"event": row.slots.size, "crew": row.crew }'
-						:title="row.title"
-					>
-						{{ row.title }}
-					</td>
-				</tr>
-				<template v-if="schedule.roles">
-					<tr>
-						<th>Shifts</th>
-						<td :colSpan="totalColumns"></td>
-					</tr>
-					<tr v-for="role in schedule.roles" :key="role.id">
-						<th>{{ role.name }}</th>
+				<template v-for="location in schedule.locations" :key="location.id">
+					<tr v-if="locationRows.has(location.id)">
+						<th>{{ location.name }}</th>
 						<td
-							v-for="row, index in roleRows.get(role.id)"
+							v-for="row, index in locationRows.get(location.id)"
 							:key="index"
 							:colSpan="row.span"
-							:class='{"shift": row.slots.size }'
+							:class='{"event": row.slots.size, "crew": row.crew }'
 							:title="row.title"
 						>
 							{{ row.title }}
 						</td>
 					</tr>
 				</template>
+				<template v-if="schedule.roles">
+					<tr>
+						<th>Shifts</th>
+						<td :colSpan="totalColumns"></td>
+					</tr>
+					<template v-for="role in schedule.roles" :key="role.id">
+						<tr v-if="roleRows.has(role.id)">
+							<th>{{ role.name }}</th>
+							<td
+								v-for="row, index in roleRows.get(role.id)"
+								:key="index"
+								:colSpan="row.span"
+								:class='{"shift": row.slots.size }'
+								:title="row.title"
+							>
+								{{ row.title }}
+							</td>
+						</tr>
+					</template>
+				</template>
 			</tbody>
 		</table>
 	</figure>
@@ -129,9 +133,9 @@ type Stretch = {
 	spans: Span[];
 }
 
-function* edgesFromEvents(events: Iterable<ScheduleEvent>): Generator<Edge> {
+function* edgesFromEvents(events: Iterable<ScheduleEvent>, filter = (slot: TimeSlot) => true): Generator<Edge> {
 	for (const event of events) {
-		for (const slot of event.slots) {
+		for (const slot of event.slots.filter(filter)) {
 			if (slot.start > slot.end) {
 				throw new Error(`Slot ${slot.id} ends before it starts.`);
 			}
@@ -141,9 +145,9 @@ function* edgesFromEvents(events: Iterable<ScheduleEvent>): Generator<Edge> {
 	}
 }
 
-function* edgesFromShifts(shifts: Iterable<Shift>): Generator<Edge> {
+function* edgesFromShifts(shifts: Iterable<Shift>, filter = (slot: ShiftSlot) => true): Generator<Edge> {
 	for (const shift of shifts) {
-		for (const slot of shift.slots) {
+		for (const slot of shift.slots.filter(filter)) {
 			if (slot.start > slot.end) {
 				throw new Error(`Slot ${slot.id} ends before it starts.`);
 			}
@@ -470,19 +474,27 @@ function tableElementsFromStretches(
 		columnGroups,
 		dayHeaders: dayHeaders.filter(day => day.span),
 		hourHeaders: hourHeaders.filter(hour => hour.span),
-		locationRows: new Map([...locationRows].map(([id, cells]) => [id, cells.filter(cell => cell.span)])),
-		roleRows: new Map([...roleRows].map(([id, cells]) => [id, cells.filter(cell => cell.span)])),
+		locationRows: new Map([...locationRows]
+			.filter(([_, cells]) => cells.some(cell => cell.slots.size))
+			.map(([id, cells]) => [id, cells.filter(cell => cell.span)]))
+		,
+		roleRows: new Map([...roleRows]
+			.filter(([_, cells]) => cells.some(cell => cell.slots.size))
+			.map(([id, cells]) => [id, cells.filter(cell => cell.span)]))
+		,
 		eventBySlotId,
 	};
 }
 
 const props = defineProps<{
 	schedule: Schedule,
+	eventSlotFilter?: (slot: TimeSlot) => boolean,
+	shiftSlotFilter?: (slot: ShiftSlot) => boolean,
 }>();
 const schedule = computed(() => props.schedule);
 const junctions = computed(() => junctionsFromEdges([
-	...edgesFromEvents(schedule.value.events),
-	...edgesFromShifts(schedule.value.rota ?? []),
+	...edgesFromEvents(schedule.value.events, props.eventSlotFilter),
+	...edgesFromShifts(schedule.value.rota ?? [], props.shiftSlotFilter),
 ]));
 const stretches = computed(() => [
 	...stretchesFromSpans(

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>

utils/functions.ts

@@ -0,0 +1,9 @@
+import type { LocationQueryValue } from 'vue-router';
+
+export function queryToString(item?: null | LocationQueryValue | LocationQueryValue[]) {
+	if (item === null)
+		return "";
+	if (item instanceof Array)
+		return queryToString(item[0])
+	return item;
+}