SubstitutionInformation.vue

<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>