Skip to content
Snippets Groups Projects
SubstitutionInformation.vue 1.52 KiB
Newer Older
Hangzhi Yu's avatar
Hangzhi Yu committed
<script setup>
Hangzhi Yu's avatar
Hangzhi Yu committed
import SubstitutionStatus from "./SubstitutionStatus.vue";
Hangzhi Yu's avatar
Hangzhi Yu committed

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

<template>
  <div class="full-width grid">
    <div class="d-flex">
Hangzhi Yu's avatar
Hangzhi Yu committed
      <substitution-status :substitution="substitution" />
Hangzhi Yu's avatar
Hangzhi Yu committed
      <div class="text-right d-flex flex-column fit-content">
Hangzhi Yu's avatar
Hangzhi Yu committed
        <time :datetime="substitution.datetimeStart" class="text-no-wrap">
          {{ $d(toDateTime(substitution.datetimeStart), "shortTime") }}
Hangzhi Yu's avatar
Hangzhi Yu committed
        </time>
Hangzhi Yu's avatar
Hangzhi Yu committed
        <time :datetime="substitution.datetimeEnd" class="text-no-wrap">
          {{ $d(toDateTime(substitution.datetimeEnd), "shortTime") }}
Hangzhi Yu's avatar
Hangzhi Yu committed
        </time>
      </div>
    </div>
Hangzhi Yu's avatar
Hangzhi Yu committed
    <span class="text-subtitle-1 font-weight-medium">
Hangzhi Yu's avatar
Hangzhi Yu committed
      {{ course?.name }}
    </span>
  </div>
</template>

<script>
export default {
Hangzhi Yu's avatar
Hangzhi Yu committed
  name: "SubstitutionInformation",
Hangzhi Yu's avatar
Hangzhi Yu committed
  props: {
Hangzhi Yu's avatar
Hangzhi Yu committed
    substitution: {
Hangzhi Yu's avatar
Hangzhi Yu committed
      type: Object,
      required: true,
Hangzhi Yu's avatar
Hangzhi Yu committed
    },
Hangzhi Yu's avatar
Hangzhi Yu committed
  },
  methods: {
    toDateTime(dateString) {
      return DateTime.fromISO(dateString);
    },
  },
  computed: {
    course() {
Hangzhi Yu's avatar
Hangzhi Yu committed
      if (this.substitution.course) {
        return this.substitution.course;
Hangzhi Yu's avatar
Hangzhi Yu committed
      } else if (this.substitution.amends?.course) {
Hangzhi Yu's avatar
Hangzhi Yu committed
        return this.substitution.amends.course;
      }
      return undefined;
Hangzhi Yu's avatar
Hangzhi Yu committed
    },
Hangzhi Yu's avatar
Hangzhi Yu committed
  },
Hangzhi Yu's avatar
Hangzhi Yu committed
};
</script>

<style scoped>
.grid {
  display: grid;
  align-items: center;
  gap: 1em;
  grid-template-columns: 1fr 1fr;
Hangzhi Yu's avatar
Hangzhi Yu committed
  align-content: unset;
}

.grid:last-child {
  justify-self: end;
  justify-content: end;
}

.fit-content {
  width: fit-content;
}

.gap {
  gap: 0.25em;
}
</style>