Adapt to generic infinite scrolling CRUD iterator

aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue

 <script setup>
-import SubstitutionDay from "./substitutions/SubstitutionDay.vue";
-import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
-import DateSelectFooter from "aleksis.core/components/generic/DateSelectFooter.vue";
+import SubstitutionCard from "./substitutions/SubstitutionCard.vue";
+import InfiniteScrollingDateSortedCRUDIterator from "aleksis.core/components/generic/InfiniteScrollingDateSortedCRUDIterator.vue";
 import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 
 import {
@@ -14,7 +13,7 @@ import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
 </script>
 
 <template>
-  <c-r-u-d-iterator
+  <infinite-scrolling-date-sorted-c-r-u-d-iterator
       :gql-query="gqlQuery"
       :gql-additional-query-args="gqlQueryArgs"
       :gql-patch-mutation="gqlPatchMutation"
@@ -27,11 +26,6 @@ import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
       :enable-edit="true"
       :elevated="false"
       :force-model-item-update="true"
-      @lastQuery="lastQuery = $event"
-      fixed-header
-      disable-pagination
-      hide-default-footer
-      use-deep-search
     >
       <template #additionalActions="{ attrs, on }">
         <v-autocomplete
@@ -71,33 +65,15 @@ import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
         </v-alert>
       </template>
 
-      <template #default="{ items }">
-        <substitution-day
-          v-for="{ date, itemsOfDay, first, last } in groupItemsByDay(items)"
-          v-intersect="{
-            handler: intersectHandler(date, first, last),
-            options: {
-              rootMargin: '-' + topMargin + 'px 0px 0px 0px',
-              threshold: [0, 1],
-            },
-          }"
-          :date="date"
-          :substitutions="itemsOfDay"
-          :lastQuery="lastQuery"
-          :focus-on-mount="initDate && initDate.toMillis() === date.toMillis()"
-          @init="transition"
-          :key="'day-' + date"
-          ref="days"
-        />
-
-        <date-select-footer
-          :value="currentDate"
-          @input="gotoDate"
-          @prev="gotoPrev"
-          @next="gotoNext"
+      <template #item="{ item, lastQuery }">
+        <substitution-card
+          :substitution="item"
+          :affected-query="lastQuery"
+          :is-create="false"
+          :gql-patch-mutation="gqlPatchMutation"
         />
       </template>
-    </c-r-u-d-iterator>
+    </infinite-scrolling-date-sorted-c-r-u-d-iterator>
 </template>
 
 <script>
@@ -137,8 +113,6 @@ export default {
     gqlQueryArgs() {
       return {
         objId: this.objId ? Number(this.objId) : null,
-        dateStart: this.dateStart,
-        dateEnd: this.dateEnd,
       };
     },
     currentObj() {

aleksis/apps/chronos/frontend/components/substitutions/SubstitutionDay.vue

-<script setup>
-import SubstitutionCard from "./SubstitutionCard.vue";
-
-import { patchAmendLessonsWithAmends } from "../amendLesson.graphql";
-</script>
-
-<template>
-  <v-list-item 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="substitution in substitutions"
-          :key="'substitution-' + substitution.id"
-        >
-          <substitution-card
-            :substitution="substitution"
-            :affected-query="lastQuery"
-            :is-create="false"
-            :gql-patch-mutation="gqlPatchMutation"
-          />
-        </v-list-item>
-      </v-list>
-    </v-list-item-content>
-  </v-list-item>
-</template>
-
-<script>
-export default {
-  name: "SubstitutionDay",
-  props: {
-    date: {
-      type: Object,
-      required: true,
-    },
-    substitutions: {
-      type: Array,
-      required: true,
-    },
-    lastQuery: {
-      type: Object,
-      required: true,
-    },
-    focusOnMount: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      gqlPatchMutation: patchAmendLessonsWithAmends,
-    };
-  },
-  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>