Implement navigation (by date, prev, next)

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();

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');
     }
   },