Load new documentations and scroll to selected date

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -38,7 +38,7 @@
     </template>
     <template #default="{ items }">
       <v-list-item v-for="day in groupDocsByDay(items)" two-line>
-        <v-list-item-content>
+        <v-list-item-content :id="'documentation_' + day[0].toISODate()">
           <v-list-item-title>{{ $d(day[0], "short") }}</v-list-item-title>
           <v-list max-width="100%">
             <v-list-item v-for="doc in day.slice(1)">
@@ -191,9 +191,68 @@ export default {
         .sort()
         .map((key) => byDay[key]);
     },
+    /**
+     * @param {"prev"|"next"} direction
+     */
+    handleDateMove(direction) {
+      const dateStartParsed = DateTime.fromISO(this.dateStart);
+      const dateEndParsed = DateTime.fromISO(this.dateEnd);
+      const dateParsed = DateTime.fromISO(this.date);
+
+      const newDate = direction === "prev" ?
+          dateParsed.minus({ days: 1 }) :
+          dateParsed.plus({ days: 1 });
+
+      /*
+       TODO:
+         Everything below this line is also needed for when a date is selected via the calendar.
+         → probably move this into a different function and create a second event listener for the input event.
+       */
+
+      // Load 3 days into the future/past
+      if (dateStartParsed >= newDate) {
+        this.dateStart = newDate.minus({ days: 3 }).toISODate();
+      }
+      if (dateEndParsed <= newDate) {
+        this.dateEnd = newDate.plus({ days: 3 }).toISODate();
+      }
+
+      this.$router.push({
+        name: "alsijil.coursebook_by_type_and_date",
+        params: {
+          filterType: this.filterType,
+          objType: this.objType,
+          objId: this.objId,
+          date: newDate.toISODate(),
+        },
+      });
+
+      // Define the function to find the nearest ID
+      const ids = Array.from(document.querySelectorAll("[id^='documentation_']")).map((el) => el.id);
+
+      // TODO: This should only be done after loading the new data
+      const nearestId = this.findNearestId(newDate, direction, ids);
+      this.$vuetify.goTo("#" + nearestId);
+    },
+    findNearestId(targetDate, direction, ids) {
+      const sortedIds = (ids
+          .map((id) => DateTime.fromISO(id.split("_")[1]))
+          .sort(
+              (a, b) => a - b,
+          ));
+
+      if (direction === "prev") {
+        sortedIds.reverse();
+      }
+
+      const nearestId = sortedIds.find(id =>
+        direction === "next" ? id >= targetDate : id <= targetDate
+      ) || sortedIds[sortedIds.length - 1];
+
+      return "documentation_" + nearestId.toISODate();
+    },
   },
   mounted() {
-    this.show = this.date;
     this.dateStart = this.date;
     this.dateEnd = DateTime.fromISO(this.dateStart).plus({ weeks: 1 }).toISODate();
   },