Merge branch 'rebased2-michael-scrollt' into '256-add-simple-course-book-list'

Implement infinite scrolling and by date navigation for coursebook

See merge request !355

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

@@ -6,9 +6,10 @@
     :enable-create="false"
     :enable-edit="false"
     :elevated="false"
-    :items-per-page="-1"
     @lastQuery="lastQuery = $event"
     ref="iterator"
+    fixed-header
+    disable-pagination
     hide-default-footer
     use-deep-search
   >
@@ -16,33 +17,35 @@
       <coursebook-filters v-model="filters" />
     </template>
     <template #default="{ items }">
-      <v-list-item
-        v-for="day in groupDocsByDay(items)"
-        two-line
-        :key="'day-' + day[0]"
-      >
-        <v-list-item-content :id="'documentation_' + day[0].toISODate()">
-          <v-subheader class="text-h6">{{
-            $d(day[0], "dateWithWeekday")
-          }}</v-subheader>
-          <v-list max-width="100%" class="pt-0 mt-n1">
-            <v-list-item
-              v-for="doc in day.slice(1)"
-              :key="'documentation-' + (doc.oldId || doc.id)"
-            >
-              <documentation-modal
-                :documentation="doc"
-                :affected-query="lastQuery"
-              />
-            </v-list-item>
-          </v-list>
-        </v-list-item-content>
-      </v-list-item>
+      <coursebook-loader />
+      <coursebook-day
+        v-for="{ date, docs, first, last } in groupDocsByDay(items)"
+        v-intersect="{
+          handler: intersectHandler(date, first, last),
+          options: {
+            rootMargin: '-' + topMargin + 'px 0px 0px 0px',
+            threshold: [0, 1],
+          },
+        }"
+        :date="date"
+        :docs="docs"
+        :lastQuery="lastQuery"
+        :focus-on-mount="initDate && initDate.toMillis() === date.toMillis()"
+        @init="transition"
+        :key="'day-' + date"
+        ref="days"
+      />
+      <coursebook-loader />
 
-      <date-select-footer :value="date" @click="handleDateMove" />
+      <date-select-footer
+        :value="currentDate"
+        @input="gotoDate"
+        @prev="gotoPrev"
+        @next="gotoNext"
+      />
     </template>
     <template #loading>
-      <CoursebookLoader />
+      <coursebook-loader :number-of-days="10" :number-of-docs="5" />
     </template>
 
     <template #no-data>
@@ -64,8 +67,8 @@
 <script>
 import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
 import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.vue";
-import DocumentationModal from "./documentation/DocumentationModal.vue";
-import { DateTime } from "luxon";
+import CoursebookDay from "./CoursebookDay.vue";
+import { DateTime, Interval } from "luxon";
 import { documentationsForCoursebook } from "./coursebook.graphql";
 import CoursebookFilters from "./CoursebookFilters.vue";
 import CoursebookLoader from "./CoursebookLoader.vue";
