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-card class="my-6 mx-3">
        <v-list-item
          v-for="day in groupDocsByDay(items)"
          two-line
        >
          <v-list-item-content>
            <v-list-item-title>{{ day[0].toLocaleString() }}</v-list-item-title>
            <v-list>
              <!-- I know slice copies the array. But show me something better. -->
              <v-list-item v-for="doc in day.slice(1)">
                <v-card class="my-2">
                  <!-- Insert subcomponents here. -->
                  <v-card-text>{{ doc.id }}</v-card-text>
                </v-card>
              </v-list-item>
            </v-list>
          </v-list-item-content>
        </v-list-item>
      </v-card>
    </template>
  </c-r-u-d-iterator>
</template>

<script>
import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
import gqlDocumentationsForCoursebook from "./coursebook.graphql";
import { DateTime } from "luxon";

export default {
  name: "Coursebook",
  components: {
    CRUDIterator,
  },
  props: {
    // Either as props OR route params
    // TODO: Remove default?
    courseId: {
      type: [Number, String],
      required: false,
      default: 0,
    },
    // Next two in ISODate
    dateStart: {
      type: String,
      required: false,
      default: "",
    },
    dateEnd: {
      type: String,
      required: false,
      default: "",
    },
  },
  data() {
    return {
      gqlQuery: gqlDocumentationsForCoursebook,
    };
  },
  computed: {
    gqlQueryArgs() {
      return {
        // Assure courseId is a number
        courseId: Number(this.courseId),
        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>