refactor file manager show selector and jumbotron

src/components/FileManager.vue

 <template>
   <b-container>
-    <!-- This first row is so far only used to provide a dropdown for
-    choosing one of the loaded shows (which the user has access to) -->
-    <b-row>
-      <b-col>
-        <h3>Dateien und Playlists</h3>
-      </b-col>
-      <b-col align="right">
-        <b-dropdown
-          id="ddshows"
-          text="Sendereihe auswählen"
-          variant="info"
-        >
-          <b-dropdown-item
-            v-for="(show, index) in shows"
-            :key="show.id"
-            @click="switchShow(index)"
-          >
-            {{ show.name }}
-          </b-dropdown-item>
-        </b-dropdown>
-      </b-col>
-    </b-row>
+    <show-selector title="Files &amp; playlists" />
     <hr>
 
-    <!-- The jumbotron is used to display the name and short description of the
-    currently selected show and let the user choose between editing files and
-    playlists -->
-    <b-jumbotron>
-      <template slot="header">
-        <span v-if="loaded.shows">
-          {{ shows[currentShow].name }}
-        </span>
-        <span v-else>Shows are being loaded</span>
-      </template>
-      <template slot="lead">
-        <span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
-      </template>
-      <hr>
-      <div align="center">
-        <b-button-group>
-          <b-button
-            size="lg"
-            :variant="button.files"
-            @click="switchMode('files')"
-          >
-            Files
-          </b-button>
-          <b-button
-            size="lg"
-            :variant="button.playlists"
-            @click="switchMode('playlists')"
-          >
-            Playlists
-          </b-button>
-        </b-button-group>
-      </div>
-    </b-jumbotron>
+    <jumbotron />
 
     <!-- All the UI for uploading and editing files is only shown if the user
     choose to edit files in the jumbotron above -->
@@ -628,11 +575,15 @@ import axios from 'axios'
 import filesize from 'filesize'
 import prettyDate from '../mixins/prettyDate'
 import modalFileManagerLog from './FileManagerModalLog.vue'
+import showSelector from './ShowSelector.vue'
+import jumbotron from './filemanager/Jumbotron.vue'
 
 export default {
   // include the modal for displaying file import logs
   components: {
-    'app-modalFileManagerLog': modalFileManagerLog
+    'app-modalFileManagerLog': modalFileManagerLog,
+    'show-selector': showSelector,
+    'jumbotron': jumbotron,
   },
 
   // generic functions that we want to use from our mixins folder

src/components/ShowSelector.vue

+<template>
+  <b-row>
+    <b-col>
+      <h3>{{ title }}</h3>
+    </b-col>
+    <b-col align="right">
+      <b-dropdown
+        id="ddshows"
+        text="Sendereihe auswählen"
+        variant="info"
+      >
+        <b-dropdown-item
+          v-for="(show, index) in shows"
+          :key="show.id"
+          @click="switchShow(index)"
+        >
+          {{ show.name }}
+        </b-dropdown-item>
+      </b-dropdown>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  props: {
+    title: { type: String, default: 'Unlabeled component title' },
+  },
+
+  computed: {
+    loaded () {
+      return {
+        shows: this.$store.state.shows.loaded.shows,
+      }
+    },
+
+    ...mapGetters({
+      shows: 'shows/shows',
+      selectedShow: 'shows/selectedShow',
+    })
+  },
+
+  methods: {
+    switchShow: function (index) {
+      this.$store.commit('shows/switchShow', index)
+    },
+  }
+}
+</script>

src/components/filemanager/Jumbotron.vue

+<template>
+  <b-jumbotron>
+    <!-- The jumbotron is used to display the name and short description of the
+    currently selected show and let the user choose between editing files and
+    playlists -->
+    <template slot="header">
+      <span v-if="loaded.shows">
+        {{ selectedShow.name }}
+      </span>
+      <span v-else>Shows are being loaded</span>
+    </template>
+    <template slot="lead">
+      <span v-if="loaded.shows">{{ selectedShow.short_description }}</span>
+    </template>
+    <hr>
+    <div align="center">
+      <b-button-group>
+        <b-button
+          size="lg"
+          :variant="button.files"
+          @click="$store.commit('setFileManagerMode', 'files')"
+        >
+          Files
+        </b-button>
+        <b-button
+          size="lg"
+          :variant="button.playlists"
+          @click="$store.commit('setFileManagerMode', 'playlists')"
+        >
+          Playlists
+        </b-button>
+      </b-button-group>
+    </div>
+  </b-jumbotron>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    loaded () {
+      return {
+        shows: this.$store.state.shows.loaded.shows,
+      }
+    },
+
+    button () {
+      return {
+        files: this.mode === 'files' ? 'info' : 'outline-info',
+        playlists: this.mode === 'playlists' ? 'info' : 'outline-info',
+      }
+    },
+
+    ...mapGetters({
+      selectedShow: 'shows/selectedShow',
+      mode: 'fileManagerMode'
+    })
+  }
+}
+</script>

src/store/index.js

@@ -10,23 +10,19 @@ Vue.use(Vuex)
 const debug = process.env.NODE_ENV !== 'production'
 
 const state = {
-  items: [],
+  fileManagerMode: 'files',
 }
 
 const getters = {
-  items: state => state.items,
-  itemCount: state => state.items.length,
+  fileManagerMode: state => state.fileManagerMode
 }
 
 const actions = {
-  addItem ({commit}, item) {
-    commit('addItem', item)
-  }
 }
 
 const mutations = {
-  addItem (state, item) {
-    state.items.push(item)
+  setFileManagerMode (state, mode) {
+    state.fileManagerMode = mode
   }
 }
 

src/store/modules/playlists.js

 const state = {
-  items: [],
 }
 
 const getters = {
-  items: state => state.items,
-  itemCount: state => state.items.length,
 }
 
 const actions = {
-  addItem ({commit}, item) {
-    commit('addItem', item)
-  }
 }
 
 const mutations = {
-  addItem (state, item) {
-    state.items.push(item)
-  }
 }
 
 export default {