@@ -79,7 +82,7 @@ export default {
     CoursebookLoader,
     CRUDIterator,
     DateSelectFooter,
-    DocumentationModal,
+    CoursebookDay,
   },
   props: {
     filterType: {
@@ -96,36 +99,51 @@ export default {
       required: false,
       default: null,
     },
-    // ISODate
-    date: {
-      type: String,
+    /**
+     * Number of consecutive to load at once
+     * This number of days is initially loaded and loaded
+     * incrementally while scrolling.
+     */
+    dayIncrement: {
+      type: Number,
       required: false,
-      default: "",
+      default: 7,
+    },
+    /**
+     * Margin from coursebook list to top of viewport in pixels
+     */
+    topMargin: {
+      type: Number,
+      required: false,
+      default: 165,
     },
   },
   data() {
     return {
       gqlQuery: documentationsForCoursebook,
       lastQuery: null,
+      dateStart: "",
+      dateEnd: "",
       // Placeholder values while query isn't completed yet
       groups: [],
       courses: [],
-      dateStart: null,
-      dateEnd: null,
       incomplete: false,
+      ready: false,
+      initDate: false,
+      currentDate: "",
+      hashUpdater: false,
     };
   },
   computed: {
+    // Assertion: Should only fire on page load or selection change.
+    //            Resets date range.
     gqlQueryArgs() {
       return {
-        // Assure courseId is a number
         own: this.filterType === "all" ? false : true,
-        objId: this.objId ? Number(this.objId) : null,
+        objId: this.objId ? Number(this.objId) : undefined,
         objType: this.objType?.toUpperCase(),
-        dateStart: this.dateStart ?? this.date,
-        dateEnd:
-          this.dateEnd ??
-          DateTime.fromISO(this.date).plus({ weeks: 1 }).toISODate(),
+        dateStart: this.dateStart,
+        dateEnd: this.dateEnd,
         incomplete: !!this.incomplete,
       };
     },
@@ -147,103 +165,196 @@ export default {
           Object.hasOwn(selectedFilters, "objType")
         ) {
           this.$router.push({
-            name: "alsijil.coursebook_by_type_and_date",
+            name: "alsijil.coursebook",
             params: {
               filterType: selectedFilters.filterType
                 ? selectedFilters.filterType
                 : this.filterType,
               objType: selectedFilters.objType,
               objId: selectedFilters.objId,
-              date: this.date,
             },
+            hash: this.$route.hash,
           });
+          // computed should not have side effects
+          // but this was actually done before filters was refactored into
+          // its own component
+          this.resetDate();
+          // might skip query until both set = atomic
         }
       },
     },
   },
   methods: {
-    // => [[dt doc ...] ...]
+    resetDate(toDate) {
+      // Assure current date
+      console.log("Resetting date range", this.$route.hash);
+      this.currentDate = toDate || this.$route.hash?.substring(1);
+      if (!this.currentDate) {
+        console.log("Set default date");
+        this.setDate(DateTime.now().toISODate());
+      }
+
+      const date = DateTime.fromISO(this.currentDate);
+      this.initDate = date;
+      this.dateStart = date.minus({ days: this.dayIncrement }).toISODate();
+      this.dateEnd = date.plus({ days: this.dayIncrement }).toISODate();
+    },
+    transition() {
+      this.initDate = false;
+      this.ready = true;
+    },
     groupDocsByDay(docs) {
-      const byDay = docs.reduce((byDay, doc) => {
+      // => {dt: {date: dt, docs: doc ...} ...}
+      const docsByDay = docs.reduce((byDay, doc) => {
         // This works with dummy. Does actual doc have dateStart instead?
         const day = DateTime.fromISO(doc.datetimeStart).startOf("day");
-        byDay[day] ??= [day];
-        byDay[day].push(doc);
+        byDay[day] ??= { date: day, docs: [] };
+        byDay[day].docs.push(doc);
         return byDay;
       }, {});
-
-      return Object.keys(byDay)
+      // => [{date: dt, docs: doc ..., idx: idx, lastIdx: last-idx} ...]
+      // sorting is necessary since backend can send docs unordered
+      return Object.keys(docsByDay)
         .sort()
-        .map((key) => byDay[key]);
+        .map((key, idx, { length }) => {
+          const day = docsByDay[key];
+          day.first = idx === 0;
+          const lastIdx = length - 1;
+          day.last = idx === lastIdx;
+          return day;
+        });
     },
-    /**
-     * @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(),
+    // docsByDay: {dt: [dt doc ...] ...}
+    fetchMore(from, to, then) {
+      console.log("fetching", from, to);
+      this.lastQuery.fetchMore({
+        variables: {
+          dateStart: from,
+          dateEnd: to,
+        },
+        // Transform the previous result with new data
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          console.log("Received more");
+          then();
+          return { items: previousResult.items.concat(fetchMoreResult.items) };
         },
       });
-
-      // 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();
+    },
+    setDate(date) {
+      this.currentDate = date;
+      if (!this.hashUpdater) {
+        this.hashUpdater = window.requestIdleCallback(() => {
+          if (!(this.$route.hash.substring(1) === this.currentDate)) {
+            this.$router.replace({ hash: this.currentDate });
+          }
+          this.hashUpdater = false;
+        });
       }
+    },
+    fixScrollPos(height, top) {
+      this.$nextTick(() => {
+        if (height < document.documentElement.scrollHeight) {
+          document.documentElement.scrollTop =
+            document.documentElement.scrollHeight - height + top;
+          this.ready = true;
+        } else {
+          // Update top, could have changed in the meantime.
+          this.fixScrollPos(height, document.documentElement.scrollTop);
+        }
+      });
+    },
+    intersectHandler(date, first, last) {
+      let once = true;
+      return (entries) => {
+        const entry = entries[0];
+        if (entry.isIntersecting) {
+          if (entry.boundingClientRect.top <= this.topMargin || first) {
+            console.log("@ ", date.toISODate());
+            this.setDate(date.toISODate());
+          }
 
-      const nearestId =
-        sortedIds.find((id) =>
-          direction === "next" ? id >= targetDate : id <= targetDate,
-        ) || sortedIds[sortedIds.length - 1];
+          if (once && this.ready && first) {
+            console.log("load up", date.toISODate());
+            this.ready = false;
+            this.fetchMore(
+              date.minus({ days: this.dayIncrement }).toISODate(),
+              date.minus({ days: 1 }).toISODate(),
+              () => {
+                this.fixScrollPos(
+                  document.documentElement.scrollHeight,
+                  document.documentElement.scrollTop,
+                );
+              },
+            );
+            once = false;
+          } else if (once && this.ready && last) {
+            console.log("load down", date.toISODate());
+            this.ready = false;
+            this.fetchMore(
+              date.plus({ days: 1 }).toISODate(),
+              date.plus({ days: this.dayIncrement }).toISODate(),
+              () => {
+                this.ready = true;
+              },
+            );
+            once = false;
+          }
+        }
+      };
+    },
+    // 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,
+      );
 
-      return "documentation_" + nearestId.toISODate();
+      if (present) {
+        // React immediatly -> smoother navigation
+        // Also intersect handler does not always react to scrollIntoView
+        this.setDate(date);
+        present.focus("smooth");
+      } else if (
+        !this.findPrev(DateTime.fromISO(date)) ||
+        !this.findNext(DateTime.fromISO(date))
+      ) {
+        this.resetDate(date);
+      }
+    },
+    gotoPrev() {
+      const prev = this.findPrev(DateTime.fromISO(this.currentDate));
+      if (prev) {
+        this.gotoDate(prev.toISODate());
+      }
+    },
+    gotoNext() {
+      const next = this.findNext(DateTime.fromISO(this.currentDate));
+      if (next) {
+        this.gotoDate(next.toISODate());
+      }
     },
   },
-  mounted() {
-    this.dateStart = this.date;
-    this.dateEnd = DateTime.fromISO(this.dateStart)
-      .plus({ weeks: 1 })
-      .toISODate();
+  created() {
+    this.resetDate();
   },
 };
 </script>

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

+<template>
+  <v-list-item :style="{ scrollMarginTop: '145px' }" two-line>
+    <v-list-item-content>
+      <v-subheader class="text-h6">{{
+        $d(date, "dateWithWeekday")
+      }}</v-subheader>
+      <v-list max-width="100%" class="pt-0 mt-n1">
+        <v-list-item
+          v-for="doc in docs"
+          :key="'documentation-' + (doc.oldId || doc.id)"
+        >
+          <documentation-modal
+            :documentation="doc"
+            :affected-query="lastQuery"
+          />
+        </v-list-item>
+      </v-list>
+    </v-list-item-content>
+  </v-list-item>
+</template>
+
+<script>
+import DocumentationModal from "./documentation/DocumentationModal.vue";
+export default {
+  name: "CoursebookDay",
+  components: {
+    DocumentationModal,
+  },
+  props: {
+    date: {
+      type: Object,
+      required: true,
+    },
+    docs: {
+      type: Array,
+      required: true,
+    },
+    lastQuery: {
+      type: Object,
+      required: true,
+    },
+    focusOnMount: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ["init"],
+  methods: {
+    focus(how) {
+      this.$el.scrollIntoView({
+        behavior: how,
+        block: "start",
+        inline: "nearest",
+      });
+      console.log("focused @", this.date.toISODate());
+    },
+  },
+  mounted() {
+    if (this.focusOnMount) {
+      this.$nextTick(this.focus("instant"));
+      this.$emit("init");
+    }
+  },
+};
+</script>

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

 <template>
   <div>
-    <v-list-item v-for="i in 10" :key="'i-' + i">
+    <v-list-item v-for="i in numberOfDays" :key="'i-' + i">
       <v-list-item-content>
         <v-list-item-title>
           <v-skeleton-loader type="heading" />
         </v-list-item-title>
         <v-list max-width="100%">
-          <v-list-item v-for="j in 5" :key="'j-' + j">
+          <v-list-item v-for="j in numberOfDocs" :key="'j-' + j">
             <DocumentationLoader />
           </v-list-item>
         </v-list>
@@ -20,5 +20,17 @@ import DocumentationLoader from "./documentation/DocumentationLoader.vue";
 export default {
   name: "CoursebookLoader",
   components: { DocumentationLoader },
+  props: {
+    numberOfDays: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+    numberOfDocs: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
+  },
 };
 </script>

aleksis/apps/alsijil/frontend/index.js

@@ -60,14 +60,14 @@ export default {
       component: () => import("./components/coursebook/Coursebook.vue"),
       redirect: () => {
         return {
-          name: "alsijil.coursebook_by_type_and_date",
+          name: "alsijil.coursebook",
           params: {
-            date: DateTime.now().toISODate(),
             filterType: "my",
           },
+          hash: "#" + DateTime.now().toISODate(),
         };
       },
-      name: "alsijil.coursebook",
+      name: "alsijil.coursebook_landing",
       props: true,
       meta: {
         inMenu: true,
@@ -79,9 +79,9 @@ export default {
       },
       children: [
         {
-          path: ":date(\\d\\d\\d\\d-\\d\\d-\\d\\d)/:filterType(my|all)/:objType(group|course|teacher)?/:objId(\\d+)?/",
+          path: ":filterType(my|all)/:objType(group|course|teacher)?/:objId(\\d+)?/",
           component: () => import("./components/coursebook/Coursebook.vue"),
-          name: "alsijil.coursebook_by_type_and_date",
+          name: "alsijil.coursebook",
           meta: {
             titleKey: "alsijil.coursebook.menu_title",
             toolbarTitle: "alsijil.coursebook.menu_title",