65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
|
<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>
|