refactor shows and timeslots from EmissionManager to store

src/components/EmissionManager.vue

@@ -157,8 +157,6 @@ export default {
   data () {
     return {
       currentShow: 0,
-      shows: [],
-      timeslots: [],
       calendarSlots: [],
 
       showChangedAlert: {
@@ -210,6 +208,11 @@ export default {
     }
   },
 
+  computed: {
+    shows () { return this.$store.state.shows.shows },
+    timeslots () { return this.$store.state.shows.timeslots },
+  },
+
   created () {
     if (this.$route.query.show) {
       this.currentShow = this.$route.query.show
@@ -556,37 +559,27 @@ export default {
 
     loadTimeslots (start, end) {
       this.loaded.timeslots = false
-      let uri = process.env.VUE_APP_API_STEERING + 'timeslots?start=' + start + '&end=' + end
-      axios.get(uri, {
-        withCredentials: true,
-        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
-      }).then(response => {
-        this.timeslots = response.data
-        this.loaded.timeslots = true
-        this.loadCalendarSlots()
-      }).catch(error => {
-        this.$log.error(error.response.status + ' ' + error.response.statusText)
-        this.$log.error(error.response)
-        alert('Error: could not load timeslots. See console for details.')
+      this.$store.dispatch('shows/fetchTimeslots', {
+        start: start,
+        end: end,
+        callback: () => {
+          this.$log.debug('loadTimeslots callback executed')
+          this.loaded.timeslots = true
+          this.loadCalendarSlots()
+        }
       })
     },
 
     loadShows () {
       this.loaded.shows = false
-      let uri = process.env.VUE_APP_API_STEERING + 'shows'
-      axios.get(uri, {
-        withCredentials: true,
-        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
-      }).then(response => {
-        this.shows = response.data
-        this.loaded.shows = true
-        let start = this.$refs.calendar.fireMethod('getView').start.format()
-        let end = this.$refs.calendar.fireMethod('getView').end.format()
-        this.loadTimeslots(start, end)
-      }).catch(error => {
-        this.$log.error(error.response.status + ' ' + error.response.statusText)
-        this.$log.error(error.response)
-        alert('Error: could not load shows. See console for details.')
+      this.$store.dispatch('shows/fetchShows', {
+        callback: () => {
+          this.$log.debug('firing calendar method getView')
+          this.loaded.shows = true
+          let start = this.$refs.calendar.fireMethod('getView').start.format()
+          let end = this.$refs.calendar.fireMethod('getView').end.format()
+          this.loadTimeslots(start, end)
+        }
       })
     },
 

src/store/modules/shows.js

+import axios from 'axios'
+import handleApiError from '../handleApiError'
+
 const state = {
-  items: [],
+  shows: [],
+  timeslots: [],
+  loaded: {
+    shows: false,
+    timeslots: false,
+  }
 }
 
 const getters = {
-  items: state => state.items,
-  itemCount: state => state.items.length,
+  shows: state => state.shows,
 }
 
-const actions = {
-  addItem ({commit}, item) {
-    commit('addItem', item)
+const mutations = {
+  loading(state, item) {
+    state.loaded[item] = false
+  },
+  finishLoading(state, item) {
+    state.loaded[item] = true
+  },
+
+  setShows(state, shows) {
+    state.shows = shows
+  },
+  setTimeslots(state, slots) {
+    state.timeslots = slots
   }
 }
 
-const mutations = {
-  addItem (state, item) {
-    state.items.push(item)
-  }
+const actions = {
+  fetchShows (ctx, data) {
+    ctx.commit('loading', 'shows')
+    let uri = process.env.VUE_APP_API_STEERING + 'shows'
+    axios.get(uri, {
+      withCredentials: true,
+      headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
+    }).then(response => {
+      ctx.commit('setShows', response.data)
+      ctx.commit('finishLoading', 'shows')
+      if (data && typeof(data.callback) === 'function') { data.callback() }
+    }).catch(error => {
+      handleApiError(this, error, 'could not load shows')
+    })
+  },
+
+  fetchTimeslots (ctx, data) {
+    ctx.commit('loading', 'timeslots')
+    let uri = process.env.VUE_APP_API_STEERING + 'timeslots?start=' + data.start + '&end=' + data.end
+    axios.get(uri, {
+      withCredentials: true,
+      headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
+    }).then(response => {
+      ctx.commit('setTimeslots', response.data)
+      ctx.commit('finishLoading', 'timeslots')
+      if (data && typeof(data.callback) === 'function') { data.callback() }
+    }).catch(error => {
+      handleApiError(this, error, 'could not load timeslots')
+    })
+  },
 }
 
 export default {