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>
            <!-- 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">
                <documentation
                  :documentation="doc"
                />
              </v-card>
            </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 Documentation from "./documentation/Documentation.vue";
import gqlDocumentationsForCoursebook from "./coursebook.graphql";
import { DateTime } from "luxon";

export default {
  name: "Coursebook",
  components: {
    CRUDIterator,
    Documentation,
  },
  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: gqlDocumentationsForCoursebook,
    };
  },
  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>