owltide/components/DiffSchedule.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div>
		<h2>Changes</h2>
		<section v-if="locations.length">
			<h3>Locations</h3>
			<DiffScheduleLocation
				v-for="location in locations"
				:key="location.id"
				:location
			/>
		</section>
		<section v-if="events.length">
			<h3>Events</h3>
			<DiffScheduleEvent
				v-for="event in events"
				:key="event.id"
				:event
				:schedule
			/>
		</section>
		<section v-if="roles.length">
			<h3>Roles</h3>
			<DiffScheduleRole
				v-for="role in roles"
				:key="role.id"
				:role
			/>
		</section>
		<section v-if="shifts.length">
			<h3>Shifts</h3>
			<DiffScheduleShift
				v-for="shift in shifts"
				:key="shift.id"
				:shift
				:schedule
			/>
		</section>
	</div>
</template>

<script lang="ts" setup>
const props = defineProps<{
	schedule: ClientSchedule
}>();

const locations = computed(() => {
	return [...props.schedule.locations.values()].filter(location => location.isModified());
});
const events = computed(() => {
	return [...props.schedule.events.values()].filter(event => event.isModified());
});
const roles = computed(() => {
	return [...props.schedule.roles.values()].filter(role => role.isModified());
});
const shifts = computed(() => {
	return [...props.schedule.shifts.values()].filter(shift => shift.isModified());
});
</script>

<style>
h2 {
	margin-block-start: 0.2rem;
}
</style>