FEAT: switch to new show after creation

src/components/ShowManager.vue

@@ -750,26 +750,9 @@ export default {
   // Right after this component is set up, we want to fetch all available shows
   // from the AuRa steering module.
   created () {
-    var uri = process.env.VUE_APP_API_STEERING_SHOWS
-    if (!this.$parent.user.steeringUser.is_superuser) {
-      uri += '?owner=' + this.$parent.user.steeringUser.id
-    }
-    axios.get(uri, {
-      withCredentials: true,
-      headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
-    }).then(response => {
-      if (response.data.length === 0) {
-        alert('There are now shows associated with your account!')
-        return
-      }
-      this.shows = response.data
-      this.currentShowID = this.shows[0].id
-      this.currentShow = 0
-      this.loaded.shows = true
-      this.switchShow(this.currentShow)
-    }).catch(error => {
-      alert('There was an error fetching shows from the server: ' + error)
-    })
+    // As we don't know any shows yet, we use null as id parameter, so the
+    // first show in the returned show array will be displayed
+    this.loadAndSwitch(null)
   },
 
   // Now for our hotchpotch of methods, mostly used for fetching data from the
@@ -840,6 +823,46 @@ export default {
       this.getTimeslots(this.dateStart, this.dateEnd, this.numSlots)
     },
 
+    // (Re)Load all shows from server and switch to a show with a specific ID.
+    // If the id argument is null, the first show in the show array will be used
+    loadAndSwitch: function (id) {
+      this.loaded.shows = false
+      var uri = process.env.VUE_APP_API_STEERING_SHOWS
+      // normal users should only see their own shows, only superusers see all shows
+      if (!this.$parent.user.steeringUser.is_superuser) {
+        uri += '?owner=' + this.$parent.user.steeringUser.id
+      }
+      axios.get(uri, {
+        withCredentials: true,
+        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
+      }).then(response => {
+        // if now shows are found, we'll just print a short info message and leave
+        if (response.data.length === 0) {
+          this.$log.info('The returned show set has 0 length:')
+          this.$log.info(response)
+          alert('Info: There are no shows connected to your account. See console for details.')
+          this.loaded.shows = true
+          return
+        }
+        // now set the new show array and find the index of the show ID
+        this.shows = response.data
+        let index = 0
+        if (id !== null) {
+          index = this.shows.findIndex(show => show.id === id)
+          // if no show with the given ID was found, we use the first item in the show array
+          if (index === -1) { index = 0 }
+        }
+        this.currentShow = index
+        this.currentShowID = this.shows[index].id
+        this.loaded.shows = true
+        this.switchShow(this.currentShow)
+      }).catch(error => {
+        this.$log.error(error.response.status + ' ' + error.response.statusText)
+        this.$log.error(error.response)
+        alert('Error: could not fetch show data. See console for details.')
+      })
+    },
+
     // Fetch timeslots for the current show and use filter variables if provided
     getTimeslots: function (start, end, limit, offset) {
       var dateRegex = new RegExp('^\\d{4}-\\d{2}-\\d{2}$')

src/components/ShowManagerModalSuperuser.vue

@@ -84,12 +84,10 @@ export default {
         axios.post(uri, this.newShow, {
           withCredentials: true,
           headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
-        }).then(() => {
+        }).then(response => {
           // everything was fine, we can close the modal now
           this.$refs.modalAddShow.hide()
-          // TODO:
-          // - add new show to the ShowManager show array
-          // - switch ShowManager to newly added show
+          this.$parent.loadAndSwitch(response.data.id)
         }).catch(error => {
           this.$log.error(error.response.status + ' ' + error.response.statusText)
           this.$log.error(error.response)