Hornwitser
4ff3dcb3fe
When async components are added dynamically to the tree via v-for list that change their order and position gets messed up. I am not sure what causes this, so I will just work around the issue for now and not use async components. Components that need async data loaded will instead depend on the parent page fetching this data during its setup.
56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<template>
|
|
<section class="shift">
|
|
<h3>{{ shift.name }}</h3>
|
|
<p>{{ shift.description ?? "No description provided" }}</p>
|
|
|
|
<h4>Timeslots</h4>
|
|
<ul>
|
|
<li v-for="slot in shift.slots.values()" :key="slot.id">
|
|
{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
|
|
<p v-if="slot.assigned">
|
|
Assigned:
|
|
{{ [...slot.assigned].map(id => usersStore.users.get(id)?.name).join(", ") }}
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { DateTime } from '~/shared/utils/luxon';
|
|
|
|
defineProps<{
|
|
shift: ClientScheduleShift
|
|
}>()
|
|
|
|
const usersStore = useUsersStore();
|
|
|
|
function formatTime(time: DateTime) {
|
|
return time.toFormat("yyyy-LL-dd HH:mm");
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.shift {
|
|
background: color-mix(in oklab, var(--background), grey 20%);
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.shift h3 {
|
|
margin: 0;
|
|
}
|
|
.shift + .shift {
|
|
margin-block-start: 0.5rem;
|
|
}
|
|
|
|
button {
|
|
padding-inline: 0.2em;
|
|
}
|
|
button.active {
|
|
color: color-mix(in oklab, var(--foreground), green 50%);
|
|
}
|
|
</style>
|