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(