refactor show jumbotron to own component

src/components/ShowJumbotron.vue

+<template>
+  <b-jumbotron>
+    <!-- The show title goes into the jumbotron header -->
+    <template slot="header">
+      <span v-if="loaded.shows">
+        {{ selectedShow.name }}
+        <img
+          src="../assets/16x16/emblem-system.png"
+          alt="edit name of show"
+          @click="$refs.appModalShow.showName()"
+        >
+      </span>
+      <span v-else>Shows are being loaded</span>
+    </template>
+    <!-- The short description of the show goes into the jumbotron lead -->
+    <template slot="lead">
+      <span v-if="loaded.shows">{{ selectedShow.short_description }}</span>
+      <img
+        src="../assets/16x16/emblem-system.png"
+        alt="edit short description"
+        @click="$refs.appModalShow.showShortDescription()"
+      >
+    </template>
+    <!-- The rest of the jumbotron is filled with the show description -->
+    <div v-if="loaded.shows">
+      <b>Description:</b> <img
+        src="../assets/16x16/emblem-system.png"
+        alt="edit description"
+        @click="$refs.appModalShow.showDescription()"
+      >
+      <div>
+        <!--
+        we are disabling the linter warning for the next line, because, while it
+        generally is not advisible to use v-html, in this case we took thorough
+        steps to sanitize the date before inserting it into the DOM
+        -->
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <p v-html="sanitizedShowDescription" />
+        <!-- TODO: add image and logo here? -->
+      </div>
+
+      <div
+        v-if="$parent.$parent.user.steeringUser.is_superuser"
+        align="center"
+      >
+        <div v-if="selectedShow.is_active">
+          <b-button
+            variant="danger"
+            size="sm"
+            @click="$refs.appModalSuperuser.showModalDeactivateShow(shows[currentShow])"
+          >
+            Deactivate show
+          </b-button>
+        </div>
+        <div v-else>
+          <b-alert
+            variant="danger"
+            show
+          >
+            This show is currently not active!<br><br>
+            <b-button
+              variant="success"
+              size="sm"
+              @click="$refs.appModalSuperuser.activateShow(shows[currentShow])"
+            >
+              Activate!
+            </b-button>
+          </b-alert>
+        </div>
+      </div>
+    </div>
+  </b-jumbotron>
+</template>
+
+<script>
+import DOMPurify from 'dompurify'
+import { mapGetters } from 'vuex'
+
+export default {
+  data () {
+    return {
+    }
+  },
+  computed: {
+    shows () { return this.$store.state.shows.shows },
+    loaded () {
+      return {
+        shows: this.$store.state.shows.loaded.shows,
+      }
+    },
+
+    // As the show description should allow to be html-formatted, we have to
+    // make sure no malicous code can be inserted into the DOM. For that the
+    // DOMPurify library (https://github.com/cure53/DOMPurify) does us a much
+    // better service than trying to sanitize it with some RegExp.
+    sanitizedShowDescription: function () {
+      return DOMPurify.sanitize(this.selectedShow.description)
+    },
+
+    ...mapGetters({
+      selectedShow: 'shows/selectedShow',
+    })
+  },
+  methods: {
+
+  }
+}
+</script>

src/components/ShowManager.vue

@@ -35,77 +35,7 @@
 
     <!-- The jumbotron is used to display the name and description of the
     currently selected show -->
