From 6ea5c8853fdba7c19cf09f089468714144b3b7f8 Mon Sep 17 00:00:00 2001
From: Michael Bauer <michael-bauer@posteo.de>
Date: Fri, 19 Apr 2024 19:31:09 +0200
Subject: [PATCH] Improve navigation logic
& do the TODO.
Also leave a pointer how to improve it (even) more.
---
.../components/coursebook/Coursebook.vue | 52 ++++++++++++-------
1 file changed, 34 insertions(+), 18 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
index 91a6d3376..42873982e 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
@@ -171,10 +171,10 @@ export default {
},
},
methods: {
- resetDate() {
+ resetDate(toDate) {
// Assure current date
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) {
console.log('Set default date');
this.setDate(DateTime.now().toISODate());
@@ -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) {
const present = this.$refs.days
.find((day) => day.date.toISODate() === date);
@@ -295,26 +315,22 @@ export default {
// Also intersect handler does not always react to scrollIntoView
this.setDate(date);
present.focus("smooth");
- } else {
- this.setDate(date);
- this.resetDate();
+ } else if (!this.findPrev(DateTime.fromISO(date)) || !this.findNext(DateTime.fromISO(date))) {
+ console.log('resetting from cal to ', date);
+ this.resetDate(date);
}
},
- // TODO: Disable navigation while loading!
gotoPrev() {
- const pref = this.$refs.days
- .map((day) => day.date.toISODate())
- .sort()
- .reverse()
- .find((date) => date < this.currentDate);
- this.gotoDate(pref);
+ const prev = this.findPrev(DateTime.fromISO(this.currentDate));
+ if (prev) {
+ this.gotoDate(prev.toISODate());
+ }
},
gotoNext() {
- const next = this.$refs.days
- .map((day) => day.date.toISODate())
- .sort()
- .find((date) => date > this.currentDate);
- this.gotoDate(next);
+ const next = this.findNext(DateTime.fromISO(this.currentDate));
+ if (next) {
+ this.gotoDate(next.toISODate());
+ }
},
},
created() {
--
GitLab