Calendar events and iCal feeds

aleksis/core/frontend/components/calendar/CalendarOverview.vue

 <template>
   <div class="mt-4 mb-4">
     <v-skeleton-loader
-      v-if="$apollo.queries.calendarFeeds.loading"
+      v-if="$apollo.queries.calendarFeeds.loading && calendarFeeds.length === 0"
       type="date-picker-options, actions"
     />
     <div v-else>
@@ -72,6 +72,12 @@
         </v-col>
         <v-col lg="9" xl="10">
           <v-sheet height="600">
+            <v-expand-transition>
+              <v-progress-linear
+                v-if="$apollo.queries.calendarFeeds.loading"
+                indeterminate
+              />
+            </v-expand-transition>
             <v-calendar
               ref="calendar"
               v-model="calendarFocus"
@@ -83,6 +89,7 @@
               @click:day="viewDay"
               @click:more="viewDay"
               @click:event="viewEvent"
+              @change="fetchMoreCalendarEvents"
             ></v-calendar>
             <component
               v-if="calendarFeeds && selectedEvent"
@@ -127,19 +134,13 @@ export default {
         { type: "week", translationKey: "calendar.week", icon: "calendar-week-outline" },
         { type: "day", translationKey: "calendar.day", icon: "calendar-today-outline" },
       ],
-      start: null,
-      end: null,
+      fetchedDateRange: { start: null, end: null },
     };
   },
   apollo: {
     calendarFeeds: {
       query: gqlCalendarOverview,
-      variables() {
-        return {
-          start: this.start,
-          end: this.end,
-        };
-      },
+      skip: true,
     },
   },
   computed: {
@@ -196,6 +197,52 @@ export default {
     getColorForEvent(event) {
       return event.color;
     },
+    fetchMoreCalendarEvents({ start, end }) {
+      let extendedStart = this.$refs.calendar.getStartOfWeek(start).date;
+      let extendedEnd = this.$refs.calendar.getEndOfWeek(end).date;
+
+      let olderStart = extendedStart < this.fetchedDateRange.start;
+      let youngerEnd = extendedEnd > this.fetchedDateRange.end;
+
+      if (this.calendarFeeds.length === 0) {
+        this.$apollo.queries.calendarFeeds.setVariables({
+          start: extendedStart,
+          end: extendedEnd,
+        });
+        this.$apollo.queries.calendarFeeds.skip = false;
+        this.fetchedDateRange = { start: extendedStart, end: extendedEnd };
+      } else if (olderStart || youngerEnd) {
+
+        let newStart = olderStart ? extendedStart : this.fetchedDateRange.start;
+        let newEnd = youngerEnd ? extendedEnd : this.fetchedDateRange.end;
+
+        this.$apollo.queries.calendarFeeds.fetchMore({
+          variables: {
+            start: olderStart ? extendedStart : this.fetchedDateRange.end,
+            end: youngerEnd ? extendedEnd : this.fetchedDateRange.start,
+          },
+          updateQuery: (previousResult, { fetchMoreResult }) => {
+            let previousCalendarFeeds = previousResult.calendarFeeds;
+            let newCalendarFeeds = fetchMoreResult.calendarFeeds;
+
+            previousCalendarFeeds.forEach(
+              (cf, i, cfs) =>
+                (cfs[i].feed.events = [
+                  ...cf.feed.events,
+                  ...newCalendarFeeds
+                    .find((ncf) => ncf.name === cf.name)
+                    .feed.events.filter((e) => cf.feed.events.indexOf(e) === -1),
+                ])
+            );
+            return {
+              calendarFeeds: previousCalendarFeeds,
+            };
+          },
+        });
+
+        this.fetchedDateRange = { start: newStart, end: newEnd };
+      }
+    },
   },
   mounted() {
     this.$refs.calendar.move(0);