LessonInformation.vue

<script setup>
import CancelledCalendarStatusChip from "aleksis.core/components/calendar/CancelledCalendarStatusChip.vue";
import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";

import { DateTime } from "luxon";
</script>

<template>
  <v-card-text>
    <cancelled-calendar-status-chip
      v-if="lesson.cancelled"
      class="mr-2"
    />
    <div :class="{ 'text-decoration-line-through': lesson.cancelled, 'text--secondary': lesson.cancelled }">
      {{ $d(toDateTime(lesson.datetimeStart), "shortTime") }} –
      {{ $d(toDateTime(lesson.datetimeEnd), "shortTime") }}
      {{ getCourse(lesson)?.name }}
    </div>
    <subject-chip
      v-if="getSubject(lesson)"
      :subject="getSubject(lesson)"
    />
  </v-card-text>
</template>

<script>
export default {
  name: "LessonInformation",
  props: {
    lesson: {
      type: Object,
      required: true,
    },
    cancelled: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  methods: {
    toDateTime(dateString) {
      return DateTime.fromISO(dateString);
    },
    getSubject(lesson) {
      return lesson.subject ? lesson.subject : lesson.course?.subject ? lesson.course.subject : lesson.realAmends?.subject ? lesson.realAmends.subject : undefined;
    },
    getCourse(lesson) {
      return lesson.course ? lesson.course : lesson.realAmends?.course ? lesson.realAmends.course : undefined;
    },
  },
};
</script>