Hornwitser
0a0eb43d78
Support basic formatting in the display of the description fields to locations, events and shifts by rendering them as Markdown using the micromark library.
67 lines
1.3 KiB
Vue
67 lines
1.3 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>
|
|
<div
|
|
v-if="descriptionHtml"
|
|
class="flow"
|
|
v-html="descriptionHtml"
|
|
/>
|
|
|
|
<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 { micromark } from 'micromark';
|
|
import { DateTime } from '~/shared/utils/luxon';
|
|
|
|
const props = defineProps<{
|
|
shift: ClientScheduleShift
|
|
}>()
|
|
|
|
const descriptionHtml = computed(() => {
|
|
if (props.shift.description) {
|
|
return micromark(props.shift.description);
|
|
}
|
|
});
|
|
|
|
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>
|