<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"> <template #activator="{ on, attrs }"> <v-icon color="error" class="mr-md-4" v-on="on" v-bind="attrs" >mdi-cancel</v-icon > </template> <span>{{ $t("chronos.event.amend.cancelled") }}</span> </v-tooltip> <div class="text-right d-flex flex-column fit-content"> <time :datetime="substitution.datetimeStart" class="text-no-wrap"> {{ $d(toDateTime(substitution.datetimeStart), "shortTime") }} </time> <time :datetime="substitution.datetimeEnd" class="text-no-wrap"> {{ $d(toDateTime(substitution.datetimeEnd), "shortTime") }} </time> </div> </div> <span class="text-subtitle-1 font-weight-medium"> {{ course?.name }} </span> <div class="d-flex align-center flex-wrap gap justify-center"> <subject-chip v-if="subject" :subject="subject" /> </div> </div> </template> <script> export default { name: "SubstitutionInformation", props: { substitution: { type: Object, required: true, }, }, 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 : undefined; }, course() { return this.substitution.course ? this.substitution.course : this.substitution.amends?.course ? this.substitution.amends.course : undefined; }, }, }; </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>