Group documentations by day and show in coursebook frontend

aleksis/apps/alsijil/frontend/components/Coursebook.vue

@@ -4,15 +4,34 @@
     :gql-query="gqlQuery"
     :gql-additional-query-args="gqlQueryArgs"
     >
-    <template #default="{ items, groupedItems }">
-      {{ items }}
+    <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] }}</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 CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
+import gqlDocumentationsForCoursebook from "./coursebook.graphql";
+import { DateTime } from "luxon";
 
 export default {
   name: "Coursebook",
@@ -54,5 +73,21 @@ export default {
       };
     },
   },
+  methods: {
+    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] ??= [];
+          byDay[day].push(doc);
+          return byDay;
+        },
+        {}
+      );
+
+      return Object.keys(byDay).sort().map(key => [key, ...byDay[key]]);
+    },
+  },
 };
 </script>