Use generic infinite scrolling component for coursebook

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

 <template>
-  <c-r-u-d-iterator
+  <infinite-scrolling-date-sorted-c-r-u-d-iterator
     i18n-key="alsijil.coursebook"
     :gql-query="gqlQuery"
     :gql-additional-query-args="gqlQueryArgs"
@@ -16,38 +16,22 @@
     <template #additionalActions="{ attrs, on }">
       <coursebook-filters v-model="filters" />
     </template>
-    <template #default="{ items }">
-      <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="currentDate"
-        @input="gotoDate"
-        @prev="gotoPrev"
-        @next="gotoNext"
+    <template #item="{ item, lastQuery }">
+      <documentation-modal
+        :documentation="item"
+        :affected-query="lastQuery"
       />
     </template>
+
     <template #loading>
       <coursebook-loader :number-of-days="10" :number-of-docs="5" />
     </template>
 
+    <template #itemLoader>
+      <coursebook-loader />
+    </template>
+
     <template #no-data>
       <CoursebookEmptyMessage icon="mdi-book-off-outline">
         {{ $t("alsijil.coursebook.no_data") }}
@@ -61,18 +45,17 @@
         }}
       </CoursebookEmptyMessage>
     </template>
-  </c-r-u-d-iterator>
+  </infinite-scrolling-date-sorted-c-r-u-d-iterator>
 </template>
 
 <script>
-import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
-import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.vue";
-import CoursebookDay from "./CoursebookDay.vue";
+import InfiniteScrollingDateSortedCRUDIterator from "aleksis.core/components/generic/InfiniteScrollingDateSortedCRUDIterator.vue";
 import { DateTime, Interval } from "luxon";
 import { documentationsForCoursebook } from "./coursebook.graphql";
 import CoursebookFilters from "./CoursebookFilters.vue";
 import CoursebookLoader from "./CoursebookLoader.vue";
 import CoursebookEmptyMessage from "./CoursebookEmptyMessage.vue";
+import DocumentationModal from "./documentation/DocumentationModal.vue";
 
 export default {
   name: "Coursebook",
@@ -80,9 +63,8 @@ export default {
     CoursebookEmptyMessage,
     CoursebookFilters,
     CoursebookLoader,
-    CRUDIterator,
-    DateSelectFooter,
-    CoursebookDay,
+    DocumentationModal,
+    InfiniteScrollingDateSortedCRUDIterator,
   },
   props: {
     filterType: {

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>