From 4023ab7deeca78f05eb4e15e168b165c8d9a8778 Mon Sep 17 00:00:00 2001
From: Michael Bauer <michael-bauer@posteo.de>
Date: Fri, 26 Jan 2024 00:06:40 +0100
Subject: [PATCH] Group documentations by day and show in coursebook frontend
---
.../frontend/components/Coursebook.vue | 43 +++++++++++++++++--
1 file changed, 39 insertions(+), 4 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/Coursebook.vue
index 25bf02ca5..f5f3402d6 100644
--- a/aleksis/apps/alsijil/frontend/components/Coursebook.vue
+++ b/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>
--
GitLab