Coursebook.vue

<template>
  <c-r-u-d-iterator
    i18n-key="coursebook"
    :gql-query="gqlQuery"
    :gql-additional-query-args="gqlQueryArgs"
    :enable-create="false"
    :enable-edit="false"
    @lastQuery="lastQuery = $event"
  >
    <template #additionalActions="{ attrs, on }">
      <v-autocomplete
        :items="selectable"
        item-text="name"
        clearable
        return-object
        @input="changeSelection"
      />
    </template>
    <template #default="{ items }">
      <v-list-item v-for="day in groupDocsByDay(items)" two-line>
        <v-list-item-content>
          <v-list-item-title>{{ $d(day[0], "short") }}</v-list-item-title>
          <v-list>
            <v-list-item v-for="doc in day.slice(1)">
              <documentation-modal :documentation="doc" :affected-query="lastQuery" />
            </v-list-item>
          </v-list>
        </v-list-item-content>
      </v-list-item>
    </template>
  </c-r-u-d-iterator>
</template>

<script>
import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
import DocumentationModal from "./documentation/DocumentationModal.vue";
import { DateTime } from "luxon";
import {
  groupsByOwner,
  coursesOfTeacher,
  documentationsForCoursebook,
} from "./coursebook.graphql";

export default {
  name: "Coursebook",
  components: {
    CRUDIterator,
    DocumentationModal,
  },
  props: {
    // Either as props OR route params
    // TODO: Remove default?
    objId: {
      type: [Number, String],
      required: false,
      default: 0,
    },
    objType: {
      type: String,
      required: false,
      default: "group",
    },
    // Next two in ISODate
    dateStart: {
      type: String,
      required: false,
      default: "",
    },
    dateEnd: {
      type: String,
      required: false,
      default: "",
    },
  },
  data() {
    return {
      gqlQuery: documentationsForCoursebook,
      lastQuery: null,
    };
  },
  apollo: {
    groups: {
      query: groupsByOwner,
    },
    courses: {
      query: coursesOfTeacher,
    },
  },
  computed: {
    gqlQueryArgs() {
      return {
        // Assure courseId is a number
        objId: Number(this.objId),
        objType: this.objType.toUpperCase(),
        dateStart: this.dateStart,
        dateEnd: this.dateEnd,
      };
    },
    selectable() {
      // TODO: i18n
      return [
        { header: "Klassen" },
        ...this.groups.map((group) => ({ type: "group", ...group })),
        { header: "Kurse" },
        ...this.courses.map((course) => ({ type: "course", ...course })),
      ];
    },
  },
  methods: {
    changeSelection(selection) {
      this.$router.push({
        name: "alsijil.coursebook_by_obj_id_and_date",
        params: {
          objType: selection.type,
          objId: selection.id,
          dateStart: this.dateStart,
          dateEnd: this.dateEnd,
        },
      });
    },
    // => [[dt doc ...] ...]
    groupDocsByDay(docs) {
      const byDay = docs.reduce((byDay, doc) => {
        // This works with dummy. Does actual doc have dateStart instead?
        const day = DateTime.fromISO(doc.datetimeStart).startOf("day");
        byDay[day] ??= [day];
        byDay[day].push(doc);
        return byDay;
      }, {});

      return Object.keys(byDay)
        .sort()
        .map((key) => byDay[key]);
    },
  },
};
</script>