Substitutions.vue

<script setup>
import CRUDList from "aleksis.core/components/generic/CRUDList.vue";
</script>

<template>
  <c-r-u-d-list
    :gql-query="query"
    :gql-additional-query-args="{ date: date  }"
    :get-gql-data="prepareList"
    :headers="headers"
    :show-select="false"
    :enable-create="false"
    :enable-edit="false"
  />
  </c-r-u-d-list>
</template>

<script>
import { substitutionsForDate } from "./substitutions.graphql";
import { DateTime } from "luxon";

export default {
  name: "Substitutions",
  props: {
    date: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      query: substitutionsForDate,
      affectedTeachers: [],
      affectedGroups: [],
      // TODO: i18n
      headers: [
        {
          text: "groups",
          value: "groups",
        },
        {
          text: "time",
          value: "time",
        },
        {
          text: "teachers",
          value: "teachers",
        },
        {
          text: "subject",
          value: "subject",
        },
        {
          text: "room",
          value: "room",
        },
        {
          text: "notes",
          value: "notes",
        },
      ],
    };
  },
  methods: {
    prepareList(data) {
      this.affectedTeachers = data.affectedTeachers;
      this.affectedGroups = data.affectedGroups;

      return data.substitutions.map((sub) => {
        return {
          groups: sub.oldGroups[0].shortName,
          time: sub.startTime,
          teachers: sub.oldTeachers[0].shortName,
          subject: sub.oldSubject,
          room: sub.oldRooms[0].shortName,
          notes: sub.comment,
        };
      });
    },
  },
};
</script>