Newer
Older
<script setup>
import PersonChip from "aleksis.core/components/person/PersonChip.vue";
import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
import { DateTime } from "luxon";
</script>
<template>
<div class="full-width grid">
<div class="d-flex">
<v-tooltip bottom v-if="substitution.cancelled">
>mdi-cancel</v-icon
>
</template>
<span>{{ $t("chronos.event.amend.cancelled") }}</span>
</v-tooltip>
<time :datetime="substitution.datetimeStart" class="text-no-wrap">
{{ $d(toDateTime(substitution.datetimeStart), "shortTime") }}
<time :datetime="substitution.datetimeEnd" class="text-no-wrap">
{{ $d(toDateTime(substitution.datetimeEnd), "shortTime") }}
<div class="d-flex align-center flex-wrap gap justify-center">
<subject-chip v-if="subject" :subject="subject" />
</div>
</div>
</template>
<script>
export default {
},
methods: {
toDateTime(dateString) {
return DateTime.fromISO(dateString);
},
},
computed: {
subject() {
return this.substitution.subject
? this.substitution.subject
: this.substitution.course?.subject
? this.substitution.course.subject
: this.substitution.amends?.subject
? this.substitution.amends.subject
return this.substitution.course
? this.substitution.course
: this.substitution.amends?.course
? this.substitution.amends.course
};
</script>
<style scoped>
.grid {
display: grid;
align-items: center;
gap: 1em;
grid-template-columns: 1fr 1fr 1fr;
align-content: unset;
}
.grid:last-child {
justify-self: end;
justify-content: end;
}
.fit-content {
width: fit-content;
}
.gap {
gap: 0.25em;
}
</style>