-    <b-jumbotron>
-      <!-- The show title goes into the jumbotron header -->
-      <template slot="header">
-        <span v-if="loaded.shows">
-          {{ shows[currentShow].name }}
-          <img
-            src="../assets/16x16/emblem-system.png"
-            alt="edit name of show"
-            @click="$refs.appModalShow.showName()"
-          >
-        </span>
-        <span v-else>Shows are being loaded</span>
-      </template>
-      <!-- The short description of the show goes into the jumbotron lead -->
-      <template slot="lead">
-        <span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
-        <img
-          src="../assets/16x16/emblem-system.png"
-          alt="edit short description"
-          @click="$refs.appModalShow.showShortDescription()"
-        >
-      </template>
-      <!-- The rest of the jumbotron is filled with the show description -->
-      <div v-if="loaded.shows">
-        <b>Description:</b> <img
-          src="../assets/16x16/emblem-system.png"
-          alt="edit description"
-          @click="$refs.appModalShow.showDescription()"
-        >
-        <div>
-          <!--
-          we are disabling the linter warning for the next line, because, while it
-          generally is not advisible to use v-html, in this case we took thorough
-          steps to sanitize the date before inserting it into the DOM
-          -->
-          <!-- eslint-disable-next-line vue/no-v-html -->
-          <p v-html="sanitizedShowDescription" />
-          <!-- TODO: add image and logo here? -->
-        </div>
-
-        <div
-          v-if="$parent.user.steeringUser.is_superuser"
-          align="center"
-        >
-          <div v-if="shows[currentShow].is_active">
-            <b-button
-              variant="danger"
-              size="sm"
-              @click="$refs.appModalSuperuser.showModalDeactivateShow(shows[currentShow])"
-            >
-              Deactivate show
-            </b-button>
-          </div>
-          <div v-else>
-            <b-alert
-              variant="danger"
-              show
-            >
-              This show is currently not active!<br><br>
-              <b-button
-                variant="success"
-                size="sm"
-                @click="$refs.appModalSuperuser.activateShow(shows[currentShow])"
-              >
-                Activate!
-              </b-button>
-            </b-alert>
-          </div>
-        </div>
-      </div>
-    </b-jumbotron>
+    <show-jumbotron />
 
     <!-- If the shows are not fully loaded yet, we just put the loading sign -->
     <div v-if="!loaded.shows">
@@ -707,6 +637,7 @@
 </template>
 
 <script>
+import showJumbotron from './ShowJumbotron.vue'
 import modalNotes from './ShowManagerModalNotes.vue'
 import modalShow from './ShowManagerModalShow.vue'
 import modalSuperuser from './ShowManagerModalSuperuser.vue'
@@ -724,6 +655,7 @@ export default {
     'app-modalShow': modalShow,
     'app-modalSuperuser': modalSuperuser,
     'app-modalPlaylist': modalPlaylist,
+    'show-jumbotron': showJumbotron,
   },
 
   // generic functions that we want to use from our mixins folder
@@ -734,8 +666,6 @@ export default {
   data () {
     return {
       shows: [],      // an array of objects describing our shows (empty at load, will be populated on created())
-      currentShow: 0,   // index of the currently selected show in our shows array
-      currentShowID: 0, // actual id of the currently selected show
       numSlots: process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS, // all form input values are provided as strings
       dateStart: this.apiDate(new Date()),
       dateEnd: this.apiDate(new Date(new Date().getTime() + process.env.VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS * 86400000)),
@@ -798,6 +728,9 @@ export default {
   // retrievable, so we are computing them on the fly, when they are needed
   computed: {
 
+    currentShow () { return this.$store.state.shows.selected.index },
+    currentShowID () { return this.$store.state.shows.selected.id },
+
     // As the show description should allow to be html-formatted, we have to
     // make sure no malicous code can be inserted into the DOM. For that the
     // DOMPurify library (https://github.com/cure53/DOMPurify) does us a much
@@ -915,8 +848,7 @@ export default {
       this.loaded.fundingcategory = false
       this.loaded.owners = false
       // set the current show and its ID to whatever we want to switch to now
-      this.currentShow = index
-      this.currentShowID = this.shows[this.currentShow].id
+      this.$store.commit('shows/switchShow', index)
       // and check if images are available and set image strings, because we
       // cannot use them directly inside the b-img if they are null
       if (this.shows[this.currentShow].logo === null) { this.current.logo = '' }
@@ -941,6 +873,7 @@ export default {
     // (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.$store.dispatch('shows/fetchShows')
       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
@@ -967,8 +900,7 @@ export default {
           // 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.$store.commit('shows/switchShow', index)
         this.loaded.shows = true
         this.switchShow(this.currentShow)
       }).catch(error => {

src/store/modules/shows.js

@@ -9,10 +9,15 @@ const state = {
     timeslots: false,
     schedules: false,
   },
+  selected: {
+    index: 0, // index of the currently selected show in our shows array
+    id: 0,    // actual id of the currently selected show
+  }
 }
 
 const getters = {
   shows: state => state.shows,
+  selectedShow: state => state.shows[state.selected.index]
 }
 
 const mutations = {
@@ -28,6 +33,11 @@ const mutations = {
   },
   setTimeslots(state, slots) {
     state.timeslots = slots
+  },
+
+  switchShow(state, index) {
+    state.selected.index = index
+    state.selected.id = state.shows[index].id
   }
 }