Skip to content
Snippets Groups Projects
Commit 6ea5c885 authored by permcu's avatar permcu
Browse files

Improve navigation logic

& do the TODO.
Also leave a pointer how to improve it (even) more.
parent b91f0c14
No related branches found
No related tags found
2 merge requests!355Implement infinite scrolling and by date navigation for coursebook,!350Resolve "Add simple course book list"
...@@ -171,10 +171,10 @@ export default { ...@@ -171,10 +171,10 @@ export default {
}, },
}, },
methods: { methods: {
resetDate() { resetDate(toDate) {
// Assure current date // Assure current date
console.log('Resetting date range', this.$route.hash); console.log('Resetting date range', this.$route.hash);
this.currentDate = this.$route.hash?.substring(1); this.currentDate = toDate || this.$route.hash?.substring(1);
if (!this.currentDate) { if (!this.currentDate) {
console.log('Set default date'); console.log('Set default date');
this.setDate(DateTime.now().toISODate()); this.setDate(DateTime.now().toISODate());
...@@ -285,7 +285,27 @@ export default { ...@@ -285,7 +285,27 @@ export default {
} }
}; };
}, },
// TODO: only load the else if out of range / not just not present // Improve me?
// The navigation logic could be a bit simpler if the current days
// where known as a sorted array (= result of groupDocsByDay) But
// then the list would need its own component and this gets rather
// complicated. Then the calendar could also show the present days
// / gray out the missing.
//
// Next two: arg date is ts object
findPrev(date) {
return this.$refs.days
.map((day) => day.date)
.sort()
.reverse()
.find((date2) => date2 < date);
},
findNext(date) {
return this.$refs.days
.map((day) => day.date)
.sort()
.find((date2) => date2 > date);
},
gotoDate(date) { gotoDate(date) {
const present = this.$refs.days const present = this.$refs.days
.find((day) => day.date.toISODate() === date); .find((day) => day.date.toISODate() === date);
...@@ -295,26 +315,22 @@ export default { ...@@ -295,26 +315,22 @@ export default {
// Also intersect handler does not always react to scrollIntoView // Also intersect handler does not always react to scrollIntoView
this.setDate(date); this.setDate(date);
present.focus("smooth"); present.focus("smooth");
} else { } else if (!this.findPrev(DateTime.fromISO(date)) || !this.findNext(DateTime.fromISO(date))) {
this.setDate(date); console.log('resetting from cal to ', date);
this.resetDate(); this.resetDate(date);
} }
}, },
// TODO: Disable navigation while loading!
gotoPrev() { gotoPrev() {
const pref = this.$refs.days const prev = this.findPrev(DateTime.fromISO(this.currentDate));
.map((day) => day.date.toISODate()) if (prev) {
.sort() this.gotoDate(prev.toISODate());
.reverse() }
.find((date) => date < this.currentDate);
this.gotoDate(pref);
}, },
gotoNext() { gotoNext() {
const next = this.$refs.days const next = this.findNext(DateTime.fromISO(this.currentDate));
.map((day) => day.date.toISODate()) if (next) {
.sort() this.gotoDate(next.toISODate());
.find((date) => date > this.currentDate); }
this.gotoDate(next);
}, },
}, },
created() { created() {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment