diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue index 8f07110e1c03be672ca34bfb035539df1153373b..f5171d10a4a5a5333dd72d1226090afe890aa1fb 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 @@ -57,9 +56,9 @@ </div> </div> </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()" @@ -199,6 +198,7 @@ export default { }, }, methods: { + // TODO: Scroll to actual first date! resetDate() { // Assure current date console.log('Resetting date range', this.$route.hash); @@ -229,21 +229,20 @@ export default { }); this.resetDate(); }, - // => {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; @@ -347,8 +346,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: { @@ -357,18 +359,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 } },