FIX: refetch timeslots when calendar view changes

src/components/ShowManagerModalSchedules.vue

@@ -18,6 +18,7 @@
         default-view="agendaWeek"
         :events="calendarSlots"
         :config="calendarConfig"
+        @view-render="renderView"
       />
     </b-modal>
   </div>
@@ -40,7 +41,7 @@ export default {
       calendarSlots: [],
 
       // this is the whole configuration for our schedule calendar, including
-      // rendering functions and all
+      // simple event handlers that do not need the whole components scope
       calendarConfig: {
         height: 600,
         firstDay: 1,
@@ -99,23 +100,34 @@ export default {
       }
     },
 
+    // this is called when the user changes the calendar view, so we just
+    // refetch the timeslots with the updated visible date range
+    renderView (view) {
+      this.$log.debug(view.start.format() + ' ' + view.end.format())
+      if (this.loaded.shows) {
+        this.$log.debug('refetching')
+        this.loadTimeslots(view.start.format(), view.end.format())
+      }
+    },
+
     loadTimeslots (start, end) {
       this.loaded.timeslots = false
+      this.calendarSlots = []
       let uri = process.env.VUE_APP_API_STEERING + 'timeslots?start=' + start + '&end=' + end
       axios.get(uri, {
         withCredentials: true,
         headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
       }).then(response => {
-        let slots = response.data
-        for (let i in slots) {
+        this.timeslots = response.data
+        for (let i in this.timeslots) {
           let highlighting = 'otherShow'
-          if (slots[i].show === this.show.id) {
+          if (this.timeslots[i].show === this.show.id) {
             highlighting = 'currentShow'
           }
           this.calendarSlots.push({
-            start: slots[i].start,
-            end: slots[i].end,
-            title: this.getShowTitleById(slots[i].show),
+            start: this.timeslots[i].start,
+            end: this.timeslots[i].end,
+            title: this.getShowTitleById(this.timeslots[i].show),
             className: highlighting
           })
         }