From d29e1f6d8ae16647b40a6cb26c9020c0a7433a36 Mon Sep 17 00:00:00 2001
From: Michael Bauer <michael-bauer@posteo.de>
Date: Sat, 23 Mar 2024 11:52:08 +0100
Subject: [PATCH] Test fetchMore - broken
fetchMore operates on the raw query result
query update fn is then called on the combined result
this result is then propagated through the page
---
.../components/coursebook/Coursebook.vue | 43 ++++++++++---------
1 file changed, 22 insertions(+), 21 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
index 26ed6afc7..cfe4dff08 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
@@ -6,7 +6,6 @@
:enable-create="false"
:enable-edit="false"
:elevated="false"
- @items="docsByDay = groupDocsByDay($event)"
@lastQuery="lastQuery = $event"
ref="iterator"
disable-pagination
@@ -16,9 +15,9 @@
<template #additionalActions="{ attrs, on }">
<coursebook-filters v-model="filters" />
</template>
- <template #default>
+ <template #default="{ items }">
<v-list-item
- v-for="day in listDocsByDay(docsByDay)"
+ v-for="day in groupDocsByDay(items)"
two-line
:key="'day-' + day[0]"
:id="'documentation_' + day[0].toISODate()"
@@ -164,6 +163,7 @@ export default {
},
},
methods: {
+ // TODO: Scroll to actual first date!
resetDate() {
// Assure current date
console.log('Resetting date range', this.$route.hash);
@@ -180,21 +180,20 @@ export default {
this.dateStart = this.dateRange(dateRange[0])[0].toISODate();
this.dateEnd = this.dateRange(dateRange[lastIdx])[lastIdx].toISODate();
},
- // => {dt: [dt doc ...] ...}
groupDocsByDay(docs) {
- return docs.reduce((byDay, doc) => {
+ // => {dt: [dt doc ...] ...}
+ this.docsByDay = 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;
}, {});
- },
- // => [[dt doc ...] ...]
- listDocsByDay(docsByDay) {
- return Object.keys(docsByDay)
+ // => [[dt doc ...] ...]
+ return Object.keys(this.docsByDay)
.sort()
- .map((key) => docsByDay[key]);
+ .map((key) => this.docsByDay[key]);
+ // sorting is necessary since backend can send docs unordered
},
debounce(fn, delay) {
let timer;
@@ -298,8 +297,11 @@ export default {
// docsByDay: {dt: [dt doc ...] ...}
assureDate(date) {
if (!this.knownDates[date]) {
+ console.log(this.lastQuery);
+ console.log('unknown date', date.toISODate());
// find missing & fetch missing range
- const missing = this.dateRange(date).filter((ts) => !this.docsByDay[ts] );
+ const missing = this.dateRange(date)
+ .filter((ts) => !this.docsByDay[ts]);
// ask for first to last
this.lastQuery.fetchMore({
variables: {
@@ -308,18 +310,17 @@ export default {
},
// Transform the previous result with new data
updateQuery: (previousResult, { fetchMoreResult }) => {
-
+ console.log('previousResult', previousResult);
+ console.log('fetchMoreResult', fetchMoreResult);
return {
- tagsPage: {
- __typename: previousResult.tagsPage.__typename,
- // Merging the tag list
- tags: [...previousResult.tagsPage.tags, ...newTags],
- hasMore,
- },
- }
- },
+ items: [...previousResult.items,
+ ...fetchMoreResult.items.filter((doc) => {
+ return previousResult.items.find((prev) => prev.id === doc.id)
+ }),
+ ],
+ };
+ }
})
-
// integrate into docsByDay
}
},
--
GitLab