From 71a1fc8f1297680a3021127d5e137fc4885e7f8d Mon Sep 17 00:00:00 2001
From: Michael Bauer <michael-bauer@posteo.de>
Date: Fri, 12 Apr 2024 22:12:34 +0200
Subject: [PATCH] Implement navigation (by date, prev, next)
---
.../components/coursebook/Coursebook.vue | 48 ++++++++++++++++---
.../components/coursebook/CoursebookDay.vue | 2 +-
2 files changed, 43 insertions(+), 7 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
index 02723cfef..07c0e1faf 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue
@@ -28,11 +28,17 @@
:date="date"
:docs="docs"
:lastQuery="lastQuery"
- :focus-on-mount="gotoDate && (gotoDate.toMillis() === date.toMillis())"
+ :focus-on-mount="initDate && (initDate.toMillis() === date.toMillis())"
@init="transition"
+ ref="days"
/>
- <date-select-footer :value="$route.hash.substring(1)" />
+ <date-select-footer
+ :value="$route.hash.substring(1)"
+ @input="gotoDate"
+ @prev="gotoPrev"
+ @next="gotoNext"
+ />
</template>
<template #loading>
<CoursebookLoader />
@@ -101,7 +107,7 @@ export default {
courses: [],
incomplete: false,
ready: false,
- gotoDate: false,
+ initDate: false,
};
},
computed: {
@@ -162,16 +168,16 @@ export default {
console.log('Resetting date range', this.$route.hash);
if (!this.$route.hash) {
console.log('Set default date');
- this.$router.replace({ hash: DateTime.now().toISODate() })
+ this.setDate(DateTime.now().toISODate());
}
const date = DateTime.fromISO(this.$route.hash.substring(1));
- this.gotoDate = date;
+ this.initDate = date;
this.dateStart = date.minus({ days: 3 }).toISODate();
this.dateEnd = date.plus({ days: 4 }).toISODate();
},
transition() {
- this.gotoDate = false
+ this.initDate = false
this.ready = true
},
groupDocsByDay(docs) {
@@ -260,6 +266,36 @@ export default {
}
};
},
+ // TODO: only load the else if out of range / not just not present
+ gotoDate(date) {
+ const present = this.$refs.days
+ .find((day) => day.date.toISODate() === date);
+
+ if (present) {
+ present.focus("smooth");
+ } else {
+ this.setDate(date);
+ this.resetDate();
+ }
+ },
+ // TODO: Disable navigation while loading!
+ gotoPrev() {
+ const current = this.$route.hash.substring(1);
+ const pref = this.$refs.days
+ .map((day) => day.date.toISODate())
+ .sort()
+ .reverse()
+ .find((date) => date < current);
+ this.gotoDate(pref);
+ },
+ gotoNext() {
+ const current = this.$route.hash.substring(1);
+ const next = this.$refs.days
+ .map((day) => day.date.toISODate())
+ .sort()
+ .find((date) => date > current);
+ this.gotoDate(next);
+ },
},
created() {
this.resetDate();
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue
index 96f3d2dd3..fa847de13 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/CoursebookDay.vue
@@ -57,13 +57,13 @@ export default {
block: "start",
inline: "nearest"
});
+ console.log('focused @', this.date.toISODate());
},
},
mounted() {
console.log('mounted ', this.date.toISODate(), this.focusOnMount);
if (this.focusOnMount) {
this.$nextTick(this.focus("instant"));
- console.log('focused @', this.date.toISODate());
this.$emit('init');
}
},
--
GitLab