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"
  >
    <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" />
            </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 { documentationsForCoursebook } from "./coursebook.graphql";
import { DateTime } from "luxon";

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,
    };
  },
  computed: {
    gqlQueryArgs() {
      return {
        // Assure courseId is a number
        objId: Number(this.objId),
        objType: this.objType.toUpperCase(),
        dateStart: this.dateStart,
        dateEnd: this.dateEnd,
      };
    },
  },
  methods: {
    // => [[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>