move file listing and show selector to own components

src/components/ShowSelector.vue

@@ -27,6 +27,7 @@ import { mapGetters } from 'vuex'
 export default {
   props: {
     title: { type: String, default: 'Unlabeled component title' },
+    callback: { type: Function, default: null }
   },
 
   computed: {
@@ -45,6 +46,7 @@ export default {
   methods: {
     switchShow: function (index) {
       this.$store.commit('shows/switchShow', index)
+      if (this.callback) { this.callback() }
     },
   }
 }

src/store/modules/files.js

+import axios from 'axios'
+import handleApiError from '../handleApiError'
+
 const state = {
-  items: [],
+  files: [],
+  loaded: {
+    files: false,
+  }
 }
 
 const getters = {
-  items: state => state.items,
-  itemCount: state => state.items.length,
+  files: state => state.files,
+  fileCount: state => state.files.length,
 }
 
-const actions = {
-  addItem ({commit}, item) {
-    commit('addItem', item)
-  }
+const mutations = {
+  loading(state, item) { state.loaded[item] = false },
+  finishLoading(state, item) { state.loaded[item] = true },
+
+  setFiles (state, files) { state.files = files },
+  addFile (state, file) { state.files.push(file) },
 }
 
-const mutations = {
-  addItem (state, item) {
-    state.items.push(item)
-  }
+const actions = {
+  // Fetch all files for a given show from the AuRa tank API
+  fetchFiles (ctx, data) {
+    ctx.commit('loading', 'files')
+    let uri = process.env.VUE_APP_API_TANK + 'shows/' + data.slug + '/files'
+    axios.get(uri, {
+      withCredentials: true,
+      headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
+    }).then(response => {
+      // we don't have to check separately, if there are files, because tank
+      // always provides an empty array if there are no files (or even if there is no corresponding show)
+      ctx.commit('setFiles', response.data.results)
+      ctx.commit('finishLoading', 'files')
+      if (data && typeof(data.callback) === 'function') { data.callback() }
+    }).catch(error => {
+      handleApiError(this, error, 'could not load shows')
+      if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
+    })
+  },
+
 }
 
 export default {